78 lines
2.9 KiB
TypeScript
78 lines
2.9 KiB
TypeScript
import React, {FormEvent, useState} from "react"
|
|
import useAuthUser from "../../hooks/AuthUser"
|
|
import Field from "../../components/Field";
|
|
import useAxiosTools from "../../hooks/AxiosTools";
|
|
import PageLayout from "../../components/PageLayout";
|
|
import Card from "../../components/Card";
|
|
|
|
const Profile = () => {
|
|
|
|
const {authUser, setAuthUser, logout} = useAuthUser()
|
|
const [latitude, setLatitude] = useState(0)
|
|
const [longitude, setLongitude] = useState(0)
|
|
const {errorCatch, axiosPost} = useAxiosTools()
|
|
|
|
const submitLocation = async (event: FormEvent) => {
|
|
event.preventDefault()
|
|
|
|
try {
|
|
const res = await axiosPost(`/api/locations`, {latitude, longitude})
|
|
setAuthUser(res.data)
|
|
} catch (e) {
|
|
errorCatch(e)
|
|
}
|
|
}
|
|
|
|
return <PageLayout>
|
|
<div className="m-1 my-5 flex justify-between">
|
|
<h1 className="text-lg font-bold">Profile de l'utilisateur</h1>
|
|
<div>
|
|
<button type="button" onClick={logout} className="btn-primary text-lg font-bold">Se déconnecter</button>
|
|
</div>
|
|
</div>
|
|
<Card className="mb-5">
|
|
<div>Nom : <strong>{authUser?.name}</strong></div>
|
|
<div>Email : <strong>{authUser?.email}</strong></div>
|
|
</Card>
|
|
{/*<div>Update name & email</div>*/}
|
|
{/*<div>Change password</div>*/}
|
|
{/*<div>Delete Account</div>*/}
|
|
<Card>
|
|
<h2>Météo</h2>
|
|
|
|
{authUser?.locations && authUser.locations.length > 0 ? <>
|
|
<h3>Emplacements</h3>
|
|
<ul>
|
|
{authUser?.locations.map(location => <li key={location.id}>{location.latitude} - {location.longitude}</li>)}
|
|
</ul>
|
|
</> : <form onSubmit={submitLocation}>
|
|
<h3>Ajouter un emplacement</h3>
|
|
<div className="flex gap-2">
|
|
<Field name="latitude"
|
|
type="number"
|
|
step="0.0001"
|
|
value={latitude}
|
|
className="h-10"
|
|
onChange={event => setLatitude(Number(event.target.value))}>
|
|
Latitude
|
|
</Field>
|
|
<Field name="longitude"
|
|
type="number"
|
|
step="0.0001"
|
|
value={longitude}
|
|
className="h-10"
|
|
onChange={event => setLongitude(Number(event.target.value))}>
|
|
Longitude
|
|
</Field>
|
|
<div className="self-end">
|
|
<button type="submit" className="btn-primary w-24 h-10">Valider</button>
|
|
</div>
|
|
</div>
|
|
</form>}
|
|
|
|
</Card>
|
|
</PageLayout>
|
|
}
|
|
|
|
export default Profile
|