Docker/flame
Docker/flame
1
0
Fork 0
mirror of https://github.com/pawelmalak/flame.git synced 2025-07-20 03:59:36 +02:00
Code Issues Releases Wiki Activity

Update bookmark. Changes to CSS. Changes to WeatherJob

Browse source
This commit is contained in:
unknown 2021-06-01 14:54:47 +02:00
parent 519b6d0746
commit 96aa1f7d69
11 changed files with 165 additions and 36 deletions
Download patch file Download diff file Expand all files Collapse all files

57
client/src/components/Widgets/WeatherWidget/WeatherWidget.tsx
View file

@ -14,38 +14,65 @@ const WeatherWidget = (): JSX.Element => {
isDay: 1,
conditionText: '',
conditionCode: 1000,
id: 0,
id: -1,
createdAt: new Date(),
updatedAt: new Date()
});
const [isLoading, setIsLoading] = useState(true);
// Initial request to get data
useEffect(() => {
axios.get<ApiResponse<Weather[]>>('/api/weather')
.then(data => {
setWeather(data.data.data[0]);
const weatherData = data.data.data[0];
if (weatherData) {
setWeather(weatherData);
}
setIsLoading(false);
})
.catch(err => console.log(err));
}, []);
// Open socket for data updates
useEffect(() => {
const webSocketClient = new WebSocket('ws://localhost:5005');
webSocketClient.onopen = () => {
console.log('WebSocket opened');
}
webSocketClient.onclose = () => {
console.log('WebSocket closed')
}
webSocketClient.onmessage = (e) => {
const data = JSON.parse(e.data);
setWeather({
...weather,
...data
})
}
return () => webSocketClient.close();
}, []);
return (
<div className={classes.WeatherWidget}>
{isLoading
? 'loading'
: (
<Fragment>
<div className={classes.WeatherIcon}>
<WeatherIcon
weatherStatusCode={weather.conditionCode}
isDay={weather.isDay}
/>
</div>
<div className={classes.WeatherDetails}>
<span>{weather.tempC}°C</span>
<span>{weather.conditionCode}</span>
</div>
</Fragment>
: (weather.id > 0 &&
(<Fragment>
<div className={classes.WeatherIcon}>
<WeatherIcon
weatherStatusCode={weather.conditionCode}
isDay={weather.isDay}
/>
</div>
<div className={classes.WeatherDetails}>
<span>{weather.tempC}°C</span>
<span>{weather.conditionCode}</span>
</div>
</Fragment>)
)
}
</div>