diff --git a/src/components/reservation/UserListItems.tsx b/src/components/reservation/UserListItems.tsx index ddcc558e32..e0cbd6c500 100644 --- a/src/components/reservation/UserListItems.tsx +++ b/src/components/reservation/UserListItems.tsx @@ -18,6 +18,7 @@ import { ModalReservationFormTextType } from "./forms/helper"; import SmsModal from "./forms/SmsModal"; +import { stringifyValue } from "../../core/utils/helpers/general"; export interface UserListItemsProps { patron: PatronV5; @@ -36,8 +37,6 @@ const UserListItems: FC = ({ }) => { const t = useText(); const { open } = useModalButtonHandler(); - const stringifyValue = (value: string | null | undefined) => - value ? String(value) : ""; const openModal = (type: ModalReservationFormTextType) => () => { open(modalReservationFormId(type)); }; diff --git a/src/components/reservation/forms/ModalReservationFormText.tsx b/src/components/reservation/forms/ModalReservationFormText.tsx index 58e43da2d7..84f781b090 100644 --- a/src/components/reservation/forms/ModalReservationFormText.tsx +++ b/src/components/reservation/forms/ModalReservationFormText.tsx @@ -1,7 +1,11 @@ import React, { useState } from "react"; import { useQueryClient } from "react-query"; -import { useUpdateV5 } from "../../../core/fbs/fbs"; +import { + getGetPatronInformationByPatronIdV2QueryKey, + useUpdateV5 +} from "../../../core/fbs/fbs"; import { PatronV5 } from "../../../core/fbs/model"; +import { stringifyValue } from "../../../core/utils/helpers/general"; import Modal, { useModalButtonHandler } from "../../../core/utils/modal"; import { useText, UseTextFunction } from "../../../core/utils/text"; import TextInput from "../../atoms/input/TextInput"; @@ -47,9 +51,7 @@ const ModalReservationFormText = ({ const { close } = useModalButtonHandler(); const queryClient = useQueryClient(); const t = useText(); - const [text, setText] = useState( - defaultText ? String(defaultText) : "" - ); + const [text, setText] = useState(stringifyValue(defaultText)); const { mutate } = useUpdateV5(); const onChange = (input: string) => { @@ -62,10 +64,24 @@ const ModalReservationFormText = ({ changedText: text, savedText: defaultText, patron, - mutate, - queryClient - }); - close(modalReservationFormId(type)); + mutate + }) + .then((response) => { + // If we succeeded in mutating we can cache the new data. + queryClient.setQueryData( + getGetPatronInformationByPatronIdV2QueryKey(), + response + ); + }) + .catch((e) => { + // If an error ocurred make sure to reset the text to the old value. + setText(stringifyValue(defaultText)); + throw e; + }) + .finally(() => { + // Close modal no matter what. + close(modalReservationFormId(type)); + }); }; const { modalId, screenReaderModalDescriptionText, closeModalAriaLabelText } = diff --git a/src/components/reservation/forms/helper.ts b/src/components/reservation/forms/helper.ts index 94ba31678f..ebf0b38dd4 100644 --- a/src/components/reservation/forms/helper.ts +++ b/src/components/reservation/forms/helper.ts @@ -1,5 +1,4 @@ import { QueryClient, UseMutateFunction } from "react-query"; -import { getGetPatronInformationByPatronIdV2QueryKey } from "../../../core/fbs/fbs"; import { AuthenticatedPatronV6, PatronV5, @@ -68,7 +67,6 @@ type SaveText = { }, unknown >; - queryClient: QueryClient; }; export const saveText = ({ @@ -76,49 +74,50 @@ export const saveText = ({ changedText, savedText, patron, - mutate, - queryClient + mutate }: SaveText) => { - // If we do not have an email address, we do not want to save anything. - if (!changedText) { - return; - } - const textDiffers = changedText !== savedText; - const updatedPatronData = constructPatronSaveData({ - type, - value: changedText, - patron - }); + return new Promise((resolve, reject) => { + const textDiffers = changedText !== savedText; + const updatedPatronData = constructPatronSaveData({ + type, + value: changedText, + patron + }); - // If cannot construct the updated patron data or the email address is the same, - // we do not want to save anything. - if (!updatedPatronData || !textDiffers) { - return; - } + // If we cannot construct the updated patron data we do not want to save anything. + if (!updatedPatronData) { + reject(new Error("Cannot construct updated patron data")); + return; + } + // If the email address is the same we do not want to save anything. + if (!textDiffers) { + resolve(""); + return; + } - // Update user data. - mutate( - { - data: { - patron: updatedPatronData - } - }, - { - onSuccess: (response) => { - if (!response) { - return; + // Update user data. + mutate( + { + data: { + patron: updatedPatronData } - // If we succeeded in mutating we can cache the new data. - queryClient.setQueryData( - getGetPatronInformationByPatronIdV2QueryKey(), - response - ); }, - onError: () => { - throw new Error("Error updating patron data"); + { + onSuccess: (response) => { + if (!response) { + reject(new Error("We did not get a response from the server")); + return; + } + resolve(response); + }, + onError: (e) => { + reject(e); + } } - } - ); + ); + }); }; +export const stringyfyText = (text?: string) => (text ? String(text) : ""); + export default {}; diff --git a/src/core/utils/helpers/general.ts b/src/core/utils/helpers/general.ts index 2d4b9a886e..5494900a7d 100644 --- a/src/core/utils/helpers/general.ts +++ b/src/core/utils/helpers/general.ts @@ -178,3 +178,6 @@ export const groupObjectArrayByProperty = < // Otherwise create new property. return { ...result, [key]: [current] }; }, {} as Result); + +export const stringifyValue = (value: string | null | undefined) => + value ? String(value) : "";