first commt

resources/js/pages/Rainfall.tsx

@@ -0,0 +1,65 @@
+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} from "../types";
+import Field from "../components/Field";
+import useDimension from "../hooks/DimensionHook";
+
+const Rainfall = () => {
+
+    const [loadedAt, reload] = useState(new Date)
+    const [graphData, setGraphData] = useState<rainfall[]>([])
+    const [graphDetails, setGraphDetails] = useState({
+        start_date: (new Date((new Date()).setMonth((new Date).getMonth() - 1))).toSQLDate(),
+        end_date: (new Date()).toSQLDate(),
+    })
+    const {axiosGet} = useAxiosTools()
+    const {targetRef, dimensions} = useDimension()
+
+    useEffect(() => {
+        fetchGraphData()
+    }, [loadedAt])
+
+    useEffect(() => {
+        fetchGraphData()
+    }, [graphDetails])
+
+    const fetchGraphData = async () => {
+        try {
+            const params = `start=${graphDetails.start_date}&end=${graphDetails.end_date}`
+            const res = await axiosGet(`/api/rainfalls/graph?${params}`)
+            setGraphData(res.data)
+        } catch (e) {
+            console.error(e)
+        }
+    }
+
+    return <PageLayout>
+        <div className="flex justify-between">
+            <LastFiveMesure loadedAt={loadedAt} />
+            <AddRainfall reload={reload} />
+        </div>
+
+        <form className="flex">
+            <Field name="start_date"
+                   type="date"
+                   value={graphDetails.start_date}
+                   onChange={e => setGraphDetails({...graphDetails, start_date: (new Date(e.target.value)).toSQLDate()})} />
+            <Field name="start_date"
+                   type="date"
+                   value={graphDetails.end_date}
+                   onChange={e => setGraphDetails({...graphDetails, end_date: (new Date(e.target.value)).toSQLDate()})} />
+        </form>
+        <div ref={targetRef}>
+            <RainfallGraph width={dimensions.width}
+                           height={500}
+                           data={graphData} start_date={graphDetails.start_date}
+                           end_date={graphDetails.end_date} />
+        </div>
+    </PageLayout>
+}
+
+export default Rainfall