From c95a8b52de03819ccc70aa5b542f5d6d1a5e0cba Mon Sep 17 00:00:00 2001 From: Arthur Dodin Date: Wed, 1 Jul 2026 00:12:10 +0200 Subject: [PATCH 1/2] style(admin): increasing width of admin pages --- frontend/.prettierrc | 10 + .../AdminChallenge/adminChalengeList.tsx | 121 ++++++----- .../adminChallengeAddPointsForm.tsx | 60 +++--- .../AdminChallenge/adminChallengeEditor.tsx | 47 ++-- .../adminChallengeValidatedList.tsx | 85 ++++---- .../Admin/AdminPerm/adminPermAction.tsx | 52 ++--- .../Admin/AdminPerm/adminPermForm.tsx | 108 ++++------ .../Admin/AdminPerm/adminPermImport.tsx | 34 ++- .../Admin/AdminPerm/adminPermList.tsx | 99 +++++---- .../Admin/AdminPerm/adminPermMembers.tsx | 80 +++---- frontend/src/components/Admin/adminBus.tsx | 69 +++--- frontend/src/components/Admin/adminEmail.tsx | 15 +- frontend/src/components/Admin/adminEvent.tsx | 83 ++++--- .../components/Admin/adminExportImport.tsx | 74 +++---- .../src/components/Admin/adminFaction.tsx | 39 ++-- .../src/components/Admin/adminFileImport.tsx | 169 ++++++++------- frontend/src/components/Admin/adminGames.tsx | 48 ++--- frontend/src/components/Admin/adminLayout.tsx | 19 +- frontend/src/components/Admin/adminNews.tsx | 143 ++++++------- frontend/src/components/Admin/adminRole.tsx | 87 ++++---- .../src/components/Admin/adminShotgun.tsx | 32 +-- frontend/src/components/Admin/adminTeam.tsx | 156 +++++++------- frontend/src/components/Admin/adminTent.tsx | 69 +++--- frontend/src/components/Admin/adminUser.tsx | 202 ++++++++---------- 24 files changed, 901 insertions(+), 1000 deletions(-) create mode 100644 frontend/.prettierrc diff --git a/frontend/.prettierrc b/frontend/.prettierrc new file mode 100644 index 0000000..b7db128 --- /dev/null +++ b/frontend/.prettierrc @@ -0,0 +1,10 @@ +{ + "semi": true, + "trailingComma": "all", + "singleQuote": true, + "printWidth": 120, + "tabWidth": 4, + "arrowParens": "always", + "endOfLine": "lf", + "bracketSameLine": true +} diff --git a/frontend/src/components/Admin/AdminChallenge/adminChalengeList.tsx b/frontend/src/components/Admin/AdminChallenge/adminChalengeList.tsx index 2b1661d..0fbb322 100644 --- a/frontend/src/components/Admin/AdminChallenge/adminChalengeList.tsx +++ b/frontend/src/components/Admin/AdminChallenge/adminChalengeList.tsx @@ -1,16 +1,16 @@ -import { CheckCircle2, Edit, Search, Trash2 } from "lucide-react"; -import { useMemo, useState } from "react"; -import Select, { type SingleValue } from "react-select"; -import Swal from "sweetalert2"; - -import { type Challenge } from "../../../interfaces/challenge.interface"; -import { type Faction } from "../../../interfaces/faction.interface"; -import { type Team } from "../../../interfaces/team.interface"; -import { type User } from "../../../interfaces/user.interface"; -import { deleteChallenge, validateChallenge } from "../../../services/requests/challenge.service"; -import { Button } from "../../ui/button"; -import { Card, CardContent, CardHeader, CardTitle } from "../../ui/card"; -import { Input } from "../../ui/input"; +import { CheckCircle2, Edit, Search, Trash2 } from 'lucide-react'; +import { useMemo, useState } from 'react'; +import Select, { type SingleValue } from 'react-select'; +import Swal from 'sweetalert2'; + +import { type Challenge } from '../../../interfaces/challenge.interface'; +import { type Faction } from '../../../interfaces/faction.interface'; +import { type Team } from '../../../interfaces/team.interface'; +import { type User } from '../../../interfaces/user.interface'; +import { deleteChallenge, validateChallenge } from '../../../services/requests/challenge.service'; +import { Button } from '../../ui/button'; +import { Card, CardContent, CardHeader, CardTitle } from '../../ui/card'; +import { Input } from '../../ui/input'; interface Props { challenges: Challenge[]; @@ -21,44 +21,43 @@ interface Props { users: User[]; } -type ValidationTarget = "user" | "team" | "faction"; +type ValidationTarget = 'user' | 'team' | 'faction'; const AdminChallengeList = ({ challenges, refreshChallenges, onEdit, teams, factions, users }: Props) => { const [showValidationFormForId, setShowValidationFormForId] = useState(null); const [validationType, setValidationType] = useState(null); const [selectedTargetId, setSelectedTargetId] = useState(null); - const [searchTerm, setSearchTerm] = useState(""); - + const [searchTerm, setSearchTerm] = useState(''); const filteredChallenges = useMemo(() => { return challenges.filter( (c) => c.title.toLowerCase().includes(searchTerm.toLowerCase()) || c.description.toLowerCase().includes(searchTerm.toLowerCase()) || - c.category.toLowerCase().includes(searchTerm.toLowerCase()) + c.category.toLowerCase().includes(searchTerm.toLowerCase()), ); }, [challenges, searchTerm]); const handleDelete = async (id: number) => { const confirm = await Swal.fire({ - title: "Supprimer ce challenge ?", - text: "Cette action est irréversible 🚨", - icon: "warning", + title: 'Supprimer ce challenge ?', + text: 'Cette action est irréversible 🚨', + icon: 'warning', showCancelButton: true, - confirmButtonColor: "#e3342f", - cancelButtonColor: "#6b7280", - confirmButtonText: "Oui, supprimer", - cancelButtonText: "Annuler", + confirmButtonColor: '#e3342f', + cancelButtonColor: '#6b7280', + confirmButtonText: 'Oui, supprimer', + cancelButtonText: 'Annuler', }); if (!confirm.isConfirmed) return; try { await deleteChallenge(id); - Swal.fire("Supprimé ✅", "Le challenge a bien été supprimé.", "success"); + Swal.fire('Supprimé ✅', 'Le challenge a bien été supprimé.', 'success'); refreshChallenges(); } catch { - Swal.fire("Erreur ❌", "Impossible de supprimer le challenge.", "error"); + Swal.fire('Erreur ❌', 'Impossible de supprimer le challenge.', 'error'); } }; @@ -73,8 +72,8 @@ const AdminChallengeList = ({ challenges, refreshChallenges, onEdit, teams, fact }); Swal.fire({ - icon: "success", - title: "Challenge validé ✅", + icon: 'success', + title: 'Challenge validé ✅', text: res.message, timer: 2000, showConfirmButton: false, @@ -85,24 +84,21 @@ const AdminChallengeList = ({ challenges, refreshChallenges, onEdit, teams, fact setSelectedTargetId(null); refreshChallenges(); } catch (err) { - console.error("Erreur lors de la validation du challenge", err); + console.error('Erreur lors de la validation du challenge', err); Swal.fire({ - icon: "error", - title: "Erreur ❌", - text: "Impossible de valider ce challenge. Réessaie plus tard.", + icon: 'error', + title: 'Erreur ❌', + text: 'Impossible de valider ce challenge. Réessaie plus tard.', }); } }; return ( - + - - 📜 Challenges - + 📜 Challenges - {/* 🔎 Barre de recherche */}
@@ -119,10 +115,7 @@ const AdminChallengeList = ({ challenges, refreshChallenges, onEdit, teams, fact
{filteredChallenges.length > 0 ? ( filteredChallenges.map((c) => ( - +

{c.title}

@@ -134,20 +127,17 @@ const AdminChallengeList = ({ challenges, refreshChallenges, onEdit, teams, fact
@@ -159,21 +149,28 @@ const AdminChallengeList = ({ challenges, refreshChallenges, onEdit, teams, fact setSelectedTargetId(Number(option?.value))} + onChange={(option) => + setSelectedTargetId(Number(option?.value)) + } options={users.map((u: User) => ({ value: u.userId, label: `${u.firstName} ${u.lastName}`, @@ -181,10 +178,12 @@ const AdminChallengeList = ({ challenges, refreshChallenges, onEdit, teams, fact /> )} - {validationType === "team" && ( + {validationType === 'team' && ( setSelectedTargetId(Number(option?.value))} + onChange={(option) => + setSelectedTargetId(Number(option?.value)) + } options={factions.map((f: Faction) => ({ value: f.factionId, label: f.name, @@ -206,8 +207,7 @@ const AdminChallengeList = ({ challenges, refreshChallenges, onEdit, teams, fact
diff --git a/frontend/src/components/Admin/AdminChallenge/adminChallengeAddPointsForm.tsx b/frontend/src/components/Admin/AdminChallenge/adminChallengeAddPointsForm.tsx index 1fa1e03..9f6dd0d 100644 --- a/frontend/src/components/Admin/AdminChallenge/adminChallengeAddPointsForm.tsx +++ b/frontend/src/components/Admin/AdminChallenge/adminChallengeAddPointsForm.tsx @@ -1,20 +1,20 @@ -import { useEffect, useState } from "react"; -import Select from "react-select"; -import Swal from "sweetalert2"; +import { useEffect, useState } from 'react'; +import Select from 'react-select'; +import Swal from 'sweetalert2'; -import { type Faction } from "../../../interfaces/faction.interface"; -import { addPointsToFaction } from "../../../services/requests/challenge.service"; -import { getAllFactionsAdmin } from "../../../services/requests/faction.service"; -import { Button } from "../../ui/button"; -import { Card, CardContent, CardHeader, CardTitle } from "../../ui/card"; -import { Input } from "../../ui/input"; +import { type Faction } from '../../../interfaces/faction.interface'; +import { addPointsToFaction } from '../../../services/requests/challenge.service'; +import { getAllFactionsAdmin } from '../../../services/requests/faction.service'; +import { Button } from '../../ui/button'; +import { Card, CardContent, CardHeader, CardTitle } from '../../ui/card'; +import { Input } from '../../ui/input'; export const AdminChallengeAddPointsForm = () => { const [factions, setFactions] = useState([]); - const [title, setTitle] = useState(""); + const [title, setTitle] = useState(''); const [factionId, setFactionId] = useState(null); - const [points, setPoints] = useState(""); - const [reason, setReason] = useState(""); + const [points, setPoints] = useState(''); + const [reason, setReason] = useState(''); useEffect(() => { const fetchFactions = async () => { @@ -22,7 +22,7 @@ export const AdminChallengeAddPointsForm = () => { const response = await getAllFactionsAdmin(); setFactions(response); } catch { - Swal.fire("Erreur", "Impossible de récupérer les factions", "error"); + Swal.fire('Erreur', 'Impossible de récupérer les factions', 'error'); } }; fetchFactions(); @@ -30,13 +30,13 @@ export const AdminChallengeAddPointsForm = () => { const handleSubmit = async () => { if (!title || !factionId || !points || !reason) { - Swal.fire("Champs manquants", "Tous les champs doivent être remplis", "warning"); + Swal.fire('Champs manquants', 'Tous les champs doivent être remplis', 'warning'); return; } const pointsNumber = Number(points); if (isNaN(pointsNumber)) { - Swal.fire("Erreur", "Veuillez entrer un nombre valide pour les points", "error"); + Swal.fire('Erreur', 'Veuillez entrer un nombre valide pour les points', 'error'); return; } @@ -49,41 +49,42 @@ export const AdminChallengeAddPointsForm = () => { }); Swal.fire({ - icon: "success", - title: "Succès", + icon: 'success', + title: 'Succès', text: result.message, timer: 1500, showConfirmButton: false, }); - setTitle(""); + setTitle(''); setFactionId(null); - setPoints(""); - setReason(""); + setPoints(''); + setReason(''); } catch { - Swal.fire("Erreur", "❌ Une erreur est survenue lors de l'ajout des points", "error"); + Swal.fire('Erreur', "❌ Une erreur est survenue lors de l'ajout des points", 'error'); } }; return (
- + 🎯 Ajouter des points à une faction - setTitle(e.target.value)} placeholder="Titre du challenge" /> setPoints(e.target.value)} placeholder="Nombre de points" /> + setPoints(e.target.value)} + placeholder="Nombre de points" + /> setReason(e.target.value)} placeholder="Raison" /> diff --git a/frontend/src/components/Admin/AdminChallenge/adminChallengeEditor.tsx b/frontend/src/components/Admin/AdminChallenge/adminChallengeEditor.tsx index 0e72df2..6afb3a4 100644 --- a/frontend/src/components/Admin/AdminChallenge/adminChallengeEditor.tsx +++ b/frontend/src/components/Admin/AdminChallenge/adminChallengeEditor.tsx @@ -1,13 +1,13 @@ -import { Loader2 } from "lucide-react"; -import { useEffect, useState } from "react"; -import Select from "react-select"; -import Swal from "sweetalert2"; +import { Loader2 } from 'lucide-react'; +import { useEffect, useState } from 'react'; +import Select from 'react-select'; +import Swal from 'sweetalert2'; -import { type Challenge } from "../../../interfaces/challenge.interface"; -import { createChallenge, updateChallenge } from "../../../services/requests/challenge.service"; -import { Button } from "../../ui/button"; -import { Card, CardContent, CardHeader, CardTitle } from "../../ui/card"; -import { Input } from "../../ui/input"; +import { type Challenge } from '../../../interfaces/challenge.interface'; +import { createChallenge, updateChallenge } from '../../../services/requests/challenge.service'; +import { Button } from '../../ui/button'; +import { Card, CardContent, CardHeader, CardTitle } from '../../ui/card'; +import { Input } from '../../ui/input'; interface Props { editingChallenge: Challenge | null; @@ -16,14 +16,14 @@ interface Props { } const categoryOptions = [ - { value: "Team", label: "Team" }, - { value: "Faction", label: "Faction" }, - { value: "User", label: "User" }, - { value: "Autre", label: "Autre" }, + { value: 'Team', label: 'Team' }, + { value: 'Faction', label: 'Faction' }, + { value: 'User', label: 'User' }, + { value: 'Autre', label: 'Autre' }, ]; const ChallengeEditor = ({ editingChallenge, setEditingChallenge, refreshChallenges }: Props) => { - const [form, setForm] = useState({ title: "", description: "", category: "", points: 0 }); + const [form, setForm] = useState({ title: '', description: '', category: '', points: 0 }); const [loading, setLoading] = useState(false); useEffect(() => { @@ -38,7 +38,7 @@ const ChallengeEditor = ({ editingChallenge, setEditingChallenge, refreshChallen }, [editingChallenge]); const resetForm = () => { - setForm({ title: "", description: "", category: "", points: 0 }); + setForm({ title: '', description: '', category: '', points: 0 }); setEditingChallenge(null); }; @@ -47,25 +47,25 @@ const ChallengeEditor = ({ editingChallenge, setEditingChallenge, refreshChallen try { if (editingChallenge) { await updateChallenge({ id: editingChallenge.id, ...form }); - Swal.fire({ icon: "success", title: "Challenge mis à jour !" }); + Swal.fire({ icon: 'success', title: 'Challenge mis à jour !' }); } else { await createChallenge(form); - Swal.fire({ icon: "success", title: "Challenge créé !" }); + Swal.fire({ icon: 'success', title: 'Challenge créé !' }); } refreshChallenges(); resetForm(); } catch { - Swal.fire({ icon: "error", title: "Erreur lors de l'enregistrement" }); + Swal.fire({ icon: 'error', title: "Erreur lors de l'enregistrement" }); } finally { setLoading(false); } }; return ( - + - {editingChallenge ? "✏️ Modifier Challenge" : "🛠️ Créer Challenge"} + {editingChallenge ? '✏️ Modifier Challenge' : '🛠️ Créer Challenge'} @@ -83,7 +83,7 @@ const ChallengeEditor = ({ editingChallenge, setEditingChallenge, refreshChallen placeholder="Catégorie" options={categoryOptions} value={categoryOptions.find((opt) => opt.value === form.category)} - onChange={(opt) => setForm({ ...form, category: opt?.value || "" })} + onChange={(opt) => setForm({ ...form, category: opt?.value || '' })} /> - {loading ? : "Enregistrer"} + className="bg-green-600 hover:bg-green-700 text-white"> + {loading ? : 'Enregistrer'} {editingChallenge && (
diff --git a/frontend/src/components/Admin/AdminPerm/adminPermAction.tsx b/frontend/src/components/Admin/AdminPerm/adminPermAction.tsx index 9702189..d0458e3 100644 --- a/frontend/src/components/Admin/AdminPerm/adminPermAction.tsx +++ b/frontend/src/components/Admin/AdminPerm/adminPermAction.tsx @@ -1,9 +1,9 @@ -import Swal from "sweetalert2"; +import Swal from 'sweetalert2'; -import { Button } from "../../../components/ui/button"; -import { Card, CardContent, CardHeader, CardTitle } from "../../../components/ui/card"; -import { type PermanenceActionsProps } from "../../../interfaces/permanence.interface"; -import { closePermanence, openPermanence } from "../../../services/requests/permanence.service"; +import { Button } from '../../../components/ui/button'; +import { Card, CardContent, CardHeader, CardTitle } from '../../../components/ui/card'; +import { type PermanenceActionsProps } from '../../../interfaces/permanence.interface'; +import { closePermanence, openPermanence } from '../../../services/requests/permanence.service'; // Fonction utilitaire pour "normaliser" une date au début de journée (00:00:00) const normalizeDate = (d: Date): Date => { @@ -19,12 +19,12 @@ const inSevenDays = (): Date => { const PermanenceActions: React.FC = ({ permanences, onRefresh }) => { const handleOpenAll = async (): Promise => { const confirm = await Swal.fire({ - title: "Ouvrir toutes à J+7 ?", - text: "Toutes les permanences commençant avant J+7 seront ouvertes.", - icon: "question", + title: 'Ouvrir toutes à J+7 ?', + text: 'Toutes les permanences commençant avant J+7 seront ouvertes.', + icon: 'question', showCancelButton: true, - confirmButtonText: "Ouvrir", - cancelButtonText: "Annuler", + confirmButtonText: 'Ouvrir', + cancelButtonText: 'Annuler', }); if (!confirm.isConfirmed) return; @@ -38,21 +38,21 @@ const PermanenceActions: React.FC = ({ permanences, onRe try { await Promise.all(toOpen.map((p) => openPermanence(p.id))); - await Swal.fire("Ouvertes", "Toutes les permanences ont été ouvertes !", "success"); + await Swal.fire('Ouvertes', 'Toutes les permanences ont été ouvertes !', 'success'); onRefresh(); } catch { - Swal.fire("Erreur", "Une erreur est survenue lors de l'ouverture", "error"); + Swal.fire('Erreur', "Une erreur est survenue lors de l'ouverture", 'error'); } }; const handleCloseAll = async (): Promise => { const confirm = await Swal.fire({ - title: "Fermer toutes à J+7 ?", - text: "Toutes les permanences commençant avant J+7 seront fermées.", - icon: "warning", + title: 'Fermer toutes à J+7 ?', + text: 'Toutes les permanences commençant avant J+7 seront fermées.', + icon: 'warning', showCancelButton: true, - confirmButtonText: "Fermer", - cancelButtonText: "Annuler", + confirmButtonText: 'Fermer', + cancelButtonText: 'Annuler', }); if (!confirm.isConfirmed) return; @@ -63,26 +63,28 @@ const PermanenceActions: React.FC = ({ permanences, onRe }); try { await Promise.all(toClose.map((p) => closePermanence(p.id))); - await Swal.fire("Fermées", "Toutes les permanences ont été fermées !", "success"); + await Swal.fire('Fermées', 'Toutes les permanences ont été fermées !', 'success'); onRefresh(); } catch { - Swal.fire("Erreur", "Une erreur est survenue lors de la fermeture", "error"); + Swal.fire('Erreur', 'Une erreur est survenue lors de la fermeture', 'error'); } }; return ( - + - - ⚡ Actions rapides - + ⚡ Actions rapides
- -
diff --git a/frontend/src/components/Admin/AdminPerm/adminPermForm.tsx b/frontend/src/components/Admin/AdminPerm/adminPermForm.tsx index 97d1e25..854e37a 100644 --- a/frontend/src/components/Admin/AdminPerm/adminPermForm.tsx +++ b/frontend/src/components/Admin/AdminPerm/adminPermForm.tsx @@ -1,19 +1,16 @@ -import { useEffect, useState } from "react"; -import Select from "react-select"; -import Swal from "sweetalert2"; - -import { Button } from "../../../components/ui/button"; -import { Card, CardContent, CardHeader, CardTitle } from "../../../components/ui/card"; -import { Input } from "../../../components/ui/input"; -import { Textarea } from "../../../components/ui/textarea"; -import { type Permanence } from "../../../interfaces/permanence.interface"; -import { type User } from "../../../interfaces/user.interface"; -import { - createPermanence, - updatePermanence, -} from "../../../services/requests/permanence.service"; -import { getUsers } from "../../../services/requests/user.service"; -import { formatDateForDB, formatDateForInput } from "../../utils/datetime_utils"; +import { useEffect, useState } from 'react'; +import Select from 'react-select'; +import Swal from 'sweetalert2'; + +import { Button } from '../../../components/ui/button'; +import { Card, CardContent, CardHeader, CardTitle } from '../../../components/ui/card'; +import { Input } from '../../../components/ui/input'; +import { Textarea } from '../../../components/ui/textarea'; +import { type Permanence } from '../../../interfaces/permanence.interface'; +import { type User } from '../../../interfaces/user.interface'; +import { createPermanence, updatePermanence } from '../../../services/requests/permanence.service'; +import { getUsers } from '../../../services/requests/user.service'; +import { formatDateForDB, formatDateForInput } from '../../utils/datetime_utils'; interface PermanenceFormProps { editMode: boolean; @@ -22,15 +19,10 @@ interface PermanenceFormProps { onCancelEdit: () => void; } -const PermanenceForm = ({ - editMode, - editPermanence, - onRefresh, - onCancelEdit, -}: PermanenceFormProps) => { - const [name, setName] = useState(""); - const [desc, setDesc] = useState(""); - const [location, setLocation] = useState(""); +const PermanenceForm = ({ editMode, editPermanence, onRefresh, onCancelEdit }: PermanenceFormProps) => { + const [name, setName] = useState(''); + const [desc, setDesc] = useState(''); + const [location, setLocation] = useState(''); const [startAt, setStartAt] = useState(Date); const [endAt, setEndAt] = useState(Date); const [capacity, setCapacity] = useState(0); @@ -44,7 +36,7 @@ const PermanenceForm = ({ const data = await getUsers(); setUsers(data); } catch { - Swal.fire("Erreur", "Impossible de charger les utilisateurs", "error"); + Swal.fire('Erreur', 'Impossible de charger les utilisateurs', 'error'); } }; @@ -69,27 +61,25 @@ const PermanenceForm = ({ const handleSubmit = async () => { if (!editMode) { if (!name || !desc || !location || !startAt || !endAt) { - Swal.fire("Erreur", "Veuillez remplir tous les champs", "warning"); + Swal.fire('Erreur', 'Veuillez remplir tous les champs', 'warning'); return; } if (capacity < 0 || difficulty < 0) { - Swal.fire("Erreur", "Capacité et difficulté doivent être positives", "warning"); + Swal.fire('Erreur', 'Capacité et difficulté doivent être positives', 'warning'); return; } } - const respoId = respo && !isNaN(Number(respo.userId)) ? Number(respo.userId) : null; - try { const payload = { name, description: desc, location, start_at: formatDateForDB(startAt), // ✅ en UTC - end_at: formatDateForDB(endAt), // ✅ en UTC + end_at: formatDateForDB(endAt), // ✅ en UTC capacity, difficulty, respoId, @@ -97,26 +87,26 @@ const PermanenceForm = ({ if (editMode && editPermanence) { await updatePermanence(editPermanence.id, payload); - Swal.fire("Succès", "Permanence mise à jour", "success"); + Swal.fire('Succès', 'Permanence mise à jour', 'success'); onCancelEdit(); } else { await createPermanence(payload); - Swal.fire("Succès", "Permanence créée", "success"); + Swal.fire('Succès', 'Permanence créée', 'success'); } resetForm(); onRefresh(); } catch (err: any) { - Swal.fire("Erreur", err.response.data.message, "error"); + Swal.fire('Erreur', err.response.data.message, 'error'); } }; const resetForm = () => { - setName(""); - setDesc(""); - setLocation(""); - setStartAt(""); - setEndAt(""); + setName(''); + setDesc(''); + setLocation(''); + setStartAt(''); + setEndAt(''); setCapacity(0); setDifficulty(0); setRespo(null); @@ -127,33 +117,19 @@ const PermanenceForm = ({ label: `${user.firstName} ${user.lastName}`, })); - const selectedRespoOption = respo - ? { value: respo.userId, label: `${respo.firstName} ${respo.lastName}` } - : null; + const selectedRespoOption = respo ? { value: respo.userId, label: `${respo.firstName} ${respo.lastName}` } : null; return ( - + - {editMode ? "✏️ Modifier une permanence" : "➕ Créer une permanence"} + {editMode ? '✏️ Modifier une permanence' : '➕ Créer une permanence'} - setName(e.target.value)} - /> -