only allow valid hashes, and refactors

shalanah · Mar 27, 2024 · bb39c5f · bb39c5f
1 parent 01417d2
commit bb39c5f
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 18 deletions.
diff --git a/src/components/errorModal.tsx b/src/components/errorModal.tsx
@@ -22,18 +22,17 @@ const Div = styled.div`
 `;
 
 export const ErrorModal = () => {
-  const { hasError, canIUseData, setHasError } = useCanIUseContext();
+  const { hasError, canIUseDataUpdated, setHasError } = useCanIUseContext();
 
   if (!hasError) return null;
 
-  const date = new Date(canIUseData?.updated * 1000).toLocaleDateString(
-    undefined,
-    {
-      year: 'numeric',
-      month: 'long',
-      day: 'numeric',
-    }
-  );
+  const date = canIUseDataUpdated
+    ? new Date(canIUseDataUpdated * 1000).toLocaleDateString(undefined, {
+        year: 'numeric',
+        month: 'long',
+        day: 'numeric',
+      })
+    : 'unknown';
   return (
     <Dialog.Root
       open={hasError}
@@ -47,7 +46,11 @@ export const ErrorModal = () => {
           <Div>
             <h2>Using Fallback Data</h2>
             <p>There was an issue grabbing the latest caniuse.com data.</p>
-            <p>No worries, reverting to backup caniuse.com data from {date}.</p>
+            {canIUseDataUpdated && (
+              <p>
+                No worries, reverting to backup caniuse.com data from {date}.
+              </p>
+            )}
           </Div>
           <DialogClose>
             <Cross2Icon />

diff --git a/src/components/experience.tsx b/src/components/experience.tsx
@@ -1,7 +1,7 @@
 import { Suspense, useEffect, useRef } from 'react';
 import { Center } from '@react-three/drei';
 import { Model } from './milkcarton';
-import { Text } from './text';
+import { MilkCartonText } from './milkcartontext';
 import useCanIUseContext from '../hooks/useCanIUseContext';
 import usePrevious from '../hooks/usePrevious';
 import { a, useSpring } from '@react-spring/three';
@@ -132,7 +132,7 @@ export default function Experience() {
         <Center disableZ disableX>
           <a.group {...(spring as any)} {...bind()}>
             <Model />
-            <Text
+            <MilkCartonText
               rotation={rotation}
               index={activeIndex}
               position={position}

diff --git a/src/components/text.tsx → src/components/milkcartontext.tsx b/src/components/text.tsx → src/components/milkcartontext.tsx
@@ -99,7 +99,7 @@ const H1 = styled.h1`
   align-self: stretch;
 `;
 
-export const Text = ({
+export const MilkCartonText = ({
   position,
   index,
   rotation,

diff --git a/src/hooks/useCanIUseContext.tsx b/src/hooks/useCanIUseContext.tsx
@@ -62,7 +62,7 @@ interface CanIUseContextInterface {
     e?: Event;
     featureActive?: boolean;
   }) => void;
-  canIUseData: any;
+  canIUseDataUpdated: number | undefined;
   setHasError: (error: boolean) => void;
   filteredByBrowser: any;
 }
@@ -143,10 +143,17 @@ export const CanIUseContextProvider = ({
     iOSLacking.length > 0 ? iOSLacking.findIndex((v) => v.key === hash) : -1;
   if (activeIndex === -1 && iOSLacking.length > 0) activeIndex = 0;
 
-  // on mount... if hash doesn't exist remove hash
+  // If hash doesn't exist remove hash
   useEffect(() => {
-    if (activeIndex === -1 && iOSLacking.length > 0 && hash) updateHash('');
-  }, [updateHash, activeIndex, iOSLacking.length, hash]);
+    // Let's just remove if ever the hash is not found
+    if (
+      iOSLacking.length > 0 &&
+      activeIndex !== -1 &&
+      hash !== iOSLacking[activeIndex]?.key
+    ) {
+      updateHash('');
+    }
+  }, [updateHash, activeIndex, iOSLacking, hash]);
 
   // MDN DATA: TODO: Later
   // If Safari brings up that caniuse data isn't up-to-date...
@@ -296,7 +303,7 @@ export const CanIUseContextProvider = ({
         filteredByBrowser,
         setFilters,
         setNextFeature,
-        canIUseData,
+        canIUseDataUpdated: canIUseData?.updated,
         setHasError,
       }}
     >