From 4a733929ed61bc87b46c3995956360c7e9a1d902 Mon Sep 17 00:00:00 2001 From: Romulus21 Date: Thu, 14 Sep 2023 23:20:29 +0200 Subject: [PATCH] add Rainfalls Index page --- app/Http/Controllers/RainfallController.php | 52 +++++++++----- app/Http/Requests/RainfallRequest.php | 29 ++++++++ app/Http/Resources/RainfallCollection.php | 19 +++++ app/Mail/Reset.php | 1 - app/Models/Rainfall.php | 4 ++ .../js/components/rainfall/LastFiveMesure.tsx | 5 +- resources/js/hooks/AxiosTools.tsx | 14 +++- resources/js/pages/Rainfall/RainfallIndex.tsx | 72 +++++++++++++++++++ resources/js/pages/Router.tsx | 2 + routes/api.php | 4 +- routes/web.php | 1 - 11 files changed, 177 insertions(+), 26 deletions(-) create mode 100644 app/Http/Requests/RainfallRequest.php create mode 100644 app/Http/Resources/RainfallCollection.php create mode 100644 resources/js/pages/Rainfall/RainfallIndex.tsx diff --git a/app/Http/Controllers/RainfallController.php b/app/Http/Controllers/RainfallController.php index 4ff387f..f5a5da1 100644 --- a/app/Http/Controllers/RainfallController.php +++ b/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([ diff --git a/app/Http/Requests/RainfallRequest.php b/app/Http/Requests/RainfallRequest.php new file mode 100644 index 0000000..48ccf96 --- /dev/null +++ b/app/Http/Requests/RainfallRequest.php @@ -0,0 +1,29 @@ + + */ + public function rules(): array + { + return [ + 'date' => ['required', 'date'], + 'value' => ['required', 'int', 'min:1', 'max:1000'], + ]; + } +} diff --git a/app/Http/Resources/RainfallCollection.php b/app/Http/Resources/RainfallCollection.php new file mode 100644 index 0000000..10c36e6 --- /dev/null +++ b/app/Http/Resources/RainfallCollection.php @@ -0,0 +1,19 @@ + + */ + public function toArray(Request $request): array + { + return ['data' => $this->collection]; + } +} diff --git a/app/Mail/Reset.php b/app/Mail/Reset.php index 8b97afb..05be5ef 100644 --- a/app/Mail/Reset.php +++ b/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; diff --git a/app/Models/Rainfall.php b/app/Models/Rainfall.php index ae3c2b9..9eb3b91 100644 --- a/app/Models/Rainfall.php +++ b/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); diff --git a/resources/js/components/rainfall/LastFiveMesure.tsx b/resources/js/components/rainfall/LastFiveMesure.tsx index 4ff50c0..c43b544 100644 --- a/resources/js/components/rainfall/LastFiveMesure.tsx +++ b/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 = ({loadedAt}) => { @@ -26,7 +27,7 @@ const LastFiveMesure: FC = ({loadedAt}) => { } } - return + return <>

5 dernières mesures

{error &&
{error}
} @@ -38,6 +39,8 @@ const LastFiveMesure: FC = ({loadedAt}) => {
+ Tous les mesures + } export default LastFiveMesure diff --git a/resources/js/hooks/AxiosTools.tsx b/resources/js/hooks/AxiosTools.tsx index d51f829..2ed2eff 100644 --- a/resources/js/hooks/AxiosTools.tsx +++ b/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 ?
{error}
: null + } + + return {loading, setLoading, error, setError, errorCatch, errorLabel, axiosGet, axiosPost, axiosPut, axiosDelete} } export default useAxiosTools diff --git a/resources/js/pages/Rainfall/RainfallIndex.tsx b/resources/js/pages/Rainfall/RainfallIndex.tsx new file mode 100644 index 0000000..942cdc2 --- /dev/null +++ b/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([]) + 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 + {errorLabel()} + + + + + + + + + + {rainfalls.map(rainfall => + + + + )} + + + + + + +
DateMesureActions
{(new Date(rainfall.date)).toLocaleDateString()}{rainfall.value} + {/**/} + +
+ {page < lastPage && } +
+ +} + +export default RainfallIndex diff --git a/resources/js/pages/Router.tsx b/resources/js/pages/Router.tsx index dd536e4..6954f1b 100644 --- a/resources/js/pages/Router.tsx +++ b/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 = () => { } /> } /> } /> + } /> diff --git a/routes/api.php b/routes/api.php index fbc2772..1280abe 100644 --- a/routes/api.php +++ b/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); }); diff --git a/routes/web.php b/routes/web.php index b994bb2..2482d2c 100644 --- a/routes/web.php +++ b/routes/web.php @@ -1,6 +1,5 @@