Add breadcrumbs, quickly, to the project to help in navigation for demo

assets/css/meadow.css

@@ -1,9 +1,11 @@
 @font-face {
   font-family: "AkkuratPro-Regular";
-  src: url("fonts/AkkuratPro-Regular.otf") format("otf");
+  src: url("/fontsZ/AkkuratPro-Regular.otf") format("otf");
+}
 
+@font-face {
   font-family: "AkkuratPro-Light";
-  src: url("fonts/AkkuratPro-Light.otf") format("otf");
+  src: url("/fonts/AkkuratPro-Light.otf") format("otf");
 }
 
 body {
@@ -13,8 +15,7 @@ body {
 }
 
 h1 {
-  @apply text-3xl text-gray-900;
-  font-family: "AkkuratPro-Light";
+  @apply text-3xl text-gray-900 font-display font-light;
 }
 
 h2 {
@@ -82,3 +83,11 @@ label {
 .toast-progress-bar {
   @apply bg-white;
 }
+
+.toast-error {
+  @apply bg-red-300;
+}
+
+.breadcrumbs {
+  @apply mb-8 text-sm;
+}

assets/js/components/InventorySheet/Api.js

@@ -0,0 +1,31 @@
+import { toast } from "react-toastify";
+import axios from "axios";
+
+export async function getInventorySheet(projectId, inventorySheetId) {
+  let inventorySheet = null;
+
+  if (!projectId || !inventorySheetId) {
+    return;
+  }
+
+  try {
+    const response = await axios.get(
+      `/api/v1/projects/${projectId}/ingest_jobs/${inventorySheetId}`,
+      {
+        responseType: "json"
+      }
+    );
+    if (!response.data) {
+      throw new Error(`Error fetching Inventory sheet`);
+    }
+    inventorySheet = response.data.data;
+  } catch (error) {
+    console.log("error", error);
+    toast(
+      `${error.response ? JSON.stringify(error.response.data.errors) : error}`,
+      { type: "error" }
+    );
+  }
+
+  return inventorySheet;
+}

assets/js/components/Project/Api.js

@@ -0,0 +1,28 @@
+import { toast } from "react-toastify";
+import axios from "axios";
+
+export async function getProject(id) {
+  let project = null;
+
+  if (!id) {
+    return;
+  }
+
+  try {
+    const response = await axios.get(`/api/v1/projects/${id}`, {
+      responseType: "json"
+    });
+    if (!response.data) {
+      throw new Error(`Error fetching /api/v1/projects/${id}`);
+    }
+    project = response.data.data;
+  } catch (error) {
+    console.log("error", error);
+    toast(
+      `${error.response ? JSON.stringify(error.response.data.errors) : error}`,
+      { type: "error" }
+    );
+  }
+
+  return project;
+}

assets/js/components/UI/Breadcrumbs.jsx

@@ -0,0 +1,25 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { Link } from "react-router-dom";
+
+const Breadcrumbs = ({ crumbs }) => (
+  <p className="breadcrumbs">
+    {crumbs.map((crumb, i) => (
+      <span key={crumb.label}>
+        /{" "}
+        {i !== crumbs.length - 1 && (
+          <Link to={crumb.link} className="bg-gray-100 px-2">
+            {crumb.label}
+          </Link>
+        )}
+        {i === crumbs.length - 1 && <span className="px-2">{crumb.label}</span>}
+      </span>
+    ))}
+  </p>
+);
+
+Breadcrumbs.propTypes = {
+  crumbs: PropTypes.array.isRequired
+};
+
+export default Breadcrumbs;

assets/js/components/UI/Header.jsx

@@ -1,8 +1,8 @@
 import React from "react";
 import { Link } from "react-router-dom";
 import NavLink from "./NavLink";
-import SearchIcon from '../../../css/fonts/zondicons/search.svg';
-import UserIcon from '../../../css/fonts/zondicons/user.svg';
+import SearchIcon from "../../../css/fonts/zondicons/search.svg";
+import UserIcon from "../../../css/fonts/zondicons/user.svg";
 
 const navLinks = [
   {
@@ -31,34 +31,45 @@ const navLinks = [
   }
 ];
 
-
-
 const Header = () => (
   <div id="header">
     <div className="flex bg-white border-b border-gray-200 fixed top-0 inset-x-0 z-100 h-16 items-center">
       <div className="w-full container relative mx-auto px-6">
         <div className="flex items-center -mx-6">
           <div className="lg:w-1/4 xl:w-1/5 pl-6 pr-6 lg:pr-8">
             <div className="flex items-center">
-              <Link to="/" className="text-xl">
-                Meadow v1.0
-              </Link>
+              <img
+                src="/images/northwestern-libraries-logo.png"
+                alt="Northwestern Libraries logo"
+                className="opacity-50"
+              />
             </div>
           </div>
           <div className="flex flex-grow lg:w-3/4 xl:w-4/5">
             <div className="w-full lg:px-6 xl:w-3/4 xl:px-12">
               <div className="relative">
-                <input type="text" placeholder="Search for items" className="transition focus:outline-0 border border-transparent focus:bg-white focus:border-gray-300 placeholder-gray-900 rounded-lg bg-gray-200 py-2 pr-4 pl-10 block w-full appearance-none leading-normal ds-input" />
+                <input
+                  type="text"
+                  placeholder="Search for items"
+                  className="transition focus:outline-0 border border-transparent focus:bg-white focus:border-gray-300 placeholder-gray-900 rounded-lg bg-gray-200 py-2 pr-4 pl-10 block w-full appearance-none leading-normal ds-input"
+                />
                 <div className="pointer-events-none absolute inset-y-0 left-0 pl-4 flex items-center">
-                    <SearchIcon width={50} height={50} className="fill-current pointer-events-none text-gray-600 w-4 h-4" />
-                  </div>
+                  <SearchIcon
+                    width={50}
+                    height={50}
+                    className="fill-current pointer-events-none text-gray-600 w-4 h-4"
+                  />
                 </div>
-            </div>
-            <div className="hidden lg:flex lg:items-center lg:justify-between xl:w-1/4 px-6">
-              <div className="flex justify-start items-center text-gray-500">
-                <UserIcon width={100} height={100} className="fill-current pointer-events-none text-gray-600 w-5 h-5" />
               </div>
             </div>
+            <div className="hidden lg:flex lg:items-center lg:justify-between xl:w-1/4 px-6 text-gray-500">
+              <Link to="/">Meadow v1.0</Link>
+              <UserIcon
+                width={100}
+                height={100}
+                className="fill-current pointer-events-none text-gray-600 w-5 h-5"
+              />
+            </div>
           </div>
         </div>
       </div>

assets/js/components/UI/ScreenHeader.jsx

@@ -3,10 +3,10 @@ import PropTypes from "prop-types";
 
 const ScreenHeader = ({ title, description = "" }) => {
   return (
-    <div className="mb-6 px-6 max-w-3xl mx-auto lg:ml-0 lg:mr-auto xl:mx-0 xl:px-12 xl:w-3/4">
+    <div className="mb-2 px-6 max-w-3xl mx-auto lg:ml-0 lg:mr-auto xl:mx-0 xl:px-12 xl:w-3/4">
       <h1>{title}</h1>
       {description && <p className="mt-0 mb-4 text-gray-600">{description}</p>}
-      <hr className="my-8 border-b-2 border-gray-200" />
+      <hr className="mt-8 mb-1 border-b-2 border-gray-200" />
     </div>
   );
 };

assets/js/screens/InventorySheet/Form.jsx

@@ -1,20 +1,59 @@
-import React from "react";
-import Main from "../../components/UI/Main";
+import React, { useEffect, useState } from "react";
 import { withRouter } from "react-router-dom";
 import InventorySheetForm from "../../components/InventorySheet/Form";
 import ScreenHeader from "../../components/UI/ScreenHeader";
 import ScreenContent from "../../components/UI/ScreenContent";
+import Breadcrumbs from "../../components/UI/Breadcrumbs";
+import { getProject } from "../../components/Project/Api";
 
 const ScreensInventorySheetForm = ({ match }) => {
   const { id } = match.params;
+  const [project, setProject] = useState(null);
+
+  useEffect(() => {
+    if (id) {
+      const fn = async () => {
+        const thisProject = await getProject(id);
+        setProject(thisProject);
+      };
+      fn();
+    }
+  }, []);
+
+  const createCrumbs = project => {
+    if (!project) {
+      return "";
+    }
+    return [
+      {
+        label: "Projects",
+        link: "/project/list"
+      },
+      {
+        label: `${project.title}`,
+        link: `/project/${id}`
+      },
+      {
+        label: "New Ingest Job",
+        link: ""
+      }
+    ];
+  };
 
   return (
     <>
-      <ScreenHeader title="New Ingest Job" description="Upload an Inventory sheet here to validate its contents and its work files exist in AWS" />
+      <ScreenHeader
+        title="New Ingest Job"
+        description="Upload an Inventory sheet here to validate its contents and its work files exist in AWS"
+      />
       <ScreenContent>
-        {id && <InventorySheetForm projectId={id} yo="yo" />}
+        {id && (
+          <>
+            {project && <Breadcrumbs crumbs={createCrumbs(project)} />}
+            <InventorySheetForm projectId={id} />
+          </>
+        )}
       </ScreenContent>
-
     </>
   );
 };

assets/js/screens/InventorySheet/InventorySheet.jsx

@@ -1,22 +1,65 @@
-import React from "react";
-import Main from "../../components/UI/Main";
+import React, { useEffect, useState } from "react";
 import { withRouter } from "react-router-dom";
 import ScreenHeader from "../../components/UI/ScreenHeader";
 import ScreenContent from "../../components/UI/ScreenContent";
 import InventorySheetStatus from "../../components/InventorySheet/Status";
+import Breadcrumbs from "../../components/UI/Breadcrumbs";
+import { getProject } from "../../components/Project/Api";
+import { getInventorySheet } from "../../components/InventorySheet/Api";
 
 const ScreensInventorySheet = ({ match }) => {
   const { id, inventorySheetId } = match.params;
+
+  const [project, setProject] = useState(null);
+  const [inventorySheet, setInventorySheet] = useState(null);
+
+  useEffect(() => {
+    if (id) {
+      const fn = async () => {
+        const thisProject = await getProject(id);
+        const thisInventorySheet = await getInventorySheet(
+          id,
+          inventorySheetId
+        );
+
+        setProject(thisProject);
+        setInventorySheet(thisInventorySheet);
+      };
+      fn();
+    }
+  }, []);
+
+  const createCrumbs = project => {
+    if (!project || !inventorySheet) {
+      return [];
+    }
+    return [
+      {
+        label: "Projects",
+        link: "/project/list"
+      },
+      {
+        label: `${project.title}`,
+        link: `/project/${id}`
+      },
+      {
+        label: `${inventorySheet.name}`,
+        link: ""
+      }
+    ];
+  };
+
   return (
     <>
-      <ScreenHeader title="Inventory Sheet" description="The following is system validation/parsing of the .csv Inventory sheet, and some helpful user feedback" />
+      <ScreenHeader
+        title="Inventory Sheet"
+        description="The following is system validation/parsing of the .csv Inventory sheet, and some helpful user feedback"
+      />
       <ScreenContent>
-        <section>
-          <h3>Id: {inventorySheetId}</h3>
-          <InventorySheetStatus inventorySheetId={inventorySheetId}/>
-        </section>
+        {project && <Breadcrumbs crumbs={createCrumbs(project)} />}
+        <p>Id: {inventorySheetId}</p>
+        <InventorySheetStatus inventorySheetId={inventorySheetId} />
       </ScreenContent>
-
     </>
   );
 };

assets/js/screens/Project/Form.jsx

@@ -2,20 +2,33 @@ import React from "react";
 import ProjectForm from "../../components/Project/Form";
 import ScreenHeader from "../../components/UI/ScreenHeader";
 import ScreenContent from "../../components/UI/ScreenContent";
+import Breadcrumbs from "../../components/UI/Breadcrumbs";
 
-export default class ScreensProjectForm extends React.Component {
-  render() {
-    return (
-      <>
-        <ScreenHeader
-          title="Create Ingest Project"
-          description="Start a new Project by creating a name for your project"
-        />
-        <ScreenContent>
-          <ProjectForm />
-        </ScreenContent>
+const ScreensProjectForm = ({}) => {
+  const createCrumbs = () => {
+    return [
+      {
+        label: "Projects",
+        link: "/project/list"
+      },
+      {
+        label: `Create Project`,
+        link: ``
+      }
+    ];
+  };
+  return (
+    <>
+      <ScreenHeader
+        title="Create Ingest Project"
+        description="Start a new Project by creating a name for your project"
+      />
+      <ScreenContent>
+        <Breadcrumbs crumbs={createCrumbs()} />
+        <ProjectForm />
+      </ScreenContent>
+    </>
+  );
+};
 
-      </>
-    );
-  }
-}
+export default ScreensProjectForm;