Add promote user

Author: njxue

frontend/src/data/users/UserImpl.ts

@@ -41,6 +41,10 @@ export class UserImpl implements IUser {
     async deleteUser(userId: string): Promise<any> {
         return this.dataSource.deleteUser(userId);
     }
+
+    async updateUserPrivilege(userId: string, isAdmin: boolean): Promise<any> {
+        return this.dataSource.updateUserPrivilege(userId, isAdmin);
+    }
 }
 
 export const userImpl = new UserImpl();

frontend/src/data/users/UserRemoteDataSource.ts

@@ -58,6 +58,10 @@ export class UserRemoteDataSource extends BaseApi {
     async deleteUser(userId: string) {
         return await this.protectedDelete<any>(`/users/${userId}`);
     }
+
+    async updateUserPrivilege(userId: string, isAdmin: boolean) {
+        return await this.protectedPatch(`/users/${userId}/privilege`, { isAdmin });
+    }
 }
 
 export const userRemoteDataSource = new UserRemoteDataSource();

frontend/src/data/users/mockUser.ts

@@ -165,6 +165,22 @@ export class MockUser {
             users = users.filter((user) => user._id !== userId);
         });
     }
+
+    async updateUserPrivilege(userId: string, isAdmin: boolean): Promise<any> {
+        return new Promise((resolve, reject) => {
+            try {
+                const foundUser = this.users.find((u) => u._id === userId);
+                if (!foundUser) {
+                    resolve({ message: "User not found" });
+                } else {
+                    foundUser.isAdmin = isAdmin;
+                    resolve({ message: "User privileges updated", data: foundUser });
+                }
+            } catch (error) {
+                reject(error);
+            }
+        });
+    }
 }
 
 export const mockUser = new MockUser();

frontend/src/domain/usecases/UserUseCases.ts

