Merge branch 'ssr-to-isr' into 'master'

Convert SSR pages to ISR & SG

See merge request sahkoinsinoorikilta/vtmk/web2.0-frontend!39

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",

src/pages/admin/events/[id].tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import { NextPage, GetServerSideProps } from "next";
+import { NextPage } from "next";
 import Head from "next/head";
 import { useRouter } from "next/router";
 import AdminCreateCommon from "@views/admin/AdminCreateCommon";
@@ -257,6 +257,4 @@ const EventCreatePage: NextPage = () => {
   );
 };
 
-export const getServerSideProps: GetServerSideProps = async () => ({ props: {} });
-
 export default EventCreatePage;

src/pages/admin/events/index.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import { NextPage, GetServerSideProps } from "next";
+import { NextPage } from "next";
 import Head from "next/head";
 import { formatRelative } from "date-fns";
 import AdminListCommon from "@views/admin/AdminListCommon";
@@ -57,6 +57,4 @@ const AdminEventPage: NextPage = () => {
   );
 };
 
-export const getServerSideProps: GetServerSideProps = async () => ({ props: {} });
-
 export default AdminEventPage;

src/pages/admin/feed/[id].tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import { NextPage, GetServerSideProps } from "next";
+import { NextPage } from "next";
 import Head from "next/head";
 import { useRouter } from "next/router";
 import AdminCreateCommon from "@views/admin/AdminCreateCommon";
@@ -209,6 +209,4 @@ const FeedCreatePage: NextPage = () => {
   );
 };
 
-export const getServerSideProps: GetServerSideProps = async () => ({ props: {} });
-
 export default FeedCreatePage;

src/pages/admin/feed/index.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import { NextPage, GetServerSideProps } from "next";
+import { NextPage } from "next";
 import Head from "next/head";
 import { formatRelative } from "date-fns";
 import AdminListCommon from "@views/admin/AdminListCommon";
@@ -58,6 +58,4 @@ const AdminFeedPage: NextPage = () => {
   );
 };
 
-export const getServerSideProps: GetServerSideProps = async () => ({ props: {} });
-
 export default AdminFeedPage;

src/pages/admin/index.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { NextPage, GetServerSideProps } from "next";
+import { NextPage } from "next";
 import Head from "next/head";
 import AdminPageWrapper from "@views/common/AdminPageWrapper";
 
@@ -17,5 +17,3 @@ const AdminFrontPage: NextPage = () => (
 );
 
 export default AdminFrontPage;
-
-export const getServerSideProps: GetServerSideProps = async () => ({ props: {} });

src/pages/admin/jobads/[id].tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import { NextPage, GetServerSideProps } from "next";
+import { NextPage } from "next";
 import Head from "next/head";
 import { useRouter } from "next/router";
 import AdminCreateCommon from "@views/admin/AdminCreateCommon";
@@ -174,6 +174,4 @@ const JobAdCreatePage: NextPage = () => {
   );
 };
 
-export const getServerSideProps: GetServerSideProps = async () => ({ props: {} });
-
 export default JobAdCreatePage;

src/pages/admin/jobads/index.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import { NextPage, GetServerSideProps } from "next";
+import { NextPage } from "next";
 import Head from "next/head";
 import { formatRelative } from "date-fns";
 import AdminListCommon from "@views/admin/AdminListCommon";
@@ -62,6 +62,4 @@ const AdminJobAdPage: NextPage = () => {
   );
 };
 
-export const getServerSideProps: GetServerSideProps = async () => ({ props: {} });
-
 export default AdminJobAdPage;

src/pages/admin/login.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from "react";
-import { NextPage, GetServerSideProps } from "next";
+import { NextPage } from "next";
 import Head from "next/head";
 import { useRouter } from "next/router";
 import styled from "styled-components";
@@ -86,6 +86,4 @@ const AdminLoginPage: NextPage = () => {
   );
 };
 
-export const getServerSideProps: GetServerSideProps = async () => ({ props: {} });
-
 export default AdminLoginPage;

src/pages/admin/signups/[id].tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import { NextPage, GetServerSideProps } from "next";
+import { NextPage } from "next";
 import Head from "next/head";
 import { useRouter } from "next/router";
 import AdminCreateCommon from "@views/admin/AdminCreateCommon";
