separate db data from storage context provider

Author: yethranayeh

src/pages/Home/Home.tsx

@@ -1,11 +1,8 @@
 import { CurrencyMapProvider } from "@/utils/CurrencyMapProvider";
-import { StorageProvider } from "@/utils/StorageProvider";
 import { CalculationView } from "./CalculationView";
 
 export const Home = () => (
 	<CurrencyMapProvider mode='latest'>
-		<StorageProvider>
-			<CalculationView />
-		</StorageProvider>
+		<CalculationView />
 	</CurrencyMapProvider>
 );

src/routes/layout/MainLayout.tsx

@@ -6,20 +6,23 @@ import { Footer } from "./Footer";
 
 import { AuthGuard } from "@/utils/AuthGuard";
 import ErrorBoundary from "@/components/ErrorBoundary";
+import { StorageProvider } from "@/utils/StorageProvider";
 
 export function MainLayout() {
 	return (
 		<div className='flex flex-col gap-4 min-h-screen overflow-x-hidden'>
 			<AuthGuard>
-				<ErrorBoundary>
-					<Header />
-					<SideMenu />
+				<StorageProvider>
+					<ErrorBoundary>
+						<Header />
+						<SideMenu />
 
-					<div className='w-full flex flex-1 justify-center px-4'>
-						<Outlet />
-					</div>
-					<Footer />
-				</ErrorBoundary>
+						<div className='w-full flex flex-1 justify-center px-4'>
+							<Outlet />
+						</div>
+						<Footer />
+					</ErrorBoundary>
+				</StorageProvider>
 			</AuthGuard>
 		</div>
 	);

src/utils/CurrencyMapProvider.tsx

@@ -1,12 +1,16 @@
 import { useContext, useEffect, useState, type PropsWithChildren } from "react";
 import { collection, getDocs, limit, orderBy, query, where } from "firebase/firestore";
-import { DatabaseContext } from "@/context/DatabaseContext";
+import { sub } from "date-fns";
+
+import { useStorage } from "@/hooks/useStorage";
+
 import { CenterChild } from "@/components/CenterChild";
 import { Alert, AlertDescription, AlertTitle } from "@/components/shadcn/Alert";
 import { Button } from "@/components/shadcn/Button";
 import { Gears } from "@/components/Gears";
+
+import { DatabaseContext } from "@/context/DatabaseContext";
 import { CurrencyMapContext } from "@/context/CurrencyMapContext";
-import { sub } from "date-fns";
 
 interface CurrencyMapProviderProps extends PropsWithChildren {
 	mode: "latest" | "monthly";
@@ -15,6 +19,7 @@ interface CurrencyMapProviderProps extends PropsWithChildren {
 export function CurrencyMapProvider({ mode, children }: CurrencyMapProviderProps) {
 	const db = useContext(DatabaseContext);
 	const [currencyMap, setCurrencyMap] = useState<RateDefinitions[] | null>(null);
+	const storage = useStorage();
 
 	const [error, setError] = useState<string | null>(null);
 	const [isLoadingDelayed, setIsLoadingDelayed] = useState(false);
@@ -82,6 +87,16 @@ export function CurrencyMapProvider({ mode, children }: CurrencyMapProviderProps
 		return () => clearTimeout(loadingDelayTimeout);
 	}, [db, mode]);
 
+	useEffect(() => {
+		if (currencyMap?.length) {
+			const latest = currencyMap.slice(-1)[0];
+
+			if (storage.cache?.meta.createdAt !== latest.meta.createdAt) {
+				storage.setCache(latest);
+			}
+		}
+	}, [currencyMap, storage.cache]);
+
 	if (error) {
 		return (
 			<CenterChild>

src/utils/StorageProvider.tsx

@@ -1,11 +1,9 @@
-import { useEffect, useMemo, useState, type PropsWithChildren } from "react";
+import { useMemo, useState, type PropsWithChildren } from "react";
 
 import { getCache, getPreferences, setCache, setPreferences } from "./storage";
 import { StorageContext } from "../context/StorageContext";
-import { useCurrencyMapData } from "../hooks/useCurrencyMap";
 
 export function StorageProvider(props: PropsWithChildren) {
-	const currencyMap = useCurrencyMapData()![0];
 	const [cacheState, setCacheState] = useState(getCache());
 	const [preferencesState, setPreferencesState] = useState(getPreferences());
 
@@ -37,11 +35,5 @@ export function StorageProvider(props: PropsWithChildren) {
 		[cacheState, preferencesState]
 	);
 
-	useEffect(() => {
-		if (currencyMap) {
-			update("cache", currencyMap);
-		}
-	}, [currencyMap]);
-
 	return <StorageContext.Provider value={value}>{props.children}</StorageContext.Provider>;
 }