refactor: MODIFY definition in pages.ts

src/components/Navbar/index.tsx

@@ -11,11 +11,13 @@ function ExampleNavbar() {
     if ("folder" in page && page.folder) {
       const folder = [];
       for (const subpage of page.folder) {
-        folder.push(
-          <NavDropdown.Item as={Link} to={subpage.path} target="_blank">
-            {subpage.name}
-          </NavDropdown.Item>,
-        );
+        if ("path" in subpage && subpage.path) {
+          folder.push(
+            <NavDropdown.Item as={Link} to={subpage.path} target="_blank">
+              {subpage.name}
+            </NavDropdown.Item>,
+          );
+        }
       }
       pages.push(
         <NavDropdown title={page.name} id="basic-nav-dropdown">

src/containers/App/App.tsx

@@ -52,7 +52,7 @@ const App = () => {
             <Route
               key={path}
               path={path}
-              element={<Header title={title} lead={lead} />}
+              element={<Header title={title || ""} lead={lead || ""} />}
             />
           );
         })}

src/pages.ts

 interface Base {
-  name: string;
+  name: string | undefined;
 }
 
 class Folder implements Base {
-  name!: string;
-  folder!: Page[];
+  name: string | undefined;
+  folder: Page[] | undefined;
 }
 
 class Page implements Base {
-  name!: string;
-  title!: string;
-  path!: string;
-  lead?: string;
+  name: string | undefined;
+  title: string | undefined;
+  path: string | undefined;
+  lead: string | undefined;
 }
 
 const Pages: (Page | Folder)[] = [

src/utils/getPathMapping.ts

 import pages from "../pages.ts";
 
 const getPathMapping = () => {
-  const map: {
-    [key: string]: { name: string; title: string; lead: string };
-  } = {};
-  pages.forEach((item) => {
-    if ("folder" in item && item.folder) {
+  return pages.reduce<{
+    [key: string]: {
+      name: string | undefined;
+      title: string | undefined;
+      lead: string | undefined;
+    };
+  }>((map, item) => {
+    if ("path" in item && item.path) {
+      map[item.path] = { name: item.name, title: item.title, lead: item.lead };
+    } else if ("folder" in item && item.folder) {
       item.folder.forEach((page) => {
-        map[page.path] = {
-          name: page.name,
-          title: page.title,
-          lead: page.lead || "",
-        };
+        if (page.path) {
+          map[page.path] = {
+            name: page.name,
+            title: page.title,
+            lead: page.lead,
+          };
+        }
       });
-    } else if ("path" in item && item.path) {
-      map[item.path] = {
-        name: item.name,
-        title: item.title,
-        lead: item.lead || "",
-      };
     }
-  });
-  return map;
+    return map;
+  }, {});
 };
 
 export default getPathMapping;

src/utils/useDocumentTitle.ts

 import { useEffect } from "react";
 
-function useDocumentTitle(title: string) {
+function useDocumentTitle(title: any) {
   useEffect(() => {
-    document.title = `${title} | ${import.meta.env.VITE_TEAM_NAME} - iGEM ${import.meta.env.VITE_TEAM_YEAR}`;
+    document.title = `${title || ""} | ${import.meta.env.VITE_TEAM_NAME} - iGEM ${import.meta.env.VITE_TEAM_YEAR}`;
   }, [title]);
 }