Add bread crumb navigation

closes #18
fetchq · Mar 9, 2021 · 9c18352 · 9c18352
1 parent e2f3907
commit 9c18352
Show file tree

Hide file tree

Showing 5 changed files with 90 additions and 6 deletions.
diff --git a/src/components/BreadCrumb.js b/src/components/BreadCrumb.js
@@ -0,0 +1,29 @@
+import React from 'react';
+
+import NavigateNextIcon from '@material-ui/icons/NavigateNext';
+import Breadcrumbs from '@material-ui/core/Breadcrumbs';
+import Link from '@material-ui/core/Link';
+import { Link as RouterLink } from 'react-router-dom';
+
+const BreadCrumb = ({ items }) => {
+  return (
+    <Breadcrumbs
+      aria-label="breadcrumb"
+      separator={<NavigateNextIcon fontSize="small" />}
+    >
+      {items.map(({ label, href }) => (
+        <Link
+          key={label + href}
+          color="inherit"
+          href={href}
+          to={href}
+          component={RouterLink}
+        >
+          {label}
+        </Link>
+      ))}
+    </Breadcrumbs>
+  );
+};
+
+export default BreadCrumb;
diff --git a/src/layouts/AppLayout.js b/src/layouts/AppLayout.js
@@ -2,17 +2,23 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { makeStyles } from '@material-ui/core/styles';
 import ViewTitle from '../components/ViewTitle';
+import BreadCrumb from '../components/BreadCrumb';
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles((theme) => ({
   content: {
     margin: theme.spacing(3),
   },
 }));
 
-const AppLayout = ({ children, titleProps }) => {
+const AppLayout = ({ children, titleProps, breadCrumb }) => {
   const classes = useStyles();
   return (
     <div className={classes.content}>
+      {breadCrumb && (
+        <div style={{ marginBottom: 10 }}>
+          <BreadCrumb items={breadCrumb} />
+        </div>
+      )}
       {titleProps && <ViewTitle {...titleProps} />}
       {children}
     </div>
@@ -24,6 +30,12 @@ AppLayout.propTypes = {
    * Properties to setup a ViewTitle component
    */
   titleProps: PropTypes.object,
+  breadCrump: PropTypes.arrayOf(
+    PropTypes.shape({
+      label: PropTypes.string.isRequired,
+      href: PropTypes.string.isRequired,
+    }),
+  ),
 };
 
 export default AppLayout;
diff --git a/src/views/DocumentDetailsView.js b/src/views/DocumentDetailsView.js
@@ -19,8 +19,25 @@ const DocumentDetailsView = ({
       titleProps={{
         title: docSubject,
         subtitle: queueName,
-        backTo: `/queues/${queueName}`,
       }}
+      breadCrumb={[
+        {
+          label: 'queues',
+          href: '/',
+        },
+        {
+          label: queueName,
+          href: `/queues/${queueName}`,
+        },
+        {
+          label: 'docs',
+          href: `/queues/${queueName}/docs`,
+        },
+        {
+          label: docSubject,
+          href: `/queues/${queueName}/docs/${docSubject}`,
+        },
+      ]}
     >
       <pre>{JSON.stringify(doc, null, 2)}</pre>
       {prevDoc && <Link to={`/queues/${queueName}/docs/${prevDoc}`}>prev</Link>}

diff --git a/src/views/LogDetailsView.js b/src/views/LogDetailsView.js
@@ -10,14 +10,31 @@ const LogDetailsView = ({
   },
 }) => {
   const { log, nextLog, prevLog, ...foo } = useLogDetails(queueName, logId);
-  console.log(foo);
+
   return (
     <AppLayout
       titleProps={{
         title: 'Log Details',
         subtitle: queueName,
-        backTo: `/queues/${queueName}`,
       }}
+      breadCrumb={[
+        {
+          label: 'queues',
+          href: '/',
+        },
+        {
+          label: queueName,
+          href: `/queues/${queueName}`,
+        },
+        {
+          label: 'logs',
+          href: `/queues/${queueName}/logs`,
+        },
+        {
+          label: logId,
+          href: `/queues/${queueName}/logs/${logId}`,
+        },
+      ]}
     >
       <pre>{JSON.stringify(log, null, 2)}</pre>
       {prevLog && <Link to={`/queues/${queueName}/logs/${prevLog}`}>prev</Link>}

diff --git a/src/views/QueueDetailsView.js b/src/views/QueueDetailsView.js
@@ -49,8 +49,17 @@ const QueueDetailsView = ({
     <AppLayout
       titleProps={{
         title: `Queue: ${queueName}`,
-        backTo: '/',
       }}
+      breadCrumb={[
+        {
+          label: 'queues',
+          href: '/',
+        },
+        {
+          label: queueName,
+          href: `/queues/${queueName}`,
+        },
+      ]}
     >
       <div className={classes.root}>
         <Route