feat: handle routing with breadcrumbs

- Dynamic creation of the breadcrumb based on datastore tab selectionand clicking the edit action button
dhis2 · Dec 9, 2024 · 66e0293 · 66e0293
1 parent a629183
commit 66e0293
Show file tree

Hide file tree

Showing 6 changed files with 64 additions and 22 deletions.
diff --git a/src/components/pager/Breadcrumbs.tsx b/src/components/pager/Breadcrumbs.tsx
@@ -1,21 +1,46 @@
 import React from 'react'
-import { Link } from 'react-router-dom'
+import { Link, useLocation, useMatches } from 'react-router-dom'
 import classes from './Page.module.css'
 
 function Breadcrumbs() {
+    const matches = useMatches()
+    const location = useLocation()
+
+    const finalMatch = matches.filter(
+        (match) => match.pathname === location.pathname
+    )
+    const { params: { store, namespace, key } } = finalMatch[0]
+
+    const storeLabels = {
+        dataStore: 'DataStore',
+        userDataStore: 'User DataStore',
+    }
+
     return (
         <ul className={classes.list}>
-            <Link to={'/dataStore'}>
-                <b>DataStore</b>
-            </Link>
-            /
-            <Link to={'/dataStore/edit/namespace'}>
-                <b>Key</b>
-            </Link>
-            /
-            <Link to={'/dataStore/edit/namespace/key'}>
-                <b>Value</b>
-            </Link>
+            {store && (
+                <>
+                    <Link to={`/${store}`}>
+                        <b>{storeLabels[store]}</b>
+                    </Link>
+                    <span>/</span>
+                </>
+            )}
+            {namespace && (
+                <>
+                    <Link to={`/${store}/edit/${namespace}`}>
+                        <b>{namespace}</b>
+                    </Link>
+                    <span>/</span>
+                </>
+            )}
+            {key && (
+                <>
+                    <Link to={`/${store}/edit/${namespace}/${key}`}>
+                        <b>{key}</b>
+                    </Link>
+                </>
+            )}
         </ul>
     )
 }

diff --git a/src/components/pager/CreateAction.tsx b/src/components/pager/CreateAction.tsx
@@ -3,7 +3,11 @@ import i18n from '../../locales'
 import CreateButton from './buttons/CreateButton'
 import CreateModal from './CreateModal'
 
-function CreateAction({ type }) {
+type CreateActionProps = {
+    type: string
+}
+
+function CreateAction({ type }: CreateActionProps) {
     const [openModal, setOpenModal] = useState(false)
     const [values, setValues] = useState({})
     const label = type === 'key' ? i18n.t('New Key') : i18n.t('New Namespace')

diff --git a/src/components/pager/DataStoreTabBar.tsx b/src/components/pager/DataStoreTabBar.tsx
@@ -4,26 +4,26 @@ import i18n from '../../locales'
 
 type DataStoreProps = {
     activeTab: string
-    setActiveTab: (string) => void
+    switchTab: (string) => void
 }
 
 export default function DataStoreTabBar({
     activeTab,
-    setActiveTab,
+    switchTab,
 }: DataStoreProps) {
     return (
         <TabBar>
             <Tab
                 onClick={() => {
-                    setActiveTab('dataStore')
+                    switchTab('dataStore')
                 }}
                 selected={activeTab === 'dataStore'}
             >
                 {i18n.t('DataStore')}
             </Tab>
             <Tab
                 onClick={() => {
-                    setActiveTab('userDataStore')
+                    switchTab('userDataStore')
                 }}
                 selected={activeTab === 'userDataStore'}
             >

diff --git a/src/components/pager/pages/Namespaces.tsx b/src/components/pager/pages/Namespaces.tsx
@@ -1,4 +1,5 @@
 import React, { useState } from 'react'
+import { useNavigate } from 'react-router-dom'
 import i18n from '../../../locales'
 import CreateAction from '../CreateAction'
 import DataStoreTabBar from '../DataStoreTabBar'
@@ -7,6 +8,8 @@ import SearchField from '../SearchField'
 import ItemsTable from '../table/Table'
 
 const NamespacesPage = () => {
+    const navigate = useNavigate()
+
     const data = {
         results: ['tea', 'coffee', 'chocolate', 'rose'],
     }
@@ -16,6 +19,10 @@ const NamespacesPage = () => {
 
     const [activeTab, setActiveTab] = useState('dataStore')
 
+    const handleSwitchTab = (selectedTab) => {
+        setActiveTab(selectedTab)
+        navigate(`/${selectedTab}`)
+    }
     // question: fetch data outside? filter it inside? handling search
 
     const RenderMidSection = ({ data }: { data: { results: string[] } }) => {
@@ -36,7 +43,7 @@ const NamespacesPage = () => {
             <div>
                 <DataStoreTabBar
                     activeTab={activeTab}
-                    setActiveTab={setActiveTab}
+                    switchTab={handleSwitchTab}
                 />
             </div>
             {activeTab === 'dataStore' && <RenderMidSection data={data} />}

diff --git a/src/components/pager/table/Table.tsx b/src/components/pager/table/Table.tsx
@@ -42,7 +42,9 @@ const ItemsTable = ({ data, label }: TableProps) => {
                                                 {item}
                                             </DataTableCell>
                                             <DataTableCell bordered width="12%">
-                                                <TableActions />
+                                                <TableActions
+                                                    item={item}
+                                                />
                                             </DataTableCell>
                                         </DataTableRow>
                                     )

diff --git a/src/components/pager/table/actions/TableActions.tsx b/src/components/pager/table/actions/TableActions.tsx
@@ -5,7 +5,11 @@ import classes from '../../Page.module.css'
 import DeleteButton from './DeleteButton'
 import DeleteModal from './DeleteModal'
 
-const TableActions = () => {
+type TableActionProps = {
+    item: string
+}
+
+const TableActions = ({ item }: TableActionProps) => {
     const navigate = useNavigate()
     const { namespace } = useParams()
 
@@ -17,9 +21,9 @@ const TableActions = () => {
                 <EditButton
                     handleClick={() => {
                         if (namespace) {
-                            navigate(`key`)
+                            navigate(`${item}`)
                         } else {
-                            navigate(`edit/namespace`)
+                            navigate(`edit/${item}`)
                         }
                     }}
                 />