From 8a71012fcf7e00002df0c3dd8ca1da464df10505 Mon Sep 17 00:00:00 2001
From: tsa96 <tom@trumpetdust.org>
Date: Wed, 27 Sep 2023 07:56:23 +0100
Subject: [PATCH] refactor(front): remove /profile page, always use
 /profile/{userID}

Someone earlier asked how they can link find a URL to their profile, given that if they navigate to their
profile page on the frontend, they just go to /dashboard/profile, and don't know their userID.
The simplest solution to me is to just always use the relatized URL containing the user's id.
Incidentally this seems to be how most sites handle profile pages.
---
 .../app/components/header/header.component.ts |  8 +++++--
 .../profile-edit/profile-edit.component.ts    |  4 +---
 .../profile/profile-redirect.component.ts     | 24 +++++++++++++++++++
 .../profile/profile-routing.module.ts         |  3 ++-
 .../pages/dashboard/profile/profile.module.ts |  2 ++
 5 files changed, 35 insertions(+), 6 deletions(-)
 create mode 100644 apps/frontend/src/app/pages/dashboard/profile/profile-redirect.component.ts

diff --git a/apps/frontend/src/app/components/header/header.component.ts b/apps/frontend/src/app/components/header/header.component.ts
index 1eedaaf3d..150c5c0d4 100644
--- a/apps/frontend/src/app/components/header/header.component.ts
+++ b/apps/frontend/src/app/components/header/header.component.ts
@@ -18,7 +18,11 @@ export class HeaderComponent implements OnInit, OnDestroy {
   userMenu: NbMenuItem[] = [
     {
       title: 'Profile',
-      link: '/dashboard/profile'
+      // If `user` hasn't been fetched yet, just navigate to ProfileRedirect
+      // component, which will await the user result then redirect to relatived URL.
+      link: this.user?.id
+        ? `/dashboard/profile/${this.user.id}`
+        : '/dashboard/profile'
     },
     {
       title: 'Edit Profile',
@@ -29,7 +33,7 @@ export class HeaderComponent implements OnInit, OnDestroy {
     }
   ];
 
-  user: User;
+  user?: User;
   notifications: Notification[];
   numUnreadNotifs: number;
 
diff --git a/apps/frontend/src/app/pages/dashboard/profile/profile-edit/profile-edit.component.ts b/apps/frontend/src/app/pages/dashboard/profile/profile-edit/profile-edit.component.ts
index dbdba537f..db5dc47c3 100644
--- a/apps/frontend/src/app/pages/dashboard/profile/profile-edit/profile-edit.component.ts
+++ b/apps/frontend/src/app/pages/dashboard/profile/profile-edit/profile-edit.component.ts
@@ -231,9 +231,7 @@ export class ProfileEditComponent implements OnInit, OnDestroy {
   }
 
   returnToProfile() {
-    this.router.navigate([
-      `/dashboard/profile${this.isLocal ? '' : '/' + this.user.id}`
-    ]);
+    this.router.navigate([`/dashboard/profile/${this.user.id}`]);
   }
 
   deleteUser() {
diff --git a/apps/frontend/src/app/pages/dashboard/profile/profile-redirect.component.ts b/apps/frontend/src/app/pages/dashboard/profile/profile-redirect.component.ts
new file mode 100644
index 000000000..a87448d1c
--- /dev/null
+++ b/apps/frontend/src/app/pages/dashboard/profile/profile-redirect.component.ts
@@ -0,0 +1,24 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { LocalUserService } from '@momentum/frontend/data';
+import { firstValueFrom } from 'rxjs';
+
+/**
+ * Redirects `/profile` to `/profile/<logged-in-ID>` if has a logged in user,
+ * otherwise to home page.
+ */
+@Component({ selector: 'mom-profile-redirect-local', template: '' })
+export class ProfileRedirectComponent implements OnInit {
+  constructor(
+    private readonly router: Router,
+    private readonly localUserService: LocalUserService
+  ) {}
+
+  async ngOnInit(): Promise<void> {
+    const localUser = await firstValueFrom(this.localUserService.getLocal());
+
+    await this.router.navigate([
+      localUser?.id ? `/dashboard/profile/${localUser.id}` : '/dashboard'
+    ]);
+  }
+}
diff --git a/apps/frontend/src/app/pages/dashboard/profile/profile-routing.module.ts b/apps/frontend/src/app/pages/dashboard/profile/profile-routing.module.ts
index a6d0378c3..2ff4ebea9 100644
--- a/apps/frontend/src/app/pages/dashboard/profile/profile-routing.module.ts
+++ b/apps/frontend/src/app/pages/dashboard/profile/profile-routing.module.ts
@@ -5,6 +5,7 @@ import { NotFoundDashboardComponent } from '../../not-found/dashboard/not-found-
 import { NgModule } from '@angular/core';
 import { ProfileComponent } from './profile.component';
 import { Role } from '@momentum/constants';
+import { ProfileRedirectComponent } from './profile-redirect.component';
 
 @NgModule({
   imports: [
@@ -25,7 +26,7 @@ import { Role } from '@momentum/constants';
               }
             ]
           },
-          { path: '', component: UserProfileComponent },
+          { path: '', component: ProfileRedirectComponent },
           { path: '**', component: NotFoundDashboardComponent }
         ]
       }
diff --git a/apps/frontend/src/app/pages/dashboard/profile/profile.module.ts b/apps/frontend/src/app/pages/dashboard/profile/profile.module.ts
index a8c93dbf3..8339955de 100644
--- a/apps/frontend/src/app/pages/dashboard/profile/profile.module.ts
+++ b/apps/frontend/src/app/pages/dashboard/profile/profile.module.ts
@@ -8,11 +8,13 @@ import { ProfileRoutingModule } from './profile-routing.module';
 import { ProfileComponent } from './profile.component';
 import { ProfileNotifyEditComponent } from './profile-follow/profile-notify-edit/profile-notify-edit.component';
 import { SharedModule } from '../../../shared.module';
+import { ProfileRedirectComponent } from './profile-redirect.component';
 
 @NgModule({
   imports: [SharedModule, ProfileRoutingModule],
   declarations: [
     ProfileComponent,
+    ProfileRedirectComponent,
     UserProfileComponent,
     ProfileEditComponent,
     ProfileFollowComponent,