rtk_user_edit

src/Components/EditableUser.js

@@ -7,21 +7,14 @@ import { ModalContainer } from "./ModalContainer";
 import { useEffect, useState } from "react";
 import { getFullImageUrl, saveImage } from "../utills/utils";
 import { Input } from "@mui/icons-material";
+import { UserEntity } from "../Entities";
 
 const getRoleIdx = (user, role) => {
     let res = user?.acl?.indexOf(role);
     return res ?? -1;
 }
-const isRole = (user, role) => getRoleIdx(user, role) >= 0;
-const isAdminRole = user => isRole(user, "admin");
-const isUserRole = user => isRole(user, "user");
-
 const EditableUser = ({ user: userExt, maxWidth = 'md', saveUser, isAdminPermissions }) => {
-    const copyUser = user => ({
-        ...user,
-        acl: user.acl ? [...user.acl] : [],
-        avatar: user.avatar ? { _id: user.avatar._id, url: user.avatar.url } : undefined
-    });
+    const copyUser = user => new UserEntity(user);
 
     let [user, setUser] = useState(copyUser(userExt));
 
@@ -30,7 +23,7 @@ const EditableUser = ({ user: userExt, maxWidth = 'md', saveUser, isAdminPermiss
     }, [userExt]);
 
     const setUserData = (data) => {
-        let userData = { ...user, ...data };
+        let userData = copyUser({ ...user, ...data });
         setUser(userData);
         return userData;
     }
@@ -44,24 +37,6 @@ const EditableUser = ({ user: userExt, maxWidth = 'md', saveUser, isAdminPermiss
         saveUser({ user: userToSave });
     }
 
-    const setRole = (user, role, isSet) => {
-        user.acl ??= [];
-        let roleIdx = getRoleIdx(user, role);
-        if (isSet) {
-            if (roleIdx < 0) {
-                user.acl.push(role);
-            }
-        }
-        else {
-            if (roleIdx >= 0) {
-                user.acl.splice(roleIdx, 1);
-            }
-        }
-        setUser({ ...user });
-    }
-    const setAdminRole = (user, isSet) => setRole(user, "admin", isSet);
-    const setUserRole = (user, isSet) => setRole(user, "user", isSet);
-    
     return user && (
         <>
             <Container maxWidth={maxWidth}>
@@ -116,15 +91,15 @@ const EditableUser = ({ user: userExt, maxWidth = 'md', saveUser, isAdminPermiss
                                                 <FormGroup>
                                                     <FormControlLabel control={(
                                                         <Checkbox
-                                                            checked={isUserRole(user)}
+                                                            checked={user.isUserRole}
                                                             disabled={!isAdminPermissions}
-                                                            onChange={e => setUserRole(user, e.target.checked)}
+                                                            onChange={e => { user.setUserRole(e.target.checked); setUser(copyUser(user)); }}
                                                         />)} label="User" />
                                                     <FormControlLabel control={(
                                                         <Checkbox
-                                                            checked={isAdminRole(user)}
+                                                            checked={user.isAdminRole}
                                                             disabled={!isAdminPermissions}
-                                                            onChange={e => setAdminRole(user, e.target.checked)}
+                                                            onChange={e => { user.setAdminRole(e.target.checked); setUser(copyUser(user)); }}
                                                         />)} label="Admin" />
                                                 </FormGroup>
                                             </Grid>
@@ -155,14 +130,14 @@ const EditableUser = ({ user: userExt, maxWidth = 'md', saveUser, isAdminPermiss
 
 const CEditableUser = ({ maxWidth = 'md' }) => {
     const { _id } = useParams();
-    let currentUser = useSelector(state => state.auth.currentUser);
+    let currentUser = useSelector(state => new UserEntity(state.auth.currentUser));
     const { isLoading, data } = useUserFindQuery(_id ?? currentUser?._id ?? 'jfbvwkbvjeb');
     let user = isLoading ? undefined : data?.UserFindOne;
     user = _id ? user : currentUser;
     const [saveUserMutation, { }] = useSaveUserMutation();
 
     let isCurrentUser = currentUser?._id === _id || !_id;
-    let isAdminPermissions = isAdminRole(currentUser);
+    let isAdminPermissions = currentUser.isAdminRole;
 
 
     return user && (isAdminPermissions || isCurrentUser) ? (

src/Entities/UserEntity.js

@@ -0,0 +1,41 @@
+export class UserEntity {
+    constructor(user) {
+        this._id = user._id;
+        this.nick = user.nick;
+        this.login = user.login;
+        this.avatar = user.avatar ? { ...user.avatar } : null;
+        this.acl = [...(user.acl ?? [])];
+    }
+
+    #getRoleIdx = (role) => {
+        let res = this.acl?.indexOf(role);
+        return res ?? -1;
+    }
+    #isRole = (role) => this.#getRoleIdx(role) >= 0;
+    get isAdminRole() { return this.#isRole("admin"); }
+    get isUserRole() {
+        let a = '';
+        return this.#isRole("user");
+    }
+
+    #setRole = (role, isSet, onSetRole = undefined) => {
+        this.acl ??= [];
+        let roleIdx = this.#getRoleIdx(role);
+        if (isSet) {
+            if (roleIdx < 0) {
+                this.acl.push(role);
+                if (onSetRole)
+                    onSetRole(this);
+            }
+        }
+        else {
+            if (roleIdx >= 0) {
+                this.acl.splice(roleIdx, 1);
+                if (onSetRole)
+                    onSetRole(this);
+            }
+        }
+    }
+    setAdminRole = (isSet, onSetRole = undefined) => { this.#setRole("admin", isSet, onSetRole) };
+    setUserRole = (isSet, onSetRole = undefined) => { this.#setRole("user", isSet, onSetRole) };
+}

src/Entities/index.js

@@ -0,0 +1 @@
+export { UserEntity } from "./UserEntity";

src/reducers/authReducer.js

@@ -4,6 +4,7 @@ import { graphqlRequestBaseQuery } from '@rtk-query/graphql-request-base-query'
 import { jwtDecode } from "../utills";
 import { createSlice, current } from "@reduxjs/toolkit";
 import { history } from "../App";
+import { UserEntity } from "../Entities";
 //import { prepareHeaders } from "./index";
 
 export const prepareHeaders = (headers, { getState }) => {