Merge pull request #1301 from danskernesdigitalebibliotek/DDFLSBP-741…

…-fravaersperiode-sletter-mobilnr-og-e-mail_consolidate_user_data_save

Consolidate patron save code

src/apps/patron-page/PatronPage.tsx

@@ -1,11 +1,5 @@
 import React, { useEffect, useState, FC, FormEvent } from "react";
 import { set } from "lodash";
-import { useQueryClient } from "react-query";
-import { PatronV5, UpdatePatronRequestV4 } from "../../core/fbs/model";
-import {
-  useUpdateV5,
-  getGetPatronInformationByPatronIdV2QueryKey
-} from "../../core/fbs/fbs";
 import { useText } from "../../core/utils/text";
 import Link from "../../components/atoms/links/Link";
 import BasicDetailsSection from "./sections/BasicDetailsSection";
@@ -17,15 +11,15 @@ import { useUrls } from "../../core/utils/url";
 import { useNotificationMessage } from "../../core/utils/useNotificationMessage";
 import { usePatronData } from "../../core/utils/helpers/usePatronData";
 import PatronPageSkeleton from "./PatronPageSkeleton";
+import useSavePatron from "../../core/utils/useSavePatron";
+import { Patron } from "../../core/utils/types/entities";
 
 const PatronPage: FC = () => {
-  const queryClient = useQueryClient();
   const t = useText();
   const u = useUrls();
   const deletePatronUrl = u("deletePatronUrl");
-  const { mutate } = useUpdateV5();
   const { data: patronData, isLoading } = usePatronData();
-  const [patron, setPatron] = useState<PatronV5 | null>(null);
+  const [patron, setPatron] = useState<Patron | null>(null);
   const [pin, setPin] = useState<string | null>(null);
   const [isPinChangeValid, setIsPinChangeValid] = useState<boolean>(true);
   const [disableSubmitButton, setDisableSubmitButton] = useState(false);
@@ -34,6 +28,34 @@ const PatronPage: FC = () => {
   );
   const [NotificationComponent, handleNotificationMessage] =
     useNotificationMessage();
+  const { savePatron, savePincode } = useSavePatron({
+    patron: patron || undefined,
+    fetchHandlers: {
+      savePatron: {
+        onSuccess: () => {
+          setDisableSubmitButton(false);
+          handleNotificationMessage(
+            t("patronPageHandleResponseInformationText")
+          );
+        },
+        onError: () => {
+          setDisableSubmitButton(false);
+        }
+      },
+      savePincode: {
+        onSuccess: () => {
+          setDisableSubmitButton(false);
+          setSuccessPinMessage(t("patronPinSavedSuccessText"));
+          handleNotificationMessage(
+            t("patronPageHandleResponseInformationText")
+          );
+        },
+        onError: () => {
+          setDisableSubmitButton(false);
+        }
+      }
+    }
+  });
 
   useEffect(() => {
     if (patronData && patronData.patron) {
@@ -46,7 +68,7 @@ const PatronPage: FC = () => {
   }
 
   // Changes the patron object by key.
-  // So using the paramters 123 and "phoneNumber" would change the phoneNumber to 123.
+  // So using the parameters 123 and "phoneNumber" would change the phoneNumber to 123.
   const changePatron = (newValue: string | boolean, key: string) => {
     // Deeeep copy
     const copyUser = JSON.parse(JSON.stringify(patron));
@@ -57,50 +79,15 @@ const PatronPage: FC = () => {
   const save = () => {
     if (patron) {
       setDisableSubmitButton(true);
-      // The save patron request is done in another section of the code, but in that section
-      // it is saved differently. Here, we save the input from the user, in the other scenario,
-      // the checkboxes (subscribe to texts, subscribe to emails) will be set automatically
-      const data: UpdatePatronRequestV4 = {
-        patron: {
-          emailAddress: patron.emailAddress,
-          receivePostalMail: patron.receivePostalMail,
-          phoneNumber: patron.phoneNumber,
-          onHold: patron.onHold,
-          preferredPickupBranch: patron.preferredPickupBranch,
-          receiveEmail: patron.receiveEmail,
-          receiveSms: patron.receiveSms
-        }
-      };
       // If pincode is changed, the pincode should be updated.
       if (pin) {
-        data.pincodeChange = {
+        savePincode({
           pincode: pin,
           libraryCardNumber: patron.patronId.toString()
-        };
+        });
+      } else {
+        savePatron(patron);
       }
-      mutate(
-        {
-          data
-        },
-        {
-          onSuccess: () => {
-            queryClient.invalidateQueries(
-              getGetPatronInformationByPatronIdV2QueryKey()
-            );
-            if (pin) {
-              setSuccessPinMessage(t("patronPinSavedSuccessText"));
-            }
-            setDisableSubmitButton(false);
-            handleNotificationMessage(
-              t("patronPageHandleResponseInformationText")
-            );
-          },
-          // todo error handling, missing in figma
-          onError: () => {
-            setDisableSubmitButton(false);
-          }
-        }
-      );
     }
   };
 

src/apps/reservation-list/modal/pause-reservation/pause-reservation.tsx

@@ -1,78 +1,68 @@
 import React, { FC, useCallback, useState, useEffect, useId } from "react";
 import dayjs from "dayjs";
-import { useQueryClient } from "react-query";
 import Link from "../../../../components/atoms/links/Link";
 import Modal, { useModalButtonHandler } from "../../../../core/utils/modal";
 import { useText } from "../../../../core/utils/text";
-import {
-  useUpdateV5,
-  getGetPatronInformationByPatronIdV2QueryKey
-} from "../../../../core/fbs/fbs";
-import { Patron, PatronV5 } from "../../../../core/fbs/model";
 import { useUrls } from "../../../../core/utils/url";
 import { getModalIds } from "../../../../core/utils/helpers/modal-helpers";
 import DateRangeInput from "../../../../components/date-inputs/DateRangeInput";
+import useSavePatron from "../../../../core/utils/useSavePatron";
+import { Patron } from "../../../../core/utils/types/entities";
 
 interface PauseReservationProps {
   id: string;
-  user: PatronV5;
+  user: Patron;
 }
 
 const PauseReservation: FC<PauseReservationProps> = ({ id, user }) => {
   const t = useText();
   const u = useUrls();
   const pauseReservationInfoUrl = u("pauseReservationInfoUrl");
-
-  const queryClient = useQueryClient();
-  const { mutate } = useUpdateV5();
   const { close } = useModalButtonHandler();
   const { pauseReservation } = getModalIds();
+  const [isLoading, setIsLoading] = useState(false);
+  const { savePatron } = useSavePatron({
+    patron: user,
+    fetchHandlers: {
+      savePatron: {
+        onSuccess: () => {
+          setIsLoading(false);
+          close(pauseReservation as string);
+        },
+        onError: () => {
+          setIsLoading(false);
+        }
+      }
+    }
+  });
   const saveFormId = useId();
   const currentDate = dayjs().format("YYYY-MM-DD");
   const [startDate, setStartDate] = useState<string>(currentDate);
   const [endDate, setEndDate] = useState<string>("");
   const pauseActive = user?.onHold?.from && user?.onHold?.to;
-  const [isLoading, setIsLoading] = useState(false);
 
-  const save = useCallback(
-    (localStartDate?: string, localEndDate?: string) => {
+  const saveDates = useCallback(
+    (start?: string, end?: string) => {
       if (!user) {
         return;
       }
+
       setIsLoading(true);
-      // TODO: Create a hook for this that fetches + updates user data.
-      const saveData = { ...user } as Patron;
-      saveData.onHold = {
-        from: localStartDate === "" ? undefined : localStartDate,
-        to: localEndDate === "" ? undefined : localEndDate
-      };
-      mutate(
-        {
-          data: { patron: saveData }
-        },
-        {
-          onSuccess: () => {
-            queryClient.invalidateQueries(
-              getGetPatronInformationByPatronIdV2QueryKey()
-            );
-            setIsLoading(false);
-            close(pauseReservation as string);
-          },
-          // todo error handling, missing in figma
-          onError: () => {
-            setIsLoading(false);
-          }
+      savePatron({
+        onHold: {
+          from: start === "" ? undefined : start,
+          to: end === "" ? undefined : end
         }
-      );
+      });
     },
-    [close, mutate, pauseReservation, queryClient, user]
+    [savePatron, user]
   );
 
   const resetPauseDates = useCallback(() => {
     setStartDate(currentDate);
     setEndDate("");
-    save();
-  }, [currentDate, save]);
+    saveDates();
+  }, [currentDate, saveDates]);
 
   useEffect(() => {
     if (user?.onHold?.from) {
@@ -106,7 +96,7 @@ const PauseReservation: FC<PauseReservationProps> = ({ id, user }) => {
           onSubmit={(e) => {
             e.preventDefault();
             if (startDate && endDate) {
-              save(startDate, endDate);
+              saveDates(startDate, endDate);
             }
           }}
         >

src/components/reservation/forms/ModalReservationFormText.tsx

@@ -1,10 +1,5 @@
 import { isEqual } from "lodash";
 import React, { memo, useState } from "react";
-import { useQueryClient } from "react-query";
-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";
@@ -17,6 +12,7 @@ import {
   saveText
 } from "./helper";
 import ReservationForm from "./ReservationForm";
+import useSavePatron from "../../../core/utils/useSavePatron";
 
 export interface ModalReservationFormTextProps {
   type: ModalReservationFormTextType;
@@ -53,10 +49,23 @@ const ModalReservationFormText = ({
   patron
 }: ModalReservationFormTextProps) => {
   const { close } = useModalButtonHandler();
-  const queryClient = useQueryClient();
   const t = useText();
   const [text, setText] = useState<string>(stringifyValue(defaultText));
-  const { mutate } = useUpdateV5();
+  const { savePatron } = useSavePatron({
+    patron,
+    fetchHandlers: {
+      savePatron: {
+        onSuccess: () => {
+          close(modalReservationFormId(type));
+        },
+        // If an error occurred make sure to reset the text to the old value.
+        onError: () => {
+          setText(stringifyValue(defaultText));
+          close(modalReservationFormId(type));
+        }
+      }
+    }
+  });
   const onChange = (input: string) => {
     setText(input);
   };
@@ -66,26 +75,8 @@ const ModalReservationFormText = ({
       changedText: text,
       savedText: defaultText,
       patron,
-      mutate
-    })
-      .then((response) => {
-        // If we succeeded in saving we can cache the new data.
-        if (response) {
-          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));
-      });
+      savePatron
+    });
   };
   const { modalId, screenReaderModalDescriptionText, closeModalAriaLabelText } =
     modalProps(type, t);