Merge pull request #463 from alexlee-dev/broken-details

Broken details
actuallyReallyAlex · Nov 10, 2020 · 088d629 · 088d629
2 parents f20180d + 4328771
commit 088d629
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 35 deletions.
diff --git a/src/client/App.tsx b/src/client/App.tsx
@@ -12,6 +12,7 @@ const NotFound = React.lazy(() => import("./routes/NotFound"));
 
 import { ErrorResponse, PortfolioItemDocument } from "./types";
 import { isError } from "./util";
+import getPortfolioItems from "./data/getPortfolioItems";
 
 theme.fonts = {
   body: "'Poppins', sans-serif",
@@ -26,30 +27,17 @@ const App: React.FunctionComponent<unknown> = () => {
   );
 
   React.useEffect(() => {
-    const getPortfolioItems = async (): Promise<
-      PortfolioItemDocument[] | { error: Error }
-    > => {
-      try {
-        const response = await fetch("/portfolioItems", {
-          headers: {
-            "Content-Type": "application/json",
-          },
-        });
-        const data:
-          | ErrorResponse
-          | PortfolioItemDocument[] = await response.json();
+    const getData = async () => {
+      const data = await getPortfolioItems();
 
-        if (isError(data)) {
-          console.error(data);
-        } else {
-          setPortfolioItems(data);
-        }
-      } catch (error) {
-        console.error(error);
-        return { error };
+      if (isError(data)) {
+        console.error(data);
+      } else {
+        setPortfolioItems(data);
       }
     };
-    getPortfolioItems();
+
+    getData();
   }, []);
 
   return (
@@ -73,7 +61,10 @@ const App: React.FunctionComponent<unknown> = () => {
               />
             </Route>
             <Route path="/portfolio/:id">
-              <PortfolioItemDetails portfolioItems={portfolioItems} />
+              <PortfolioItemDetails
+                portfolioItems={portfolioItems}
+                setPortfolioItems={setPortfolioItems}
+              />
             </Route>
             <Route>
               <NotFound />

diff --git a/src/client/data/getPortfolioItems.ts b/src/client/data/getPortfolioItems.ts
@@ -0,0 +1,21 @@
+import { ErrorResponse, PortfolioItemDocument } from "../types";
+
+const getPortfolioItems = async (): Promise<
+  PortfolioItemDocument[] | ErrorResponse
+> => {
+  try {
+    const response = await fetch("/portfolioItems", {
+      headers: {
+        "Content-Type": "application/json",
+      },
+    });
+    const data: ErrorResponse | PortfolioItemDocument[] = await response.json();
+
+    return data;
+  } catch (error) {
+    console.error(error);
+    return { error };
+  }
+};
+
+export default getPortfolioItems;
diff --git a/src/client/routes/PortfolioItemDetails.tsx b/src/client/routes/PortfolioItemDetails.tsx
@@ -5,10 +5,14 @@ import BackButton from "../components/BackButton";
 
 const NotFound = React.lazy(() => import("../routes/NotFound"));
 
+import getPortfolioItems from "../data/getPortfolioItems";
+
+import { isError } from "../util";
 import { PortfolioItemDocument } from "../types";
 
 export interface PortfolioItemDetailsProps {
   portfolioItems: PortfolioItemDocument[];
+  setPortfolioItems: (portfolioItems: PortfolioItemDocument[]) => void;
 }
 
 const PortfolioItemDetails: React.FunctionComponent<PortfolioItemDetailsProps> = (
@@ -19,24 +23,43 @@ const PortfolioItemDetails: React.FunctionComponent<PortfolioItemDetailsProps> =
   const [currentPortfolioItem, setCurrentPortfolioItem] = React.useState(null);
   const [notFound, setNotFound] = React.useState(false);
 
-  const { portfolioItems } = props;
+  const { portfolioItems, setPortfolioItems } = props;
 
   React.useEffect(() => {
+    const checkData = async () => {
+      try {
+        let item: PortfolioItemDocument = null;
+
+        if (portfolioItems.length === 0) {
+          // * Fetch portfolioItems
+          const data = await getPortfolioItems();
+
+          if (isError(data)) {
+            console.error(data);
+          } else {
+            setPortfolioItems(data);
+            item = data.find((item) => item._id === portfolioItemId);
+          }
+        } else {
+          item = portfolioItems.find((item) => item._id === portfolioItemId);
+        }
+
+        if (item) {
+          setCurrentPortfolioItem(item);
+        } else {
+          setNotFound(true);
+        }
+      } catch (error) {
+        console.error(error);
+      }
+    };
     window.scrollTo(0, 0);
 
-    if (
-      !portfolioItemId.match(
-        /^[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{12}$/
-      )
-    ) {
-      setNotFound(true);
+    // * Catch any weird path that isn't an ObjectID
+    if (!portfolioItemId.match(/^[a-f\d]{24}$/i)) {
+      return setNotFound(true);
     } else {
-      const item = portfolioItems.find((item) => item._id === portfolioItemId);
-      if (item) {
-        setCurrentPortfolioItem(item);
-      } else {
-        setNotFound(true);
-      }
+      checkData();
     }
   }, []);