feat: add confirmation modals

gasp · Jul 28, 2024 · 42cee90 · 42cee90
1 parent 432c16f
commit 42cee90
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 22 deletions.
diff --git a/src/components/accessories/admin/users/editGroup/EditGroup.tsx b/src/components/accessories/admin/users/editGroup/EditGroup.tsx
@@ -8,6 +8,8 @@ import { Navigate, useLocation, useParams } from "react-router";
 import TextField from "../../../textField/TextField";
 import Button from "../../../button/Button";
 import InfoBox from "../../../infoBox/InfoBox";
+import ConfirmationDialog from "../../../confirmationDialog/ConfirmationDialog";
+import checkIcon from "../../../../../assets/check-icon.png";
 
 import { IState } from "../../../../../types";
 import { ApiResponse } from "../../../../../state/types";
@@ -50,10 +52,12 @@ export const EditGroup = () => {
     const otherPermissions = permissionsStack.filter(
       ({ id }) => id !== newPermission.id
     );
-    
+
     setPermissionsStack([
       ...otherPermissions,
-      ...filterChangedGroupsPermissions(permissionsInitialState.data!, [newPermission])
+      ...filterChangedGroupsPermissions(permissionsInitialState.data!, [
+        newPermission,
+      ]),
     ]);
   };
 
@@ -84,14 +88,13 @@ export const EditGroup = () => {
   });
 
   useEffect(() => {
-    if (update.hasSucceeded)
-      navigate(PATHS.admin_users, { state: { tab: TabOptions.groups } });
+    console.log('useeffect')
     dispatch(getAllPermissions());
     return () => {
       dispatch(updateUserGroupReset());
       dispatch(updatePermissionReset());
     };
-  }, [update.hasSucceeded, dispatch, navigate]);
+  }, [dispatch]);
 
   if (state?.code !== id) {
     return <Navigate to={PATHS.admin_users} state={{ tab: "groups" }} />;
@@ -137,22 +140,33 @@ export const EditGroup = () => {
           </div>
         </div>
         <GroupPermissionsEditor
-          permissions={permissionsInitialState.data}
+          permissions={permissionsInitialState.data?? []}
           thisGroupId={values.code as string}
           setDirty={setDirtyPermissions}
           update={handleUpdatePermissions}
         />
 
-        {permissionsStack.length > 0 && (
-          <p>
-            <code>
-              Editing permissions:{" "}
-              {permissionsStack.map(({ id }) => id).join(",")}
-            </code>
-            <br />
-            {permissionsStack.length} permissions will be updated.
-          </p>
-        )}
+        <div className="newGroupForm__item fullWidth">
+          {permissionsStack.length > 0 && (
+            <p>
+              <code>
+                Editing permissions:{" "}
+                {permissionsStack.map(({ id }) => id).join(",")}
+              </code>
+              <br />
+              {permissionsStack.length} permissions will be updated.
+            </p>
+          )}
+          {update.hasFailed && (
+            <div className="info-box-container">
+              <InfoBox
+                type="error"
+                message={update.error?.message ?? t("common.somethingwrong")}
+              />
+            </div>
+          )}
+        </div>
+
         <div className="newGroupForm__buttonSet">
           <div className="submit_button">
             <Button
@@ -179,6 +193,17 @@ export const EditGroup = () => {
           </div>
         </div>
       </form>
+      <ConfirmationDialog
+        isOpen={update.hasSucceeded}
+        title={t("user.groupUpdated")}
+        icon={checkIcon}
+        info={t("user.groupUpdateSuccess")}
+        primaryButtonLabel="Ok"
+        handlePrimaryButtonClick={() => {
+          navigate(PATHS.admin_users, { state: { tab: TabOptions.groups } });
+        }}
+        handleSecondaryButtonClick={() => ({})}
+      />
     </div>
   );
 };
diff --git a/src/components/accessories/admin/users/editPermissions/permission.utils.ts b/src/components/accessories/admin/users/editPermissions/permission.utils.ts
@@ -66,8 +66,8 @@ export const filterChangedGroupsPermissions = (
       ({ id }) => stackedPermissions[index].id === id
     );
     if (
-      reference?.userGroupIds.sort().join(" ") !==
-      stackedPermissions[index].userGroupIds.sort().join(" ")
+      [...reference!.userGroupIds].sort().join(" ") !==
+      [...stackedPermissions[index].userGroupIds].sort().join(" ")
     )
       filteredPermissions = [...filteredPermissions, stackedPermissions[index]];
   }

diff --git a/src/components/accessories/admin/users/newGroup/NewGroup.tsx b/src/components/accessories/admin/users/newGroup/NewGroup.tsx
@@ -6,6 +6,9 @@ import { useTranslation } from "react-i18next";
 
 import TextField from "../../../textField/TextField";
 import Button from "../../../button/Button";
+import InfoBox from "../../../infoBox/InfoBox";
+import ConfirmationDialog from "../../../confirmationDialog/ConfirmationDialog";
+import checkIcon from "../../../../../assets/check-icon.png";
 
 import { IState } from "../../../../../types";
 import { ApiResponse } from "../../../../../state/types";
@@ -52,12 +55,10 @@ export const NewGroup = () => {
   });
 
   useEffect(() => {
-    if (create.hasSucceeded)
-      navigate(PATHS.admin_users, { state: { tab: TabOptions.groups } });
     return () => {
       dispatch(createUserGroupReset());
     };
-  }, [create.hasSucceeded, dispatch, navigate]);
+  }, [dispatch]);
 
   return (
     <div className="newGroupForm">
@@ -85,7 +86,17 @@ export const NewGroup = () => {
             />
           </div>
         </div>
-        You can edit a group's permission once you created it
+        <div className="newGroupForm__item fullWidth">
+          <p>You can edit a group's permission once you created it.</p>
+          {create.hasFailed && (
+            <div className="info-box-container">
+              <InfoBox
+                type="error"
+                message={create.error?.message ?? t("common.somethingwrong")}
+              />
+            </div>
+          )}
+        </div>
         <div className="newGroupForm__buttonSet">
           <div className="submit_button">
             <Button
@@ -110,6 +121,17 @@ export const NewGroup = () => {
           </div>
         </div>
       </form>
+      <ConfirmationDialog
+        isOpen={create.hasSucceeded}
+        title={t("user.groupCreated")}
+        icon={checkIcon}
+        info={t("user.groupCreateSuccess")}
+        primaryButtonLabel="Ok"
+        handlePrimaryButtonClick={() => {
+          navigate(PATHS.admin_users, { state: { tab: TabOptions.groups } });
+        }}
+        handleSecondaryButtonClick={() => ({})}
+      />
     </div>
   );
 };