diff --git a/src/components/main/Root.tsx b/src/components/main/Root.tsx index 0348369..71a3ae0 100644 --- a/src/components/main/Root.tsx +++ b/src/components/main/Root.tsx @@ -7,7 +7,7 @@ const fetchWeekForecastData = async function (dateTime, cb) { const forecastRequests = Array.from({ length: 7 }).map((_, index) => { const date = addDays(dateTime, index); - const formattedDate = format(dateTime, "yyyy-MM-d"); + 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()); @@ -16,18 +16,36 @@ const fetchWeekForecastData = async function (dateTime, cb) { const data = await Promise.all(forecastRequests); - cb(data); + 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 ( + + + + + + + + + ); }; - const App: React.FC = () => { const [data, setData] = useState(null); @@ -35,8 +53,6 @@ const App: React.FC = () => { fetchWeekForecastData(addDays(new Date(), 14), setData); }, []); - console.log(data); - return (
{data ? : "Loading..."}