add lint js

2024-03-06 09:42:12 +01:00
parent 2de7c78344
commit 115d597a09
26 changed files with 479 additions and 163 deletions
--- a/resources/js/pages/Auth/ForgotPassword.tsx
+++ b/resources/js/pages/Auth/ForgotPassword.tsx
@@ -1,9 +1,6 @@
-import React, {FormEvent, SyntheticEvent, useState} from "react"
-import Field from "../../components/Field";
-import axios from "axios";
-import {useNavigate} from "react-router-dom";
-import useAuthUser from "../../hooks/AuthUser";
-import useAxiosTools from "../../hooks/AxiosTools";
+import React, {FormEvent, useState} from "react"
+import Field from "../../components/Field"
+import useAxiosTools from "../../hooks/AxiosTools"

 const ForgotPassword = () => {

@@ -16,15 +13,15 @@ const ForgotPassword = () => {
        try {
            cleanErrors()
            await axiosGet('/sanctum/csrf-cookie')
-            const res = await axiosPost('/api/forgot', {email})
+            await axiosPost('/api/forgot', {email})
            setMessage(true)
-        } catch (e) {
-            errorCatch(e)
+        } catch (error) {
+            errorCatch(error)
        }
    }

    return <div>
-        <form onSubmit={handleSubmit} className="w-96 mx-auto mt-10 border shadow p-3">
+        <form onSubmit={handleSubmit} className="mx-auto mt-10 w-96 border p-3 shadow">
            <h1 className="text-center">Mot de passe oublié</h1>

            {message && <p className="bg-green-600">Un email vous a été envoyé pour modifier le mot de passe.</p>}
@@ -37,7 +34,7 @@ const ForgotPassword = () => {
                   value={email}
                   onChange={event => setEmail(event.target.value)}
                   autoFocus>Email</Field>
-            <button type="submit" className="mt-5 btn-primary w-full block text-lg">Valider</button>
+            <button type="submit" className="btn-primary mt-5 block w-full text-lg">Valider</button>
        </form>
    </div>
 }
--- a/resources/js/pages/Auth/Login.tsx
+++ b/resources/js/pages/Auth/Login.tsx
@@ -1,10 +1,9 @@
-import React, {FormEvent, SyntheticEvent, useState} from "react"
-import Field from "../../components/Field";
-import axios from "axios";
-import {Link, useNavigate} from "react-router-dom";
-import useAuthUser from "../../hooks/AuthUser";
-import Card from "../../components/Card";
-import useAxiosTools from "../../hooks/AxiosTools";
+import React, {FormEvent, useState} from "react"
+import Field from "../../components/Field"
+import {Link, useNavigate} from "react-router-dom"
+import useAuthUser from "../../hooks/AuthUser"
+import Card from "../../components/Card"
+import useAxiosTools from "../../hooks/AxiosTools"

 const Login = () => {

@@ -22,15 +21,15 @@ const Login = () => {
            const res = await axiosPost('/api/login', {email, password})
            setAuthUser(res.data.user)
            navigate('/')
-        } catch (e) {
-            errorCatch(e)
+        } catch (error) {
+            errorCatch(error)
        }
    }

    return <div>
-        <Card className="w-96 mx-auto mt-10 p-2 overflow-hidden">
+        <Card className="mx-auto mt-10 w-96 overflow-hidden p-2">
            <form onSubmit={handleSubmit}>
-                <h1 className="text-center bg-blue-500 -mx-2 -mt-1 text-lg font-bold px-2 py-1 mb-2">
+                <h1 className="-mx-2 -mt-1 mb-2 bg-blue-500 px-2 py-1 text-center text-lg font-bold">
                    Connexion
                </h1>
                {errorLabel()}
@@ -46,7 +45,7 @@ const Login = () => {
                       placeholder="******"
                       value={password}
                       onChange={event => setPassword(event.target.value)}>Mot de passe</Field>
-                <button type="submit" className="mt-5 btn-primary w-full block text-lg">Valider</button>
+                <button type="submit" className="btn-primary mt-5 block w-full text-lg">Valider</button>
                <Link to="/mot-de-passe-oubliee" className="mt-2 inline-block">Mot de passe oublié ?</Link>
            </form>
        </Card>
--- a/resources/js/pages/Auth/Profile.tsx
+++ b/resources/js/pages/Auth/Profile.tsx
@@ -1,9 +1,9 @@
 import React, {FormEvent, useState} from "react"
 import useAuthUser from "../../hooks/AuthUser"
 import PageLayout from "../../components/PageLayout"
-import Card from "../../components/Card";
-import Field from "../../components/Field";
-import useAxiosTools from "../../hooks/AxiosTools";
+import Card from "../../components/Card"
+import Field from "../../components/Field"
+import useAxiosTools from "../../hooks/AxiosTools"

 const Profile = () => {

@@ -18,8 +18,8 @@ const Profile = () => {
        try {
            const res = await axiosPost(`/api/locations`, {latitude, longitude})
            setAuthUser(res.data)
-        } catch (e) {
-            errorCatch(e)
+        } catch (error) {
+            errorCatch(error)
        }
    }

@@ -65,7 +65,7 @@ const Profile = () => {
                        Longitude
                    </Field>
                    <div className="self-end">
-                        <button type="submit" className="btn-primary w-24 h-10">Valider</button>
+                        <button type="submit" className="btn-primary h-10 w-24">Valider</button>
                    </div>
                </div>
            </form>}
--- a/resources/js/pages/Auth/Register.tsx
+++ b/resources/js/pages/Auth/Register.tsx
@@ -1,8 +1,8 @@
-import React, {ChangeEvent, FormEvent, SyntheticEvent, useState} from "react"
-import Field from "../../components/Field";
-import axios from "axios";
-import {useNavigate} from "react-router-dom";
-import Card from "../../components/Card";
+import React, {FormEvent, useState} from "react"
+import Field from "../../components/Field"
+import axios from "axios"
+import {useNavigate} from "react-router-dom"
+import Card from "../../components/Card"

 const Register = () => {

@@ -15,18 +15,18 @@ const Register = () => {
        event.preventDefault()
        try {
            await axios.get('/sanctum/csrf-cookie')
-            const res = await axios.post('/api/register', {name, email, password})
+            await axios.post('/api/register', {name, email, password})
            navigate('/')
-        } catch (e) {
-            console.error(e)
+        } catch (error) {
+            console.error(error)
        }
    }

    return <div>
-        <Card className="w-96 mx-auto mt-10 p-2 overflow-hidden">
+        <Card className="mx-auto mt-10 w-96 overflow-hidden p-2">
            <form onSubmit={handleSubmit}>
-                <h1 className="text-center bg-blue-500 -mx-2 -mt-1 text-lg font-bold px-2 py-1 mb-2">
-                    S'inscrire
+                <h1 className="-mx-2 -mt-1 mb-2 bg-blue-500 px-2 py-1 text-center text-lg font-bold">
+                    S&apos;inscrire
                </h1>

                <Field placeholder="Nom"
@@ -46,7 +46,7 @@ const Register = () => {
                       value={password}
                       onChange={event => setPassword(event.target.value)}
                       autoFocus>Mot de passe</Field>
-                <button type="submit" className="mt-5 btn-primary w-full block text-lg">Valider</button>
+                <button type="submit" className="btn-primary mt-5 block w-full text-lg">Valider</button>
            </form>
        </Card>
    </div>
--- a/resources/js/pages/Auth/Reset.tsx
+++ b/resources/js/pages/Auth/Reset.tsx
@@ -1,14 +1,12 @@
-import PageLayout from "../../components/PageLayout";
-import Field from "../../components/Field";
-import React, {FormEvent, useState} from "react";
-import {useNavigate, useParams} from "react-router-dom";
-import useAuthUser from "../../hooks/AuthUser";
-import axios from "axios";
-import useAxiosTools from "../../hooks/AxiosTools";
+import Field from "../../components/Field"
+import React, {FormEvent, useState} from "react"
+import {useNavigate, useParams} from "react-router-dom"
+import useAuthUser from "../../hooks/AuthUser"
+import useAxiosTools from "../../hooks/AxiosTools"

 const Reset = () => {

-    let {token} = useParams()
+    const {token} = useParams()
    const navigate = useNavigate()
    const {setAuthUser} = useAuthUser()
    const [email, setEmail] = useState('')
@@ -24,13 +22,13 @@ const Reset = () => {
            const res = await axiosPost('/api/reset', {email, token, password, samePassword})
            setAuthUser(res.data.user)
            navigate('/connexion')
-        } catch (e) {
-            errorCatch(e)
+        } catch (error) {
+            errorCatch(error)
        }
    }

    return <div>
-        <form onSubmit={handleSubmit} className="w-96 mx-auto mt-10 border shadow p-3">
+        <form onSubmit={handleSubmit} className="mx-auto mt-10 w-96 border p-3 shadow">
            <h1 className="text-center">Modifier voter mot de passe</h1>

            {errorLabel()}
@@ -51,7 +49,7 @@ const Reset = () => {
                   placeholder="******"
                   value={samePassword}
                   onChange={event => setSamePassword(event.target.value)}>Confirmation du mot de passe</Field>
-            <button type="submit" className="mt-5 btn-primary w-full block text-lg">Valider</button>
+            <button type="submit" className="btn-primary mt-5 block w-full text-lg">Valider</button>
        </form>
    </div>
 }
--- a/resources/js/pages/Rainfall.tsx
+++ b/resources/js/pages/Rainfall.tsx
@@ -1,12 +1,12 @@
 import React, {useEffect, useState} from "react"
-import PageLayout from "../components/PageLayout";
-import LastFiveMesure from "../components/rainfall/LastFiveMesure";
-import AddRainfall from "../components/rainfall/AddRainfall";
-import RainfallGraph from "../components/rainfall/RainfallGraph";
-import useAxiosTools from "../hooks/AxiosTools";
-import {rainfall, rainfallGraphData} from "../types";
-import Field from "../components/Field";
-import useDimension from "../hooks/DimensionHook";
+import PageLayout from "../components/PageLayout"
+import LastFiveMesure from "../components/rainfall/LastFiveMesure"
+import AddRainfall from "../components/rainfall/AddRainfall"
+import useAxiosTools from "../hooks/AxiosTools"
+import {rainfallGraphData} from "../types"
+import Field from "../components/Field"
+import useDimension from "../hooks/DimensionHook"
+import RainFallEcharts from "../components/rainfall/RainFallEcharts"

 const Rainfall = () => {

@@ -17,7 +17,7 @@ const Rainfall = () => {
        end_date: (new Date()).toSQLDate(),
        period: 'day',
    })
-    const {errorCatch, errorLabel, axiosGet} = useAxiosTools()
+    const {loading, setLoading, errorCatch, errorLabel, axiosGet} = useAxiosTools()
    const {targetRef, dimensions} = useDimension()

    useEffect(() => {
@@ -26,22 +26,25 @@ const Rainfall = () => {

    const fetchGraphData = async () => {
        try {
+            setLoading(true)
            const params = `start=${graphDetails.start_date}&end=${graphDetails.end_date}&period=${graphDetails.period}`
            const res = await axiosGet(`/api/rainfalls/graph?${params}`)
            setGraphData(res.data)
        } catch (error) {
            errorCatch(error)
+        } finally {
+            setLoading(false)
        }
    }

    return <PageLayout>
-        <div className="flex flex-wrap gap-2 justify-between">
+        <div className="flex flex-wrap justify-between gap-2">
            <LastFiveMesure loadedAt={loadedAt} />
            <AddRainfall reload={reload} />
        </div>

        {errorLabel()}
-        <form className="flex mb-2 mx-5 gap-2 flex-wrap">
+        <form className="mx-5 mb-2 flex flex-wrap gap-2">
            <Field name="start_date"
                   type="date"
                   value={graphDetails.start_date}
@@ -51,7 +54,7 @@ const Rainfall = () => {
                   value={graphDetails.end_date}
                   onChange={e => setGraphDetails({...graphDetails, end_date: (new Date(e.target.value)).toSQLDate()})} />
            <div className="form-control">
-                <select className={` w-full mt-2 rounded dark:bg-gray-700`}
+                <select className={` mt-2 w-full rounded dark:bg-gray-700`}
                        value={graphDetails.period}
                        onChange={e => setGraphDetails({...graphDetails, period: e.target.value})}>
                    <option value="day">Jour</option>
@@ -61,11 +64,15 @@ const Rainfall = () => {
                </select>
            </div>
        </form>
-        <div ref={targetRef} className="mb-20">
-            <RainfallGraph width={dimensions.width}
-                           height={500}
-                           data={graphData} start_date={graphDetails.start_date}
-                           end_date={graphDetails.end_date} />
+        <div ref={targetRef} className="mb-20 min-h-96">
+            <RainFallEcharts width={dimensions.width}
+                             height={500}
+                             data={graphData}
+                             loading={loading} />
+            {/*<RainfallGraph width={dimensions.width}*/}
+            {/*               height={500}*/}
+            {/*               data={graphData} start_date={graphDetails.start_date}*/}
+            {/*               end_date={graphDetails.end_date} />*/}
        </div>
    </PageLayout>
 }
--- a/resources/js/pages/Rainfall/RainfallIndex.tsx
+++ b/resources/js/pages/Rainfall/RainfallIndex.tsx
@@ -1,7 +1,7 @@
-import React, {useEffect, useState} from "react";
-import PageLayout from "../../components/PageLayout";
-import useAxiosTools from "../../hooks/AxiosTools";
-import {rainfall} from "../../types";
+import React, {useEffect, useState} from "react"
+import PageLayout from "../../components/PageLayout"
+import useAxiosTools from "../../hooks/AxiosTools"
+import {rainfall} from "../../types"

 const RainfallIndex = () => {

@@ -24,13 +24,9 @@ const RainfallIndex = () => {
        }
    }

-    const handleEdit = (rainfall: rainfall) => {
-        console.log(rainfall)
-    }
-
    const handleDelete = async (rainfall: rainfall) => {
        try {
-            const res = await axiosDelete(`/api/rainfalls/${rainfall.id}`)
+            await axiosDelete(`/api/rainfalls/${rainfall.id}`)
            setRainfalls(rainfalls.filter(r => r.id !== rainfall.id))
        } catch (error) {
            errorCatch(error)
@@ -39,7 +35,7 @@ const RainfallIndex = () => {

    return <PageLayout>
        {errorLabel()}
-        <table className="border w-96 text-center mx-auto">
+        <table className="mx-auto w-96 border text-center">
            <thead>
            <tr>
                <th>Date</th>
--- a/resources/js/pages/Router.tsx
+++ b/resources/js/pages/Router.tsx
@@ -8,14 +8,13 @@ const ForgotPassword = lazy(() => import('./Auth/ForgotPassword'))
 const Home = lazy(() => import('./Home'))
 const Login = lazy(() => import('./Auth/Login'))
 const Profile = lazy(() => import('./Auth/Profile'))
-const Register = lazy(() => import('./Auth/Register'))
 const Reset = lazy(() => import('./Auth/Reset'))
 const Rainfall = lazy(() => import('./Rainfall'))
 const RainfallIndex = lazy(() => import('./Rainfall/RainfallIndex'))

 const Router = () => {

-    const {authUser, loadingAuthUser, logout} = useAuthUser()
+    const {loadingAuthUser} = useAuthUser()

    return <>
        {loadingAuthUser ? '...loading'
--- a/resources/js/pages/Weather.tsx
+++ b/resources/js/pages/Weather.tsx
@@ -9,7 +9,6 @@ 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()

@@ -31,9 +30,9 @@ const Weather = () => {
            const res = await axiosGet(`/api/weather`)
            const currentWeather = res.data.list[0]

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

                if (date === (new Date).toSQLDate()) {
@@ -70,7 +69,7 @@ const Weather = () => {
        {errorLabel()}

        <Card className="flex justify-between">
-            <div className="flex flex-col m-2 justify-between">
+            <div className="m-2 flex flex-col 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>
@@ -81,9 +80,9 @@ const Weather = () => {
                    {currentWeather && <Img src={`images/icons/${currentWeather?.weather[0].icon}.svg`}
                                            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 className="flex flex-col gap-1">
+                    <span className="pt-5 text-4xl">{currentWeather?.main.temp_max.toFixed()} <span className="text-2xl">°C</span></span>
+                    <span className="mt-2 text-2xl text-secondary dark:text-secondary-ligth">{currentWeather?.main.temp_min.toFixed()} °C</span>
                </div>
            </div>
        </Card>
@@ -108,7 +107,7 @@ const WeatherCard: FC<{date: string, values: WeatherValue[]}> = ({date, values=
            icon: '',
            description: '',
        }
-        const result: {[k: string]: number} = {}
+        const result: Record<string, number> = {}
        values.forEach(value => {
            if (value.main.temp_min < weatherState.min) {
                weatherState.min = value.main.temp_min
@@ -144,17 +143,17 @@ const WeatherCard: FC<{date: string, values: WeatherValue[]}> = ({date, values=
    }, [])

    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>
+        <div className="flex h-full flex-1 flex-col gap-2">
+            <span className="text-lg font-bold" 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">
+        <div className="-mt-1.5 flex items-center">
            <Img src={`images/icons/${weatherState?.icon}.svg`}
                 alt={weatherState?.main + ' ' + weatherState?.icon}
                 width="80px" />

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