From a177aaedea61b66cadaa27950eddcc0134ea6b67 Mon Sep 17 00:00:00 2001
From: Florian Schroedl <flo.schroedl@gmail.com>
Date: Tue, 23 Jan 2024 16:56:24 +0100
Subject: [PATCH] Use cache

---
 src/components/main/Root.tsx             | 2 +-
 src/components/main/lib/state.ts         | 2 +-
 src/components/main/routes/Dashboard.tsx | 9 +++------
 3 files changed, 5 insertions(+), 8 deletions(-)

diff --git a/src/components/main/Root.tsx b/src/components/main/Root.tsx
index f5b1f5c..8ea1d69 100644
--- a/src/components/main/Root.tsx
+++ b/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>
           );
diff --git a/src/components/main/lib/state.ts b/src/components/main/lib/state.ts
index b0dba70..ff542db 100644
--- a/src/components/main/lib/state.ts
+++ b/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,
diff --git a/src/components/main/routes/Dashboard.tsx b/src/components/main/routes/Dashboard.tsx
index 4be2917..6519e19 100644
--- a/src/components/main/routes/Dashboard.tsx
+++ b/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>
   );
 };