Add routes & breadcrumbs to About section

ElectronicBabylonianLiterature · Sep 26, 2023 · d6e6818 · d6e6818
1 parent 06860d4
commit d6e6818
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 11 deletions.
diff --git a/src/about/ui/about.tsx b/src/about/ui/about.tsx
@@ -1,7 +1,8 @@
-import React from 'react'
+import React, { useState } from 'react'
 import { Tabs, Tab } from 'react-bootstrap'
+import { useHistory } from 'react-router-dom'
 import AppContent from 'common/AppContent'
-import { SectionCrumb } from 'common/Breadcrumbs'
+import { TextCrumb } from 'common/Breadcrumbs'
 import MarkupService from 'markup/application/MarkupService'
 import 'about/ui/about.sass'
 import AboutProject from 'about/ui/project'
@@ -11,17 +12,44 @@ import AboutSigns from 'about/ui/signs'
 import AboutDictionary from 'about/ui/dictionary'
 import AboutListOfKings from 'about/ui/chronology'
 import DateConverterForm from 'chronology/ui/DateConverterForm'
+import _ from 'lodash'
+
+export const tabIds = [
+  'project',
+  'fragmentarium',
+  'corpus',
+  'signs',
+  'dictionary',
+  'date-converter',
+  'list-of-kings',
+] as const
+export type TabId = typeof tabIds[number]
 
 export default function About({
   markupService,
+  activeTab,
 }: {
   markupService: MarkupService
+  activeTab: TabId
 }): JSX.Element {
+  const history = useHistory()
+  const [selectedTab, setSelectedTab] = useState(activeTab)
+  const handleSelect = (selectedTab: TabId) => {
+    history.push(selectedTab)
+    setSelectedTab(selectedTab)
+  }
   return (
-    <AppContent title="About" crumbs={[new SectionCrumb('About')]}>
+    <AppContent
+      title="About"
+      crumbs={[
+        new TextCrumb('About'),
+        new TextCrumb(_.capitalize(selectedTab).replaceAll('-', ' ')),
+      ]}
+    >
       <Tabs
         id="about"
-        defaultActiveKey="fragmentarium"
+        defaultActiveKey={selectedTab}
+        onSelect={(selectedTab) => handleSelect(selectedTab as TabId)}
         mountOnEnter
         unmountOnExit
       >
@@ -43,7 +71,7 @@ export default function About({
         <Tab eventKey="date-converter" title="Date converter">
           <DateConverterForm />
         </Tab>
-        <Tab eventKey="list-of-kings" title="List of Kings">
+        <Tab eventKey="list-of-kings" title="List of kings">
           {AboutListOfKings()}
         </Tab>
       </Tabs>

diff --git a/src/router/aboutRoutes.tsx b/src/router/aboutRoutes.tsx
@@ -1,10 +1,14 @@
 import React, { ReactNode } from 'react'
-import { Route } from 'react-router-dom'
-import About from 'about/ui/about'
+import { Redirect, Route, RouteComponentProps } from 'react-router-dom' //Redirect
+import About, { TabId, tabIds } from 'about/ui/about'
 import MarkupService from 'markup/application/MarkupService'
 import { sitemapDefaults } from 'router/sitemap'
 import { HeadTagsService } from 'router/head'
 
+// ToDo:
+// - Update sitemap
+// console.log
+
 export default function AboutRoutes({
   sitemap,
   markupService,
@@ -14,18 +18,26 @@ export default function AboutRoutes({
 }): JSX.Element[] {
   return [
     <Route
-      key="about"
+      key="about-tabs"
       exact
-      path="/about"
-      render={(): ReactNode => (
+      path={`/about/:id(${tabIds.join('|')})`}
+      render={(props: RouteComponentProps<{ id: string }>): ReactNode => (
         <HeadTagsService
           title="About: eBL"
           description="This section provides detailed information about the electronic Babylonian Library (eBL) and the materials and tools available."
         >
-          <About markupService={markupService} />
+          <About
+            markupService={markupService}
+            activeTab={props.match.params.id as TabId}
+          />
         </HeadTagsService>
       )}
       {...(sitemap && sitemapDefaults)}
     />,
+    <Redirect
+      from="/about"
+      to="/about/fragmentarium"
+      key="about-root-redirect"
+    />,
   ]
 }