add Rainfalls Index page

app/Http/Controllers/RainfallController.php

@@ -2,34 +2,36 @@
 
 namespace App\Http\Controllers;
 
+use App\Http\Requests\RainfallRequest;
+use App\Http\Resources\RainfallCollection;
 use App\Http\Resources\RainfallResource;
 use App\Models\Rainfall;
 use Carbon\Carbon;
 use Carbon\CarbonPeriod;
 use Illuminate\Http\Request;
-use Ramsey\Collection\Collection;
+use Illuminate\Support\Collection;
 
 class RainfallController extends Controller
 {
     /**
-     * Display a listing of the resource.
+     * Display a listing of the rainfalls.
      */
-    public function index()
+    public function index(Request $request)
     {
-        //
+        $rainfalls = $request->user()
+            ->rainfalls()
+            ->orderByDesc('date')
+            ->paginate(15);
+
+        return new RainfallCollection($rainfalls);
     }
 
     /**
      * Store a newly created resource in storage.
      */
-    public function store(Request $request)
+    public function store(RainfallRequest $request)
     {
-        $data = $request->validate([
-            'date' => ['required', 'date'],
-            'value' => ['required', 'int', 'min:1', 'max:1000']
-        ]);
-
-        $rainfall = $request->user()->rainfalls()->create($data);
+        $rainfall = $request->user()->rainfalls()->create($request->validated());
 
         return response()->json(new RainfallResource($rainfall), 201);
     }
@@ -37,25 +39,37 @@ class RainfallController extends Controller
     /**
      * Display the specified resource.
      */
-    public function show(Rainfall $rainfall)
+    public function show(Request $request, Rainfall $rainfall)
     {
-        //
+        $rainfall = $request->user()->rainfalls()
+            ->where('id', $rainfall->id)
+            ->first();
+
+        return response()->json(new RainfallResource($rainfall));
     }
 
     /**
      * Update the specified resource in storage.
      */
-    public function update(Request $request, Rainfall $rainfall)
+    public function update(RainfallRequest $request, Rainfall $rainfall)
     {
-        //
+        $rainfall = $request->user()->rainfalls()
+            ->where('id', $rainfall->id)
+            ->first()?->update($request->validated());
+
+        return response()->json(new RainfallResource($rainfall));
     }
 
     /**
      * Remove the specified resource from storage.
      */
-    public function destroy(Rainfall $rainfall)
+    public function destroy(Request $request, Rainfall $rainfall)
     {
-        //
+        $request->user()->rainfalls()
+            ->where('id', $rainfall->id)
+            ->first()?->delete();
+
+        return response()->noContent();
     }
 
     public function lastRainfalls(Request $request)
@@ -100,13 +114,13 @@ class RainfallController extends Controller
         }
 
         if ($results->isNotEmpty() && $results->last()['date'] !== $data['end']) {
-            [$results, $index] = $this->addEmptyDays($results, $index, (new Carbon($results->last()['date']))->addDay(), $data['end']);
+            [$results] = $this->addEmptyDays($results, $index, (new Carbon($results->last()['date']))->addDay(), $data['end']);
         }
 
         return response()->json($results);
     }
 
-    private function addEmptyDays(\Illuminate\Support\Collection $results, int $index, Carbon|string $start, Carbon|string $end)
+    private function addEmptyDays(Collection $results, int $index, Carbon|string $start, Carbon|string $end)
     {
         foreach (CarbonPeriod::create($start, $end) as $date) {
             $results->push([

app/Http/Requests/RainfallRequest.php

@@ -0,0 +1,29 @@
+<?php
+
+namespace App\Http\Requests;
+
+use Illuminate\Foundation\Http\FormRequest;
+
+class RainfallRequest extends FormRequest
+{
+    /**
+     * Determine if the user is authorized to make this request.
+     */
+    public function authorize(): bool
+    {
+        return true;
+    }
+
+    /**
+     * Get the validation rules that apply to the request.
+     *
+     * @return array<string, \Illuminate\Contracts\Validation\ValidationRule|array|string>
+     */
+    public function rules(): array
+    {
+        return [
+            'date' => ['required', 'date'],
+            'value' => ['required', 'int', 'min:1', 'max:1000'],
+        ];
+    }
+}

app/Http/Resources/RainfallCollection.php

@@ -0,0 +1,19 @@
+<?php
+
+namespace App\Http\Resources;
+
+use Illuminate\Http\Request;
+use Illuminate\Http\Resources\Json\ResourceCollection;
+
+class RainfallCollection extends ResourceCollection
+{
+    /**
+     * Transform the resource collection into an array.
+     *
+     * @return array<int|string, mixed>
+     */
+    public function toArray(Request $request): array
+    {
+        return ['data' => $this->collection];
+    }
+}

app/Mail/Reset.php

@@ -3,7 +3,6 @@
 namespace App\Mail;
 
 use Illuminate\Bus\Queueable;
-use Illuminate\Contracts\Queue\ShouldQueue;
 use Illuminate\Mail\Mailable;
 use Illuminate\Mail\Mailables\Content;
 use Illuminate\Mail\Mailables\Envelope;

app/Models/Rainfall.php

@@ -12,6 +12,10 @@ class Rainfall extends Model
 
     protected $guarded = [];
 
+    protected $casts = [
+        'date' => 'date',
+    ];
+
     public function user(): BelongsTo
     {
         return $this->belongsTo(User::class);

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>

routes/api.php

@@ -2,7 +2,6 @@
 
 use App\Http\Controllers\AuthController;
 use App\Http\Controllers\RainfallController;
-use Illuminate\Http\Request;
 use Illuminate\Support\Facades\Route;
 
 /*
@@ -28,6 +27,5 @@ Route::middleware('auth:sanctum')->group(function () {
     Route::get('/rainfalls/last', [RainfallController::class, 'lastRainfalls'])->name('rainfalls.last');
     Route::get('/rainfalls/graph', [RainfallController::class, 'graphValue'])->name('rainfalls.graph');
 
-    Route::post('rainfalls', [RainfallController::class, 'store'])->name('rainfall.store');
-//    Route::resource('rainfalls', RainfallController::class);
+    Route::apiResource('rainfalls', RainfallController::class);
 });

routes/web.php

@@ -1,6 +1,5 @@
 <?php
 
-use App\Http\Controllers\ProfileController;
 use Illuminate\Foundation\Application;
 use Illuminate\Support\Facades\Route;