From 9635d68800eafb04e807d80e34bdd90240d07152 Mon Sep 17 00:00:00 2001
From: VK <vkozel@kontur.io>
Date: Fri, 13 Sep 2024 14:00:09 +0300
Subject: [PATCH] implement title updates, fix default route fallback

---
 .../localization/translations/en/common.json  |  2 ++
 src/core/router/atoms/currentRoute.ts         | 21 ++++++++++++-------
 src/core/router/components/Router.tsx         |  5 +++++
 src/core/router/routes.tsx                    |  4 ++--
 src/core/router/types.ts                      |  2 +-
 src/utils/hooks/useTabNameUpdate.tsx          |  7 -------
 src/views/CommonView.tsx                      |  2 --
 7 files changed, 23 insertions(+), 20 deletions(-)
 delete mode 100644 src/utils/hooks/useTabNameUpdate.tsx

diff --git a/src/core/localization/translations/en/common.json b/src/core/localization/translations/en/common.json
index ffdb0b6f7..c35b6285a 100644
--- a/src/core/localization/translations/en/common.json
+++ b/src/core/localization/translations/en/common.json
@@ -365,7 +365,9 @@
   "modes": {
     "map": "Map",
     "about": "About",
+    "cookies": "Cookies",
     "reports": "Reports",
+    "report": "Report",
     "profile": "Profile",
     "privacy": "Privacy",
     "terms": "Terms"
diff --git a/src/core/router/atoms/currentRoute.ts b/src/core/router/atoms/currentRoute.ts
index 74e2b8886..03443e53c 100644
--- a/src/core/router/atoms/currentRoute.ts
+++ b/src/core/router/atoms/currentRoute.ts
@@ -16,15 +16,20 @@ export const currentRouteAtom = createAtom(
     const routesConfig = get('availableRoutesAtom');
     if (routesConfig === null) return null;
     const location = get('currentLocationAtom');
+    const normalizedLocation = stripBasename(location.pathname, configRepo.get().baseUrl);
+
+    const matchedRoute = routesConfig.routes.find((route) => {
+      const path = getAbsoluteRoute(route);
+      return matchPath({ path, exact: true }, normalizedLocation);
+    });
+
+    if (matchedRoute) {
+      return matchedRoute;
+    }
+
+    // fallback to default route
     return (
-      routesConfig.routes.find((route) => {
-        const path = getAbsoluteRoute(route);
-        const normalizedLocation = stripBasename(
-          location.pathname,
-          configRepo.get().baseUrl,
-        );
-        return matchPath({ path, exact: true }, normalizedLocation);
-      }) ?? null
+      routesConfig.routes.find((route) => route.id === routesConfig.defaultRoute) ?? null
     );
   },
   'currentRouteAtom',
diff --git a/src/core/router/components/Router.tsx b/src/core/router/components/Router.tsx
index 92d9cca05..78874bb63 100644
--- a/src/core/router/components/Router.tsx
+++ b/src/core/router/components/Router.tsx
@@ -29,6 +29,11 @@ globalThis.addEventListener(NAVIGATE_EVENT, ((e: CustomEvent) => {
   routerInstance.navigate(getAbsoluteRoute(slug) + globalThis.location.search);
 }) as EventListener);
 
+// update Title
+currentRouteAtom.v3atom.onChange((ctx, route) => {
+  document.title = `${configRepo.get().name} - ${route?.title || ''}`;
+});
+
 export function Router() {
   return <RouterProvider router={routerInstance} />;
 }
diff --git a/src/core/router/routes.tsx b/src/core/router/routes.tsx
index 72bfd5d8a..c8e58978a 100644
--- a/src/core/router/routes.tsx
+++ b/src/core/router/routes.tsx
@@ -49,7 +49,7 @@ export const routerConfig: AppRouterConfig = {
     {
       id: 'report',
       slug: ':reportId',
-      title: 'modes.report',
+      title: i18n.t('modes.report'),
       icon: <Reports16 />,
       view: <ReportPage />,
       requiredFeature: AppFeature.REPORTS,
@@ -112,7 +112,7 @@ export const routerConfig: AppRouterConfig = {
     {
       id: 'cookies',
       slug: 'cookies',
-      title: 'modes.cookies',
+      title: i18n.t('modes.cookies'),
       icon: <Reports16 />,
       view: <PagesDocument doc={[{ type: 'md', url: 'cookies.md' }]} key="cookies" />,
       parentRouteId: 'about',
diff --git a/src/core/router/types.ts b/src/core/router/types.ts
index 21e62fb89..c74718511 100644
--- a/src/core/router/types.ts
+++ b/src/core/router/types.ts
@@ -6,7 +6,7 @@ export interface AppRoute {
   view: JSX.Element;
   icon: JSX.Element;
   /** How to name this route in navigation */
-  title: string | JSX.Element;
+  title: string;
   /** Redirect to this route users that see it first time */
   showForNewUsers?: boolean;
   /** Should we unmount (false) or just hide (true) route when it deactivated */
diff --git a/src/utils/hooks/useTabNameUpdate.tsx b/src/utils/hooks/useTabNameUpdate.tsx
deleted file mode 100644
index 2f3f23a2e..000000000
--- a/src/utils/hooks/useTabNameUpdate.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import { useEffect } from 'react';
-
-export function useTabNameUpdate(name?: string) {
-  useEffect(() => {
-    if (name && document.title !== name) document.title = name;
-  }, [name]);
-}
diff --git a/src/views/CommonView.tsx b/src/views/CommonView.tsx
index b004fd17e..bf4253c38 100644
--- a/src/views/CommonView.tsx
+++ b/src/views/CommonView.tsx
@@ -4,7 +4,6 @@ import { useAtom } from '@reatom/react-v2';
 import { configRepo } from '~core/config';
 import { OriginalLogo } from '~components/KonturLogo/KonturLogo';
 import { CookieConsentBanner } from '~features/cookie_consent_banner';
-import { useTabNameUpdate } from '~utils/hooks/useTabNameUpdate';
 import { featureFlagsAtom, FeatureFlag } from '~core/shared_state';
 import { FullScreenLoader } from '~components/LoadingSpinner/LoadingSpinner';
 import s from './CommonView.module.css';
@@ -26,7 +25,6 @@ export function CommonView({
   getAbsoluteRoute: (path: string | AppRoute) => string;
 }>) {
   const [featureFlags] = useAtom(featureFlagsAtom);
-  useTabNameUpdate(configRepo.get().name);
 
   useEffect(() => {
     if (featureFlags[FeatureFlag.INTERCOM]) {