diff --git a/app/components/settings/match-student.tsx b/app/components/settings/match-student.tsx new file mode 100644 index 0000000..4f3f922 --- /dev/null +++ b/app/components/settings/match-student.tsx @@ -0,0 +1,84 @@ +import { useEffect, useState } from "react"; +import { Combobox } from "~/components/combobox"; +import { Label } from "~/components/ui/label"; +import { getStudentMatch, mergeStudent } from "~/lib/api"; + +type Student = { + id: string; + fistName: string; + lastName: string; +}; + +export function MatchStudent({ + firstName, + lastName, + onSuccess, +}: { + firstName: string; + lastName: string; + onSuccess: (student: Student) => void; +}) { + const [pastClasses, setPastClasses] = useState< + { value: string; label: string }[] + >([]); + useEffect(() => { + fetch("/past_classes.json") + .then((res) => res.json()) + .then((data) => { + setPastClasses(data); + }); + }, []); + + const [pastClassName, setPastClassName] = useState(""); + const [isLoading, setIsLoading] = useState(false); + const [matchedStudent, setMatchedStudent] = useState(null); + + useEffect(() => { + if (pastClassName) { + setIsLoading(true); + getStudentMatch(firstName, lastName, pastClassName) + .then((student) => { + setMatchedStudent(student); + setIsLoading(false); + }) + .catch(() => { + setMatchedStudent(null); + setIsLoading(false); + }); + } + }, [pastClassName, firstName, lastName]); + + const handleValidate = () => { + if (matchedStudent) { + mergeStudent(matchedStudent.id).then(() => { + onSuccess(matchedStudent); + }); + } + }; + + return ( +
+ +
+ +
+ {isLoading &&

Recherche en cours...

} + {matchedStudent && ( +
+

+ Correspondance trouvée: {matchedStudent.fistName}{" "} + {matchedStudent.lastName} +

+ +
+ )} +
+ ); +} diff --git a/app/components/settings/profile.tsx b/app/components/settings/profile.tsx index fa38602..6444836 100644 --- a/app/components/settings/profile.tsx +++ b/app/components/settings/profile.tsx @@ -8,6 +8,8 @@ import { Label } from "../ui/label"; import { Badge } from "../ui/badge"; import { useQueryClient } from "@tanstack/react-query"; import { useNavigate } from "react-router"; +import { MatchStudent } from "./match-student"; +import { Separator } from "../ui/separator"; export default function Profile({ user }: { user: User }) { const navigate = useNavigate(); @@ -64,6 +66,18 @@ export default function Profile({ user }: { user: User }) { + + + { + window.location.reload(); + }} + /> + + + {/* Logout Button */}