Merge branch 'bugfix/update-signup-list-on-submit' into 'master'

Use SWR mutate to trigger re-fetch for signup list See merge request sahkoinsinoorikilta/vtmk/web2.0-frontend!73
2021-06-29 15:24:23 +00:00
parent 086dc5e405 55e1d243c6
commit f9ecf97999
6 changed files with 47 additions and 55 deletions
@@ -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<InitialProps> = ({ initialEvent }) => {
+const EventPage: NextPage<InitialProps> = ({ 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 <LoadingView />;

-  if (!data) {
-    return (
-      <NotFoundPage />
-    );
-  }
-
  return (
    <>
      <Head>
        <link rel="canonical" href={`${process.env.NEXT_PUBLIC_SITE_URL}/events/${id}`} />
      </Head>
      <PageWrapper>
-        <EventPageView event={data as Event} />
+        <EventPageView event={event} />
      </PageWrapper>
    </>
  );
@@ -58,17 +47,17 @@ export const getStaticPaths: GetStaticPaths = async () => {
 export const getStaticProps: GetStaticProps<InitialProps> = 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: 10,
+    revalidate: 10, // Required for deleting hidden pages
    notFound,
  };
 };
@@ -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<InitialProps> = ({ initialPost }) => {
+const FeedPage: NextPage<InitialProps> = ({ 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 <LoadingView />;

-  if (!data) {
-    return (
-      <NotFoundPage />
-    );
-  }
-
  return (
    <>
      <Head>
        <link rel="canonical" href={`${process.env.NEXT_PUBLIC_SITE_URL}/feed/${id}`} />
      </Head>
      <PageWrapper>
-        <FeedPageView post={data} />
+        <FeedPageView post={post} />
      </PageWrapper>
    </>
  );
@@ -58,18 +47,18 @@ export const getStaticPaths: GetStaticPaths = async () => {
 export const getStaticProps: GetStaticProps<InitialProps> = 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: 10,
+    revalidate: 10, // Required for deleting hidden pages
    notFound,
  };
 };
@@ -2,7 +2,10 @@ 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";
 import { Signup, SignupForm } from "@models/Signup";
 import SignupApi from "@api/signupApi";
 import SignUpPageView from "@views/SignUpPage/SignUpPageView";
@@ -12,34 +15,44 @@ import noop from "@utils/noop";
 import NotFoundPage from "@pages/404";

 type InitialProps = {
-  form: SignupForm;
+  initialForm: SignupForm;
 };

-const SignUpPage: NextPage<InitialProps> = ({ form }) => {
-  const router = useRouter();
+const FORM_URL = `${process.env.NEXT_PUBLIC_API_URL}/signupForm/`;

-  if (router.isFallback) {
+const SignUpPage: NextPage<InitialProps> = ({ initialForm }) => {
+  const router = useRouter();
+  const id = String(initialForm?.id ?? "");
+  const URL = `${FORM_URL}${id}/`;
+  const { data, error } = useSWR<SignupForm>(URL, (url) => axios.get(url).then((res) => res.data), { initialData: initialForm });
+
+  if (error) {
+    console.error(error);
+  }
+
+  // TODO: Shows LoadingView on client-side fetch error. Maybe something else preferred?
+  if (router.isFallback || error) {
    return <LoadingView />;
  }

-  if (!form) {
+  if (!data) {
    return (
      <NotFoundPage />
    );
  }

-  const onSubmit = async (data) => {
+  const onSubmit = async ({ formData }: ISubmitEvent<string>) => {
    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 😎");
-      router.push(window.location.href); // TODO: Fetch/update signup list, so user sees the signup in the list
-    } catch (error) {
-      console.error(error);
+      mutate(URL);
+    } catch (err) {
+      console.error(err);
      toast.error("Uh oh! Sign-up failed! 😟");
    }
  };
@@ -47,11 +60,11 @@ const SignUpPage: NextPage<InitialProps> = ({ form }) => {
  return (
    <>
      <Head>
-        <link rel="canonical" href={`${process.env.NEXT_PUBLIC_SITE_URL}/signup/${form.id}`} />
+        <link rel="canonical" href={`${process.env.NEXT_PUBLIC_SITE_URL}/signup/${data.id}`} />
      </Head>
      <PageWrapper>
        <SignUpPageView
-          signUpForm={form}
+          signUpForm={data}
          formData={{}}
          onChange={noop}
          onSubmit={onSubmit}
@@ -78,17 +91,17 @@ export const getStaticPaths: GetStaticPaths = async () => {
 export const getStaticProps: GetStaticProps<InitialProps> = 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,
+    revalidate: 10, // Required for deleting hidden pages
    notFound,
  };
 };
@@ -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);
@@ -76,7 +76,7 @@ const SignUpPageView: React.FC<SignUpPageViewProps> = ({
        <h6>
          {t("Ilmoittautuneet")} {signUpForm.quota > 0 && (` (${signUpForm.signups.length}/${signUpForm.quota})`)}:
        </h6>
-        <ol>
+        <ol data-e2e="signup-list">
          {signUpForm.signups.map((s, idx) => (
            <li key={idx} className={signUpForm.quota && idx + 1 > signUpForm.quota ? "reserved" : ""}>{s}</li>
          ))}
@@ -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");
 });