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

Client: Implemented new config system

Browse source
This commit is contained in:
Paweł Malak 2021-10-22 13:31:02 +02:00
parent 34279c8b8c
commit 76e50624e7
19 changed files with 625 additions and 447 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -5,7 +5,7 @@ import axios from 'axios';
import { connect } from 'react-redux';
// Typescript
import { Weather, ApiResponse, Config, GlobalState } from '../../../interfaces';
import { Weather, ApiResponse, GlobalState, Config } from '../../../interfaces';
// CSS
import classes from './WeatherWidget.module.css';
@ -13,12 +13,9 @@ import classes from './WeatherWidget.module.css';
// UI
import WeatherIcon from '../../UI/Icons/WeatherIcon/WeatherIcon';
// Utils
import { searchConfig } from '../../../utility';
interface ComponentProps {
configLoading: boolean;
config: Config[];
config: Config;
}
const WeatherWidget = (props: ComponentProps): JSX.Element => {
@ -32,26 +29,28 @@ const WeatherWidget = (props: ComponentProps): JSX.Element => {
conditionCode: 1000,
id: -1,
createdAt: new Date(),
updatedAt: new Date()
updatedAt: new Date(),
});
const [isLoading, setIsLoading] = useState(true);
// Initial request to get data
useEffect(() => {
axios.get<ApiResponse<Weather[]>>('/api/weather')
.then(data => {
axios
.get<ApiResponse<Weather[]>>('/api/weather')
.then((data) => {
const weatherData = data.data.data[0];
if (weatherData) {
setWeather(weatherData);
}
setIsLoading(false);
})
.catch(err => console.log(err));
.catch((err) => console.log(err));
}, []);
// Open socket for data updates
useEffect(() => {
const socketProtocol = document.location.protocol === 'http:' ? 'ws:' : 'wss:';
const socketProtocol =
document.location.protocol === 'http:' ? 'ws:' : 'wss:';
const socketAddress = `${socketProtocol}//${window.location.host}/socket`;
const webSocketClient = new WebSocket(socketAddress);
@ -59,43 +58,44 @@ const WeatherWidget = (props: ComponentProps): JSX.Element => {
const data = JSON.parse(e.data);
setWeather({
...weather,
...data
})
}
...data,
});
};
return () => webSocketClient.close();
}, []);
return (
<div className={classes.WeatherWidget}>
{(isLoading || props.configLoading || searchConfig('WEATHER_API_KEY', '')) &&
(weather.id > 0 &&
(<Fragment>
<div className={classes.WeatherIcon}>
<WeatherIcon
weatherStatusCode={weather.conditionCode}
isDay={weather.isDay}
/>
</div>
<div className={classes.WeatherDetails}>
{searchConfig('isCelsius', true)
? <span>{weather.tempC}°C</span>
: <span>{weather.tempF}°F</span>
}
<span>{weather.cloud}%</span>
</div>
</Fragment>)
)
}
{isLoading ||
props.configLoading ||
(props.config.WEATHER_API_KEY && weather.id > 0 && (
<Fragment>
<div className={classes.WeatherIcon}>
<WeatherIcon
weatherStatusCode={weather.conditionCode}
isDay={weather.isDay}
/>
</div>
<div className={classes.WeatherDetails}>
{props.config.isCelsius ? (
<span>{weather.tempC}°C</span>
) : (
<span>{weather.tempF}°F</span>
)}
<span>{weather.cloud}%</span>
</div>
</Fragment>
))}
</div>
)
}
);
};
const mapStateToProps = (state: GlobalState) => {
return {
configLoading: state.config.loading,
config: state.config.config
}
}
config: state.config.config,
};
};
export default connect(mapStateToProps)(WeatherWidget);
export default connect(mapStateToProps)(WeatherWidget);