fix: broken urls from application page moves

apps/ui/components/application/ApplicationPage.tsx

@@ -12,6 +12,7 @@ import { useRouter } from "next/router";
 import Head from "./Head";
 import Stepper, { StepperProps } from "./Stepper";
 import NotesWhenApplying from "@/components/application/NotesWhenApplying";
+import { getApplicationPath } from "@/modules/urls";
 
 const StyledContainer = styled(Container)`
   background-color: var(--color-white);
@@ -103,15 +104,14 @@ export function ApplicationPageWrapper({
   const { t } = useTranslation();
   const router = useRouter();
 
-  const pages = ["page1", "page2", "page3", "preview"];
+  const pages = ["page1", "page2", "page3", "preview"] as const;
 
   const hideStepper =
     pages.filter((x) => router.asPath.match(`/${x}`)).length === 0;
   const steps: StepperProps = {
     steps: pages.map((x, i) => ({ slug: x, step: i })),
     completedStep: application ? calculateCompletedStep(application) : 0,
-    // TODO use an urlbuilder
-    basePath: `/application/${application?.pk ?? 0}`,
+    basePath: getApplicationPath(application?.pk),
     isFormDirty: isDirty ?? false,
   };
 

apps/ui/components/common/ButtonLikeLink.tsx

@@ -10,6 +10,5 @@ import { fontMedium } from "common";
 export const ButtonLikeLink = styled(Link)<ButtonStyleProps>`
   ${ButtonCss}
   ${fontMedium}
