Add state persistance function

src/components/main/Root.tsx

@@ -2,68 +2,31 @@ import React, { useState, useEffect } from "react";
 import { LineChart, Line, CartesianGrid, XAxis, YAxis } from "recharts";
 import { format, addDays } from "date-fns";
 import { Dashboard } from "@/components/main/routes/Dashboard";
+import {
+  loadStorageOrDefault,
+  persistStorage,
+} from "@/components/main/lib/state";
+import { mergeDeepRight } from "ramda";
 
-const formatDate = function (dateTime) {
-  return format(dateTime, "yyyy-MM-dd");
-};
-
-const fetchWeekForecastData = async function (dateTime, cb) {
-  const formattedDate = formatDate(dateTime);
-
-  const forecastRequests = Array.from({ length: 7 }).map((_, index) => {
-    const date = addDays(dateTime, index);
-    const formattedDate = format(date, "yyyy-MM-d");
-    const url = `http://api.weatherapi.com/v1/future.json?key=bfca7632f8dc4253859120435242301&q=Vienna&dt=${formattedDate}`;
-    const dataPromise = fetch(url).then((x) => x.json());
-
-    return dataPromise;
-  });
-
-  const data = await Promise.all(forecastRequests);
-
-  console.log(data);
-
-  const chartData = data.map((forecastData) => {
-    const dayData = forecastData.forecast.forecastday[0];
-    const date = dayData.date;
-    const { avgtemp_c, mintemp_c, maxtemp_c } = dayData.day;
-
-    return {
-      name: date,
-      avgtemp_c,
-      mintemp_c,
-      maxtemp_c,
-    };
-  });
-
-  cb(chartData);
-};
-
-const WeatherChart = function ({ data }) {
-  return (
-    <LineChart width={400} height={400} data={data}>
-      <Line type="monotone" dataKey="avgtemp_c" stroke="#8884d8" />
-      <Line type="monotone" dataKey="mintemp_c" stroke="#8884d8" />
-      <Line type="monotone" dataKey="maxtemp_c" stroke="#8884d8" />
-      <CartesianGrid stroke="#ccc" />
-      <XAxis dataKey="name" />
-      <YAxis />
-    </LineChart>
-  );
-};
+const STORAGE_KEY = "ecoplanet";
 
 const App: React.FC = () => {
-  const [options, setOptions] = useState({
-    lineWidth: undefined,
-    defaultDate: undefined,
-  });
+  const [state, setState] = useState(loadStorageOrDefault);
+
+  useEffect(() => {
+    persistStorage(state);
+  }, [state]);
+
+  const updateState = function (newState) {
+    setState(mergeDeepRight(state, newState));
+  };
 
   return (
     <div className="fixed top-0 right-0 bottom-0 left-0 flex">
       <main className="flex grow flex-col">
         <nav className="flex p-3 border-b border-solid border-slate-300"></nav>
         <div className="flex grow items-center justify-center h-full w-full">
-          <Dashboard startDate={options.defaultDate} />
+          <Dashboard state={state} updateState={updateState} />
         </div>
       </main>
     </div>

src/components/main/lib/state.ts

@@ -0,0 +1,36 @@
+import { modifyPath, mergeDeepRight } from "ramda";
+
+const STORAGE_KEY = "ecoplanet";
+
+const defaultState = {
+  dateCache: undefined,
+  options: {
+    lineWidth: undefined,
+    defaultDate: undefined,
+  },
+};
+
+const stringifyState = function (state) {
+  return JSON.stringify(state);
+};
+
+const parseState = function (jsonString) {
+  const state = JSON.parse(jsonString);
+  return modifyPath(["options", "defaultDate"], Date.parse, state);
+};
+
+export const persistStorage = function (state) {
+  localStorage.setItem(STORAGE_KEY, stringifyState(state));
+};
+
+export const loadStorage = function () {
+  const storageStateString = localStorage.getItem(STORAGE_KEY);
+
+  if (storageStateString) {
+    return parseState(storageStateString);
+  }
+};
+
+export const loadStorageOrDefault = function (state) {
+  return mergeDeepRight(loadStorage(), defaultState);
+};

src/components/main/routes/Dashboard.tsx

@@ -52,8 +52,10 @@ const WeatherChart = function ({ data }) {
   );
 };
 
-export const Dashboard = function ({ startDate = new Date() }) {
-  const [dateTime, setDateTime] = useState(minDate(startDate));
+export const Dashboard = function ({ state, updateCache }) {
+  const [dateTime, setDateTime] = useState(
+    minDate(state?.options?.startDate || new Date()),
+  );
   const [data, setData] = useState(null);
 
   useEffect(() => {