@@ -184,6 +184,4 @@ const SignupCreatePage: NextPage = () => {
   );
 };
 
-export const getServerSideProps: GetServerSideProps = async () => ({ props: {} });
-
 export default SignupCreatePage;

src/pages/admin/signups/[id]/email.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import { NextPage, GetServerSideProps } from "next";
+import { NextPage } from "next";
 import { useRouter } from "next/router";
 import AdminCreateCommon from "@views/admin/AdminCreateCommon";
 import MarkdownEditorWidget from "@components/Widgets/MarkdownEditorWidget";
@@ -91,6 +91,4 @@ const SignupEmailPage: NextPage = () => {
   );
 };
 
-export const getServerSideProps: GetServerSideProps = async () => ({ props: {} });
-
 export default SignupEmailPage;

src/pages/admin/signups/[id]/list.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import { NextPage, GetServerSideProps } from "next";
+import { NextPage } from "next";
 import { useRouter } from "next/router";
 import styled from "styled-components";
 import { CSVLink } from "react-csv";
@@ -93,6 +93,4 @@ const SignupEmailPage: NextPage = () => {
   );
 };
 
-export const getServerSideProps: GetServerSideProps = async () => ({ props: {} });
-
 export default SignupEmailPage;

src/pages/admin/signups/index.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import { NextPage, GetServerSideProps } from "next";
+import { NextPage } from "next";
 import Head from "next/head";
 import { formatRelative } from "date-fns";
 import AdminListCommon from "@views/admin/AdminListCommon";
@@ -62,6 +62,4 @@ const AdminSignupPage: NextPage = () => {
   );
 };
 
-export const getServerSideProps: GetServerSideProps = async () => ({ props: {} });
-
 export default AdminSignupPage;

src/pages/events/[id].tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { NextPage, GetServerSideProps } from "next";
+import { NextPage, GetStaticProps, GetStaticPaths } from "next";
 import Head from "next/head";
 import { useRouter } from "next/router";
 import {
@@ -16,9 +16,11 @@ interface InitialProps {
 const EventPage: NextPage<InitialProps> = ({ initialEvent }) => {
   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 (!data) return <LoadingView />;
+
+  if (!data || router.isFallback) return <LoadingView />;
 
   return (
     <>
@@ -32,14 +34,30 @@ const EventPage: NextPage<InitialProps> = ({ initialEvent }) => {
   );
 };
 
-export const getServerSideProps: GetServerSideProps<InitialProps> = async (context) => {
-  const { id } = context.query;
+export const getStaticPaths: GetStaticPaths = async () => {
+  const { url, config } = generateFetchParams();
+  const allEvents = await eventFetcher(url, config);
+  const paths = allEvents.results.map((e: Event) => ({
+    params: {
+      id: String(e.id),
+    },
+  }
+  ));
+  return {
+    paths,
+    fallback: true,
+  };
+};
+
+export const getStaticProps: GetStaticProps<InitialProps> = async ({ params }) => {
+  const { id } = params;
   const { url, config } = generateFetchParams(id as string);
   const initialEvent = await eventFetcher(url, config);
   return {
     props: {
       initialEvent,
     },
+    revalidate: 10,
   };
 };
 

src/pages/in_english.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { NextPage, GetServerSideProps } from "next";
+import { NextPage, GetStaticProps } from "next";
 import Head from "next/head";
 import {
   Event, useFetchEvents, eventFetcher, generateFetchParams as eventParams,
@@ -36,7 +36,7 @@ const InEnglishPage: NextPage<InitialProps> = ({ initialEvents, initialFeed }) =
   );
 };
 
-export const getServerSideProps: GetServerSideProps<InitialProps> = async () => {
+export const getStaticProps: GetStaticProps<InitialProps> = async () => {
   let url: string;
   let config: any;
   ({ url, config } = eventParams("", eventOptions));
@@ -48,6 +48,7 @@ export const getServerSideProps: GetServerSideProps<InitialProps> = async () =>
       initialEvents,
       initialFeed,
     },
+    revalidate: 10,
   };
 };
 

src/pages/index.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { NextPage, GetServerSideProps } from "next";
+import { NextPage, GetStaticProps } from "next";
 import Head from "next/head";
 import {
   Event, useFetchEvents, eventFetcher, generateFetchParams as eventParams,
@@ -36,7 +36,7 @@ const FrontPage: NextPage<InitialProps> = ({ initialEvents, initialFeed }) => {
   );
 };
 
-export const getServerSideProps: GetServerSideProps<InitialProps> = async () => {
+export const getStaticProps: GetStaticProps<InitialProps> = async () => {
   let url: string;
   let config: any;
   ({ url, config } = eventParams("", eventOptions));
@@ -48,6 +48,7 @@ export const getServerSideProps: GetServerSideProps<InitialProps> = async () =>
       initialEvents,
       initialFeed,
     },
+    revalidate: 10,
   };
 };
 

src/pages/kilta/toiminta.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { NextPage, GetServerSideProps } from "next";
+import { NextPage, GetStaticProps } from "next";
 import Head from "next/head";
 import {
   Event, useFetchEvents, eventFetcher, generateFetchParams as eventParams,
@@ -35,7 +35,7 @@ const ActualPage: NextPage<InitialProps> = ({ initialEvents, initialFeed }) => {
   );
 };
 
-export const getServerSideProps: GetServerSideProps<InitialProps> = async () => {
+export const getStaticProps: GetStaticProps<InitialProps> = async () => {
   let url: string;
   let config: any;
   ({ url, config } = eventParams("", eventOptions));
@@ -47,6 +47,7 @@ export const getServerSideProps: GetServerSideProps<InitialProps> = async () =>
       initialEvents,
       initialFeed,
     },
+    revalidate: 10,
   };
 };
 

