remove appointment from events

apps/hub/app/(app)/events/_components/Modal.tsx

@@ -1,56 +1,30 @@
 "use client";
 import { useEffect } from "react";
 import { CheckCircledIcon, EnterIcon, DrawingPinFilledIcon } from "@radix-ui/react-icons";
-import { Event, EventAppointment, Participant, User } from "@repo/db";
+import { Event, Participant, User } from "@repo/db";
 import { cn } from "@repo/shared-components";
 import { inscribeToMoodleCourse, upsertParticipant } from "../actions";
 import {
 	BookCheck,
-	Calendar,
 	Check,
 	CirclePlay,
-	Clock10Icon,
 	ExternalLink,
 	EyeIcon,
 	Info,
 	TriangleAlert,
 } from "lucide-react";
-import { useForm } from "react-hook-form";
-import {
-	InputJsonValueType,
-	ParticipantOptionalDefaults,
-	ParticipantOptionalDefaultsSchema,
-} from "@repo/db/zod";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { Select } from "../../../_components/ui/Select";
-import { useRouter } from "next/navigation";
-import { handleParticipantEnrolled } from "../../../../helper/events";
 import { eventCompleted } from "@repo/shared-components";
 import MDEditor from "@uiw/react-md-editor";
-import toast from "react-hot-toast";
-import { formatDate } from "date-fns";
 
 interface ModalBtnProps {
 	title: string;
 	event: Event;
-	dates: (EventAppointment & {
-		Participants: { userId: string }[];
-	})[];
-	selectedAppointments: EventAppointment[];
 	participant?: Participant;
 	user: User;
 	modalId: string;
 }
 
