Use cache

src/components/main/Root.tsx

@@ -50,7 +50,7 @@ const Navigation = function ({ router }) {
           const id = route.id;
           const className = id === activeRouteId ? "font-bold" : "";
           return (
-            <li className={className}>
+            <li className={className} key={id}>
               <button onClick={() => onUpdateRoute(route.path)}>{id}</button>
             </li>
           );

src/components/main/lib/state.ts

@@ -3,7 +3,7 @@ import { modifyPath, mergeDeepRight } from "ramda";
 const STORAGE_KEY = "ecoplanet";
 
 const defaultState = {
-  dateCache: undefined,
+  dataCache: undefined,
   options: {
     lineWidth: undefined,
     defaultDate: undefined,

src/components/main/routes/Dashboard.tsx

@@ -21,8 +21,6 @@ const fetchWeekForecastData = async function (dateTime, cb) {
 
   const data = await Promise.all(forecastRequests);
 
-  console.log(data);
-
   const chartData = data.map((forecastData) => {
     const dayData = forecastData.forecast.forecastday[0];
     const date = dayData.date;
@@ -52,14 +50,13 @@ const WeatherChart = function ({ data }) {
   );
 };
 
-export const Dashboard = function ({ state, updateCache }) {
+export const Dashboard = function ({ state, updateState }) {
   const [dateTime, setDateTime] = useState(
     minDate(state?.options?.startDate || new Date()),
   );
-  const [data, setData] = useState(null);
 
   useEffect(() => {
-    fetchWeekForecastData(dateTime, setData);
+    fetchWeekForecastData(dateTime, (data) => updateState({ dataCache: data }));
   }, [dateTime]);
 
   return (
@@ -68,7 +65,7 @@ export const Dashboard = function ({ state, updateCache }) {
         <h1 className="text-lg font-medium mb-2">Forecast</h1>
         <ForecastDatePicker dateTime={dateTime} onChange={setDateTime} />
       </div>
-      {data ? <WeatherChart data={data} /> : "Loading..."}
+      {state.dataCache ? <WeatherChart data={state.dataCache} /> : "Loading..."}
     </div>
   );
 };