Fix state persistence

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);

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());
 };

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 }));
+    console.log("DASHBOARD DATA", state);
-  }, [dateTime]);
+    if (!data) {
+      fetchWeekForecastData(dateTime, (data) =>
+        updateState({
+          dataCache: {
+            [dateKey]: data,
+          },
+        }),
+      );
+    }
+  }, [state.dataCache, dateTime]);
 
   return (
     <div className="flex p-5 bg-white border border-solid border-slate-300 rounded-lg space-y-5">
@@ -65,7 +78,12 @@ export const Dashboard = function ({ state, updateState }) {
         <h1 className="text-lg font-medium mb-2">Forecast</h1>
         <ForecastDatePicker dateTime={dateTime} onChange={setDateTime} />
       </div>
-      {state.dataCache ? <WeatherChart data={state.dataCache} /> : "Loading..."}
+      <div
+        className="flex items-center justify-center"
+        style={{ minHeight: 400, minWidth: 400 }}
+      >
+        {data ? <WeatherChart data={data} /> : "Loading..."}
+      </div>
     </div>
   );
 };