lara-bermite/resources/js/pages/Weather.tsx

import React, {FC, useEffect, useState} from "react"
import PageLayout from "../components/PageLayout"
import useAxiosTools from "../hooks/AxiosTools";
import {WeatherValue} from "../types";
import Card from "../components/Card"

const Weather = () => {

    const [currentWeather, setCurrentWeather] = useState<WeatherValue|null>(null)
    const [fetchTime, setFetchTime] = useState(0)
    const [count, setCount] = useState(0)
    const [weatherDays, setWeatherDays] = useState<[string, WeatherValue[]][]|null>(null)
    const {loading, setLoading, errorLabel, errorCatch, cleanErrors, axiosGet} = useAxiosTools()

    useEffect(() => {
        const timer = setInterval(() => {
            if (!loading && (fetchTime + 5 * 60) < getCurrentTime()) {
                fetchWeather()
            }
        }, 1000)
        return () => clearInterval(timer)
    }, [fetchTime])

    const getCurrentTime = () => Number(((new Date).getTime() /1000).toFixed())

    const fetchWeather = async () => {
        try {
            setLoading(true)
            cleanErrors()
            const res = await axiosGet(`/api/weather`)
            const currentWeather = res.data.list[0]

            let weatherDays: [string, WeatherValue[]][] = []
            let objectEntries = {index: -1, date: ''}
            res.data.list.forEach((item: WeatherValue, index: number) => {
                const date = item.dt_txt.split(' ')[0]

                if (date === (new Date).toSQLDate()) {
                    if (currentWeather.main.temp_min > item.main.temp_min) {
                        currentWeather.main.temp_min = item.main.temp_min
                    }
                    if (currentWeather.main.temp_max < item.main.temp_max) {
                        currentWeather.main.temp_max = item.main.temp_max
                    }
                }

                if (date !== objectEntries.date) {
                    objectEntries = {index: objectEntries.index + 1, date}
                }

                if (!weatherDays[objectEntries.index]) {
                    weatherDays[objectEntries.index] = [date, []]
                }

                weatherDays[objectEntries.index][1] = [...weatherDays[objectEntries.index][1], item]
            })
            setWeatherDays(weatherDays)
            setCurrentWeather(currentWeather)
            setFetchTime(getCurrentTime())
        } catch (e) {
            errorCatch(e)
        } finally {
            setLoading(false)
        }
    }

    return <PageLayout>

        {errorLabel()}

        <Card className="flex justify-between">
            <div className="flex flex-col m-2 justify-between">
                <span className="text-6xl">{currentWeather?.main.temp.toFixed()} °C</span>
                <span className="text-secondary dark:text-secondary-ligth">{currentWeather?.weather[0].description}</span>
            </div>
            <div className="flex items-stretch">
                <div>
                    {currentWeather && <img src={`http://openweathermap.org/img/wn/${currentWeather?.weather[0].icon}@2x.png`}
                         alt={currentWeather?.weather[0].main} width="120px" />}
                </div>
                <div className="flex gap-1 flex-col">
                    <span className="text-4xl pt-5">{currentWeather?.main.temp_max.toFixed()} <span className="text-2xl">°C</span></span>
                    <span className="text-secondary text-2xl mt-2 dark:text-secondary-ligth">{currentWeather?.main.temp_min.toFixed()} °C</span>
                </div>
            </div>
        </Card>
        <div className="m-3">
            {weatherDays?.filter(([date]) => date !== (new Date).toSQLDate())
                .map(([date, values]) => <WeatherCard key={date} date={date} values={values}/>)}
        </div>
    </PageLayout>
}

export default Weather

const WeatherCard: FC<{date: string, values: WeatherValue[]}> = ({date, values= []}) => {

    const [weatherState, setWeatherState] = useState<{main: string, description: string, icon: string, min: number, max: number}|null>(null)

    useEffect(() => {
        const weatherState = {
            min: 100,
            max: -100,
            main: '',
            icon: '',
            description: '',
        }
        const result: {[k: string]: number} = {}
        values.forEach(value => {
            if (value.main.temp_min < weatherState.min) {
                weatherState.min = value.main.temp_min
            }
            if (value.main.temp_max > weatherState.max) {
                weatherState.max = value.main.temp_max
            }

            const tag = value.weather[0].main
            if (! result[tag]) {
                result[tag] = 0
            }
            result[tag]++
        })

        let itemToReturn: {name:string, value: number}|null = null
        for (const item in result) {
            if (! itemToReturn || itemToReturn.value < result[item]) {
                itemToReturn = {name: item, value: result[item]}
            }
        }

        if (itemToReturn && itemToReturn.name) {
            const nameToSearch = itemToReturn.name
            const value = values.find(item => item.weather[0].main === nameToSearch)
            if (value) {
                weatherState.main = itemToReturn.name
                weatherState.description = value.weather[0].description
                weatherState.icon = value.weather[0].icon.replace('n', 'd')
                setWeatherState(weatherState)
            }
        }
    }, [])

    return <div className="flex gap-5">
        <div className="flex flex-col gap-2 flex-1 h-full">
            <span className="font-bold text-lg" title={(new Date(date)).toLocaleDateString()}>{(new Date(date)).getWeekDay()}</span>
            <span className="text-secondary dark:text-secondary-ligth">{weatherState?.description}</span>
        </div>
        <div className="flex items-center -mt-1.5">
            <img src={`http://openweathermap.org/img/wn/${weatherState?.icon}@2x.png`}
                 className=""
                 alt={weatherState?.main + ' ' + weatherState?.icon} width="80px" />

        </div>
        <div className="flex gap-1 flex-col">
            <span className="text-lg">{weatherState?.max.toFixed()} °C</span>
            <span className="text-secondary dark:text-secondary-ligth">{weatherState?.min.toFixed()} °C</span>
        </div>
    </div>
}