Fetch 14 day forecast data

src/components/main/Root.tsx

@@ -1,9 +1,11 @@
 import React, { useState, useEffect } from "react";
-import { LineChart, Line } from "recharts";
+import { LineChart, Line, CartesianGrid, XAxis, YAxis } from "recharts";
+import { format, addDays } from "date-fns";
 
-const onWeatherFetch = async function (cb) {
+const fetchWeekForecastData = async function (dateTime, cb) {
+  const formattedDate = format(dateTime, "yyyy-MM-d");
   const response = await fetch(
-    "http://api.weatherapi.com/v1/current.json?key=bfca7632f8dc4253859120435242301&q=Vienna&aqi=no",
+    `http://api.weatherapi.com/v1/future.json?key=bfca7632f8dc4253859120435242301&q=Vienna&dt=${formattedDate}`,
   );
   const data = await response.json();
 
@@ -13,6 +15,9 @@ const onWeatherFetch = async function (cb) {
 const WeatherChart = function ({ data }) {
   <LineChart width={400} height={400} data={data}>
     <Line type="monotone" dataKey="uv" stroke="#8884d8" />
+    <CartesianGrid stroke="#ccc" />
+    <XAxis dataKey="name" />
+    <YAxis />
   </LineChart>;
 };
 
@@ -20,7 +25,7 @@ const App: React.FC = () => {
   const [data, setData] = useState(null);
 
   useEffect(() => {
-    onWeatherFetch(setData);
+    fetchWeekForecastData(addDays(new Date(), 14), setData);
   }, []);
 
   console.log(data);