From 0af02bc13ecdefcdc5d9d2e758cb34082fd1804f Mon Sep 17 00:00:00 2001
From: Tobias Kohr <tobias.kohr@camptocamp.com>
Date: Fri, 5 Apr 2024 16:20:02 +0200
Subject: [PATCH] feat(home): implement 'routing' to datahub

---
 apps/home/src/app/app.component.html          |  4 ++--
 apps/home/src/app/app.module.ts               | 14 ------------
 apps/home/src/app/app.router.service.ts       | 20 -----------------
 .../home-header/home-header.component.html    |  5 +++--
 .../home/home-header/home-header.component.ts | 22 ++++++++++++++-----
 .../app/home/home-page/home-page.component.ts |  2 +-
 libs/mel/src/index.ts                         |  1 +
 .../results-list/results-list.component.ts    | 13 +++++++----
 libs/mel/src/lib/route.utils.ts               | 13 +++++++++++
 package.json                                  |  2 +-
 10 files changed, 46 insertions(+), 50 deletions(-)
 delete mode 100644 apps/home/src/app/app.router.service.ts
 create mode 100644 libs/mel/src/lib/route.utils.ts

diff --git a/apps/home/src/app/app.component.html b/apps/home/src/app/app.component.html
index 4be75efb..2df188fa 100644
--- a/apps/home/src/app/app.component.html
+++ b/apps/home/src/app/app.component.html
@@ -1,6 +1,6 @@
 <div class="h-full flex flex-col">
-  <div class="flex-grow" gnUiSearchRouterContainer="mainSearch">
-    <router-outlet></router-outlet>
+  <div class="flex-grow" gnUiSearchStateContainer="mainSearch">
+    <mel-datahub-home-page></mel-datahub-home-page>
   </div>
   <mel-datahub-footer></mel-datahub-footer>
 </div>
diff --git a/apps/home/src/app/app.module.ts b/apps/home/src/app/app.module.ts
index c56d2029..6bd1b383 100644
--- a/apps/home/src/app/app.module.ts
+++ b/apps/home/src/app/app.module.ts
@@ -1,9 +1,7 @@
 import { importProvidersFrom, isDevMode, NgModule } from '@angular/core'
 import { BrowserModule } from '@angular/platform-browser'
