diff --git a/package-lock.json b/package-lock.json index 77b39e4..a7b7b21 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12187,6 +12187,7 @@ "version": "0.26.3", "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.26.3.tgz", "integrity": "sha512-NdEJ9S6AMr8Px0zgtFo1TJjMK/ROMU92MkDtYn2BBrDjIx3YfH9TUyGdzPC+I/L619GeYQc690Vbaxc5FPCCWg==", + "hasInstallScript": true, "optional": true, "dependencies": { "array-flatten": "^3.0.0", diff --git a/src/pages/signup/[...params].tsx b/src/pages/signup/[...params].tsx deleted file mode 100644 index e760818..0000000 --- a/src/pages/signup/[...params].tsx +++ /dev/null @@ -1,104 +0,0 @@ -import React, { useEffect, useState } from "react"; -import { NextPage, GetServerSideProps } from "next"; -import Head from "next/head"; -import { useRouter } from "next/router"; -import { getForm, SignupForm } from "@models/SignupForm"; -import { - createSignup, updateSignup, getSignupUUID, Signup, -} from "@models/Signup"; -import SignUpPageView from "@views/SignUpPage/SignUpPageView"; -import PageWrapper from "@views/common/PageWrapper"; -import noop from "@utils/noop"; - -const parseQueryParams = (params: any) => { - let formId; - let signupId; - const uuid = params?.[2]; - - if (params?.[0] === "edit") { - signupId = params?.[1]; - } else { - formId = params?.[0]; - } - - return { - formId, - signupId, - uuid, - }; -}; - -const SignUpPage: NextPage = () => { - const router = useRouter(); - const { formId, signupId, uuid } = parseQueryParams(router.query.params); - - const [signUpForm, setForm] = useState(null); - const [formData, setFormData] = useState({}); - const [statusMessage, setStatus] = useState(null); - - useEffect(() => { - const fetchSignUpForm = async (id: number): Promise => { - const formPromise = getForm(id); - formPromise.then((form) => { - setForm(form); - }); - return formPromise; - }; - - const fetchSignUp = async (id: number, uniqueId: string): Promise => { - const signupPromise = getSignupUUID(id, uniqueId); - signupPromise.then((signup) => setFormData(signup.answer)); - return signupPromise; - }; - - if (signupId) { - fetchSignUp(signupId, uuid).then((s) => fetchSignUpForm(s.signupForm_id)); - } else if (formId) { - fetchSignUpForm(formId); - } - }, [formId, signupId, uuid]); - - const onSubmit = async (data) => { - const payload: Signup = { - id: signupId ? Number(signupId) : undefined, - signupForm_id: signUpForm.id, - answer: data.formData, - }; - - try { - if (uuid) { - await updateSignup(payload, uuid); - // TODO: Update signup list, so user sees possible changes in the list - setStatus("Sign-up submission updated successfully"); - } else { - await createSignup(payload); - // TODO: Fetch/update signup list, so user sees the signup in the list - setStatus("Sign-up submitted successfully"); - } - } catch (error) { - console.error(error); - setStatus("Bad request"); - } - }; - - return ( - <> - - - - - - - - ); -}; - -export const getServerSideProps: GetServerSideProps = async () => ({ props: {} }); - -export default SignUpPage; diff --git a/src/pages/signup/[id].tsx b/src/pages/signup/[id].tsx new file mode 100644 index 0000000..22634a3 --- /dev/null +++ b/src/pages/signup/[id].tsx @@ -0,0 +1,76 @@ +import React, { useState } from "react"; +import { NextPage, GetStaticProps, GetStaticPaths } from "next"; +import Head from "next/head"; +import { getForm, SignupForm, getForms } from "@models/SignupForm"; +import { createSignup, Signup } from "@models/Signup"; +import SignUpPageView from "@views/SignUpPage/SignUpPageView"; +import PageWrapper from "@views/common/PageWrapper"; +import noop from "@utils/noop"; + +type InitialProps = { + form: SignupForm; +}; + +const SignUpPage: NextPage = ({ form }) => { + const [statusMessage, setStatus] = useState(null); + + const onSubmit = async (data) => { + const payload: Signup = { + signupForm_id: form.id, + answer: data.formData, + }; + + try { + await createSignup(payload); + // TODO: Fetch/update signup list, so user sees the signup in the list + setStatus("Sign-up submitted successfully"); + } catch (error) { + console.error(error); + setStatus("Bad request"); + } + }; + + return ( + <> + + + + + + + + ); +}; + +export const getStaticPaths: GetStaticPaths = async () => { + const allForms = await getForms(); + const paths = allForms.map((e: SignupForm) => ({ + params: { + id: String(e.id), + }, + } + )); + return { + paths, + fallback: false, + }; +}; + +export const getStaticProps: GetStaticProps = async ({ params }) => { + const { id } = params; + const form = await getForm(Number(id)); + return { + props: { + form, + }, + revalidate: 60, + }; +}; + +export default SignUpPage; diff --git a/src/pages/signup/edit/[id]/[uuid].tsx b/src/pages/signup/edit/[id]/[uuid].tsx new file mode 100644 index 0000000..319de28 --- /dev/null +++ b/src/pages/signup/edit/[id]/[uuid].tsx @@ -0,0 +1,81 @@ +import React, { useEffect, useState } from "react"; +import { NextPage } from "next"; +import { useRouter } from "next/router"; +import { getForm, SignupForm } from "@models/SignupForm"; +import { updateSignup, getSignupUUID, Signup } from "@models/Signup"; +import SignUpPageView from "@views/SignUpPage/SignUpPageView"; +import PageWrapper from "@views/common/PageWrapper"; +import noop from "@utils/noop"; + +interface QueryParams { + id?: string; + uuid?: string; +} + +const parseQueryParams = (query: QueryParams) => { + const { id, uuid } = query; + + return { + signupId: id ? Number(id) : undefined, + uuid, + }; +}; + +const EditSignUpPage: NextPage = () => { + const router = useRouter(); + const { signupId, uuid } = parseQueryParams(router.query); + const [signUpForm, setForm] = useState(null); + const [formData, setFormData] = useState({}); + const [statusMessage, setStatus] = useState(null); + + useEffect(() => { + const fetchSignUpForm = async (id: number): Promise => { + const formPromise = getForm(id); + formPromise.then((form) => { + setForm(form); + }); + return formPromise; + }; + + const fetchSignUp = async (id: number, uniqueId: string): Promise => { + const signupPromise = getSignupUUID(id, uniqueId); + signupPromise.then((signup) => setFormData(signup.answer)); + return signupPromise; + }; + + if (signupId) { + fetchSignUp(signupId, uuid).then((s) => fetchSignUpForm(s.signupForm_id)); + } + }, [signupId, uuid]); + + const onSubmit = async (data) => { + const payload: Signup = { + id: Number(signupId), + signupForm_id: signUpForm.id, + answer: data.formData, + }; + + try { + await updateSignup(payload, uuid); + // TODO: Update signup list, so user sees possible changes in the list + setStatus("Sign-up submission updated successfully"); + } catch (error) { + console.error(error); + setStatus("Bad request"); + } + }; + + return ( + + + + ); +}; + +export default EditSignUpPage; diff --git a/tests/testcafe/signupToEvent.test.ts b/tests/testcafe/signupToEvent.test.ts index 4704e4f..c8fc25a 100644 --- a/tests/testcafe/signupToEvent.test.ts +++ b/tests/testcafe/signupToEvent.test.ts @@ -18,6 +18,8 @@ fixture`Event signup`.page(getSiteRoot()) }); test("User signups to event from front page", async (t) => { + // Wait 60s, so server has revalidated & rebuilt itself + await t.wait(60000); const CardSelector = Selector("[data-e2e=\"event-card\"]").withText("title_fi").nth(0); await t