Split signup pages for static generation
This commit is contained in:
Aarni Halinen
Generated
+1
@@ -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",
|
||||
|
||||
@@ -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<SignupForm> => {
|
||||
const formPromise = getForm(id);
|
||||
formPromise.then((form) => {
|
||||
setForm(form);
|
||||
});
|
||||
return formPromise;
|
||||
};
|
||||
|
||||
const fetchSignUp = async (id: number, uniqueId: string): Promise<Signup> => {
|
||||
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 (
|
||||
<>
|
||||
<Head>
|
||||
<link rel="canonical" href={`https://sik.ayy.fi/signup/${formId}`} />
|
||||
</Head>
|
||||
<PageWrapper>
|
||||
<SignUpPageView
|
||||
signUpForm={signUpForm}
|
||||
formData={formData}
|
||||
statusMessage={statusMessage}
|
||||
onChange={noop}
|
||||
onSubmit={onSubmit}
|
||||
/>
|
||||
</PageWrapper>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export const getServerSideProps: GetServerSideProps = async () => ({ props: {} });
|
||||
|
||||
export default SignUpPage;
|
||||
@@ -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<InitialProps> = ({ 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 (
|
||||
<>
|
||||
<Head>
|
||||
<link rel="canonical" href={`https://sik.ayy.fi/signup/${form.id}`} />
|
||||
</Head>
|
||||
<PageWrapper>
|
||||
<SignUpPageView
|
||||
signUpForm={form}
|
||||
formData={{}}
|
||||
statusMessage={statusMessage}
|
||||
onChange={noop}
|
||||
onSubmit={onSubmit}
|
||||
/>
|
||||
</PageWrapper>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
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<InitialProps> = async ({ params }) => {
|
||||
const { id } = params;
|
||||
const form = await getForm(Number(id));
|
||||
return {
|
||||
props: {
|
||||
form,
|
||||
},
|
||||
revalidate: 60,
|
||||
};
|
||||
};
|
||||
|
||||
export default SignUpPage;
|
||||
@@ -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<SignupForm> => {
|
||||
const formPromise = getForm(id);
|
||||
formPromise.then((form) => {
|
||||
setForm(form);
|
||||
});
|
||||
return formPromise;
|
||||
};
|
||||
|
||||
const fetchSignUp = async (id: number, uniqueId: string): Promise<Signup> => {
|
||||
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 (
|
||||
<PageWrapper>
|
||||
<SignUpPageView
|
||||
signUpForm={signUpForm}
|
||||
formData={formData}
|
||||
statusMessage={statusMessage}
|
||||
onChange={noop}
|
||||
onSubmit={onSubmit}
|
||||
/>
|
||||
</PageWrapper>
|
||||
);
|
||||
};
|
||||
|
||||
export default EditSignUpPage;
|
||||
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user