covid-stats/resources/js/components/Home.tsx

import React from "react";
import AreaChart from "./AreaChart";
import Typography from "@mui/material/Typography";
import Grid from "@mui/material/Grid";
import { useGetAllDataQuery } from "../services/covidDataApi";
import { ChartData } from "../types";
import { DateRange } from "@mui/lab/DateRangePicker";
import DatePicker from "./DatePicker";

export default function Home() {
    const { data, error, isLoading } = useGetAllDataQuery({});
    const [dateRange, setDateRange] = React.useState<DateRange<Date>>([
        null,
        null,
    ]);

    let allData: ChartData[] = [];
    let newInfected: ChartData[] = [];

    if (data) {
        if (dateRange[0] == null && dateRange[1] == null) {
            setDateRange([
                new Date(data[0].created_at),
                new Date(data[data.length - 1].created_at),
            ]);
        }

        allData = data
            .map((d) => {
                const date = new Date(d.created_at);
                const currentInfected = d.infected - d.recovered - d.deceased;
                return {
                    name:
                        date.getFullYear() +
                        "." +
                        ("0" + (date.getMonth() + 1)).slice(-2) +
                        "." +
                        ("0" + date.getDate()).slice(-2),
                    values: {
                        "Aktív fertőzöttek napi alakulása": currentInfected > 0 ? currentInfected : 0,
                    },
                };
            })
            .filter((d) => {
                const ddate = new Date(d.name);
                if (dateRange[0] == null || dateRange[1] == null) return true;
                let endDate = new Date(dateRange[1].getTime());
                endDate.setDate(endDate.getDate() + 1);
                return ddate >= dateRange[0] && ddate < endDate;
            });

        let newData = 0;
        newInfected = data
            .map((d) => {
                const date = new Date(d.created_at);
                const newActual = d.infected - newData;
                newData = d.infected;
                return {
                    name:
                        date.getFullYear() +
                        "." +
                        ("0" + (date.getMonth() + 1)).slice(-2) +
                        "." +
                        ("0" + date.getDate()).slice(-2),
                    values: {
                        "Új fertőzöttek napi alakulása": newActual > 0 ? newActual : 0,
                    },
                };
            })
            .filter((d) => {
                const ddate = new Date(d.name);
                if (dateRange[0] == null || dateRange[1] == null) return true;
                let endDate = new Date(dateRange[1].getTime());
                endDate.setDate(endDate.getDate() + 1);
                return ddate >= dateRange[0] && ddate < endDate;
            });
    }

    return (
        <>
            <Typography paragraph>
                Ez az oldal elsősorban a hivatalos, kormány által közölt
                adatokat dolgozza fel, de nem tekinthető hivatalos
                tájékoztatásnak, továbbá nem vállalunk felelősséget a kormány
                által közölt adatok és információk valóságtartalmáért. Kérjük, a
                hivatalos információkért látogasson el a kormány által
                működtetett{" "}
                <a href="https://koronavirus.gov.hu/" target="_blank">
                    koronavirus.gov.hu
                </a>{" "}
                oldalra, illetve olvassa a nagyobb hírportálok híreit.
            </Typography>
            {typeof data != "undefined" ? (
                <Grid container spacing={2}>
                    <Grid
                        item
                        xs={12}
                        container
                        spacing={2}
                        justifyContent="center"
                    >
                        <Grid item>
                            <DatePicker
                                minDate={new Date(data[0].created_at)}
                                maxDate={
                                    new Date(data[data.length - 1].created_at)
                                }
                                value={dateRange}
                                setValue={(n: DateRange<Date>) =>
                                    setDateRange(n)
                                }
                            />
                        </Grid>
                    </Grid>
                    <Grid item md={6} xs={12}>
                        <AreaChart
                            data={allData}
                            scale="sqrt"
                        />
                    </Grid>
                    <Grid item md={6} xs={12}>
                        <AreaChart
                            data={newInfected}
                            scale="sqrt"
                        />
                    </Grid>
                </Grid>
            ) : null}
        </>
    );
}