From 434122060a27cbf61d78d75521b4f2d173bb96e7 Mon Sep 17 00:00:00 2001
From: vchikalkin <djchikalkin@gmail.com>
Date: Mon, 27 Jan 2025 14:32:53 +0300
Subject: [PATCH] set header title

---
 apps/web/app/(main)/contacts/page.tsx           |  2 ++
 apps/web/app/(main)/layout.tsx                  |  5 +++--
 apps/web/app/(main)/profile/page.tsx            |  2 ++
 apps/web/components/navigation/header.tsx       | 14 --------------
 .../navigation/{ => header}/back-button.tsx     |  0
 apps/web/components/navigation/header/index.tsx | 12 ++++++++++++
 .../components/navigation/header/page-title.tsx |  8 ++++++++
 apps/web/components/navigation/index.tsx        |  1 +
 apps/web/components/navigation/meta.tsx         | 13 +++++++++++++
 .../navigation/{navbar.tsx => navbar/index.tsx} |  0
 .../navigation/{ => navbar}/nav-button.tsx      |  0
 apps/web/context/navigation.tsx                 | 17 +++++++++++++++++
 12 files changed, 58 insertions(+), 16 deletions(-)
 delete mode 100644 apps/web/components/navigation/header.tsx
 rename apps/web/components/navigation/{ => header}/back-button.tsx (100%)
 create mode 100644 apps/web/components/navigation/header/index.tsx
 create mode 100644 apps/web/components/navigation/header/page-title.tsx
 create mode 100644 apps/web/components/navigation/meta.tsx
 rename apps/web/components/navigation/{navbar.tsx => navbar/index.tsx} (100%)
 rename apps/web/components/navigation/{ => navbar}/nav-button.tsx (100%)
 create mode 100644 apps/web/context/navigation.tsx

diff --git a/apps/web/app/(main)/contacts/page.tsx b/apps/web/app/(main)/contacts/page.tsx
index 669ff9c..86e7091 100644
--- a/apps/web/app/(main)/contacts/page.tsx
+++ b/apps/web/app/(main)/contacts/page.tsx
@@ -1,10 +1,12 @@
 import { ContactsList } from '@/components/contacts/contacts-list';
 import { ContactsFilter } from '@/components/contacts/dropdown-filter';
