first commt

This commit is contained in:
Romulus21
2023-09-10 08:49:10 +02:00
commit 2dab3b48e1
134 changed files with 16163 additions and 0 deletions

View File

@@ -0,0 +1,14 @@
import React from "react"
import {AuthUserProvider} from "../hooks/AuthUser";
import Router from "./Router";
const App = () => {
return <main className="dark:bg-gray-900 dark:text-white h-screen">
<AuthUserProvider>
<Router />
</AuthUserProvider>
</main>
}
export default App

View File

@@ -0,0 +1,46 @@
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";
const Login = () => {
const navigate = useNavigate()
const {setAuthUser} = useAuthUser()
const [email, setEmail] = useState('')
const [password, setPassword] = useState('')
const handleSubmit = async (event: FormEvent) => {
event.preventDefault()
try {
await axios.get('/sanctum/csrf-cookie')
const res = await axios.post('/api/login', {email, password})
setAuthUser(res.data.user)
navigate('/')
} catch (e) {
console.error(e)
}
}
return <div>
<form onSubmit={handleSubmit} className="w-96 mx-auto mt-10 border shadow p-3">
<h1 className="text-center">Connexion</h1>
<Field type="email"
name="email"
placeholder="Email"
value={email}
onChange={event => setEmail(event.target.value)}
autoFocus>Email</Field>
<Field type="password"
name="password"
placeholder="******"
value={password}
onChange={event => setPassword(event.target.value)}>Mot de passe</Field>
<button type="submit" className="mt-5 bg-blue-700 w-full block text-white px-5 py-2 text-lg rounded">Valider</button>
</form>
</div>
}
export default Login

View File

@@ -0,0 +1,19 @@
import React from "react";
import useAuthUser from "../../hooks/AuthUser";
const Profile = () => {
const {authUser} = useAuthUser()
return <>
<h1>Profile</h1>
<div>
<span>Nom: <strong>{authUser?.name}</strong></span>
</div>
<div>Update name & email</div>
<div>Change password</div>
<div>Delete Account</div>
</>
}
export default Profile

View File

@@ -0,0 +1,51 @@
import React, {ChangeEvent, FormEvent, SyntheticEvent, useState} from "react"
import Field from "../../components/Field";
import axios from "axios";
import {useNavigate} from "react-router-dom";
const Register = () => {
const navigate = useNavigate()
const [name, setName] = useState('')
const [email, setEmail] = useState('')
const [password, setPassword] = useState('')
const handleSubmit = async (event: FormEvent) => {
event.preventDefault()
try {
await axios.get('/sanctum/csrf-cookie')
const res = await axios.post('/api/register', {name, email, password})
console.log(name, email, password)
navigate('/')
} catch (e) {
console.error(e)
}
}
return <div>
<form onSubmit={handleSubmit} className="w-96 mx-auto mt-10 border shadow p-3">
<h1 className="text-center">S'inscrire</h1>
<Field placeholder="Nom"
name="name"
value={name}
onChange={event => setName(event.target.value)}
autoFocus>Nom</Field>
<Field type="email"
name="email"
placeholder="Email"
value={email}
onChange={event => setEmail(event.target.value)}
autoFocus>Email</Field>
<Field type="password"
name="password"
placeholder="******"
value={password}
onChange={event => setPassword(event.target.value)}
autoFocus>Mot de passe</Field>
<button type="submit" className="mt-5 bg-blue-700 w-full block text-white px-5 py-2 text-lg rounded">Valider</button>
</form>
</div>
}
export default Register

View File

@@ -0,0 +1,11 @@
import React from "react"
import {Link} from "react-router-dom";
const Home = () => {
return <div>Home <Link to="/connexion">Connexion</Link>
<Link to="/sinscrire">S'inscrire</Link>
</div>
}
export default Home

View File

@@ -0,0 +1,11 @@
import React from "react"
import PageLayout from "../components/PageLayout";
const Meteo = () => {
return <PageLayout>
Météo
</PageLayout>
}
export default Meteo

View File

@@ -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

View File

@@ -0,0 +1,35 @@
import React, {Suspense} from "react";
import {BrowserRouter, Link, Route, Routes} from "react-router-dom";
import Home from "./Home";
import Login from "./Auth/Login";
import Register from "./Auth/Register";
import useAuthUser from "../hooks/AuthUser";
import Profile from "./Auth/Profile";
import Header from "../components/Header";
import Rainfall from "./Rainfall";
import Meteo from "./Meteo";
const Router = () => {
const {authUser, loadingAuthUser, logout} = useAuthUser()
return <>
{loadingAuthUser ? '...loading'
: <BrowserRouter>
<Suspense fallback={'... loading'}>
<Header />
<Routes>
<Route path="/" element={<Home />} />
<Route path="/profile" element={<Profile />} />
<Route path="/connexion" element={<Login />} />
<Route path="/sinscrire" element={<Register />} />
<Route path="/meteo" element={<Meteo />} />
<Route path="/pluviometrie" element={<Rainfall />} />
</Routes>
</Suspense>
</BrowserRouter>
}
</>
}
export default Router