e

src/app/community-page/community-page-routing.module.ts

@@ -17,6 +17,8 @@ import { MenuItemType } from '../shared/menu/menu-item-type.model';
 import { DSOEditMenuResolver } from '../shared/dso-page/dso-edit-menu.resolver';
 import { CommunityBrowseSectionComponent } from './sections/community-browse-section/community-browse-section.component';
 import { SubComColSectionComponent } from './sections/sub-com-col-section/sub-com-col-section.component';
+import { BrowseByI18nBreadcrumbResolver } from '../browse-by/browse-by-i18n-breadcrumb.resolver';
+import { BrowseByGuard } from '../browse-by/browse-by-guard';
 
 @NgModule({
   imports: [
@@ -57,9 +59,14 @@ import { SubComColSectionComponent } from './sections/sub-com-col-section/sub-co
                 component: SubComColSectionComponent,
               },
               {
-                path: 'browse',
+                path: 'browse/:id',
                 pathMatch: 'full',
                 component: CommunityBrowseSectionComponent,
+                canActivate: [BrowseByGuard],
+                resolve: {
+                  breadcrumb: BrowseByI18nBreadcrumbResolver,
+                },
+                data: { breadcrumbKey: 'browse.metadata' },
               },
             ],
           }

src/app/community-page/community-page.module.ts

@@ -22,6 +22,7 @@ import {
 import { DsoPageModule } from '../shared/dso-page/dso-page.module';
 import { SubComColSectionComponent } from './sections/sub-com-col-section/sub-com-col-section.component';
 import { CommunityBrowseSectionComponent } from './sections/community-browse-section/community-browse-section.component';
+import { BrowseByPageModule } from '../browse-by/browse-by-page.module';
 
 const DECLARATIONS = [
   CommunityPageComponent,
@@ -45,6 +46,7 @@ const DECLARATIONS = [
     CommunityFormModule,
     ComcolModule,
     DsoPageModule,
+    BrowseByPageModule,
   ],
   declarations: [
     ...DECLARATIONS

src/app/community-page/sections/community-browse-section/community-browse-section.component.html

@@ -1 +0,0 @@
-<p>community-browse-section works!</p>

src/app/shared/comcol/comcol-page-browse-by/comcol-page-browse-by.component.ts

@@ -1,7 +1,7 @@
 import { Component, Input, OnInit } from '@angular/core';
 import { Observable, BehaviorSubject, combineLatest } from 'rxjs';
-import { map, take } from 'rxjs/operators';
-import { ActivatedRoute, Params, Router } from '@angular/router';
+import { filter, map, take } from 'rxjs/operators';
+import { ActivatedRoute, NavigationEnd, Params, Router } from '@angular/router';
 import { getCommunityPageRoute } from '../../../community-page/community-page-routing-paths';
 import { getCollectionPageRoute } from '../../../collection-page/collection-page-routing-paths';
 import { getFirstCompletedRemoteData } from '../../../core/shared/operators';
@@ -54,24 +54,23 @@ export class ComcolPageBrowseByComponent implements OnInit {
           if (this.contentType === 'collection') {
             comColRoute = getCollectionPageRoute(this.id);
             allOptions.push({
-              id: this.id,
+              id: 'recent_submissions',
               label: 'collection.page.browse.recent.head',
               routerLink: comColRoute,
             });
           } else if (this.contentType === 'community') {
             comColRoute = getCommunityPageRoute(this.id);
             allOptions.push({
-              id: this.id,
+              id: 'comcols',
               label: 'community.all-lists.head',
               routerLink: comColRoute,
             });
           }
 
           allOptions.push(...browseDefListRD.payload.page.map((config: BrowseDefinition) => ({
-            id: config.id,
+            id: `browse_${config.id}`,
             label: `browse.comcol.by.${config.id}`,
-            routerLink: `${comColRoute}/browse`,
-            params: { type: config.id },
+            routerLink: `${comColRoute}/browse/${config.id}`,
           })));
         }
         return allOptions;
@@ -80,10 +79,11 @@ export class ComcolPageBrowseByComponent implements OnInit {
 
     combineLatest([
       this.allOptions$,
-      this.route.queryParams,
-    ]).subscribe(([navOptions, params]: [ComColPageNavOption[], Params]) => {
+      this.router.events,
+    ]).subscribe(([navOptions, navigationEnd]: [ComColPageNavOption[], NavigationEnd]) => {
+      console.log(navigationEnd);
       for (let option of navOptions) {
-        if (option.routerLink === window.location.pathname && JSON.stringify(option.params ? option.params : {}) === JSON.stringify(params)) {
+        if (option.routerLink === navigationEnd.urlAfterRedirects) {
           this.currentOption$.next(option);
         }
       }