-import { RouterModule } from '@angular/router'
 import { AppComponent } from './app.component'
 import {
-  DefaultRouterModule,
   FeatureAuthModule,
   FeatureCatalogModule,
   FeatureRecordModule,
@@ -20,7 +18,6 @@ import {
   UiInputsModule,
   UiWidgetsModule,
   UiMapModule,
-  RouterService,
 } from 'geonetwork-ui'
 import {
   TranslateLoader,
@@ -41,7 +38,6 @@ import { MatTooltipModule } from '@angular/material/tooltip'
 import { MelModule, MelEmbeddedTranslateLoader } from '@mel-dataplatform/mel'
 import { HomeHeaderComponent } from './home/home-header/home-header.component'
 import { HomePageComponent } from './home/home-page/home-page.component'
-import { AppRouterService } from './app.router.service'
 
 @NgModule({
   declarations: [AppComponent, HomeHeaderComponent, HomePageComponent],
@@ -85,21 +81,11 @@ import { AppRouterService } from './app.router.service'
     ),
     EffectsModule.forRoot([]),
     StoreDevtoolsModule.instrument({ logOnly: !isDevMode() }),
-    DefaultRouterModule.forRoot({
-      searchStateId: 'mainSearch',
-      searchRouteComponent: HomePageComponent,
-      recordRouteComponent: HomePageComponent,
-    }),
-    RouterModule.forRoot([], {
-      initialNavigation: 'enabledBlocking',
-      scrollPositionRestoration: 'enabled',
-    }),
   ],
   providers: [
     importProvidersFrom(FeatureAuthModule),
     provideGn4(),
     provideRepositoryUrl(() => '/geonetwork/srv/api'),
-    { provide: RouterService, useClass: AppRouterService },
     {
       provide: LOGIN_URL,
       useFactory: () => '${current_url}?login',
diff --git a/apps/home/src/app/app.router.service.ts b/apps/home/src/app/app.router.service.ts
deleted file mode 100644
index a3a5f7be..00000000
--- a/apps/home/src/app/app.router.service.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import { Injectable } from '@angular/core'
-import { Routes } from '@angular/router'
-import { RouterService } from 'geonetwork-ui'
-import { HomePageComponent } from './home/home-page/home-page.component'
-
-@Injectable()
-export class AppRouterService extends RouterService {
-  override buildRoutes(): Routes {
-    return [
-      {
-        path: '',
-        component: HomePageComponent,
-        data: {
-          shouldDetach: true,
-        },
-      },
-      { path: '**', redirectTo: '', pathMatch: 'full' },
-    ]
-  }
-}
diff --git a/apps/home/src/app/home/home-header/home-header.component.html b/apps/home/src/app/home/home-header/home-header.component.html
index 47dbe395..dee8fd1a 100644
--- a/apps/home/src/app/home/home-header/home-header.component.html
+++ b/apps/home/src/app/home/home-header/home-header.component.html
@@ -6,11 +6,12 @@ <h1 class="flex justify-center mel-page-title" translate="">
     <div class="flex justify-center pt-8 pb-24 relative">
       <mel-datahub-fuzzy-search
         class="mel-fuzzy-search"
+        (inputSubmitted)="onFuzzySearchSubmit($event)"
         (itemSelected)="onFuzzySearchSelection($event)"
         [autoFocus]="true"
       ></mel-datahub-fuzzy-search>
     </div>
-    <div class="max-w-[1182px] mx-auto" gnUiSearchStateContainer="headerHome">
+    <div class="max-w-[1182px] mx-auto">
       <div class="sm:ml-16">
         <div class="mel-title-line"></div>
         <div class="text-2xl font-title" translate="">
@@ -23,7 +24,7 @@ <h1 class="flex justify-center mel-page-title" translate="">
       ></mel-datahub-results-list-carousel>
     </div>
     <div class="flex justify-end mt-4">
-      <a routerLink="/search">
+      <a [href]="HREF_ROUTE_SEARCH">
         <mel-datahub-button
           [label]="'mel.homepage.visit.catalog' | translate"
           [icon]="'arrow'"
diff --git a/apps/home/src/app/home/home-header/home-header.component.ts b/apps/home/src/app/home/home-header/home-header.component.ts
index cd6d1cbe..a041f36f 100644
--- a/apps/home/src/app/home/home-header/home-header.component.ts
+++ b/apps/home/src/app/home/home-header/home-header.component.ts
@@ -1,5 +1,11 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core'
-import { RouterFacade, SearchService } from 'geonetwork-ui'
+import { SearchService } from 'geonetwork-ui'
+import {
+  DATAHUB_ROOT,
+  DATAHUB_ROUTE_SEARCH,
+  goFromHomeToRecord,
+  goFromHomeToSearch,
+} from '@mel-dataplatform/mel'
 import { CatalogRecord } from 'geonetwork-ui/libs/common/domain/src/lib/model/record'
 import { SortByField } from 'geonetwork-ui/libs/common/domain/src/lib/model/search'
 
@@ -17,14 +23,18 @@ import { SortByField } from 'geonetwork-ui/libs/common/domain/src/lib/model/sear
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class HomeHeaderComponent {
-  constructor(
-    public routerFacade: RouterFacade,
-    private searchService: SearchService
-  ) {}
+  HREF_ROUTE_SEARCH = `${DATAHUB_ROOT}/${DATAHUB_ROUTE_SEARCH}`
+
+  constructor(private searchService: SearchService) {}
 
   onFuzzySearchSelection(record: CatalogRecord) {
-    this.routerFacade.goToMetadata(record)
+    goFromHomeToRecord(record)
+  }
+
+  onFuzzySearchSubmit(query: string) {
+    goFromHomeToSearch(query)
   }
+
   clearSearchAndSort(sort: SortByField | string): void {
     this.searchService.setSortAndFilters({}, sort as SortByField)
   }
diff --git a/apps/home/src/app/home/home-page/home-page.component.ts b/apps/home/src/app/home/home-page/home-page.component.ts
index e8fe14f4..039a7098 100644
--- a/apps/home/src/app/home/home-page/home-page.component.ts
+++ b/apps/home/src/app/home/home-page/home-page.component.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core'
 
 @Component({
   selector: 'mel-datahub-home-page',
diff --git a/libs/mel/src/index.ts b/libs/mel/src/index.ts
index 0da1f3f2..e56c4a05 100644
--- a/libs/mel/src/index.ts
+++ b/libs/mel/src/index.ts
@@ -1,2 +1,3 @@
 export * from './lib/mel.module'
 export * from './lib/embedded.translate.loader'
+export * from './lib/route.utils'
diff --git a/libs/mel/src/lib/results-list/results-list.component.ts b/libs/mel/src/lib/results-list/results-list.component.ts
index 02d9b1d9..8494c9b6 100644
--- a/libs/mel/src/lib/results-list/results-list.component.ts
+++ b/libs/mel/src/lib/results-list/results-list.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input, OnDestroy, OnInit } from '@angular/core'
+import { Component, Input, OnDestroy, OnInit, Optional } from '@angular/core'
 import { Store } from '@ngrx/store'
 import {
   FIELDS_BRIEF,
@@ -13,6 +13,7 @@ import {
   Keyword,
 } from 'geonetwork-ui/libs/common/domain/src/lib/model/record'
 import { Subscription } from 'rxjs'
+import { goFromHomeToRecord, goFromHomeToSearch } from '../route.utils'
 
 @Component({
   selector: 'mel-datahub-results-list',
@@ -30,7 +31,7 @@ export class ResultsListComponent implements OnInit, OnDestroy {
   constructor(
     protected searchService: SearchService,
     protected searchFacade: SearchFacade,
-    protected routerFacade: RouterFacade,
+    @Optional() protected routerFacade: RouterFacade,
     protected favoritesService: FavoritesService,
     protected store: Store<SearchState>
   ) {}
@@ -57,10 +58,14 @@ export class ResultsListComponent implements OnInit, OnDestroy {
   }
 
   onInfoKeywordClick(keyword: Keyword) {
-    this.routerFacade.updateSearch({ q: keyword.label })
+    this.routerFacade
+      ? this.routerFacade.updateSearch({ q: keyword.label })
+      : goFromHomeToSearch(keyword.label)
   }
 
   onMetadataSelection(metadata: CatalogRecord): void {
-    this.routerFacade.goToMetadata(metadata)
+    this.routerFacade
+      ? this.routerFacade.goToMetadata(metadata)
+      : goFromHomeToRecord(metadata)
   }
 }
diff --git a/libs/mel/src/lib/route.utils.ts b/libs/mel/src/lib/route.utils.ts
new file mode 100644
index 00000000..3bdfb7c0
--- /dev/null
+++ b/libs/mel/src/lib/route.utils.ts
@@ -0,0 +1,13 @@
+import { CatalogRecord } from 'geonetwork-ui/libs/common/domain/src/lib/model/record'
+
+export const DATAHUB_ROOT = '/catalogue'
+export const DATAHUB_ROUTE_DATASET = 'dataset'
+export const DATAHUB_ROUTE_SEARCH = 'search'
+
+export function goFromHomeToRecord(record: CatalogRecord) {
+  window.location.href = `${DATAHUB_ROOT}/${DATAHUB_ROUTE_DATASET}/${record.uniqueIdentifier}`
+}
+
+export function goFromHomeToSearch(query: string) {
+  window.location.href = `${DATAHUB_ROOT}/${DATAHUB_ROUTE_SEARCH}?q=${query}`
+}
diff --git a/package.json b/package.json
index 24b1c14a..aa123fbb 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,7 @@
   "license": "MIT",
   "scripts": {
     "start": "nx serve mel-datahub",
-    "home": "nx serve home",
+    "home": "nx serve home --port 4201",
     "format": "nx format:write",
     "format:check": "nx format:check",
     "lint:all": "nx run-many --target=lint",