Docker/flame
Docker/flame
1
0
Fork 0
mirror of https://github.com/pawelmalak/flame.git synced 2025-07-23 13:29:35 +02:00
Code Issues Releases Wiki Activity

Components: refactored UI components to use new state. Minor changes to exports and props

Browse source
This commit is contained in:
Paweł Malak 2021-11-09 13:46:07 +01:00
parent adc017c48d
commit 89d935e27f
16 changed files with 118 additions and 146 deletions
Download patch file Download diff file Expand all files Collapse all files

29
client/src/components/UI/Icons/WeatherIcon/WeatherIcon.tsx
View file

@ -1,39 +1,32 @@
import { useEffect } from 'react';
import { connect } from 'react-redux';
import { useSelector } from 'react-redux';
import { Skycons } from 'skycons-ts';
import { GlobalState, Theme } from '../../../../interfaces';
import { State } from '../../../../store/reducers';
import { IconMapping, TimeOfDay } from './IconMapping';
interface ComponentProps {
theme: Theme;
interface Props {
weatherStatusCode: number;
isDay: number;
}
const WeatherIcon = (props: ComponentProps): JSX.Element => {
export const WeatherIcon = (props: Props): JSX.Element => {
const { theme } = useSelector((state: State) => state.theme);
const icon = props.isDay
? new IconMapping().mapIcon(props.weatherStatusCode, TimeOfDay.day)
: new IconMapping().mapIcon(props.weatherStatusCode, TimeOfDay.night);
useEffect(() => {
const delay = setTimeout(() => {
const skycons = new Skycons({'color': props.theme.colors.accent});
const skycons = new Skycons({ color: theme.colors.accent });
skycons.add(`weather-icon`, icon);
skycons.play();
}, 1);
return () => {
clearTimeout(delay);
}
}, [props.weatherStatusCode, icon, props.theme.colors.accent]);
};
}, [props.weatherStatusCode, icon, theme.colors.accent]);
return <canvas id={`weather-icon`} width='50' height='50'></canvas>
}
const mapStateToProps = (state: GlobalState) => {
return {
theme: state.theme.theme
}
}
export default connect(mapStateToProps)(WeatherIcon);
return <canvas id={`weather-icon`} width="50" height="50"></canvas>;
};