Move dashboardi into own route

src/components/main/routes/Dashboard.tsx

@@ -0,0 +1,69 @@
+import React, { useState, useEffect } from "react";
+import { LineChart, Line, CartesianGrid, XAxis, YAxis } from "recharts";
+import { format, addDays } from "date-fns";
+import {
+  formatDate,
+  minDate,
+  ForecastDatePicker,
+} from "@/components/ui/DatePicker";
+
+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>
+  );
+};
+
+export const Dashboard = function ({ startDate = new Date() }) {
+  const [dateTime, setDateTime] = useState(minDate(startDate));
+  const [data, setData] = useState(null);
+
+  useEffect(() => {
+    fetchWeekForecastData(dateTime, setData);
+  }, [dateTime]);
+
+  return (
+    <div>
+      <ForecastDatePicker dateTime={dateTime} onChange={setDateTime} />
+      {data ? <WeatherChart data={data} /> : "Loading..."}
+    </div>
+  );
+};