Add remove functionality to EditModal

Author: Leo7Deng

backend/postgres/circles_repo.go

@@ -231,27 +231,44 @@ func EditRoleInCircle(circleID string, targetUserID string, role string) error {
 	}
 	defer conn.Release()
 
-	err = conn.QueryRow(
-		ctx,
-		`
+	if role == "remove" {
+		_, err = conn.Exec(
+			ctx,
+			`
+			DELETE FROM users_circles
+			WHERE user_id = $1 AND circle_id = $2;
+			`,
+			targetUserID,
+			circleID,
+		)
+		if err != nil {
+			fmt.Fprintf(os.Stderr, "Unable to query PSQL: %v\n", err)
+			return err
+		}
+		fmt.Printf("Role removed\n")
+		return nil
+	} else {
+		err = conn.QueryRow(
+			ctx,
+			`
 		UPDATE users_circles
 		SET role = $1
 		WHERE user_id = $2 AND circle_id = $3
 		RETURNING role;
 		`,
-		role,
-		targetUserID,
-		circleID,
-	).Scan(&role)
-	if err != nil {
-		fmt.Fprintf(os.Stderr, "Unable to query PSQL: %v\n", err)
-		return err
+			role,
+			targetUserID,
+			circleID,
+		).Scan(&role)
+		if err != nil {
+			fmt.Fprintf(os.Stderr, "Unable to query PSQL: %v\n", err)
+			return err
+		}
+		fmt.Printf("Role updated: %v\n", role)
+		return nil
 	}
-	fmt.Printf("Role updated: %v\n", role)
-	return nil
 }
 
-
 func GetRoleInCircle(userID string, circleID string) (string, error) {
 	var role string
 	err := pool.QueryRow(
@@ -394,4 +411,4 @@ func SearchCircle(circleID string, content string) ([]models.SearchMessage, erro
 		return messages[i].CreatedAt > messages[j].CreatedAt
 	})
 	return messages, nil
-}
+}

frontend/app/components/EditModal.tsx

@@ -16,7 +16,7 @@ function EditModal({ isOpen, setOpen, circleId }: InviteModalProps) {
     }
     const { getAccessToken } = authContext;
     const [users, setUsers] = useState<EditUser[]>([]);
-    
+
     useEffect(() => {
         async function fetchEditUsers() {
             const token = await getAccessToken();
@@ -51,10 +51,10 @@ function EditModal({ isOpen, setOpen, circleId }: InviteModalProps) {
         }
         fetchEditUsers();
     }, [circleId, getAccessToken]);
-    
+
     const handleRoleChange = (userId: string, newRole: string) => {
-        setUsers(prevUsers => 
-            prevUsers.map(user => 
+        setUsers(prevUsers =>
+            prevUsers.map(user =>
                 user.id === userId ? { ...user, role: newRole } : user
             )
         );
@@ -91,7 +91,7 @@ function EditModal({ isOpen, setOpen, circleId }: InviteModalProps) {
     };
 
     if (!isOpen) return null;
-    
+
     return (
         <div className="mx-auto max-w-screen-xl relative z-10 focus:outline-none">
             <form action="#" className="mx-auto mb-4 mt-6 max-w-md space-y-4" onSubmit={handleSubmit}>
@@ -128,13 +128,14 @@ function EditModal({ isOpen, setOpen, circleId }: InviteModalProps) {
                                     >
                                         <option value="member">Member</option>
                                         <option value="admin">Admin</option>
+                                        <option value="remove">Remove</option>
                                     </select>
                                 </li>
                             ))}
                         </ul>
                     </div>
                 </div>
-    
+
                 <div className="flex items-center justify-between">
                     <button
                         type="submit"

frontend/app/components/SearchModal.css

@@ -1,5 +1,5 @@
 .search-modal {
-    height: 52vh;
+    height: 53vh;
 }
 
 .search-result-content {