@@ -108,23 +108,31 @@ export class UserUseCases {
      */
     async getUser(userId: string): Promise<User> {
         const data = await this.user.getUser(userId);
-        if (!data) {
-            throw new AuthenticationError("User not found or access denied");
+        if (!data.data) {
+            throw new AuthenticationError(data.message);
         }
         return data.data;
     }
 
     async getAllUsers(): Promise<User[]> {
         const data = await this.user.getAllUsers();
-        if (!data) {
-            throw new AuthenticationError("Unable to fetch users or access denied");
+        if (!data.data) {
+            throw new AuthenticationError(data.message);
         }
         return data.data;
     }
 
     async deleteUser(userId: string): Promise<void> {
         await this.user.deleteUser(userId);
     }
+
+    async updateUserPrivilege(userId: string, isAdmin: boolean): Promise<User> {
+        const data = await this.user.updateUserPrivilege(userId, isAdmin);
+        if (!data.data) {
+            throw new AuthenticationError(data.message);
+        }
+        return data.data;
+    }
 }
 
 export const userUseCases = new UserUseCases(userImpl);

frontend/src/domain/users/IUser.ts

@@ -27,4 +27,5 @@ export interface IUser {
     getUser(userId: string): Promise<any>;
     getAllUsers(): Promise<any>;
     deleteUser(userId: string): Promise<any>;
+    updateUserPrivilege(userId: string, isAdmin: boolean): Promise<any>;
 }

frontend/src/presentation/components/UpdateUserPrivilegeForm/UpdateUserPrivilegeForm.module.css

@@ -0,0 +1,5 @@
+.btnGroup {
+    display: flex;
+    gap: 8px;
+    margin-top: 8px;
+}

frontend/src/presentation/components/UpdateUserPrivilegeForm/UpdateUserPrivilegeForm.tsx

@@ -0,0 +1,43 @@
+import { Button } from "antd";
+import { User } from "domain/entities/User";
+import styles from "./UpdateUserPrivilegeForm.module.css";
+import { toast } from "react-toastify";
+import { handleError } from "presentation/utils/errorHandler";
+import { userUseCases } from "domain/usecases/UserUseCases";
+
+interface UpdateUserPrivilegeFormProps {
+    user: User;
+    onSubmit?: (user: User) => void;
+    onCancel?: () => void;
+}
+export const UpdateUserPrivilegeForm: React.FC<UpdateUserPrivilegeFormProps> = ({ user, onSubmit, onCancel }) => {
+    const handlePromoteUser = async () => {
+        try {
+            const updatedUser = await userUseCases.updateUserPrivilege(user._id, true);
+            toast.success(`Successfully promoted ${user.username} to admin`);
+            onSubmit?.(updatedUser);
+        } catch (err) {
+            console.error(err);
+            toast.error(handleError(err));
+        }
+    };
+
+    const handleCancel = () => {
+        onCancel?.();
+    };
+
+    return (
+        <>
+            <p>
+                Are you sure you want to promote <b>{user.username}</b> to admin?
+            </p>
+
+            <div className={styles.btnGroup}>
+                <Button onClick={handleCancel}>Cancel</Button>
+                <Button type="primary" onClick={handlePromoteUser}>
+                    Confirm
+                </Button>
+            </div>
+        </>
+    );
+};

frontend/src/presentation/pages/UserManagement.tsx

@@ -1,17 +1,20 @@
 import { User } from "domain/entities/User";
 import { userUseCases } from "domain/usecases/UserUseCases";
 import { useEffect, useState } from "react";
-import { EditOutlined, DeleteOutlined, CrownFilled } from "@ant-design/icons";
+import { EditOutlined, DeleteOutlined, CrownFilled, CrownOutlined } from "@ant-design/icons";
 import styles from "./UserManagement..module.css";
-import { Button, Modal } from "antd";
+import { Modal } from "antd";
 import { UpdateProfileForm } from "presentation/components/UpdateProfileForm/UpdateProfileForm";
 import { DeleteUserForm } from "presentation/components/DeleteUserForm/DeleteUserForm";
-import { toast } from "react-toastify";
+import { UpdateUserPrivilegeForm } from "presentation/components/UpdateUserPrivilegeForm/UpdateUserPrivilegeForm";
+
 
 export const UserManagement: React.FC<{}> = () => {
     const [users, setUsers] = useState<User[]>([]);
+
     const [editingUser, setEditingUser] = useState<User | null>(null);
     const [deletingUser, setDeletingUser] = useState<User | null>(null);
+    const [promotingUser, setPromotingUser] = useState<User | null>(null);
 
     useEffect(() => {
         const getAllUsers = async () => {
@@ -42,6 +45,11 @@ export const UserManagement: React.FC<{}> = () => {
                 {!user.isAdmin && (
                     <div className={styles.userControls}>
                         <DeleteOutlined onClick={() => setDeletingUser(user)} />
+                        <CrownOutlined
+                            onClick={() => {
+                                setPromotingUser(user);
+                            }}
+                        />
                         <EditOutlined onClick={() => setEditingUser(user)} />
                     </div>
                 )}
@@ -50,19 +58,28 @@ export const UserManagement: React.FC<{}> = () => {
     };
 
     const onEditUser = (updatedUser: User) => {
+        refreshUsersList(updatedUser);
+        setEditingUser(null);
+    };
+
+    const onDeleteUser = (userId: string) => {
+        setUsers((users) => users.filter((user) => user._id !== userId));
+        setDeletingUser(null);
+    };
+
+    const onPromoteUser = (updatedUser: User) => {
+        refreshUsersList(updatedUser);
+        setPromotingUser(null);
+    };
+
+    const refreshUsersList = (updatedUser: User) => {
         const updatedUsers = users.map((user) => {
             if (user._id === updatedUser._id) {
                 return updatedUser;
             }
             return user;
         });
         setUsers(updatedUsers);
-        setEditingUser(null);
-    };
-
-    const onDelete = (userId: string) => {
-        setUsers((users) => users.filter((user) => user._id !== userId));
-        setDeletingUser(null);
     };
 
     return (
@@ -90,7 +107,22 @@ export const UserManagement: React.FC<{}> = () => {
                     <DeleteUserForm
                         user={deletingUser}
                         onCancel={() => setDeletingUser(null)}
-                        onSubmit={() => onDelete(deletingUser?._id)}
+                        onSubmit={() => onDeleteUser(deletingUser?._id)}
+                    />
+                </Modal>
+            )}
+            {promotingUser && (
+                <Modal
+                    open={promotingUser !== null}
+                    closable={false}
+                    title="Promote user"
+                    footer={null}
+                    maskClosable={false}
+                >
+                    <UpdateUserPrivilegeForm
+                        user={promotingUser}
+                        onSubmit={onPromoteUser}
+                        onCancel={() => setPromotingUser(null)}
                     />
                 </Modal>
             )}