src/pages/signup/[...params].tsx

@@ -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;

src/pages/signup/[id].tsx

@@ -0,0 +1,83 @@
+import React, { useState } from "react";
+import { NextPage, GetStaticProps, GetStaticPaths } from "next";
+import Head from "next/head";
+import { useRouter } from "next/router";
+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 LoadingView from "@views/common/LoadingView";
+import noop from "@utils/noop";
+
+type InitialProps = {
+  form: SignupForm;
+};
+
+const SignUpPage: NextPage<InitialProps> = ({ form }) => {
+  const router = useRouter();
+  const [statusMessage, setStatus] = useState(null);
+
+  if (router.isFallback) {
+    return <LoadingView />;
+  }
+
+  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: true,
+  };
+};
+
+export const getStaticProps: GetStaticProps<InitialProps> = async ({ params }) => {
+  const { id } = params;
+  const form = await getForm(Number(id));
+  return {
+    props: {
+      form,
+    },
+    revalidate: 10,
+  };
+};
+
+export default SignUpPage;

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<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;

src/pages/yritysyhteistyo.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { NextPage, GetServerSideProps } from "next";
+import { NextPage, GetStaticProps } from "next";
 import Head from "next/head";
 import {
   JobAd, useFetchJobAds, jobAdFetcher, generateFetchParams,
@@ -26,13 +26,14 @@ const CorporatePage: NextPage<InitialProps> = ({ initialJobAds }) => {
   );
 };
 
-export const getServerSideProps: GetServerSideProps<InitialProps> = async () => {
+export const getStaticProps: GetStaticProps<InitialProps> = async () => {
   const { url } = generateFetchParams();
   const initialJobAds = await jobAdFetcher(url);
   return {
     props: {
       initialJobAds,
     },
+    revalidate: 10,
   };
 };
 

tests/testcafe/signupToEvent.test.ts

@@ -18,6 +18,12 @@ fixture`Event signup`.page(getSiteRoot())
   });
 
 test("User signups to event from front page", async (t) => {
+  // Force refresh, so that ISR updates front page events and creates the pages created in before()
+  await t.wait(15000);
+  await t.navigateTo("/");
+  await t.wait(5000);
+  await t.navigateTo("/");
+
   const CardSelector = Selector("[data-e2e=\"event-card\"]").withText("title_fi").nth(0);
 
   await t

tests/testcafe/utils.ts

@@ -154,3 +154,5 @@ export const generateTestEvent = async (formIds = [], jwt: string) => (
     tag_id: [1],
   }, jwt)
 );
+
+export const sleep = async (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));