123 lines
4.0 KiB
TypeScript
123 lines
4.0 KiB
TypeScript
import { db } from "@/db";
|
|
import { FormFillerClient } from "../client";
|
|
import { LoginDialog } from "@/components/login-dialog";
|
|
import { getServerSession } from "next-auth";
|
|
import { authOptions } from "@/lib/auth/auth-options";
|
|
import { notFound } from "next/navigation";
|
|
import { canAccessForm, getSessionDiscordId } from "@/lib/auth/auth";
|
|
import { RealtimeRefresh } from "@/components/realtime-refresh";
|
|
import {
|
|
decodeCheckboxAnswer,
|
|
type FormAnswerValue,
|
|
} from "@/lib/form/form-answer-values";
|
|
import { getFormSubmissionStats } from "@/lib/form/form-submission-stats";
|
|
import { isFormAcceptingSubmissions } from "@/lib/form/form-availability";
|
|
|
|
export const dynamic = "force-dynamic";
|
|
|
|
export default async function FormsSubmitPage(
|
|
props: {
|
|
params: Promise<{ id: string }>;
|
|
searchParams: Promise<{ submission?: string | string[] }>;
|
|
}
|
|
) {
|
|
const [params, query] = await Promise.all([props.params, props.searchParams]);
|
|
const session = await getServerSession(authOptions);
|
|
const discordId = getSessionDiscordId(session);
|
|
|
|
const form = await db.query.forms.findFirst({
|
|
where: (f, { eq }) => eq(f.id, params.id),
|
|
});
|
|
|
|
if (!form) {
|
|
return notFound();
|
|
}
|
|
|
|
if (!discordId) {
|
|
return <LoginDialog />;
|
|
}
|
|
|
|
if (!(await canAccessForm(form, discordId))) {
|
|
return notFound();
|
|
}
|
|
|
|
const questionsList = await db.query.questions.findMany({
|
|
where: (q, { eq }) => eq(q.formId, form.id),
|
|
orderBy: (q, { asc }) => [asc(q.displayOrder)],
|
|
});
|
|
|
|
const [ownSubmissions, submissionStats] = await Promise.all([
|
|
db.query.submissions.findMany({
|
|
where: (s, { eq, and }) =>
|
|
and(eq(s.formId, form.id), eq(s.userDiscordId, discordId)),
|
|
orderBy: (s, { desc }) => [desc(s.submittedAt)],
|
|
columns: {
|
|
id: true,
|
|
submittedAt: true,
|
|
},
|
|
}),
|
|
getFormSubmissionStats([form.id], discordId),
|
|
]);
|
|
const stats = submissionStats.get(form.id) ?? {
|
|
totalAnswers: 0,
|
|
queueNumber: null,
|
|
};
|
|
|
|
const requestedSubmissionId = Array.isArray(query.submission)
|
|
? query.submission[0]
|
|
: query.submission;
|
|
const existingSubmission = form.allowMultipleSubmissions
|
|
? ownSubmissions.find((submission) => submission.id === requestedSubmissionId) ?? null
|
|
: ownSubmissions[0] ?? null;
|
|
|
|
const answersBySubmissionId: Record<
|
|
string,
|
|
Record<string, { value: FormAnswerValue; imageCdnId: string | null }>
|
|
> = {};
|
|
if (ownSubmissions.length > 0) {
|
|
const answersList = await db.query.answers.findMany({
|
|
where: (a, { inArray }) => inArray(a.submissionId, ownSubmissions.map((submission) => submission.id)),
|
|
});
|
|
const questionTypes = new Map(questionsList.map((question) => [question.id, question.type]));
|
|
for (const answer of answersList) {
|
|
answersBySubmissionId[answer.submissionId] ??= {};
|
|
answersBySubmissionId[answer.submissionId][answer.questionId] = {
|
|
value:
|
|
questionTypes.get(answer.questionId) === "checkbox"
|
|
? decodeCheckboxAnswer(answer.value)
|
|
: answer.value,
|
|
imageCdnId: answer.imageCdnId ?? null,
|
|
};
|
|
}
|
|
}
|
|
const initialAnswers = existingSubmission
|
|
? answersBySubmissionId[existingSubmission.id] ?? {}
|
|
: {};
|
|
|
|
return (
|
|
<>
|
|
<RealtimeRefresh topic="forms" formId={form.id} />
|
|
<div className="mx-auto max-w-2xl">
|
|
<FormFillerClient
|
|
form={{
|
|
...form,
|
|
isOpen: isFormAcceptingSubmissions(form),
|
|
closesAt: form.closesAt?.toISOString() ?? null,
|
|
}}
|
|
questions={questionsList}
|
|
initialAnswers={initialAnswers}
|
|
hasSubmission={Boolean(existingSubmission)}
|
|
selectedSubmissionId={existingSubmission?.id ?? null}
|
|
ownSubmissions={ownSubmissions.map((submission) => ({
|
|
id: submission.id,
|
|
submittedAt: submission.submittedAt.toISOString(),
|
|
answers: answersBySubmissionId[submission.id] ?? {},
|
|
}))}
|
|
totalAnswers={stats.totalAnswers}
|
|
queueNumber={stats.queueNumber}
|
|
/>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|