first commt
This commit is contained in:
14
resources/js/pages/App.tsx
Normal file
14
resources/js/pages/App.tsx
Normal 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
|
||||
46
resources/js/pages/Auth/Login.tsx
Normal file
46
resources/js/pages/Auth/Login.tsx
Normal 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
|
||||
19
resources/js/pages/Auth/Profile.tsx
Normal file
19
resources/js/pages/Auth/Profile.tsx
Normal 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
|
||||
51
resources/js/pages/Auth/Register.tsx
Normal file
51
resources/js/pages/Auth/Register.tsx
Normal 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
|
||||
11
resources/js/pages/Home.tsx
Normal file
11
resources/js/pages/Home.tsx
Normal 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
|
||||
11
resources/js/pages/Meteo.tsx
Normal file
11
resources/js/pages/Meteo.tsx
Normal 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
|
||||
65
resources/js/pages/Rainfall.tsx
Normal file
65
resources/js/pages/Rainfall.tsx
Normal 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
|
||||
35
resources/js/pages/Router.tsx
Normal file
35
resources/js/pages/Router.tsx
Normal 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
|
||||
Reference in New Issue
Block a user