-const ModalBtn = ({
-	title,
-	dates,
-	modalId,
-	participant,
-	selectedAppointments,
-	event,
-	user,
-}: ModalBtnProps) => {
+const ModalBtn = ({ title, modalId, participant, event, user }: ModalBtnProps) => {
 	useEffect(() => {
 		const modal = document.getElementById(modalId) as HTMLDialogElement;
 		const handleOpen = () => {
@@ -66,12 +40,6 @@ const ModalBtn = ({
 			modal?.removeEventListener("close", handleClose);
 		};
 	}, [modalId]);
-	const router = useRouter();
-
-	const canSelectDate =
-		event.hasPresenceEvents &&
-		!participant?.attended &&
-		(selectedAppointments.length === 0 || participant?.appointmentCancelled);
 
 	const openModal = () => {
 		const modal = document.getElementById(modalId) as HTMLDialogElement;
@@ -82,29 +50,6 @@ const ModalBtn = ({
 		const modal = document.getElementById(modalId) as HTMLDialogElement;
 		modal?.close();
 	};
-	const selectAppointmentForm = useForm<ParticipantOptionalDefaults>({
-		resolver: zodResolver(ParticipantOptionalDefaultsSchema),
-		defaultValues: {
-			eventId: event.id,
-			userId: user.id,
-			...participant,
-		},
-	});
-	const selectedAppointment = selectedAppointments[0];
-	const selectedDate = dates.find(
-		(date) =>
-			date.id === selectAppointmentForm.watch("eventAppointmentId") || selectedAppointment?.id,
-	);
-	const ownIndexInParticipantList = selectedDate?.Participants?.findIndex(
-		(p) => p.userId === user.id,
-	);
-
-	const ownPlaceInParticipantList =
-		typeof ownIndexInParticipantList === "number"
-			? ownIndexInParticipantList === -1
-				? (selectedDate?.Participants?.length ?? 0) + 1
-				: ownIndexInParticipantList + 1
-			: undefined;
 
 	const missingRequirements =
 		event.requiredBadges?.length > 0 &&
@@ -163,79 +108,6 @@ const ModalBtn = ({
 								/>
 							</div>
 						</div>
-						{event.hasPresenceEvents && (
-							<div className="bg-base-300 flex min-w-[300px] flex-1 flex-col gap-2 rounded-lg p-3 shadow">
-								<h2 className="flex gap-2 text-lg font-bold">
-									<Calendar /> Termine
-								</h2>
-								<div className="flex flex-1 flex-col items-center justify-center">
-									{!!dates.length && !selectedDate && (
-										<>
-											<p className="text-info text-center">Melde dich zu einem Termin an</p>
-											<Select
-												form={selectAppointmentForm}
-												options={dates.map((date) => ({
-													label: `${formatDate(date.appointmentDate, "dd.MM.yyyy HH:mm")} - (${date.Participants.length}/${event.maxParticipants})`,
-													value: date.id,
-												}))}
-												name="eventAppointmentId"
-												label={""}
-												placeholder="Wähle einen Termin"
-												className="min-w-[250px]"
-											/>
-										</>
-									)}
-									{selectedAppointment && !participant?.appointmentCancelled && (
-										<div className="flex flex-col items-center justify-center gap-2">
-											<span>Dein ausgewählter Termin (Deutsche Zeit)</span>
-											<div>
-												<button
-													className="input input-border pointer-events-none min-w-[250px]"
-													style={{ anchorName: "--rdp" } as React.CSSProperties}
-												>
-													{new Date(selectedAppointment.appointmentDate).toLocaleString("de-DE", {
-														year: "numeric",
-														month: "2-digit",
-														day: "2-digit",
-														hour: "2-digit",
-														minute: "2-digit",
-													})}
-												</button>
-											</div>
-											{participant?.attended ? (
-												<p className="flex items-center justify-center gap-2 py-4">
-													<CheckCircledIcon className="text-success" />
-													Du hast an dem Presenztermin teilgenommen
-												</p>
-											) : (
-												<p className="flex items-center justify-center gap-2 py-4">
-													Bitte erscheine ~5 minuten vor dem Termin im Discord
-												</p>
-											)}
-										</div>
-									)}
-
-									{!dates.length && (
-										<p className="text-error text-center">Aktuell sind keine Termine verfügbar</p>
-									)}
-
-									{!!selectedDate &&
-										!!event.maxParticipants &&
-										!!ownPlaceInParticipantList &&
-										!!(ownPlaceInParticipantList > event.maxParticipants) && (
-											<p
-												role="alert"
-												className="alert alert-error alert-outline my-5 flex items-center justify-center gap-2 border py-4"
-											>
-												<TriangleAlert className="h-6 w-6 shrink-0 stroke-current" fill="none" />
-												Dieser Termin ist ausgebucht, wahrscheinlich wirst du nicht teilnehmen
-												können. (Listenplatz: {ownPlaceInParticipantList} , max.{" "}
-												{event.maxParticipants})
-											</p>
-										)}
-								</div>
-							</div>
-						)}
 						{event.finisherMoodleCourseId && (
 							<div className="bg-base-300 flex min-w-[300px] flex-1 flex-col gap-2 rounded-lg p-3 shadow">
 								<h2 className="flex gap-2 text-lg font-bold">
@@ -261,64 +133,6 @@ const ModalBtn = ({
 								{!event.requiredBadges.length && "Keine"}
 							</p>
 						</div>
-						<div className="modal-action">
-							{!!canSelectDate && (
-								<button
-									className={cn(
-										"btn btn-info btn-outline btn-wide",
-										event.type === "COURSE" && "btn-secondary",
-									)}
-									onClick={async () => {
-										const data = selectAppointmentForm.getValues();
-										if (!data.eventAppointmentId) return;
-
-										const participant = await upsertParticipant({
-											...data,
-											enscriptionDate: new Date(),
-											statusLog: data.statusLog?.filter((log) => log !== null),
-											appointmentCancelled: false,
-										});
-										await handleParticipantEnrolled(participant.id.toString());
-
-										router.refresh();
-										closeModal();
-									}}
-									disabled={!selectAppointmentForm.watch("eventAppointmentId")}
-								>
-									<EnterIcon /> Anmelden
-								</button>
-							)}
-							{selectedAppointment &&
-								!participant?.appointmentCancelled &&
-								!participant?.attended && (
-									<button
-										onClick={async () => {
-											await upsertParticipant({
-												eventId: event.id,
-												userId: participant!.userId,
-												appointmentCancelled: true,
-												statusLog: [
-													...(participant?.statusLog as unknown as InputJsonValueType[]),
-													{
-														data: {
-															appointmentId: selectedAppointment.id,
-															appointmentDate: selectedAppointment.appointmentDate,
-														},
-														user: `${user?.firstname} ${user?.lastname} - ${user?.publicId}`,
-														event: "Termin abgesagt",
-														timestamp: new Date(),
-													},
-												],
-											});
-											toast.success("Termin abgesagt");
-											router.refresh();
-										}}
-										className="btn btn-error btn-outline btn-wide"
-									>
-										Termin Absagen
-									</button>
-								)}
-						</div>
 					</div>
 				</div>
 				<button className="modal-backdrop" onClick={closeModal}>
@@ -335,7 +149,6 @@ const MoodleCourseIndicator = ({
 	completed,
 	moodleCourseId,
 	event,
-	participant,
 	user,
 }: {
 	user: User;
@@ -345,13 +158,6 @@ const MoodleCourseIndicator = ({
 	event: Event;
 }) => {
 	const courseUrl = `${process.env.NEXT_PUBLIC_MOODLE_URL}/course/view.php?id=${moodleCourseId}`;
-	if (event.hasPresenceEvents && !participant?.attended)
-		return (
-			<p className="flex items-center justify-center gap-2 py-4">
-				<Clock10Icon className="text-error" />
-				Abschlusstest erst nach Teilnahme verfügbar
-			</p>
-		);
 	if (completed)
 		return (
 			<p className="flex items-center justify-center gap-2 py-4">