+import { NavigationMeta } from '@/components/navigation';
 import { ContactsFilterProvider } from '@/context/contacts-filter';
 
 export default function ContactsPage() {
   return (
     <ContactsFilterProvider>
+      <NavigationMeta title="Контакты" />
       <div className="sticky top-0 z-50 flex flex-row items-center justify-between space-x-4 bg-background p-4">
         <div />
         <ContactsFilter />
diff --git a/apps/web/app/(main)/layout.tsx b/apps/web/app/(main)/layout.tsx
index bb66468..cc0b314 100644
--- a/apps/web/app/(main)/layout.tsx
+++ b/apps/web/app/(main)/layout.tsx
@@ -1,14 +1,15 @@
 import { BottomNav, PageHeader } from '@/components/navigation';
+import { NavigationProvider } from '@/context/navigation';
 import { type PropsWithChildren } from 'react';
 
 export default async function Layout({ children }: Readonly<PropsWithChildren>) {
   return (
-    <>
+    <NavigationProvider>
       <PageHeader />
       <div className="mx-auto flex h-screen flex-col justify-between">
         <main>{children}</main>
         <BottomNav />
       </div>
-    </>
+    </NavigationProvider>
   );
 }
diff --git a/apps/web/app/(main)/profile/page.tsx b/apps/web/app/(main)/profile/page.tsx
index 1fbf2a9..ad11357 100644
--- a/apps/web/app/(main)/profile/page.tsx
+++ b/apps/web/app/(main)/profile/page.tsx
@@ -1,4 +1,5 @@
 import { getProfile } from '@/actions/profile';
+import { NavigationMeta } from '@/components/navigation/meta';
 import { ProfileCard } from '@/components/profile/profile-card';
 import { dehydrate, HydrationBoundary, QueryClient } from '@tanstack/react-query';
 
@@ -12,6 +13,7 @@ export default async function ProfilePage() {
 
   return (
     <HydrationBoundary state={dehydrate(queryClient)}>
+      <NavigationMeta title="Профиль" />
       <ProfileCard />
     </HydrationBoundary>
   );
diff --git a/apps/web/components/navigation/header.tsx b/apps/web/components/navigation/header.tsx
deleted file mode 100644
index 19ab706..0000000
--- a/apps/web/components/navigation/header.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import { BackButton } from './back-button';
-
-type Props = {
-  title: string;
-};
-
-export function PageHeader(props: Readonly<Props>) {
-  return (
-    <div className="sticky top-0 z-50 flex items-center bg-background p-2">
-      <BackButton />
-      <span className="h-8 text-lg font-bold tracking-wide">{props.title || 'Page name'}</span>
-    </div>
-  );
-}
diff --git a/apps/web/components/navigation/back-button.tsx b/apps/web/components/navigation/header/back-button.tsx
similarity index 100%
rename from apps/web/components/navigation/back-button.tsx
rename to apps/web/components/navigation/header/back-button.tsx
diff --git a/apps/web/components/navigation/header/index.tsx b/apps/web/components/navigation/header/index.tsx
new file mode 100644
index 0000000..a8aad82
--- /dev/null
+++ b/apps/web/components/navigation/header/index.tsx
@@ -0,0 +1,12 @@
+'use client';
+import { BackButton } from './back-button';
+import { PageTitle } from './page-title';
+
+export function PageHeader() {
+  return (
+    <div className="sticky top-0 z-50 flex items-center bg-background p-2">
+      <BackButton />
+      <PageTitle />
+    </div>
+  );
+}
diff --git a/apps/web/components/navigation/header/page-title.tsx b/apps/web/components/navigation/header/page-title.tsx
new file mode 100644
index 0000000..3d02637
--- /dev/null
+++ b/apps/web/components/navigation/header/page-title.tsx
@@ -0,0 +1,8 @@
+import { NavigationContext } from '@/context/navigation';
+import { use } from 'react';
+
+export function PageTitle() {
+  const context = use(NavigationContext);
+
+  return <span className="h-8 text-lg font-bold tracking-wide">{context?.title}</span>;
+}
diff --git a/apps/web/components/navigation/index.tsx b/apps/web/components/navigation/index.tsx
index bb1137c..d6a42ad 100644
--- a/apps/web/components/navigation/index.tsx
+++ b/apps/web/components/navigation/index.tsx
@@ -1,2 +1,3 @@
 export * from './header';
+export * from './meta';
 export * from './navbar';
diff --git a/apps/web/components/navigation/meta.tsx b/apps/web/components/navigation/meta.tsx
new file mode 100644
index 0000000..edb6039
--- /dev/null
+++ b/apps/web/components/navigation/meta.tsx
@@ -0,0 +1,13 @@
+'use client';
+import { NavigationContext } from '@/context/navigation';
+import { use, useEffect } from 'react';
+
+export function NavigationMeta(props: Readonly<{ title: string }>) {
+  const navigation = use(NavigationContext);
+
+  useEffect(() => {
+    navigation?.setTitle(props.title);
+  }, [navigation, props.title]);
+
+  return false;
+}
diff --git a/apps/web/components/navigation/navbar.tsx b/apps/web/components/navigation/navbar/index.tsx
similarity index 100%
rename from apps/web/components/navigation/navbar.tsx
rename to apps/web/components/navigation/navbar/index.tsx
diff --git a/apps/web/components/navigation/nav-button.tsx b/apps/web/components/navigation/navbar/nav-button.tsx
similarity index 100%
rename from apps/web/components/navigation/nav-button.tsx
rename to apps/web/components/navigation/navbar/nav-button.tsx
diff --git a/apps/web/context/navigation.tsx b/apps/web/context/navigation.tsx
new file mode 100644
index 0000000..11a3fc8
--- /dev/null
+++ b/apps/web/context/navigation.tsx
@@ -0,0 +1,17 @@
+'use client';
+import { createContext, type PropsWithChildren, useMemo, useState } from 'react';
+
+type ContextType = {
+  setTitle: (title: null | string) => void;
+  title: null | string;
+};
+
+export const NavigationContext = createContext<ContextType | null>(null);
+
+export function NavigationProvider({ children }: Readonly<PropsWithChildren>) {
+  const [title, setTitle] = useState<null | string>(null);
+
+  const value = useMemo(() => ({ setTitle, title }), [setTitle, title]);
+
+  return <NavigationContext value={value}>{children}</NavigationContext>;
+}