Conditionally render delete button/password reset form

- Added error message notifications for the form submits
ohcnetwork · Nov 11, 2024 · a8ff61f · a8ff61f
1 parent bedbae6
commit a8ff61f
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 42 deletions.
diff --git a/src/components/Users/UserAddEditForm.tsx b/src/components/Users/UserAddEditForm.tsx
@@ -248,15 +248,19 @@ const UserAddEditForm = (props: UserProps) => {
           ? formData.weekly_working_hours
           : null,
     };
-    const { res } = await request(routes.partialUpdateUser, {
+    const { res, error } = await request(routes.partialUpdateUser, {
       pathParams: { username },
       body: data,
     });
     if (res?.ok) {
       Notification.Success({
-        msg: "Details updated successfully",
+        msg: "Updated user details successfully",
       });
       await refetchUserData();
+    } else {
+      Notification.Error({
+        msg: error?.message ?? "Error while updating user details",
+      });
     }
   };
 
@@ -688,21 +692,19 @@ const UserAddEditForm = (props: UserProps) => {
           : undefined,
     };
 
-    const { res } = await request(routes.addUser, {
+    const { res, error } = await request(routes.addUser, {
       body: data,
     });
     if (res?.ok) {
       dispatch({ type: "set_form", form: initForm });
-      if (!username) {
-        Notification.Success({
-          msg: "User added successfully",
-        });
-      } else {
-        Notification.Success({
-          msg: "User updated successfully",
-        });
-      }
+      Notification.Success({
+        msg: "User added successfully",
+      });
       navigate("/users");
+    } else {
+      Notification.Error({
+        msg: error?.message ?? "Error while adding user",
+      });
     }
     setIsLoading(false);
   };

diff --git a/src/components/Users/UserResetPassword.tsx b/src/components/Users/UserResetPassword.tsx
@@ -79,9 +79,11 @@ export default function UserResetPassword({
       });
       if (res?.ok) {
         Notification.Success({ msg: data?.message });
-      } else if (!error) {
+      } else {
         Notification.Error({
-          msg: "There was some error. Please try again in some time.",
+          msg:
+            error?.message ??
+            "There was some error. Please try again in some time.",
         });
       }
       setChangePasswordForm({

diff --git a/src/components/Users/UserSummary.tsx b/src/components/Users/UserSummary.tsx
@@ -1,3 +1,4 @@
+import { navigate } from "raviger";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
 
@@ -10,7 +11,6 @@ import UserInformation from "@/components/Users/UserInformation";
 import UserResetPassword from "@/components/Users/UserResetPassword";
 import { UserModel } from "@/components/Users/models";
 
-import useAppHistory from "@/hooks/useAppHistory";
 import useAuthUser from "@/hooks/useAuthUser";
 
 import * as Notification from "@/Utils/Notifications";
@@ -22,7 +22,6 @@ export default function UserSummaryTab({ userData }: { userData?: UserModel }) {
   const { t } = useTranslation();
   const [showDeleteDialog, setshowDeleteDialog] = useState(false);
   const authUser = useAuthUser();
-  const { goBack } = useAppHistory();
 
   if (!userData) {
     return;
@@ -42,10 +41,11 @@ export default function UserSummaryTab({ userData }: { userData?: UserModel }) {
       });
     }
     setshowDeleteDialog(!showDeleteDialog);
-    goBack();
+    navigate("/users");
   };
 
   const userColumnsData = { userData, username: userData.username };
+  const deletePermitted = showUserDelete(authUser, userData);
 
   return (
     <>
@@ -65,32 +65,35 @@ export default function UserSummaryTab({ userData }: { userData?: UserModel }) {
           UserInformation,
           userColumnsData,
         )}
-        {userColumns(
-          t("reset_password"),
-          t("reset_password_note"),
-          UserResetPassword,
-          userColumnsData,
-        )}
-        <div className="mt-3 flex flex-col items-center gap-5 border-t-2 pt-5 sm:flex-row">
-          <div className="sm:w-1/4">
-            <p className="my-1 text-sm leading-5">
-              <p className="mb-2 font-semibold">{t("delete_account")}</p>
-              <p className="text-secondary-600">{t("delete_account_note")}</p>
-            </p>
+        {deletePermitted &&
+          userColumns(
+            t("reset_password"),
+            t("reset_password_note"),
+            UserResetPassword,
+            userColumnsData,
+          )}
+        {deletePermitted && (
+          <div className="mt-3 flex flex-col items-center gap-5 border-t-2 pt-5 sm:flex-row">
+            <div className="sm:w-1/4">
+              <p className="my-1 text-sm leading-5">
+                <p className="mb-2 font-semibold">{t("delete_account")}</p>
+                <p className="text-secondary-600">{t("delete_account_note")}</p>
+              </p>
+            </div>
+            <div className="w-3/4">
+              <ButtonV2
+                authorizeFor={() => deletePermitted}
+                onClick={() => setshowDeleteDialog(true)}
+                variant="danger"
+                data-testid="user-delete-button"
+                className="my-1 inline-flex"
+              >
+                <CareIcon icon="l-trash" className="h-4" />
+                <span className="">{t("delete_account_btn")}</span>
+              </ButtonV2>
+            </div>
           </div>
-          <div className="w-3/4">
-            <ButtonV2
-              authorizeFor={() => showUserDelete(authUser, userData)}
-              onClick={() => setshowDeleteDialog(true)}
-              variant="danger"
-              data-testid="user-delete-button"
-              className="my-1 inline-flex"
-            >
-              <CareIcon icon="l-trash" className="h-4" />
-              <span className="">{t("delete_account_btn")}</span>
-            </ButtonV2>
-          </div>
-        </div>
+        )}
       </div>
     </>
   );