flush out support for displaying project on card

frontend/src/components/Board/Card.js

@@ -105,7 +105,8 @@ function BoardCard({ data, classes }) {
           size="small"
           className={classes.chip}
         /> */}
-        {/* <Chip label={data.field_project.id} size="small" /> */}
+        {/* performance problem until dupe requests can be queued. */}
+        {/* <ProjectChip id={data.field_project.id} /> */}
       </CardActions>
     </Card>
   );

frontend/src/components/Board/ProjectChip.js

@@ -0,0 +1,13 @@
+import React from "react";
+import useProjectInfo from "../../hooks/projectInfo";
+import { Chip } from "@material-ui/core";
+
+const ProjectChip = ({ id }) => {
+  const project = useProjectInfo(id);
+  if (project) {
+    return <Chip label={project.title} size="small" />;
+  } else {
+    return null;
+  }
+};
+export default ProjectChip;

frontend/src/hooks/projectInfo.js

@@ -0,0 +1,33 @@
+import { useState, useEffect } from "react";
+import { drupalApiFetch } from "../api";
+
+const useProjectInfo = (id) => {
+  const [project, setProject] = useState(null);
+  useEffect(() => {
+    async function doFetch() {
+      const res = await drupalApiFetch(`/node/${id}.json`);
+      if (!res.ok) {
+        setProject(null);
+        // there was an error, prevent spamming the API.
+      } else {
+        const json = await res.json();
+        if (json.type === "project_module") {
+          setProject(json);
+        } else {
+          setProject(null);
+        }
+      }
+    }
+    if (id && id !== "") {
+      if (parseInt(id) === 3060) {
+        setProject({
+          title: "Drupal core",
+        });
+      } else {
+        doFetch();
+      }
+    }
+  }, [id]);
+  return project;
+};
+export default useProjectInfo;