Improve error handling in saveText

by making use of Promise to handle the various cases.
danskernesdigitalebibliotek · Sep 20, 2022 · 0e0c506 · 0e0c506
1 parent 9664880
commit 0e0c506
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 49 deletions.
diff --git 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<UserListItemsProps> = ({
 }) => {
   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
@@ -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<string>(
-    defaultText ? String(defaultText) : ""
-  );
+  const [text, setText] = useState<string>(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
@@ -1,5 +1,4 @@
 import { QueryClient, UseMutateFunction } from "react-query";
-import { getGetPatronInformationByPatronIdV2QueryKey } from "../../../core/fbs/fbs";
 import {
   AuthenticatedPatronV6,
   PatronV5,
@@ -68,57 +67,57 @@ type SaveText = {
     },
     unknown
   >;
-  queryClient: QueryClient;
 };
 
 export const saveText = ({
   type,
   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
@@ -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) : "";