diff --git a/src/components/errorModal.tsx b/src/components/errorModal.tsx index f323ee0..2d11c91 100644 --- 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 ( {

Using Fallback Data

There was an issue grabbing the latest caniuse.com data.

-

No worries, reverting to backup caniuse.com data from {date}.

+ {canIUseDataUpdated && ( +

+ No worries, reverting to backup caniuse.com data from {date}. +

+ )}
diff --git a/src/components/experience.tsx b/src/components/experience.tsx index e29723f..2c4479e 100644 --- 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() {
- 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, }} >