const Home = (props) => {
const dispatch = useDispatch()
const { isLoading } = useSelector(state => state.currentWeather)
const { activeWeatherForecast } = useSelector(state => state.currentWeekday)
const weatherParts = 500
let weatherPart = []
React.useEffect(() => {
dispatch(fetchCurrentWeather())
}, [])
for (let i = 0; i < weatherParts; i++) {
weatherPart.push([renderPositionY(), renderPositionX()])
}
const getParts = () => {
return (<div className={s.weatherWrapper}>{weatherPart.map(elem => {
return (<div className={s.weatherParts} style={{
top: `${elem[0]}px`,
left: `${elem[1]}px`,
position: "absolute",
background: '#a6a5ff',
width: '1px',
height: '15px',
transform: 'rotate(25deg)'
}}></div>)
})}</div>)
}
return (
<div>
{isLoading ? <div className={s.loading}>Loading...</div> : (<div>
<div>
{weatherPart.length > 0 && getParts()}
</div>
<div className={s.mainLine}>
<ThisDay />
<ThisDayInfo />
</div>
<Tabs />
<Days />
</div>)}
</div>
)
}
export default Home