-  max-height: 40px;
   gap: var(--spacing-s);
 `;

apps/ui/modules/urls.ts

@@ -85,7 +85,13 @@ export function getSingleSearchPath(params?: URLSearchParams): string {
   return base;
 }
 
-type ApplicationPages = "page1" | "page2" | "page3" | "view" | "preview";
+type ApplicationPages =
+  | "page1"
+  | "page2"
+  | "page3"
+  | "view"
+  | "preview"
+  | "sent";
 export function getApplicationPath(
   pk: Maybe<number> | undefined,
   page?: ApplicationPages | undefined

apps/ui/pages/applications/[id]/page3.tsx

@@ -18,7 +18,6 @@ import { IndividualForm } from "@/components/application/IndividualForm";
 import { OrganisationForm } from "@/components/application/OrganisationForm";
 import { ApplicantTypeSelector } from "@/components/application/ApplicantTypeSelector";
 import { useOptions } from "@/hooks/useOptions";
-import Buttons from "@/components/application/Buttons";
 import {
   convertAddress,
   convertOrganisation,
@@ -30,16 +29,41 @@ import {
 } from "@/components/application/Form";
 import { ApplicationPageWrapper } from "@/components/application/ApplicationPage";
 import { useApplicationUpdate } from "@/hooks/useApplicationUpdate";
-import { CenterSpinner } from "@/components/common/common";
+import { CenterSpinner, ButtonContainer } from "@/components/common/common";
 import { getCommonServerSideProps } from "@/modules/serverUtils";
 import { base64encode } from "common/src/helpers";
 import { errorToast } from "common/src/common/toast";
+import { MediumButton } from "@/styles/util";
+import { getApplicationPath } from "@/modules/urls";
+import { IconArrowRight } from "hds-react";
 
 const Form = styled.form`
   margin-bottom: var(--spacing-layout-l);
   padding-bottom: var(--spacing-l);
 `;
 
+function Buttons({ applicationPk }: { applicationPk: number }): JSX.Element {
+  const { t } = useTranslation();
+  const router = useRouter();
+
+  const onPrev = () => router.push(getApplicationPath(applicationPk, "page2"));
+
+  return (
+    <ButtonContainer>
+      <MediumButton variant="secondary" onClick={onPrev}>
+        {t("common:prev")}
+      </MediumButton>
+      <MediumButton
+        id="button__application--next"
+        iconRight={<IconArrowRight />}
+        type="submit"
+      >
+        {t("common:next")}
+      </MediumButton>
+    </ButtonContainer>
+  );
+}
+
 // Filter out any empty strings from the object (otherwise the mutation fails)
 function transformPerson(person?: PersonFormValues) {
   return {
@@ -187,7 +211,8 @@ function Page3Wrapped(props: Props): JSX.Element | null {
     }
   }, [application, reset]);
 
-  const [update, { error }] = useApplicationUpdate();
+  const { t } = useTranslation();
+  const [update] = useApplicationUpdate();
 
   const handleSave = async (values: ApplicationFormPage3Values) => {
     // There should not be a situation where we are saving on this page without an application
@@ -198,51 +223,33 @@ function Page3Wrapped(props: Props): JSX.Element | null {
       console.error("application pk is 0");
       return 0;
     }
-
-    const input = transformApplication(values);
-    const pk = await update(input);
-    return pk;
+    return update(transformApplication(values));
   };
 
   const onSubmit = async (values: ApplicationFormPage3Values) => {
-    const pk = await handleSave(values);
-    if (pk === 0) {
-      return;
+    try {
+      const pk = await handleSave(values);
+      if (pk === 0) {
+        return;
+      }
+      router.push(getApplicationPath(pk, "preview"));
+    } catch (e) {
+      errorToast({ text: t("common:error.dataError") });
     }
-    const prefix = `/application/${pk}`;
-    const target = `${prefix}/preview`;
-    router.push(target);
   };
 
-  const { t } = useTranslation();
-  const dataErrorMessage = t("common:error.dataError");
-  useEffect(() => {
-    if (error != null) {
-      errorToast({
-        text: dataErrorMessage,
-      });
-    }
-  }, [error, t, dataErrorMessage]);
-
   if (id == null) {
     return <Error statusCode={404} />;
   }
-  if (isLoading) {
-    return <CenterSpinner />;
-  }
 
   if (queryError != null) {
     // eslint-disable-next-line no-console
     console.error(queryError);
-    // TODO should be wrapped in layout and have an option to retry the query
-    // probably better to show error page over a toast
-    // return <ErrorToast error={`${t("common:error.dataError")}`} />;
     return <Error statusCode={500} />;
   }
 
-  if (error != null) {
-    // eslint-disable-next-line no-console
-    console.error(error);
+  if (isLoading && application == null && applicationRound == null) {
+    return <CenterSpinner />;
   }
 
   // TODO these are 404
@@ -262,7 +269,7 @@ function Page3Wrapped(props: Props): JSX.Element | null {
         <Form noValidate onSubmit={handleSubmit(onSubmit)}>
           <ApplicantTypeSelector />
           <Page3 />
-          {application.pk && <Buttons applicationId={application.pk} />}
+          {application.pk && <Buttons applicationPk={application.pk} />}
         </Form>
       </ApplicationPageWrapper>
     </FormProvider>

apps/ui/pages/applications/[id]/preview.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useState } from "react";
 import { useTranslation } from "next-i18next";
 import { useRouter } from "next/router";
 import {
@@ -7,7 +7,7 @@ import {
 } from "@gql/gql-types";
 import type { GetServerSidePropsContext } from "next";
 import { serverSideTranslations } from "next-i18next/serverSideTranslations";
-import Error from "next/error";
+import { default as ErrorComponent } from "next/error";
 import { MediumButton } from "@/styles/util";
 import { ButtonContainer, CenterSpinner } from "@/components/common/common";
 import { ViewInner } from "@/components/application/ViewInner";
@@ -19,6 +19,8 @@ import {
 } from "@/modules/serverUtils";
 import { base64encode } from "common/src/helpers";
 import { errorToast } from "common/src/common/toast";
+import { getApplicationPath } from "@/modules/urls";
+import { ButtonLikeLink } from "@/components/common/ButtonLikeLink";
 
 type Props = Awaited<ReturnType<typeof getServerSideProps>>["props"];
 type PropsNarrowed = Exclude<Props, { notFound: boolean }>;
@@ -45,70 +47,46 @@ function Preview(props: PropsNarrowed): JSX.Element {
 
   const { t } = useTranslation();
 
-  const [send, { error: mutationError, loading: isMutationLoading }] =
-    useSendApplicationMutation();
+  const [send, { loading: isMutationLoading }] = useSendApplicationMutation();
 
   const onSubmit = async (evt: React.FormEvent) => {
     evt.preventDefault();
     if (!acceptTermsOfUse) {
       return;
     }
-    if (!pk) {
-      // eslint-disable-next-line no-console
-      console.error("no pk in values");
-      return;
-    }
-    const { data: mutData, errors } = await send({
-      variables: {
-        input: {
-          pk,
+    try {
+      const { data: mutData } = await send({
+        variables: {
+          input: {
+            pk,
+          },
         },
-      },
-    });
-    if (errors) {
-      // eslint-disable-next-line no-console
-      console.error("error sending application", errors);
-      // TODO show error
-      return;
-    }
+      });
 
-    const { pk: resPk } = mutData?.sendApplication ?? {};
+      const { pk: resPk } = mutData?.sendApplication ?? {};
+      if (resPk == null) {
+        throw new Error("no pk in response");
+      }
 
-    if (resPk != null) {
-      // TODO use an urlbuilder
-      const prefix = `/application/${resPk}`;
-      const target = `${prefix}/sent`;
-      router.push(target);
+      router.push(getApplicationPath(resPk, "sent"));
+    } catch (e) {
+      errorToast({ text: t("common:error.mutationError") });
     }
-    // TODO error
   };
 
-  useEffect(() => {
-    mutationError &&
-      errorToast({
-        text: t("common:error.mutationError"),
-      });
-  }, [mutationError, t]);
-
-  if (pk == null) {
-    return <Error statusCode={404} />;
-  }
   if (error) {
     // eslint-disable-next-line no-console
     console.error(error);
-    return <Error statusCode={500} />;
+    return <ErrorComponent statusCode={500} />;
   }
   if (isLoading) {
     return <CenterSpinner />;
   }
 
   if (application == null) {
-    return <Error statusCode={404} />;
+    return <ErrorComponent statusCode={404} />;
   }
 
-  // TODO use an urlbuilder
-  const handleBack = () => router.push(`/application/${application.pk}/page3`);
-
   return (
     <ApplicationPageWrapper
       translationKeyPrefix="application:preview"
@@ -122,9 +100,9 @@ function Preview(props: PropsNarrowed): JSX.Element {
           setAcceptTermsOfUse={setAcceptTermsOfUse}
         />
         <ButtonContainer>
-          <MediumButton variant="secondary" onClick={handleBack}>
+          <ButtonLikeLink size="large" href={getApplicationPath(pk, "page3")}>
             {t("common:prev")}
-          </MediumButton>
+          </ButtonLikeLink>
           <MediumButton
             id="submit"
             type="submit"