Feat/guid routing

src/app/app.routes.ts

@@ -5,6 +5,8 @@ import { Routes } from '@angular/router';
 import { BookmarksState, ProjectsState } from '@shared/stores';
 
 import { authGuard, redirectIfLoggedInGuard } from './core/guards';
+import { isProjectGuard } from './core/guards/is-project.guard';
+import { isRegistryGuard } from './core/guards/is-registry.guard';
 import { MyProfileResourceFiltersOptionsState } from './features/my-profile/components/filters/store';
 import { MyProfileResourceFiltersState } from './features/my-profile/components/my-profile-resource-filters/store';
 import { MyProfileState } from './features/my-profile/store';
@@ -99,12 +101,6 @@ export const routes: Routes = [
           ),
         providers: [provideStates([PreprintState])],
       },
-      {
-        path: 'project/:id',
-        loadChildren: () => import('./features/project/project.routes').then((mod) => mod.projectRoutes),
-        providers: [provideStates([ProjectsState, BookmarksState])],
-        canActivate: [authGuard],
-      },
       {
         path: 'preprints',
         loadChildren: () => import('./features/preprints/preprints.routes').then((mod) => mod.preprintsRoutes),
@@ -120,12 +116,6 @@ export const routes: Routes = [
         path: 'registries',
         loadChildren: () => import('./features/registries/registries.routes').then((mod) => mod.registriesRoutes),
       },
-      {
-        path: 'registries/:id',
-        loadChildren: () => import('./features/registry/registry.routes').then((mod) => mod.registryRoutes),
-        providers: [provideStates([BookmarksState])],
-        canActivate: [authGuard],
-      },
       {
         path: 'my-profile',
         loadComponent: () => import('./features/my-profile/my-profile.component').then((mod) => mod.MyProfileComponent),
@@ -178,6 +168,18 @@ export const routes: Routes = [
         loadComponent: () =>
           import('@osf/features/files/pages/file-detail/file-detail.component').then((c) => c.FileDetailComponent),
       },
+      {
+        path: ':id',
+        canMatch: [isProjectGuard],
+        loadChildren: () => import('./features/project/project.routes').then((m) => m.projectRoutes),
+        providers: [provideStates([ProjectsState, BookmarksState])],
+      },
+      {
+        path: ':id',
+        canMatch: [isRegistryGuard],
+        loadChildren: () => import('./features/registry/registry.routes').then((m) => m.registryRoutes),
+        providers: [provideStates([BookmarksState])],
+      },
       {
         path: '**',
         loadComponent: () =>

src/app/core/components/nav-menu/nav-menu.component.ts

@@ -17,7 +17,9 @@ import { RouteContext } from '@osf/core/models';
 import { AuthService } from '@osf/core/services';
 import { UserSelectors } from '@osf/core/store/user';
 import { IconComponent } from '@osf/shared/components';
+import { CurrentResourceType } from '@osf/shared/enums';
 import { WrapFnPipe } from '@osf/shared/pipes';
+import { CurrentResourceSelectors } from '@osf/shared/stores';
 
 @Component({
   selector: 'osf-nav-menu',
@@ -33,6 +35,7 @@ export class NavMenuComponent {
   private readonly authService = inject(AuthService);
 
   private readonly isAuthenticated = select(UserSelectors.isAuthenticated);
+  private readonly currentResource = select(CurrentResourceSelectors.getCurrentResource);
 
   protected readonly mainMenuItems = computed(() => {
     const isAuthenticated = this.isAuthenticated();
@@ -41,8 +44,12 @@ export class NavMenuComponent {
     const routeContext: RouteContext = {
       resourceId: this.currentResourceId(),
       providerId: this.currentProviderId(),
-      isProject: this.isProjectRoute() && !this.isRegistryRoute() && !this.isPreprintRoute(),
-      isRegistry: this.isRegistryRoute(),
+      isProject:
+        this.currentResource()?.type === CurrentResourceType.Projects &&
+        this.currentResourceId() === this.currentResource()?.id,
+      isRegistry:
+        this.currentResource()?.type === CurrentResourceType.Registrations &&
+        this.currentResourceId() === this.currentResource()?.id,
       isPreprint: this.isPreprintRoute(),
       preprintReviewsPageVisible: this.canUserViewReviews(),
       isCollections: this.isCollectionsRoute() || false,
@@ -66,9 +73,7 @@ export class NavMenuComponent {
 
   protected readonly currentResourceId = computed(() => this.currentRoute().resourceId);
   protected readonly currentProviderId = computed(() => this.currentRoute().providerId);
-  protected readonly isProjectRoute = computed(() => !!this.currentResourceId());
   protected readonly isCollectionsRoute = computed(() => this.currentRoute().isCollectionsWithId);
-  protected readonly isRegistryRoute = computed(() => this.currentRoute().isRegistryRoute);
   protected readonly isPreprintRoute = computed(() => this.currentRoute().isPreprintRoute);
   protected readonly canUserViewReviews = select(UserSelectors.getCanViewReviews);
 
@@ -78,14 +83,12 @@ export class NavMenuComponent {
     const resourceId = this.route.firstChild?.snapshot.params['id'] || resourceFromQueryParams;
     const providerId = this.route.firstChild?.snapshot.params['providerId'];
     const isCollectionsWithId = urlSegments[0] === 'collections' && urlSegments[1] && urlSegments[1] !== '';
-    const isRegistryRoute = urlSegments[0] === 'registries' && !!urlSegments[2];
     const isPreprintRoute = urlSegments[0] === 'preprints' && !!urlSegments[2];
 
     return {
       resourceId,
       providerId,
       isCollectionsWithId,
-      isRegistryRoute,
       isPreprintRoute,
     };
   }

src/app/core/constants/nav-items.constant.ts

@@ -30,14 +30,14 @@ export const PROJECT_MENU_ITEMS: MenuItem[] = [
     label: 'navigation.files',
     routerLink: 'files',
     visible: true,
-    routerLinkActiveOptions: { exact: true },
+    routerLinkActiveOptions: { exact: false },
   },
   {
     id: 'project-wiki',
     label: 'navigation.wiki',
     routerLink: 'wiki',
     visible: true,
-    routerLinkActiveOptions: { exact: true },
+    routerLinkActiveOptions: { exact: false },
   },
   {
     id: 'project-registrations',
@@ -58,7 +58,7 @@ export const PROJECT_MENU_ITEMS: MenuItem[] = [
     label: 'navigation.analytics',
     routerLink: 'analytics',
     visible: true,
-    routerLinkActiveOptions: { exact: true },
+    routerLinkActiveOptions: { exact: false },
   },
   {
     id: 'project-addons',
@@ -106,7 +106,7 @@ export const REGISTRATION_MENU_ITEMS: MenuItem[] = [
     label: 'navigation.files',
     routerLink: 'files',
     visible: true,
-    routerLinkActiveOptions: { exact: true },
+    routerLinkActiveOptions: { exact: false },
   },
   {
     id: 'registration-resources',
@@ -120,7 +120,7 @@ export const REGISTRATION_MENU_ITEMS: MenuItem[] = [
     label: 'navigation.wiki',
     routerLink: 'wiki',
     visible: true,
-    routerLinkActiveOptions: { exact: true },
+    routerLinkActiveOptions: { exact: false },
   },
   {
     id: 'registration-components',
@@ -148,7 +148,7 @@ export const REGISTRATION_MENU_ITEMS: MenuItem[] = [
     label: 'navigation.analytics',
     routerLink: 'analytics',
     visible: true,
-    routerLinkActiveOptions: { exact: true },
+    routerLinkActiveOptions: { exact: false },
   },
 ];
 

src/app/core/constants/ngxs-states.constant.ts

@@ -1,14 +1,10 @@
 import { ProviderState } from '@core/store/provider';
 import { UserState } from '@core/store/user';
 import { FilesState } from '@osf/features/files/store';
-import { MeetingsState } from '@osf/features/meetings/store';
 import { ProjectMetadataState } from '@osf/features/project/metadata/store';
 import { ProjectOverviewState } from '@osf/features/project/overview/store';
 import { RegistrationsState } from '@osf/features/project/registrations/store';
-import { AccountSettingsState } from '@osf/features/settings/account-settings/store/account-settings.state';
-import { DeveloperAppsState } from '@osf/features/settings/developer-apps/store';
-import { NotificationSubscriptionState } from '@osf/features/settings/notifications/store';
-import { AddonsState, InstitutionsState, WikiState } from '@osf/shared/stores';
+import { AddonsState, CurrentResourceState, InstitutionsState, WikiState } from '@osf/shared/stores';
 import { LicensesState } from '@shared/stores/licenses';
 import { MyResourcesState } from '@shared/stores/my-resources';
 import { RegionsState } from '@shared/stores/regions';
@@ -19,15 +15,12 @@ export const STATES = [
   ProviderState,
   MyResourcesState,
   InstitutionsState,
-  DeveloperAppsState,
-  AccountSettingsState,
-  NotificationSubscriptionState,
   ProjectOverviewState,
   WikiState,
-  MeetingsState,
   RegistrationsState,
   ProjectMetadataState,
   LicensesState,
   RegionsState,
   FilesState,
+  CurrentResourceState,
 ];

src/app/core/guards/index.ts

@@ -1,2 +1,4 @@
 export { authGuard } from './auth.guard';
+export { isProjectGuard } from './is-project.guard';
+export { isRegistryGuard } from './is-registry.guard';
 export { redirectIfLoggedInGuard } from './redirect-if-logged-in.guard';

src/app/core/guards/is-project.guard.ts

@@ -0,0 +1,67 @@
+import { Store } from '@ngxs/store';
+
+import { map, switchMap } from 'rxjs/operators';
+
+import { inject } from '@angular/core';
+import { CanMatchFn, Route, Router, UrlSegment } from '@angular/router';
+
+import { CurrentResourceType } from '../../shared/enums';
+import { CurrentResourceSelectors, GetResource } from '../../shared/stores';
+
+export const isProjectGuard: CanMatchFn = (route: Route, segments: UrlSegment[]) => {
+  const store = inject(Store);
+  const router = inject(Router);
+
+  const id = segments[0]?.path;
+
+  if (!id) {
+    return false;
+  }
+
+  const currentResource = store.selectSnapshot(CurrentResourceSelectors.getCurrentResource);
+
+  if (currentResource && currentResource.id === id) {
+    if (currentResource.type === CurrentResourceType.Projects && currentResource.parentId) {
+      router.navigate(['/', currentResource.parentId, 'files', id]);
+      return true;
+    }
+
+    if (currentResource.type === CurrentResourceType.Preprints && currentResource.parentId) {
+      router.navigate(['/preprints', currentResource.parentId, id]);
+      return true;
+    }
+
+    if (currentResource.type === CurrentResourceType.Users) {
+      router.navigate(['/profile', id]);
+      return false;
+    }
+
+    return currentResource.type === CurrentResourceType.Projects;
+  }
+
+  return store.dispatch(new GetResource(id)).pipe(
+    switchMap(() => store.select(CurrentResourceSelectors.getCurrentResource)),
+    map((resource) => {
+      if (!resource || resource.id !== id) {
+        return false;
+      }
+
+      if (resource.type === CurrentResourceType.Projects && resource.parentId) {
+        router.navigate(['/', resource.parentId, 'files', id]);
+        return true;
+      }
+
+      if (resource.type === CurrentResourceType.Preprints && resource.parentId) {
+        router.navigate(['/preprints', resource.parentId, id]);
+        return true;
+      }
+
+      if (resource.type === CurrentResourceType.Users) {
+        router.navigate(['/user', id]);
+        return false;
+      }
+
+      return resource.type === CurrentResourceType.Projects;
+    })
+  );
+};

src/app/core/guards/is-registry.guard.ts

@@ -0,0 +1,67 @@
+import { Store } from '@ngxs/store';
+
+import { map, switchMap } from 'rxjs/operators';
+
+import { inject } from '@angular/core';
+import { CanMatchFn, Route, Router, UrlSegment } from '@angular/router';
+
+import { CurrentResourceType } from '../../shared/enums';
+import { CurrentResourceSelectors, GetResource } from '../../shared/stores';
+
+export const isRegistryGuard: CanMatchFn = (route: Route, segments: UrlSegment[]) => {
+  const store = inject(Store);
+  const router = inject(Router);
+
+  const id = segments[0]?.path;
+
+  if (!id) {
+    return false;
+  }
+
+  const currentResource = store.selectSnapshot(CurrentResourceSelectors.getCurrentResource);
+
+  if (currentResource && currentResource.id === id) {
+    if (currentResource.type === CurrentResourceType.Registrations && currentResource.parentId) {
+      router.navigate(['/', currentResource.parentId, 'files', id]);
+      return true;
+    }
+
+    if (currentResource.type === CurrentResourceType.Preprints && currentResource.parentId) {
+      router.navigate(['/preprints', currentResource.parentId, id]);
+      return true;
+    }
+
+    if (currentResource.type === CurrentResourceType.Users) {
+      router.navigate(['/user', id]);
+      return false;
+    }
+
+    return currentResource.type === CurrentResourceType.Registrations;
+  }
+
+  return store.dispatch(new GetResource(id)).pipe(
+    switchMap(() => store.select(CurrentResourceSelectors.getCurrentResource)),
+    map((resource) => {
+      if (!resource || resource.id !== id) {
+        return false;
+      }
+
+      if (resource.type === CurrentResourceType.Registrations && resource.parentId) {
+        router.navigate(['/', resource.parentId, 'files', id]);
+        return true;
+      }
+
+      if (resource.type === CurrentResourceType.Preprints && resource.parentId) {
+        router.navigate(['/preprints', resource.parentId, id]);
+        return true;
+      }
+
+      if (resource.type === CurrentResourceType.Users) {
+        router.navigate(['/profile', id]);
+        return false;
+      }
+
+      return resource.type === CurrentResourceType.Registrations;
+    })
+  );
+};

src/app/core/helpers/nav-menu.helper.ts

@@ -88,7 +88,7 @@ function updateProjectMenuItem(item: MenuItem, ctx: RouteContext): MenuItem {
           expanded: true,
           items: PROJECT_MENU_ITEMS.map((menuItem) => ({
             ...menuItem,
-            routerLink: ['project', ctx.resourceId as string, menuItem.routerLink],
+            routerLink: [ctx.resourceId as string, menuItem.routerLink],
           })),
         };
       }
@@ -111,7 +111,7 @@ function updateRegistryMenuItem(item: MenuItem, ctx: RouteContext): MenuItem {
           expanded: true,
           items: REGISTRATION_MENU_ITEMS.map((menuItem) => ({
             ...menuItem,
-            routerLink: ['registries', ctx.resourceId as string, menuItem.routerLink],
+            routerLink: [ctx.resourceId as string, menuItem.routerLink],
           })),
         };
       }

src/app/features/collections/components/add-to-collection/add-to-collection.component.ts

@@ -142,7 +142,7 @@ export class AddToCollectionComponent implements CanDeactivateComponent {
     dialogRef.onClose.subscribe((result) => {
       if (result) {
         this.allowNavigation.set(true);
-        this.router.navigate(['/project', this.selectedProject()?.id, 'overview']);
+        this.router.navigate([this.selectedProject()?.id, 'overview']);
       }
     });
   }

src/app/features/files/pages/file-detail/file-detail.component.ts

@@ -166,8 +166,7 @@ export class FileDetailComponent {
 
   deleteEntry(link: string): void {
     if (this.resourceId) {
-      const redirectUrl =
-        this.resourceType === 'nodes' ? `/project/${this.resourceId}/files` : `/registry/${this.resourceId}/files`;
+      const redirectUrl = `/${this.resourceId}/files`;
       this.actions
         .deleteEntry(this.resourceId, link)
         .pipe(takeUntilDestroyed(this.destroyRef))

src/app/features/home/pages/dashboard/dashboard.component.ts

@@ -222,7 +222,7 @@ export class DashboardComponent implements OnInit {
 
   protected navigateToProject(project: MyResourcesItem): void {
     this.activeProject.set(project);
-    this.router.navigate(['/project', project.id]);
+    this.router.navigate([project.id]);
   }
 
   protected createProject(): void {