From 7b801eb285237e8183e16538395ed22937670b78 Mon Sep 17 00:00:00 2001 From: Aarni Halinen Date: Tue, 29 Jun 2021 14:10:09 +0300 Subject: [PATCH 1/7] use mutate to trigger re-fetch for signup list --- src/pages/signup/[id].tsx | 21 +++++++++++++++------ 1 file changed, 15 insertions(+), 6 deletions(-) diff --git a/src/pages/signup/[id].tsx b/src/pages/signup/[id].tsx index ac9070c..8f33fd4 100644 --- a/src/pages/signup/[id].tsx +++ b/src/pages/signup/[id].tsx @@ -3,6 +3,8 @@ import { NextPage, GetStaticProps, GetStaticPaths } from "next"; import Head from "next/head"; import { useRouter } from "next/router"; import { toast } from "react-toastify"; +import axios from "axios"; +import useSWR, { mutate } from "swr"; import { Signup, SignupForm } from "@models/Signup"; import SignupApi from "@api/signupApi"; import SignUpPageView from "@views/SignUpPage/SignUpPageView"; @@ -12,11 +14,18 @@ import noop from "@utils/noop"; import NotFoundPage from "@pages/404"; type InitialProps = { - form: SignupForm; + initialForm: SignupForm; }; -const SignUpPage: NextPage = ({ form }) => { +const FORM_URL = `${process.env.NEXT_PUBLIC_API_URL}/signupForm/`; + +const SignUpPage: NextPage = ({ initialForm }) => { const router = useRouter(); + const id = String(initialForm.id); + const URL = `${FORM_URL}${id}/`; + const signupResult = useSWR(URL, (url) => axios.get(url).then((res) => res.data), { initialData: initialForm }); + + const form = signupResult.data ?? initialForm; if (router.isFallback) { return ; @@ -37,7 +46,7 @@ const SignUpPage: NextPage = ({ form }) => { try { await SignupApi.createSignup(payload); toast.success("Sign-up submitted successfully 😎"); - router.push(window.location.href); // TODO: Fetch/update signup list, so user sees the signup in the list + mutate(URL); } catch (error) { console.error(error); toast.error("Uh oh! Sign-up failed! 😟"); @@ -78,15 +87,15 @@ export const getStaticPaths: GetStaticPaths = async () => { export const getStaticProps: GetStaticProps = async ({ params }) => { const { id } = params; let notFound = false; - let form: SignupForm; + let initialForm: SignupForm; try { - form = await SignupApi.getForm(Number(id)); + initialForm = await SignupApi.getForm(Number(id)); } catch { notFound = true; } return { props: { - form, + initialForm, }, revalidate: 10, notFound, From 1b6b3b4d09e6bf29ee255eac577c7c62a78c9108 Mon Sep 17 00:00:00 2001 From: Aarni Halinen Date: Tue, 29 Jun 2021 15:08:20 +0300 Subject: [PATCH 2/7] fix undefined id --- src/pages/signup/[id].tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/signup/[id].tsx b/src/pages/signup/[id].tsx index 8f33fd4..b432bf7 100644 --- a/src/pages/signup/[id].tsx +++ b/src/pages/signup/[id].tsx @@ -21,7 +21,7 @@ const FORM_URL = `${process.env.NEXT_PUBLIC_API_URL}/signupForm/`; const SignUpPage: NextPage = ({ initialForm }) => { const router = useRouter(); - const id = String(initialForm.id); + const id = String(initialForm?.id ?? ""); const URL = `${FORM_URL}${id}/`; const signupResult = useSWR(URL, (url) => axios.get(url).then((res) => res.data), { initialData: initialForm }); From e83743479386eecc0ab4465b3bd8ed427901de70 Mon Sep 17 00:00:00 2001 From: Aarni Halinen Date: Tue, 29 Jun 2021 15:09:37 +0300 Subject: [PATCH 3/7] remove unnecessary ISR --- src/pages/events/[id].tsx | 1 - src/pages/feed/[id].tsx | 1 - src/pages/signup/[id].tsx | 1 - src/pages/signup/edit/[id]/[uuid].tsx | 1 - 4 files changed, 4 deletions(-) diff --git a/src/pages/events/[id].tsx b/src/pages/events/[id].tsx index 082f721..a9892d6 100644 --- a/src/pages/events/[id].tsx +++ b/src/pages/events/[id].tsx @@ -68,7 +68,6 @@ export const getStaticProps: GetStaticProps = async ({ params }) = props: { initialEvent, }, - revalidate: 10, notFound, }; }; diff --git a/src/pages/feed/[id].tsx b/src/pages/feed/[id].tsx index 1b42300..e8260b3 100644 --- a/src/pages/feed/[id].tsx +++ b/src/pages/feed/[id].tsx @@ -69,7 +69,6 @@ export const getStaticProps: GetStaticProps = async ({ params }) = props: { initialPost, }, - revalidate: 10, notFound, }; }; diff --git a/src/pages/signup/[id].tsx b/src/pages/signup/[id].tsx index b432bf7..679e52a 100644 --- a/src/pages/signup/[id].tsx +++ b/src/pages/signup/[id].tsx @@ -97,7 +97,6 @@ export const getStaticProps: GetStaticProps = async ({ params }) = props: { initialForm, }, - revalidate: 10, notFound, }; }; diff --git a/src/pages/signup/edit/[id]/[uuid].tsx b/src/pages/signup/edit/[id]/[uuid].tsx index 3b150a0..88a4d93 100644 --- a/src/pages/signup/edit/[id]/[uuid].tsx +++ b/src/pages/signup/edit/[id]/[uuid].tsx @@ -60,7 +60,6 @@ const EditSignUpPage: NextPage = () => { try { await SignupApi.updateSignup(payload, uuid); - // TODO: Update signup list, so user sees possible changes in the list toast.success("Sign-up updated successfully 😎"); } catch (error) { console.error(error); From b2b0ed63758e90973824460dd2c2685d38dc3c19 Mon Sep 17 00:00:00 2001 From: Aarni Halinen Date: Tue, 29 Jun 2021 16:40:03 +0300 Subject: [PATCH 4/7] remove unnecessary SWR hooks --- src/pages/events/[id].tsx | 24 +++++++----------------- src/pages/feed/[id].tsx | 24 +++++++----------------- src/pages/in_english.tsx | 2 +- src/pages/index.tsx | 2 +- src/pages/kilta/toiminta.tsx | 2 +- src/pages/signup/[id].tsx | 1 + src/pages/yritysyhteistyo.tsx | 2 +- 7 files changed, 19 insertions(+), 38 deletions(-) diff --git a/src/pages/events/[id].tsx b/src/pages/events/[id].tsx index a9892d6..bc15082 100644 --- a/src/pages/events/[id].tsx +++ b/src/pages/events/[id].tsx @@ -4,38 +4,27 @@ import Head from "next/head"; import { useRouter } from "next/router"; import Event from "@models/Event"; import EventApi from "@api/eventApi"; -import useFetchEvents from "@hooks/useFetchEvents"; import EventPageView from "@views/EventPage/EventPageView"; import PageWrapper from "@views/common/PageWrapper"; import LoadingView from "@views/common/LoadingView"; -import NotFoundPage from "@pages/404"; interface InitialProps { - initialEvent: Event; + event: Event; } -const EventPage: NextPage = ({ initialEvent }) => { +const EventPage: NextPage = ({ event }) => { const router = useRouter(); const { id } = router.query; - // eslint-disable-next-line @typescript-eslint/no-unused-vars - const { data, error } = useFetchEvents({ initialData: initialEvent, id: id as string }); - if (router.isFallback) return ; - if (!data) { - return ( - - ); - } - return ( <> - + ); @@ -58,16 +47,17 @@ export const getStaticPaths: GetStaticPaths = async () => { export const getStaticProps: GetStaticProps = async ({ params }) => { const { id } = params; let notFound = false; - let initialEvent: Event; + let event: Event; try { - initialEvent = await EventApi.getEvent(Number(id)); + event = await EventApi.getEvent(Number(id)); } catch (err) { notFound = true; } return { props: { - initialEvent, + event, }, + revalidate: 30, // Required for deleting hidden pages notFound, }; }; diff --git a/src/pages/feed/[id].tsx b/src/pages/feed/[id].tsx index e8260b3..e32a1a3 100644 --- a/src/pages/feed/[id].tsx +++ b/src/pages/feed/[id].tsx @@ -4,38 +4,27 @@ import Head from "next/head"; import { useRouter } from "next/router"; import Post from "@models/Feed"; import FeedApi from "@api/feedApi"; -import useFetchFeed from "@hooks/useFetchFeed"; import FeedPageView from "@views/FeedPage/FeedPageView"; import PageWrapper from "@views/common/PageWrapper"; import LoadingView from "@views/common/LoadingView"; -import NotFoundPage from "@pages/404"; interface InitialProps { - initialPost: Post; + post: Post; } -const FeedPage: NextPage = ({ initialPost }) => { +const FeedPage: NextPage = ({ post }) => { const router = useRouter(); const { id } = router.query; - // eslint-disable-next-line @typescript-eslint/no-unused-vars - const { data, error } = useFetchFeed({ initialData: initialPost, id: id as string }); - if (router.isFallback) return ; - if (!data) { - return ( - - ); - } - return ( <> - + ); @@ -58,17 +47,18 @@ export const getStaticPaths: GetStaticPaths = async () => { export const getStaticProps: GetStaticProps = async ({ params }) => { const { id } = params; let notFound = false; - let initialPost: Post; + let post: Post; try { - initialPost = await FeedApi.getPost(Number(id)); + post = await FeedApi.getPost(Number(id)); } catch (err) { notFound = true; } return { props: { - initialPost, + post, }, + revalidate: 30, // Required for deleting hidden pages notFound, }; }; diff --git a/src/pages/in_english.tsx b/src/pages/in_english.tsx index 87fdbbc..bcc5d75 100644 --- a/src/pages/in_english.tsx +++ b/src/pages/in_english.tsx @@ -47,7 +47,7 @@ export const getStaticProps: GetStaticProps = async () => { initialEvents, initialFeed, }, - revalidate: 10, + revalidate: 30, }; }; diff --git a/src/pages/index.tsx b/src/pages/index.tsx index bf7be98..3ae54db 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -47,7 +47,7 @@ export const getStaticProps: GetStaticProps = async () => { initialEvents, initialFeed, }, - revalidate: 10, + revalidate: 30, }; }; diff --git a/src/pages/kilta/toiminta.tsx b/src/pages/kilta/toiminta.tsx index 5122bf3..603481c 100644 --- a/src/pages/kilta/toiminta.tsx +++ b/src/pages/kilta/toiminta.tsx @@ -39,7 +39,7 @@ export const getStaticProps: GetStaticProps = async () => { initialEvents, initialFeed, }, - revalidate: 10, + revalidate: 30, }; }; diff --git a/src/pages/signup/[id].tsx b/src/pages/signup/[id].tsx index 679e52a..6ed331f 100644 --- a/src/pages/signup/[id].tsx +++ b/src/pages/signup/[id].tsx @@ -97,6 +97,7 @@ export const getStaticProps: GetStaticProps = async ({ params }) = props: { initialForm, }, + revalidate: 30, // Required for deleting hidden pages notFound, }; }; diff --git a/src/pages/yritysyhteistyo.tsx b/src/pages/yritysyhteistyo.tsx index 0c185c2..a0c1a9e 100644 --- a/src/pages/yritysyhteistyo.tsx +++ b/src/pages/yritysyhteistyo.tsx @@ -32,7 +32,7 @@ export const getStaticProps: GetStaticProps = async () => { props: { initialJobAds, }, - revalidate: 10, + revalidate: 30, }; }; From 411d2c7c4a6b420f1c1466e173a2c06684e7e2d2 Mon Sep 17 00:00:00 2001 From: Aarni Halinen Date: Tue, 29 Jun 2021 17:41:00 +0300 Subject: [PATCH 5/7] test that new signup is added to list of signupees --- src/views/SignUpPage/SignUpPageView.tsx | 2 +- tests/testcafe/signupToEvent.test.ts | 2 ++ 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/src/views/SignUpPage/SignUpPageView.tsx b/src/views/SignUpPage/SignUpPageView.tsx index f40e9ae..70f3de2 100644 --- a/src/views/SignUpPage/SignUpPageView.tsx +++ b/src/views/SignUpPage/SignUpPageView.tsx @@ -76,7 +76,7 @@ const SignUpPageView: React.FC = ({
{t("Ilmoittautuneet")} {signUpForm.quota > 0 && (` (${signUpForm.signups.length}/${signUpForm.quota})`)}:
-
    +
      {signUpForm.signups.map((s, idx) => (
    1. signUpForm.quota ? "reserved" : ""}>{s}
      2. ))} diff --git a/tests/testcafe/signupToEvent.test.ts b/tests/testcafe/signupToEvent.test.ts index 0099b90..e447d89 100644 --- a/tests/testcafe/signupToEvent.test.ts +++ b/tests/testcafe/signupToEvent.test.ts @@ -58,4 +58,6 @@ test("User signups to event from front page", async (t) => { .expect( statusMessage.innerText, ).eql("Sign-up submitted successfully 😎"); + + await t.expect(Selector("[data-e2e=\"signup-list\"] > li").nth(0).innerText).eql("Testi Testeri"); }); From 36b8cab248967a83a4b9571962425c130cef3ec7 Mon Sep 17 00:00:00 2001 From: Aarni Halinen Date: Tue, 29 Jun 2021 17:49:00 +0300 Subject: [PATCH 6/7] 10s revalidate --- src/pages/events/[id].tsx | 2 +- src/pages/feed/[id].tsx | 2 +- src/pages/in_english.tsx | 2 +- src/pages/index.tsx | 2 +- src/pages/kilta/toiminta.tsx | 2 +- src/pages/signup/[id].tsx | 2 +- src/pages/yritysyhteistyo.tsx | 2 +- 7 files changed, 7 insertions(+), 7 deletions(-) diff --git a/src/pages/events/[id].tsx b/src/pages/events/[id].tsx index bc15082..408a4bb 100644 --- a/src/pages/events/[id].tsx +++ b/src/pages/events/[id].tsx @@ -57,7 +57,7 @@ export const getStaticProps: GetStaticProps = async ({ params }) = props: { event, }, - revalidate: 30, // Required for deleting hidden pages + revalidate: 10, // Required for deleting hidden pages notFound, }; }; diff --git a/src/pages/feed/[id].tsx b/src/pages/feed/[id].tsx index e32a1a3..b791266 100644 --- a/src/pages/feed/[id].tsx +++ b/src/pages/feed/[id].tsx @@ -58,7 +58,7 @@ export const getStaticProps: GetStaticProps = async ({ params }) = props: { post, }, - revalidate: 30, // Required for deleting hidden pages + revalidate: 10, // Required for deleting hidden pages notFound, }; }; diff --git a/src/pages/in_english.tsx b/src/pages/in_english.tsx index bcc5d75..87fdbbc 100644 --- a/src/pages/in_english.tsx +++ b/src/pages/in_english.tsx @@ -47,7 +47,7 @@ export const getStaticProps: GetStaticProps = async () => { initialEvents, initialFeed, }, - revalidate: 30, + revalidate: 10, }; }; diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 3ae54db..bf7be98 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -47,7 +47,7 @@ export const getStaticProps: GetStaticProps = async () => { initialEvents, initialFeed, }, - revalidate: 30, + revalidate: 10, }; }; diff --git a/src/pages/kilta/toiminta.tsx b/src/pages/kilta/toiminta.tsx index 603481c..5122bf3 100644 --- a/src/pages/kilta/toiminta.tsx +++ b/src/pages/kilta/toiminta.tsx @@ -39,7 +39,7 @@ export const getStaticProps: GetStaticProps = async () => { initialEvents, initialFeed, }, - revalidate: 30, + revalidate: 10, }; }; diff --git a/src/pages/signup/[id].tsx b/src/pages/signup/[id].tsx index 6ed331f..5e20d20 100644 --- a/src/pages/signup/[id].tsx +++ b/src/pages/signup/[id].tsx @@ -97,7 +97,7 @@ export const getStaticProps: GetStaticProps = async ({ params }) = props: { initialForm, }, - revalidate: 30, // Required for deleting hidden pages + revalidate: 10, // Required for deleting hidden pages notFound, }; }; diff --git a/src/pages/yritysyhteistyo.tsx b/src/pages/yritysyhteistyo.tsx index a0c1a9e..0c185c2 100644 --- a/src/pages/yritysyhteistyo.tsx +++ b/src/pages/yritysyhteistyo.tsx @@ -32,7 +32,7 @@ export const getStaticProps: GetStaticProps = async () => { props: { initialJobAds, }, - revalidate: 30, + revalidate: 10, }; }; From 55e1d243c6d8a9ed8c8f547e80927ed655b064bf Mon Sep 17 00:00:00 2001 From: Aarni Halinen Date: Tue, 29 Jun 2021 18:15:22 +0300 Subject: [PATCH 7/7] few variable renames & minor changes --- src/pages/signup/[id].tsx | 26 +++++++++++++++----------- 1 file changed, 15 insertions(+), 11 deletions(-) diff --git a/src/pages/signup/[id].tsx b/src/pages/signup/[id].tsx index 5e20d20..13cd647 100644 --- a/src/pages/signup/[id].tsx +++ b/src/pages/signup/[id].tsx @@ -2,6 +2,7 @@ import React from "react"; import { NextPage, GetStaticProps, GetStaticPaths } from "next"; import Head from "next/head"; import { useRouter } from "next/router"; +import { ISubmitEvent } from "react-jsonschema-form"; import { toast } from "react-toastify"; import axios from "axios"; import useSWR, { mutate } from "swr"; @@ -23,32 +24,35 @@ const SignUpPage: NextPage = ({ initialForm }) => { const router = useRouter(); const id = String(initialForm?.id ?? ""); const URL = `${FORM_URL}${id}/`; - const signupResult = useSWR(URL, (url) => axios.get(url).then((res) => res.data), { initialData: initialForm }); + const { data, error } = useSWR(URL, (url) => axios.get(url).then((res) => res.data), { initialData: initialForm }); - const form = signupResult.data ?? initialForm; + if (error) { + console.error(error); + } - if (router.isFallback) { + // TODO: Shows LoadingView on client-side fetch error. Maybe something else preferred? + if (router.isFallback || error) { return ; } - if (!form) { + if (!data) { return ( ); } - const onSubmit = async (data) => { + const onSubmit = async ({ formData }: ISubmitEvent) => { const payload: Signup = { - signupForm_id: form.id, - answer: data.formData, + signupForm_id: data.id, + answer: formData, }; try { await SignupApi.createSignup(payload); toast.success("Sign-up submitted successfully 😎"); mutate(URL); - } catch (error) { - console.error(error); + } catch (err) { + console.error(err); toast.error("Uh oh! Sign-up failed! 😟"); } }; @@ -56,11 +60,11 @@ const SignUpPage: NextPage = ({ initialForm }) => { return ( <> - +