import React from
'react'
;
import { BrowserRouter, Routes,Route } from
'react-router-dom'
;
import { useState, useEffect } from
'react'
;
import { WiDaySunny,WiCloud, WiNightCloudy,WiHumidity, WiNightClear } from
'react-icons/wi'
;
import Layout from
'./Layout'
;
import Home from
'./Home'
;
import Minutecast from
'./Minutecast'
;
import Hourly from
'./Hourly'
;
import Today from
'./Today'
;
import
'../App.css'
;
const
WeatherApp = () => {
const
[data, setData] = useState([]);
const
[query, setQuery] = useState(
'Accra'
);
const
handleQueryChange = (data) => {
setQuery(data.location.name);
}
const
getWeatherIcons = (description) =>{
switch
(description.toLowerCase()) {
case
'sunny'
:
return
<WiDaySunny size=
'100px'
/>;
case
'cloud'
:
return
<WiCloud size=
'100px'
/>;
case
'clear'
:
return
<WiNightClear size=
'100px'
/>;
case
'partly cloudy'
:
return
<WiNightCloudy size=
'150px'
color=
'blue'
/>;
default
:
return
<WiDaySunny color=
'red'
size=
'100px'
/>;
}
}
const
convertToWhole = (tem) =>{
const
whole = Math.trunc(tem);
return
whole;
}
useEffect(()=>{
const
fetchWeatherData = async () => {
try
{
const
response = await fetch(`https:
const
result = await response.json();
setData(result);
console.log(result);
}
catch
(error) {
console.error(
"Error fetching weather data:"
, error);
}
};
fetchWeatherData();
}, [data]);
return
( <>
<div className=
"formContainer"
>
{
}
</div>
<BrowserRouter>
<Routes>
<Route path =
'/'
element={< Layout />}>
<Route index element={<Home data={data} getWeatherIcons={getWeatherIcons} convertToWhole={convertToWhole}/>} />
<Route path=
'minutecast'
element={<Minutecast />}/>
<Route path=
'hourly'
element={<Hourly data={data} convertToWhole={convertToWhole}/>}/>
<Route path=
'today'
element={<Today data={data} />}/>
</Route>
</Routes>
</BrowserRouter>
</>
)
}
export
default
WeatherApp;