feature/IO-3499-React-19: Bug Fixes / Checkpoint

client/src/components/phonebook-form/phonebook-form.container.jsx

@@ -24,11 +24,16 @@ const mapStateToProps = createStructuredSelector({
 
 function PhonebookFormContainer({ refetch, bodyshop }) {
   const history = useNavigate();
-  const search = queryString.parse(useLocation().search);
-  const { phonebookentry } = search;
+  const location = useLocation();
+
+  // Parse once per render; do not mutate this object later.
+  const search = queryString.parse(location.search);
+  const phonebookentry = search?.phonebookentry;
+
   const [formLoading, setFormLoading] = useState(false);
   const [form] = Form.useForm();
   const { t } = useTranslation();
+
   const { loading, error, data } = useQuery(QUERY_PHONEBOOK_BY_ID, {
     variables: { id: phonebookentry },
     fetchPolicy: "network-only",
@@ -42,26 +47,35 @@ function PhonebookFormContainer({ refetch, bodyshop }) {
 
   const notification = useNotification();
 
+  const navigateWithoutPhonebookentry = () => {
+    // Immutable omit (no delete/mutation)
+    const { ...nextSearch } = search || {};
+    history({ search: queryString.stringify(nextSearch) });
+  };
+
   const handleDelete = async () => {
     setFormLoading(true);
+
     const result = await deletePhonebook({
       variables: { id: phonebookentry },
       refetchQueries: ["QUERY_PHONEBOOK_PAGINATED"]
     });
 
     if (!result.errors) {
-      notification["success"]({
-        message: t("phonebook.successes.deleted")
+      notification.success({
+        title: t("phonebook.successes.deleted")
       });
-      delete search.phonebookentry;
-      history({ search: queryString.stringify(search) });
-      if (refetch)
+
+      navigateWithoutPhonebookentry();
+
+      if (refetch) {
         refetch().then(() => {
           form.resetFields();
         });
+      }
     } else {
-      notification["error"]({
-        message: t("phonebook.errors.deleting", {
+      notification.error({
+        title: t("phonebook.errors.deleting", {
           message: JSON.stringify(result.errors)
         })
       });
@@ -72,26 +86,28 @@ function PhonebookFormContainer({ refetch, bodyshop }) {
 
   const handleFinish = async (values) => {
     setFormLoading(true);
+
     if (phonebookentry && phonebookentry !== "new") {
-      //It's a phonebook to update.
+      // It's a phonebook to update.
       const result = await updatePhonebook({
         variables: { id: phonebookentry, phonebook: values },
         refetchQueries: ["QUERY_PHONEBOOK_PAGINATED"]
       });
 
       if (!result.errors) {
-        notification["success"]({
-          message: t("phonebook.successes.saved")
+        notification.success({
+          title: t("phonebook.successes.saved")
         });
 
         if (refetch) await refetch();
+
         form.setFieldsValue(data.phonebook_by_pk);
         form.resetFields();
 
         setFormLoading(false);
       } else {
-        notification["error"]({
-          message: t("phonebook.errors.saving", {
+        notification.error({
+          title: t("phonebook.errors.saving", {
             error: JSON.stringify(result.errors)
           })
         });
@@ -99,7 +115,7 @@ function PhonebookFormContainer({ refetch, bodyshop }) {
         setFormLoading(false);
       }
     } else {
-      //It's a new phonebook to insert.
+      // It's a new phonebook to insert.
       const result = await insertPhonebook({
         variables: {
           phonebook_entry: [{ ...values, bodyshopid: bodyshop.id }]
@@ -108,20 +124,23 @@ function PhonebookFormContainer({ refetch, bodyshop }) {
       });
 
       if (!result.errors) {
-        notification["success"]({
-          message: t("phonebook.successes.saved")
+        notification.success({
+          title: t("phonebook.successes.saved")
         });
 
         if (refetch) await refetch();
+
         form.resetFields();
         form.resetFields();
-        delete search.phonebookentry;
-        history({ search: queryString.stringify(search) });
+
+        navigateWithoutPhonebookentry();
+
         setFormLoading(false);
       } else {
-        notification["error"]({
-          message: t("phonebook.errors.saving")
+        notification.error({
+          title: t("phonebook.errors.saving")
         });
+
         setFormLoading(false);
       }
     }