Skip to content

Commit

Permalink
fix(OH2-430): Fix edit group component and update text field component
Browse files Browse the repository at this point in the history
  • Loading branch information
SteveGT96 committed Nov 20, 2024
1 parent 1e9f092 commit c8dbba0
Show file tree
Hide file tree
Showing 2 changed files with 22 additions and 24 deletions.
45 changes: 21 additions & 24 deletions src/components/accessories/admin/users/editGroup/EditGroup.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { useFormik } from "formik";
import { useAppDispatch, useAppSelector } from "libraries/hooks/redux";
import React, { useCallback, useEffect, useState } from "react";
import React, { useCallback, useEffect, useMemo, useState } from "react";
import { useTranslation } from "react-i18next";
import { useParams } from "react-router";
import { useNavigate } from "react-router-dom";
Expand Down Expand Up @@ -51,13 +51,23 @@ export const EditGroup = () => {
const [dirtyPermissions, setDirtyPermissions] = useState<boolean>(false);

// make sure everything is loaded before displaying the editor
const [isPermissionEditorAvailable, setIsPermissionEditorAvailable] =
useState<boolean>(false);
const isPermissionEditorAvailable = useMemo(
() => canUpdatePermissions && group.data && permissions.data,
[canUpdatePermissions, group.data, permissions.data]
);

// keep track of which permissions have been updated and how
const [updatedPermissionsStack, setUpdatedPermissionsStack] = useState<
Array<PermissionActionType>
>([]);
// compare permissions to update the update stack
// and display permissions when ready
const updatedPermissionsStack = useMemo(() => {
if (canUpdatePermissions && group.data && permissions.data) {
return comparePermissions(
permissions.data,
group.data?.permissions ?? [],
groupPermissions
);
}
return [];
}, [canUpdatePermissions, group.data, permissions.data, groupPermissions]);

const handleUpdatePermissions = ({
permissions: perms,
Expand Down Expand Up @@ -120,22 +130,6 @@ export const EditGroup = () => {
};
}, []);

// compare permissions to update the update stack
// and display permissions when ready
useEffect(() => {
if (canUpdatePermissions && group.data && permissions.data) {
setIsPermissionEditorAvailable(true);

const newPermissionStack = comparePermissions(
permissions.data,
group.data?.permissions ?? [],
groupPermissions
);

setUpdatedPermissionsStack(newPermissionStack);
}
}, [canUpdatePermissions, group.data, permissions.data, groupPermissions]);

const handleFormReset = () => {
resetForm();
setGroupPermissions(group.data?.permissions ?? []);
Expand Down Expand Up @@ -165,7 +159,10 @@ export const EditGroup = () => {

return (
<>
{group.isLoading || group.status === "IDLE" || permissions.isLoading ? (
{group.isLoading ||
group.status === "IDLE" ||
permissions.status === "IDLE" ||
permissions.isLoading ? (
<CircularProgress style={{ marginLeft: "50%", position: "relative" }} />
) : (
<div className="newGroupForm">
Expand Down
1 change: 1 addition & 0 deletions src/components/accessories/textField/TextField.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,7 @@ const TextField: FunctionComponent<IProps> = ({
disabled={disabled}
InputProps={InputProps}
inputProps={{ maxLength }}
InputLabelProps={{ shrink: !!field.value }}
required={required === FIELD_VALIDATION.REQUIRED}
/>
{maxLength && maxLength > 0 && (
Expand Down

0 comments on commit c8dbba0

Please sign in to comment.