add Rainfalls Index page

resources/js/components/rainfall/LastFiveMesure.tsx

@@ -3,6 +3,7 @@ import useAxiosTools from "../../hooks/AxiosTools";
 import {rainfall} from "../../types";
 import {AxiosError} from "axios";
 import Card from "../Card";
+import {Link} from "react-router-dom";
 
 const LastFiveMesure: FC<LastFiveMesureProps> = ({loadedAt}) => {
 
@@ -26,7 +27,7 @@ const LastFiveMesure: FC<LastFiveMesureProps> = ({loadedAt}) => {
         }
     }
 
-    return <Card className="min-w-[200px] overflow-hidden self-start w-full lg:w-auto">
+    return <><Card className="min-w-[200px] overflow-hidden self-start w-full lg:w-auto">
         <h1 className="text-center bg-blue-500 text-white -mx-2 -mt-1 text-lg font-bold px-2 py-1">5 dernières mesures</h1>
         {error && <div>{error}</div>}
         <table className="w-full text-center">
@@ -38,6 +39,8 @@ const LastFiveMesure: FC<LastFiveMesureProps> = ({loadedAt}) => {
             </tbody>
         </table>
     </Card>
+        <Link to="/pluviometrie/mesures">Tous les mesures</Link>
+        </>
 }
 
 export default LastFiveMesure

resources/js/hooks/AxiosTools.tsx

@@ -1,5 +1,6 @@
 import {useState} from "react";
 import axios from "axios";
+import React from "react";
 
 const useAxiosTools = () => {
 
@@ -8,8 +9,19 @@ const useAxiosTools = () => {
 
     const axiosGet = axios.get
     const axiosPost = axios.post
+    const axiosPut = axios.put
+    const axiosDelete = axios.delete
 
-    return {loading, setLoading, error, setError, axiosGet, axiosPost}
+    const errorCatch = (error: any) => {
+        setError(error.response.data.message || error.message)
+    }
+
+    const errorLabel = () => {
+
+        return error ? <div className="bg-red-600 rounded m-2 text-center text-white px-2 py-1 mx-auto">{error}</div>: null
+    }
+
+    return {loading, setLoading, error, setError, errorCatch, errorLabel, axiosGet, axiosPost, axiosPut, axiosDelete}
 }
 
 export default useAxiosTools

resources/js/pages/Rainfall/RainfallIndex.tsx

@@ -0,0 +1,72 @@
+import React, {useEffect, useState} from "react";
+import PageLayout from "../../components/PageLayout";
+import useAxiosTools from "../../hooks/AxiosTools";
+import {rainfall} from "../../types";
+
+const RainfallIndex = () => {
+
+    const [page, setPage] = useState(1)
+    const [lastPage, setLastPage] = useState(1)
+    const [rainfalls, setRainfalls] = useState<rainfall[]>([])
+    const {errorCatch, errorLabel, axiosGet, axiosDelete} = useAxiosTools()
+
+    useEffect(() => {
+        fetchMesures()
+    }, [page])
+
+    const fetchMesures = async () => {
+        try {
+            const res = await axiosGet(`/api/rainfalls?page=${page}`)
+            setLastPage(res.data.meta.last_page)
+            setRainfalls([...rainfalls, ...res.data.data])
+        } catch (error) {
+            console.log(error)
+            errorCatch(error)
+        }
+    }
+
+    const handleEdit = (rainfall: rainfall) => {
+        console.log(rainfall)
+    }
+
+    const handleDelete = async (rainfall: rainfall) => {
+        try {
+            const res = await axiosDelete(`/api/rainfalls/${rainfall.id}`)
+            setRainfalls(rainfalls.filter(r => r.id !== rainfall.id))
+        } catch (error) {
+            errorCatch(error)
+        }
+    }
+
+    return <PageLayout>
+        {errorLabel()}
+        <table className="border w-96 text-center mx-auto">
+            <thead>
+            <tr>
+                <th>Date</th>
+                <th>Mesure</th>
+                <th>Actions</th>
+            </tr>
+            </thead>
+            <tbody className="border">
+            {rainfalls.map(rainfall => <tr key={rainfall.id}>
+                <td>{(new Date(rainfall.date)).toLocaleDateString()}</td>
+                <td className="px-2 text-right">{rainfall.value}</td>
+                <td>
+                    {/*<button type="button" onClick={() => handleEdit(rainfall)}>Editer</button>*/}
+                    <button type="button" onClick={() => handleDelete(rainfall)}>Supprimer</button>
+                </td>
+            </tr>)}
+            </tbody>
+            <tfoot>
+            <tr>
+                <td>
+                    {page < lastPage && <button type="button" onClick={() => setPage(page + 1)}>Plus</button>}
+                </td>
+            </tr>
+            </tfoot>
+        </table>
+    </PageLayout>
+}
+
+export default RainfallIndex

resources/js/pages/Router.tsx

@@ -11,6 +11,7 @@ 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 = () => {
 
@@ -30,6 +31,7 @@ const Router = () => {
                         <Route path="/changer-le-mot-de-passe/:token" element={<Reset />} />
                         <Route path="/meteo" element={<Meteo />} />
                         <Route path="/pluviometrie" element={<Rainfall />} />
+                        <Route path="/pluviometrie/mesures" element={<RainfallIndex />} />
                     </Routes>
                 </Suspense>
             </BrowserRouter>