Merge pull request #887 from bounswe/frontend-group-moderation

Frontend group moderation

app/frontend/src/Components/MemberList/MemberList.module.scss

@@ -0,0 +1,5 @@
+@import "../../colors";
+
+.username {
+  color: $orange;
+}

app/frontend/src/Components/MemberList/MemberList.tsx

@@ -0,0 +1,48 @@
+import { Button, List, Select } from "antd";
+import styles from "./MemberList.module.scss";
+import { useMutation } from "react-query";
+import { banUserFromGroup } from "../../Services/group";
+interface MemberListData {
+  id: string;
+  username: string;
+  photoUrl: string;
+}
+
+function MemberList({
+  data,
+  groupId,
+}: {
+  data: MemberListData[];
+  groupId: string;
+}) {
+  const banUserMutation = useMutation(banUserFromGroup, {
+    onSuccess: async () => {
+      alert(`You successfully banned the user`);
+    },
+    onError: () => {
+      alert("Something went wrong");
+    },
+  });
+
+  const handleClick = (userId: string) => {
+    banUserMutation.mutate({ groupId, userId });
+  };
+  return (
+    <List
+      dataSource={data}
+      renderItem={(item: MemberListData) => (
+        <List.Item key={item.id}>
+          <List.Item.Meta
+            //avatar={<Avatar src={item.photoUrl} />}
+            title={<p className={styles.username}>{item.username}</p>}
+          />
+          <Button type="primary" danger onClick={() => handleClick(item.id)}>
+            Ban
+          </Button>
+        </List.Item>
+      )}
+    />
+  );
+}
+
+export default MemberList;

app/frontend/src/Pages/Group/Group.module.scss

@@ -51,6 +51,13 @@
         justify-content: center;
         align-items: center;
       }
+
+      .moderation {
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-end;
+        gap: 1rem;
+      }
     }
   }
 

app/frontend/src/Pages/Group/Group.tsx

@@ -1,15 +1,22 @@
-import { useParams } from "react-router-dom";
+import { useNavigate, useNavigation, useParams } from "react-router-dom";
 import styles from "./Group.module.scss";
-import { useQuery } from "react-query";
-import { getGroup } from "../../Services/group";
+import { useMutation, useQuery } from "react-query";
+import { deleteGroup, getGroup } from "../../Services/group";
 import { formatDate } from "../../Library/utils/formatDate";
 import Forum from "../../Components/Forum/Forum";
 import { getGame } from "../../Services/gamedetail";
 import Game from "../../Components/Game/Game";
 import TagRenderer from "../../Components/TagRenderer/TagRenderer";
+import { Button, Modal } from "antd";
+import { useState } from "react";
+import MemberList from "../../Components/MemberList/MemberList";
+import { useAuth } from "../../Components/Hooks/useAuth";
 
 function Group() {
   const { groupId } = useParams();
+  const { user } = useAuth();
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const navigate = useNavigate();
 
   const { data: group, isLoading } = useQuery(["group", groupId], () =>
     getGroup(groupId!)
@@ -21,6 +28,29 @@ function Group() {
     { enabled: !!group }
   );
 
+  const showModal = () => {
+    setIsModalOpen(true);
+  };
+
+  const handleCancel = () => {
+    setIsModalOpen(false);
+  };
+
+  const deleteGroupMutation = useMutation(deleteGroup, {
+    onSuccess: async () => {
+      alert(`You successfully delete the group`);
+      navigate("/groups");
+    },
+    onError: () => {
+      alert("Something went wrong");
+    },
+  });
+
+  const handleClick = () => {
+    deleteGroupMutation.mutate(groupId as string);
+  };
+
+  console.log(user);
   return (
     <div className={styles.container}>
       <div className={styles.info}>
@@ -32,6 +62,17 @@ function Group() {
             <span>{!isLoading && <TagRenderer tags={group?.tags} />}</span>
           </div>
           <div className={styles.desc}>{group?.description}</div>
+          <div className={styles.moderation}>
+            <Button type="primary" onClick={showModal}>
+              {`Members (${group?.members.length || 0})`}
+            </Button>
+            {(user?.role === "ADMIN" ||
+              group?.moderators.includes(user.id)) && (
+              <Button type="primary" onClick={handleClick} danger>
+                Delete Group
+              </Button>
+            )}
+          </div>
         </div>
       </div>
       <div className={styles.forumTitle}>Forum</div>
@@ -43,6 +84,18 @@ function Group() {
           />
         )}
       </div>
+
+      <Modal
+        title="Members"
+        open={isModalOpen}
+        footer={null}
+        onCancel={handleCancel}
+      >
+        <MemberList
+          data={group?.members}
+          groupId={groupId as string}
+        ></MemberList>
+      </Modal>
     </div>
   );
 }

app/frontend/src/Services/group.ts

@@ -42,12 +42,40 @@ export async function createGroup(
 
 export async function joinGroup(groupId: string) {
   const response = await axios.post(
-    `${import.meta.env.VITE_APP_API_URL}/group/join`, null, {params: {id: groupId}});
-    return response.data;
+    `${import.meta.env.VITE_APP_API_URL}/group/join`,
+    null,
+    { params: { id: groupId } }
+  );
+  return response.data;
 }
 
 export async function leaveGroup(groupId: string) {
   const response = await axios.post(
-    `${import.meta.env.VITE_APP_API_URL}/group/leave`, null, {params: {id: groupId}});
-    return response.data;
-}
+    `${import.meta.env.VITE_APP_API_URL}/group/leave`,
+    null,
+    { params: { id: groupId } }
+  );
+  return response.data;
+}
+
+export async function banUserFromGroup({
+  groupId,
+  userId,
+}: {
+  groupId: string;
+  userId: string;
+}) {
+  const response = await axios.put(
+    `${
+      import.meta.env.VITE_APP_API_URL
+    }/group/ban-user?groupId=${groupId}&userId=${userId}`
+  );
+  return response.data;
+}
+
+export async function deleteGroup(groupId: string) {
+  const response = await axios.delete(
+    `${import.meta.env.VITE_APP_API_URL}/group/delete?identifier=${groupId}`
+  );
+  return response.data;
+}