fix: make library title library viewer header on top of page

UnlockedLabs · Jan 15, 2025 · 14f3e1e · 14f3e1e
1 parent 4fee008
commit 14f3e1e
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 10 deletions.
diff --git a/frontend/src/Components/PageNav.tsx b/frontend/src/Components/PageNav.tsx
@@ -1,14 +1,12 @@
-import { useEffect, useRef } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import { isAdministrator, useAuth } from '@/useAuth';
 import { Bars3Icon, BuildingOffice2Icon } from '@heroicons/react/24/solid';
 import ULIComponent from '@/Components/ULIComponent.tsx';
-import { Facility } from '@/common';
+import { Facility, TitleHandler } from '@/common';
 import { useMatches, useLoaderData } from 'react-router-dom';
 import API from '@/api/api';
 
-interface HandleType {
-    title: string;
-}
+let setGlobalPageTitle: (newTitle: string) => void;
 
 export default function PageNav({
     showOpenMenu,
@@ -22,7 +20,11 @@ export default function PageNav({
     const facilityNames = useLoaderData() as Facility[] | null;
     const matches = useMatches();
     const currentRoute = matches[matches.length - 1];
-    const pageTitle = (currentRoute?.handle as HandleType)?.title;
+    const pageTitle = (currentRoute?.handle as TitleHandler)?.title;
+    const [globalPageTitle, _setGlobalPageTitle] = useState<string>(
+        pageTitle || 'Library Viewer'
+    );
+    setGlobalPageTitle = _setGlobalPageTitle;
 
     useEffect(() => {
         const closeDropdown = ({ target }: MouseEvent) => {
@@ -66,7 +68,11 @@ export default function PageNav({
                         iconClassName="lg:hidden cursor-pointer"
                     />
                 )}
-                <h1>{pageTitle}</h1>
+                <h1 className="text-2xl font-lexend font-semibold">
+                    {pageTitle == 'Library Viewer'
+                        ? globalPageTitle
+                        : pageTitle}
+                </h1>
             </div>
             {user && isAdministrator(user) ? (
                 <ul className="menu menu-horizontal px-1">
@@ -109,3 +115,4 @@ export default function PageNav({
         </div>
     );
 }
+export { setGlobalPageTitle };
diff --git a/frontend/src/Pages/LibraryViewer.tsx b/frontend/src/Pages/LibraryViewer.tsx
@@ -4,13 +4,13 @@ import Error from '@/Pages/Error';
 import API from '@/api/api';
 import { Library, ServerResponseOne } from '@/common';
 import { usePathValue } from '@/Context/PathValueCtx';
+import { setGlobalPageTitle } from '@/Components/PageNav';
 
 export default function LibraryViewer() {
     const { id: libraryId } = useParams();
     const [src, setSrc] = useState<string>('');
     const [error, setError] = useState<string | null>(null);
     const [isLoading, setIsLoading] = useState<boolean>(true);
-    const [libraryTitle, setLibraryTitle] = useState<string>('');
     const { setPathVal } = usePathValue();
 
     useEffect(() => {
@@ -21,7 +21,7 @@ export default function LibraryViewer() {
                     `libraries/${libraryId}`
                 )) as ServerResponseOne<Library>;
                 if (resp.success) {
-                    setLibraryTitle(resp.data.title);
+                    setGlobalPageTitle(resp.data.title);
                     setPathVal([
                         { path_id: ':library_name', value: resp.data.title }
                     ]);
@@ -51,7 +51,6 @@ export default function LibraryViewer() {
     return (
         <div>
             <div className="px-8 pb-4">
-                <h1 className="text-2xl font-bold">{libraryTitle}</h1>
                 <div className="w-full pt-4 justify-center">
                     {isLoading ? (
                         <div className="flex h-screen gap-4 justify-center content-center">