106 lines
4.2 KiB
JavaScript
106 lines
4.2 KiB
JavaScript
import {useNavigate, useParams} from "react-router-dom";
|
|
import {LoadingProvider, useLoadingSwitcher} from "../../../hooks/useLoading.jsx";
|
|
import {useFetch} from "../../../hooks/useFetch.js";
|
|
import {AxiosError} from "../../../components/AxiosError.jsx";
|
|
import {CompteInfo} from "./CompteInfo.jsx";
|
|
import {InformationForm} from "./InformationForm.jsx";
|
|
import {LicenceCard} from "./LicenceCard.jsx";
|
|
import {ConfirmDialog} from "../../../components/ConfirmDialog.jsx";
|
|
import {apiAxios, errFormater} from "../../../utils/Tools.js";
|
|
import {toast} from "react-toastify";
|
|
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
|
|
import {faFilePdf} from "@fortawesome/free-solid-svg-icons";
|
|
|
|
const vite_url = import.meta.env.VITE_URL;
|
|
|
|
export function MemberPage() {
|
|
const {id} = useParams()
|
|
const navigate = useNavigate();
|
|
|
|
const setLoading = useLoadingSwitcher()
|
|
const {data, error} = useFetch(`/member/${id}`, setLoading, 1)
|
|
|
|
const handleRm = () => {
|
|
toast.promise(
|
|
apiAxios.delete(`/member/club/${id}`),
|
|
{
|
|
pending: "Suppression du compte en cours...",
|
|
success: "Compte supprimé avec succès 🎉",
|
|
error: {
|
|
render({data}) {
|
|
return errFormater(data, "Échec de la suppression du compte")
|
|
}
|
|
}
|
|
}
|
|
).then(_ => {
|
|
navigate("/club/member")
|
|
})
|
|
}
|
|
|
|
return <>
|
|
<h2>Page membre</h2>
|
|
<button type="button" className="btn btn-link" onClick={() => navigate("/club/member")}>
|
|
« retour
|
|
</button>
|
|
{data
|
|
? <div>
|
|
<div className="row">
|
|
<div className="col-lg-4">
|
|
<PhotoCard data={data}/>
|
|
<LoadingProvider><CompteInfo userData={data}/></LoadingProvider>
|
|
</div>
|
|
<div className="col-lg-8">
|
|
<InformationForm data={data}/>
|
|
<div className="row">
|
|
<div className="col-md-6">
|
|
<LoadingProvider><LicenceCard userData={data}/></LoadingProvider>
|
|
</div>
|
|
<div className="col-md-6">
|
|
<LoadingProvider><SelectCard/></LoadingProvider>
|
|
</div>
|
|
</div>
|
|
<div className="col" style={{textAlign: 'right', marginTop: '1em'}}>
|
|
<button className="btn btn-danger btn-sm" data-bs-toggle="modal" data-bs-target="#confirm-delete">Supprimer le compte
|
|
</button>
|
|
</div>
|
|
<ConfirmDialog title="Supprimer le compte" message="Êtes-vous sûr de vouloir supprimer ce compte ?"
|
|
onConfirm={handleRm}/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
: error && <AxiosError error={error}/>
|
|
}
|
|
</>
|
|
}
|
|
|
|
function PhotoCard({data}) {
|
|
return <div className="card mb-4">
|
|
<div className="card-header">{data.licence ? "Licence n°" + data.licence : "Pas de licence"}</div>
|
|
<div className="card-body text-center">
|
|
<div className="input-group mb-3">
|
|
<img
|
|
src={`${vite_url}/api/member/${data.id}/photo`}
|
|
alt="avatar"
|
|
className="rounded-circle img-fluid" style={{object_fit: 'contain'}}/>
|
|
</div>
|
|
<a href={`${vite_url}/api/member/${data.id}/licence`} target='#'>
|
|
<button className="btn btn-primary" type="button" id="button-addon1"
|
|
onClick={e => null}>
|
|
Téléchargée la licence <FontAwesomeIcon icon={faFilePdf}></FontAwesomeIcon>
|
|
</button>
|
|
</a>
|
|
</div>
|
|
</div>;
|
|
}
|
|
|
|
function SelectCard() {
|
|
return <></>
|
|
/*return <div className="card mb-4 mb-md-0">
|
|
<div className="card-header">Sélection en équipe de France</div>
|
|
<div className="card-body">
|
|
<p className="mb-1">Soon</p>
|
|
|
|
</div>
|
|
</div>;*/
|
|
}
|