add: loading states to relevant reservation buttons

City-of-Helsinki · Feb 21, 2024 · 62def40 · 62def40
1 parent a28d63b
commit 62def40
Show file tree

Hide file tree

Showing 7 changed files with 48 additions and 21 deletions.
diff --git a/apps/ui/components/calendar/ReservationCalendarControls.tsx b/apps/ui/components/calendar/ReservationCalendarControls.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState, useMemo } from "react";
-import { useTranslation } from "next-i18next";
+import { useTranslation, type TFunction } from "next-i18next";
 import styled from "styled-components";
 import {
   differenceInMinutes,
@@ -238,7 +238,7 @@ const ResetButton = styled(Button).attrs({
 
 const SelectButton = styled(Button)`
   order: 7;
-  ${truncatedText}
+  ${truncatedText};
 
   @media (min-width: ${breakpoints.m}) {
     display: none;
@@ -290,6 +290,28 @@ const StyledSelect = styled(Select<OptionType>)`
   }
 `;
 
+const TogglerLabelContent = ({
+  areControlsVisible,
+  togglerLabel,
+  t,
+  price,
+}: {
+  areControlsVisible: boolean;
+  togglerLabel: string;
+  t: TFunction;
+  price?: string;
+}) => {
+  if (areControlsVisible) return <div>&nbsp;</div>;
+  return (
+    <>
+      <TogglerDate>{togglerLabel}</TogglerDate>
+      <TogglerPrice>
+        {t("reservationUnit:price")}: {price}
+      </TogglerPrice>
+    </>
+  );
+};
+
 const ReservationCalendarControls = <T extends Record<string, unknown>>({
   reservationUnit,
   initialReservation,
@@ -310,7 +332,7 @@ const ReservationCalendarControls = <T extends Record<string, unknown>>({
 }: Props<T>): JSX.Element => {
   const { t, i18n } = useTranslation();
 
-  const { begin, end } = initialReservation || {};
+  const { begin, end } = initialReservation ?? {};
   const {
     minReservationDuration,
     maxReservationDuration,
@@ -640,7 +662,8 @@ const ReservationCalendarControls = <T extends Record<string, unknown>>({
                 });
               }
             }}
-            disabled={!isReservable || isReserving}
+            disabled={!isReservable}
+            isLoading={isReserving}
             data-test="reservation__button--submit"
           >
             {t("reservationCalendar:makeReservation")}
@@ -657,16 +680,12 @@ const ReservationCalendarControls = <T extends Record<string, unknown>>({
         <ToggleControls>
           <TogglerLabel>
             {isReservable ? (
-              areControlsVisible ? (
-                <div>&nbsp;</div>
-              ) : (
-                <>
-                  <TogglerDate>{togglerLabel}</TogglerDate>
-                  <TogglerPrice>
-                    {t("reservationUnit:price")}: {price}
-                  </TogglerPrice>
-                </>
-              )
+              <TogglerLabelContent
+                areControlsVisible={areControlsVisible}
+                togglerLabel={togglerLabel}
+                t={t}
+                price={price}
+              />
             ) : (
               t("reservationCalendar:selectTime")
             )}

diff --git a/apps/ui/components/reservation-unit/QuickReservation.tsx b/apps/ui/components/reservation-unit/QuickReservation.tsx
@@ -397,6 +397,7 @@ const QuickReservation = ({
     minReservationDuration,
     maxReservationDuration,
     reservationStartInterval,
+    t,
   ]);
 
   // TODO this should be on a timer
@@ -696,13 +697,14 @@ const QuickReservation = ({
           componentIfAuthenticated={
             isReservationUnitReservable && (
               <MediumButton
-                disabled={!slot || isReserving}
+                disabled={!slot}
                 onClick={() => {
                   if (localReservation != null) {
                     setIsReserving(true);
                     createReservation(localReservation);
                   }
                 }}
+                isLoading={isReserving}
                 data-test="quick-reservation__button--submit"
               >
                 {t("reservationCalendar:makeReservation")}

diff --git a/apps/ui/components/reservation/EditStep0.tsx b/apps/ui/components/reservation/EditStep0.tsx
@@ -52,6 +52,7 @@ type Props = {
   setErrorMsg: React.Dispatch<React.SetStateAction<string | null>>;
   nextStep: () => void;
   apiBaseUrl: string;
+  isLoading: boolean;
 };
 
 type WeekOptions = "day" | "week" | "month";
@@ -121,6 +122,7 @@ const EditStep0 = ({
   setErrorMsg,
   nextStep,
   apiBaseUrl,
+  isLoading,
 }: Props): JSX.Element => {
   const { t, i18n } = useTranslation();
   const router = useRouter();
@@ -489,6 +491,7 @@ const EditStep0 = ({
             }
           }}
           data-testid="reservation-edit__button--continue"
+          isLoading={isLoading}
         >
           {t("reservationCalendar:nextStep")}
         </MediumButton>

diff --git a/apps/ui/components/reservation/EditStep1.tsx b/apps/ui/components/reservation/EditStep1.tsx
@@ -351,6 +351,7 @@ const EditStep1 = ({
             type="submit"
             disabled={isSubmitting}
             data-testid="reservation-edit__button--submit"
+            isLoading={isSubmitting}
           >
             {t("reservations:saveNewTime")}
           </MediumButton>

diff --git a/apps/ui/components/reservation/ReservationCancellation.tsx b/apps/ui/components/reservation/ReservationCancellation.tsx
@@ -24,11 +24,11 @@ import {
   CANCEL_RESERVATION,
   GET_RESERVATION,
   GET_RESERVATION_CANCEL_REASONS,
-} from "../../modules/queries/reservation";
-import { JustForDesktop, JustForMobile } from "../../modules/style/layout";
-import { getSelectedOption, getTranslation } from "../../modules/util";
+} from "@/modules/queries/reservation";
+import { JustForDesktop, JustForMobile } from "@/modules/style/layout";
+import { getSelectedOption, getTranslation } from "@/modules/util";
 import { CenterSpinner } from "../common/common";
-import { BlackButton, MediumButton, Toast } from "../../styles/util";
+import { BlackButton, MediumButton, Toast } from "@/styles/util";
 import ReservationInfoCard from "./ReservationInfoCard";
 import { Paragraph } from "./styles";
 import { signOut } from "@/hooks/auth";
@@ -338,6 +338,7 @@ const ReservationCancellation = ({ id, apiBaseUrl }: Props): JSX.Element => {
                           type="submit"
                           disabled={!watch("reason")}
                           data-testid="reservation-cancel__button--cancel"
+                          isLoading={loading}
                         >
                           {t("reservations:cancelReservation")}
                         </MediumButton>

diff --git a/apps/ui/components/reservation/ReservationEdit.tsx b/apps/ui/components/reservation/ReservationEdit.tsx
@@ -436,6 +436,7 @@ const ReservationEdit = ({ id, apiBaseUrl }: Props): JSX.Element => {
               setErrorMsg={setErrorMsg}
               nextStep={() => setStep(1)}
               apiBaseUrl={apiBaseUrl}
+              isLoading={isLoading}
             />
           )}
           {step === 1 && (

diff --git a/apps/ui/components/reservation/Step0.tsx b/apps/ui/components/reservation/Step0.tsx
@@ -10,11 +10,11 @@ import { Trans, useTranslation } from "next-i18next";
 import styled from "styled-components";
 import { fontMedium, fontRegular } from "common/src/common/typography";
 import MetaFields from "common/src/reservation-form/MetaFields";
-import { MediumButton } from "../../styles/util";
+import { MediumButton } from "@/styles/util";
 import { ActionContainer } from "./styles";
 import { getTranslation } from "../../modules/util";
 import InfoDialog from "../common/InfoDialog";
-import { JustForMobile } from "../../modules/style/layout";
+import { JustForMobile } from "@/modules/style/layout";
 import {
   ErrorAnchor,
   ErrorBox,