fix ISR fallback pages

src/pages/events/[id].tsx

@@ -8,6 +8,7 @@ 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;
@@ -20,7 +21,13 @@ const EventPage: NextPage<InitialProps> = ({ initialEvent }) => {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const { data, error } = useFetchEvents({ initialData: initialEvent, id: id as string });
 
-  if (!data || router.isFallback) return <LoadingView />;
+  if (router.isFallback) return <LoadingView />;
+
+  if (!data) {
+    return (
+      <NotFoundPage />
+    );
+  }
 
   return (
     <>
@@ -50,12 +57,19 @@ export const getStaticPaths: GetStaticPaths = async () => {
 
 export const getStaticProps: GetStaticProps<InitialProps> = async ({ params }) => {
   const { id } = params;
-  const initialEvent = await EventApi.getEvent(Number(id));
+  let notFound = false;
+  let initialEvent: Event;
+  try {
+    initialEvent = await EventApi.getEvent(Number(id));
+  } catch (err) {
+    notFound = true;
+  }
   return {
     props: {
       initialEvent,
     },
     revalidate: 10,
+    notFound,
   };
 };
 

src/pages/feed/[id].tsx

@@ -8,6 +8,7 @@ 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;
@@ -20,7 +21,13 @@ const FeedPage: NextPage<InitialProps> = ({ initialPost }) => {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const { data, error } = useFetchFeed({ initialData: initialPost, id: id as string });
 
-  if (!data || router.isFallback) return <LoadingView />;
+  if (router.isFallback) return <LoadingView />;
+
+  if (!data) {
+    return (
+      <NotFoundPage />
+    );
+  }
 
   return (
     <>
@@ -50,12 +57,20 @@ export const getStaticPaths: GetStaticPaths = async () => {
 
 export const getStaticProps: GetStaticProps<InitialProps> = async ({ params }) => {
   const { id } = params;
-  const initialPost = await FeedApi.getPost(Number(id));
+  let notFound = false;
+  let initialPost: Post;
+  try {
+    initialPost = await FeedApi.getPost(Number(id));
+  } catch (err) {
+    notFound = true;
+  }
+
   return {
     props: {
       initialPost,
     },
     revalidate: 10,
+    notFound,
   };
 };
 

src/pages/signup/[id].tsx

@@ -9,6 +9,7 @@ import SignUpPageView from "@views/SignUpPage/SignUpPageView";
 import PageWrapper from "@views/common/PageWrapper";
 import LoadingView from "@views/common/LoadingView";
 import noop from "@utils/noop";
+import NotFoundPage from "@pages/404";
 
 type InitialProps = {
   form: SignupForm;
@@ -21,6 +22,12 @@ const SignUpPage: NextPage<InitialProps> = ({ form }) => {
     return <LoadingView />;
   }
 
+  if (!form) {
+    return (
+      <NotFoundPage />
+    );
+  }
+
   const onSubmit = async (data) => {
     const payload: Signup = {
       signupForm_id: form.id,
@@ -70,12 +77,19 @@ export const getStaticPaths: GetStaticPaths = async () => {
 
 export const getStaticProps: GetStaticProps<InitialProps> = async ({ params }) => {
   const { id } = params;
-  const form = await SignupApi.getForm(Number(id));
+  let notFound = false;
+  let form: SignupForm;
+  try {
+    form = await SignupApi.getForm(Number(id));
+  } catch {
+    notFound = true;
+  }
   return {
     props: {
       form,
     },
     revalidate: 10,
+    notFound,
   };
 };
 

src/views/SignUpPage/SignUpPageView.tsx

@@ -23,16 +23,18 @@ interface SignUpPageViewProps {
 }
 
 const renderList = (signUpForm: SignupForm) => (
-  <>
-    <h6>
-      Ilmoittautuneet{signUpForm.quota > 0 && (` (${signUpForm.signups.length}/${signUpForm.quota})`)}:
-    </h6>
-    <ol>
-      {signUpForm.signups.map((s, idx) => (
-        <li key={idx} className={signUpForm.quota && idx + 1 > signUpForm.quota ? "reserved" : ""}>{s}</li>
-      ))}
-    </ol>
-  </>
+  <aside>
+    <div>
+      <h6>
+        Ilmoittautuneet{signUpForm.quota > 0 && (` (${signUpForm.signups.length}/${signUpForm.quota})`)}:
+      </h6>
+      <ol>
+        {signUpForm.signups.map((s, idx) => (
+          <li key={idx} className={signUpForm.quota && idx + 1 > signUpForm.quota ? "reserved" : ""}>{s}</li>
+        ))}
+      </ol>
+    </div>
+  </aside>
 );
 
 const StyledSection = styled(TextSection)`
@@ -81,11 +83,34 @@ const SignUpPageView: React.FC<SignUpPageViewProps> = ({
     );
   };
 
-  const form = signUpForm ? renderForm() : (
-    <Loader $color={colors.darkBlue} />
-  );
+  let form: JSX.Element;
+  let signups: JSX.Element = null;
+  const startTime = new Date(signUpForm?.start_time);
+  const endTime = new Date(signUpForm?.end_time);
+
+  if (!signUpForm) {
+    // Show loader if in edit mode and form has not yet loaded.
+    // For normal signup page, form is always defined on this level.
+    form = (
+      <Loader $color={colors.darkBlue} />
+    );
+  } else if (startTime > new Date()) {
+    form = (
+      <>
+        <p>Ilmoittauminen ei ole vielä auennut!</p>
+        <p>Se aukeaa {startTime.toLocaleString("fi-FI")}.</p>
+      </>
+    );
+  } else if (new Date() > endTime) {
+    form = (
+      <p>Ilmoittauminen on umpeutunut!</p>
+    );
+    signups = renderList(signUpForm);
+  } else {
+    form = renderForm();
+    signups = renderList(signUpForm);
+  }
 
-  const signups = signUpForm && signUpForm.signups ? renderList(signUpForm) : null;
   return (
     <StyledSection>
       <h1>
@@ -97,11 +122,7 @@ const SignUpPageView: React.FC<SignUpPageViewProps> = ({
       <div>
         {form}
       </div>
-      <aside>
-        <div>
-          {signups}
-        </div>
-      </aside>
+      {signups}
     </StyledSection>
   );
 };