diff --git a/src/components/main/Root.tsx b/src/components/main/Root.tsx index 8ea1d69..cf18798 100644 --- a/src/components/main/Root.tsx +++ b/src/components/main/Root.tsx @@ -70,7 +70,7 @@ const Base = function ({ children }) { }; const App: React.FC = () => { - const [state, setState] = useState(loadStorageOrDefault); + const [state, setState] = useState(loadStorageOrDefault()); useEffect(() => { persistStorage(state); diff --git a/src/components/main/lib/state.ts b/src/components/main/lib/state.ts index ff542db..430bcd7 100644 --- a/src/components/main/lib/state.ts +++ b/src/components/main/lib/state.ts @@ -32,5 +32,5 @@ export const loadStorage = function () { }; export const loadStorageOrDefault = function (state) { - return mergeDeepRight(loadStorage(), defaultState); + return mergeDeepRight(defaultState, loadStorage()); }; diff --git a/src/components/main/routes/Dashboard.tsx b/src/components/main/routes/Dashboard.tsx index 6519e19..18f08be 100644 --- a/src/components/main/routes/Dashboard.tsx +++ b/src/components/main/routes/Dashboard.tsx @@ -6,6 +6,7 @@ import { minDate, ForecastDatePicker, } from "@/components/ui/DatePicker"; +import { path } from "ramda"; const fetchWeekForecastData = async function (dateTime, cb) { const formattedDate = formatDate(dateTime); @@ -55,9 +56,21 @@ export const Dashboard = function ({ state, updateState }) { minDate(state?.options?.startDate || new Date()), ); + const dateKey = formatDate(dateTime); + const data = path(["dataCache", dateKey], state); + useEffect(() => { - fetchWeekForecastData(dateTime, (data) => updateState({ dataCache: data })); - }, [dateTime]); + console.log("DASHBOARD DATA", state); + if (!data) { + fetchWeekForecastData(dateTime, (data) => + updateState({ + dataCache: { + [dateKey]: data, + }, + }), + ); + } + }, [state.dataCache, dateTime]); return (
@@ -65,7 +78,12 @@ export const Dashboard = function ({ state, updateState }) {

Forecast

- {state.dataCache ? : "Loading..."} +
+ {data ? : "Loading..."} +
); };