refactor: prev link component

Author: joonatank

apps/admin-ui/src/component/LinkPrev.tsx

@@ -5,12 +5,6 @@ import { IconAngleLeft } from "hds-react";
 import { useNavigate } from "react-router-dom";
 import { BasicLink } from "../styles/util";
 
-interface IProps {
-  route?: string;
-  style?: React.CSSProperties;
-  className?: string;
-}
-
 const StyledLink = styled(BasicLink)`
   display: inline-flex;
   align-items: center;
@@ -20,7 +14,13 @@ const StyledLink = styled(BasicLink)`
   gap: var(--spacing-2-xs);
 `;
 
-function LinkPrev({ route, style, className }: IProps): JSX.Element {
+type Props = {
+  route?: string;
+  style?: React.CSSProperties;
+  className?: string;
+};
+
+function LinkPrevInner({ route, style, className }: Props): JSX.Element {
   const { t } = useTranslation();
   const navigate = useNavigate();
   return (
@@ -43,4 +43,14 @@ function LinkPrev({ route, style, className }: IProps): JSX.Element {
   );
 }
 
-export default LinkPrev;
+const PreviousLinkWrapper = styled.div`
+  padding: var(--spacing-s);
+`;
+
+export function LinkPrev(props: Props): JSX.Element {
+  return (
+    <PreviousLinkWrapper>
+      <LinkPrevInner {...props} />
+    </PreviousLinkWrapper>
+  );
+}

apps/admin-ui/src/component/reservations/EditPageWrapper.tsx

@@ -1,16 +1,11 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { type ReservationQuery } from "@gql/gql-types";
-import styled from "styled-components";
-import LinkPrev from "../LinkPrev";
+import { LinkPrev } from "../LinkPrev";
 import { Container } from "../../styles/layout";
 import ReservationTitleSection from "./requested/ReservationTitleSection";
 import { createTagString } from "./requested/util";
 
-const PreviousLinkWrapper = styled.div`
-  padding: var(--spacing-s);
-`;
-
 type ReservationType = NonNullable<ReservationQuery["reservation"]>;
 const EditPageWrapper = ({
   children,
@@ -26,9 +21,7 @@ const EditPageWrapper = ({
 
   return (
     <>
-      <PreviousLinkWrapper>
-        <LinkPrev />
-      </PreviousLinkWrapper>
+      <LinkPrev />
       <Container>
         {reservation && (
           <ReservationTitleSection

apps/admin-ui/src/spa/my-units/recurring/RecurringReservation.tsx

@@ -2,30 +2,17 @@ import { H1 } from "common/src/common/typography";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { useParams } from "react-router-dom";
-import styled from "styled-components";
 import { Container } from "@/styles/layout";
 import Loader from "@/component/Loader";
 import { RecurringReservationForm } from "./RecurringReservationForm";
 import { useRecurringReservationsUnits } from "./hooks";
-import LinkPrev from "@/component/LinkPrev";
-
-const PreviousLinkWrapper = styled.div`
-  padding: var(--spacing-s);
-`;
+import { LinkPrev } from "@/component/LinkPrev";
 
 type Params = {
   unitId: string;
   reservationUnitId: string;
 };
 
-function BackLinkHeader() {
-  return (
-    <PreviousLinkWrapper>
-      <LinkPrev />
-    </PreviousLinkWrapper>
-  );
-}
-
 function RecurringReservationInner({ unitId }: { unitId: number }) {
   const { t } = useTranslation();
 
@@ -37,35 +24,36 @@ function RecurringReservationInner({ unitId }: { unitId: number }) {
 
   return (
     <>
-      <BackLinkHeader />
-      <Container>
-        <H1 $legacy>{t("MyUnits.RecurringReservation.pageTitle")}</H1>
-        {reservationUnits !== undefined && reservationUnits?.length > 0 ? (
-          <RecurringReservationForm reservationUnits={reservationUnits} />
-        ) : (
-          <p>
-            {t("MyUnits.RecurringReservation.error.notPossibleForThisUnit")}
-          </p>
-        )}
-      </Container>
+      <H1 $legacy>{t("MyUnits.RecurringReservation.pageTitle")}</H1>
+      {reservationUnits !== undefined && reservationUnits?.length > 0 ? (
+        <RecurringReservationForm reservationUnits={reservationUnits} />
+      ) : (
+        <p>{t("MyUnits.RecurringReservation.error.notPossibleForThisUnit")}</p>
+      )}
     </>
   );
 }
 
+function RecurringErrorPage() {
+  const { t } = useTranslation();
+  return <div>{t("MyUnits.RecurringReservation.error.invalidUnitId")}</div>;
+}
+
 // Handle invalid route params
 export function RecurringReservation() {
-  const { t } = useTranslation();
   const { unitId } = useParams<Params>();
 
-  if (unitId == null || Number.isNaN(Number(unitId))) {
-    return (
-      <>
-        <BackLinkHeader />
-        <Container>
-          <div>{t("MyUnits.RecurringReservation.error.invalidUnitId")}</div>
-        </Container>
-      </>
-    );
-  }
-  return <RecurringReservationInner unitId={Number(unitId)} />;
+  const isError = unitId == null || Number.isNaN(Number(unitId));
+  return (
+    <>
+      <LinkPrev />
+      <Container>
+        {isError ? (
+          <RecurringErrorPage />
+        ) : (
+          <RecurringReservationInner unitId={Number(unitId)} />
+        )}
+      </Container>
+    </>
+  );
 }

apps/admin-ui/src/spa/recurring-reservations/application-rounds/[id]/allocation/index.tsx

@@ -35,6 +35,7 @@ import { AllocationPageContent } from "./ApplicationEvents";
 import { ComboboxFilter, SearchFilter } from "@/component/QueryParamFilters";
 import { convertPriorityFilter } from "./modules/applicationRoundAllocation";
 import { ApplicationRoundNode } from "common/gql/gql-types";
+import { LinkPrev } from "@/component/LinkPrev";
 
 const MAX_RES_UNIT_NAME_LENGTH = 35;
 
@@ -192,6 +193,7 @@ type ApplicationRoundFilterQueryType =
 type ReservationUnitFilterQueryType =
   NonNullable<ApplicationRoundFilterQueryType>["reservationUnits"][0];
 type UnitFilterQueryType = NonNullable<ReservationUnitFilterQueryType>["unit"];
+
 function ApplicationRoundAllocation({
   applicationRound,
   applicationRoundPk,
@@ -655,7 +657,12 @@ function ApplicationRoundAllocationRouted(): JSX.Element {
   if (!applicationRoundPk || Number.isNaN(Number(applicationRoundPk))) {
     return <div>{t("errors.router.invalidApplicationRoundNumber")}</div>;
   }
-  return <AllocationWrapper applicationRoundPk={Number(applicationRoundPk)} />;
+  return (
+    <>
+      <LinkPrev />
+      <AllocationWrapper applicationRoundPk={Number(applicationRoundPk)} />*
+    </>
+  );
 }
 
 export default ApplicationRoundAllocationRouted;