diff --git a/src/components/accessories/admin/users/editGroup/EditGroup.tsx b/src/components/accessories/admin/users/editGroup/EditGroup.tsx index bac47865a..ff1a642eb 100644 --- a/src/components/accessories/admin/users/editGroup/EditGroup.tsx +++ b/src/components/accessories/admin/users/editGroup/EditGroup.tsx @@ -2,7 +2,7 @@ import { useFormik } from "formik"; import { useAppDispatch, useAppSelector } from "libraries/hooks/redux"; import React, { useCallback, useEffect, useState } from "react"; import { useTranslation } from "react-i18next"; -import { Navigate, useLocation, useParams } from "react-router"; +import { useParams } from "react-router"; import { useNavigate } from "react-router-dom"; import checkIcon from "../../../../../assets/check-icon.png"; @@ -12,14 +12,16 @@ import InfoBox from "../../../infoBox/InfoBox"; import TextField from "../../../textField/TextField"; import { PATHS } from "../../../../../consts"; -import { PermissionDTO, UserGroupDTO } from "../../../../../generated"; import { usePermission } from "../../../../../libraries/permissionUtils/usePermission"; import { CircularProgress } from "@mui/material"; import CheckboxField from "components/accessories/checkboxField/CheckboxField"; +import { PermissionDTO } from "generated/models/PermissionDTO"; +import { UserGroupDTO } from "generated/models/UserGroupDTO"; import { getAllPermissions } from "../../../../../state/permissions"; import { getUserGroup, + getUserGroupReset, updateUserGroup, updateUserGroupReset, } from "../../../../../state/usergroups"; @@ -37,7 +39,6 @@ export const EditGroup = () => { const dispatch = useAppDispatch(); const { t } = useTranslation(); const navigate = useNavigate(); - const { state }: { state: UserGroupDTO } = useLocation(); const { id } = useParams(); const canUpdatePermissions = usePermission("grouppermission.update"); @@ -85,8 +86,9 @@ export const EditGroup = () => { touched, values, setFieldValue, + setValues, } = useFormik({ - initialValues: state, + initialValues: group.data ?? { code: "" }, validationSchema: userGroupSchema(t), onSubmit: (values: UserGroupDTO) => { values.permissions = groupPermissions; @@ -99,19 +101,26 @@ export const EditGroup = () => { // load permissions and group on mount useEffect(() => { dispatch(getAllPermissions()); - dispatch(getUserGroup(state.code)); + dispatch(getUserGroup(id!!)); return () => { dispatch(updateUserGroupReset()); }; - }, [dispatch, state.code]); + }, [dispatch, id]); // update group permissions on group load useEffect(() => { if (group.data) { setGroupPermissions(group.data.permissions ?? []); + setValues(group.data); } }, [group.data]); + useEffect(() => { + return () => { + dispatch(getUserGroupReset()); + }; + }, []); + // compare permissions to update the update stack // and display permissions when ready useEffect(() => { @@ -140,10 +149,6 @@ export const EditGroup = () => { [setFieldValue] ); - if (state?.code !== id) { - return ; - } - if (permissions.hasFailed) return ( { return ( <> - {group.status === "LOADING" || permissions.status === "LOADING" ? ( + {group.isLoading || group.status === "IDLE" || permissions.isLoading ? ( ) : (
diff --git a/src/state/usergroups/slice.ts b/src/state/usergroups/slice.ts index a6a8189a3..370f23f04 100644 --- a/src/state/usergroups/slice.ts +++ b/src/state/usergroups/slice.ts @@ -17,6 +17,9 @@ export const userGroupSlice = createSlice({ deleteUserGroupReset: (state) => { state.delete = initial.delete; }, + getUserGroupReset: (state) => { + state.currentGroup = initial.currentGroup; + }, }, extraReducers: (builder) => builder @@ -78,4 +81,5 @@ export const { createUserGroupReset, updateUserGroupReset, deleteUserGroupReset, + getUserGroupReset, } = userGroupSlice.actions; diff --git a/src/state/usergroups/thunk.ts b/src/state/usergroups/thunk.ts index 39dc14647..8c08ec016 100644 --- a/src/state/usergroups/thunk.ts +++ b/src/state/usergroups/thunk.ts @@ -1,5 +1,6 @@ import { createAsyncThunk } from "@reduxjs/toolkit"; -import { UserGroupDTO, UserGroupsApi } from "../../generated"; +import { UserGroupDTO } from "generated/models/UserGroupDTO"; +import { UserGroupsApi } from "../../generated"; import { customConfiguration } from "../../libraries/apiUtils/configuration"; const api = new UserGroupsApi(customConfiguration()); @@ -74,4 +75,4 @@ export const revokePermission = createAsyncThunk( .revokePermission({ groupCode, id: permissionId }) .toPromise() .catch((error) => thunkApi.rejectWithValue(error.response)) -); \ No newline at end of file +); diff --git a/src/state/usergroups/types.ts b/src/state/usergroups/types.ts index 60eb05cee..65f0e2044 100644 --- a/src/state/usergroups/types.ts +++ b/src/state/usergroups/types.ts @@ -1,4 +1,4 @@ -import { UserGroupDTO } from "../../generated"; +import { UserGroupDTO } from "generated/models/UserGroupDTO"; import { ApiResponse } from "../types"; export type IUserGroupState = {