Merge pull request #669 from bounswe/frontend/enhancement/lfg-comment…

…-fix-667 [Frontend] Lfg Comment Fix
bounswe · Dec 25, 2023 · c3ed5c0 · c3ed5c0
2 parents 7df553a + 4c3b80d
commit c3ed5c0
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 9 deletions.
diff --git a/app/frontend/src/pages/HomePage/Group.js b/app/frontend/src/pages/HomePage/Group.js
@@ -1,4 +1,5 @@
 import React from 'react'
+import {Link} from "react-router-dom";
 
 const Group = ({ item }) => {
 	return (
@@ -13,8 +14,10 @@ const Group = ({ item }) => {
 					<span>
 						Players: {item.totalMembers}/{item.memberCapacity}
 					</span>
-					<button className='btn bg-[#b46161] border-[#b46161] text-neutral-100 hover:bg-[#8c4646] hover:border-[#8c4646] btn-sm'>
-						Join
+					<button className="btn bg-[#b46161] border-[#b46161] text-neutral-100 hover:bg-[#8c4646] hover:border-[#8c4646] btn-sm">
+						<Link to={`/lfg/${item.lfgId}`}>
+							See Lfg
+						</Link>
 					</button>
 				</div>
 			</div>

diff --git a/app/frontend/src/pages/LfgPage/EditLfg.js b/app/frontend/src/pages/LfgPage/EditLfg.js
@@ -130,7 +130,7 @@ export default function EditLfg(props) {
             </Button>
             <Dialog open={open} onClose={handleClose}>
                 <DialogTitle>
-                    Create Lfg
+                    Edit Lfg
                     <IconButton edge='end' color='inherit' onClick={handleClose} sx={{ position: 'absolute', right: 8, top: 8 }}>
                         <CloseIcon />
                     </IconButton>

diff --git a/app/frontend/src/pages/LfgPage/Lfg.js b/app/frontend/src/pages/LfgPage/Lfg.js
@@ -80,6 +80,33 @@ const Lfg = () => {
         }
     };
 
+    const [isMember, setIsMember] = React.useState(true);
+
+    const isUserGroupMember = async (user, group) => {
+        try {
+            const userId = user?.userId;
+            const members = group?.members;
+
+            if (!userId || !members) {
+                return false;
+            }
+
+            const isMember = members.some(member => member.userId === userId);
+            return isMember;
+        } catch (error) {
+            return false;
+        }
+    };
+
+    useEffect(() => {
+        const fetchIsMember = async () => {
+            const result = await isUserGroupMember(currentUser, lfg);
+            setIsMember(result);
+        };
+
+        fetchIsMember();
+    }, [currentUser, lfg]);
+
     return (
         <>
             <Navbarx />
@@ -99,18 +126,21 @@ const Lfg = () => {
                             />
                         ))}
                     </div>
+                    {isMember &&
                     <textarea
                         className='w-full h-24 p-2 border-2 border-gray-300 rounded-lg shadow-md focus:outline-none focus:border-gray-500'
                         placeholder='Add a comment...'
                         value={newComment}
                         onChange={(e) => setNewComment(e.target.value)}
-                    ></textarea>
+                    ></textarea> }
+                    {isMember &&
                     <div className='pt-4'>
                         <button
                             className='w-20 h-10 p-2 bg-cyan-700 text-white rounded-lg shadow-md hover:bg-cyan-900 focus:outline-none'
                             onClick={handleNewComment}
                         >Send</button>
                     </div>
+                    }
                 </div>
             </div>
             <div className='bg-black text-white text-center p-8'>

diff --git a/app/frontend/src/pages/LfgPage/LfgCard.js b/app/frontend/src/pages/LfgPage/LfgCard.js
@@ -150,14 +150,16 @@ const LfgCard = ({ group, currentUser }) =>  {
                     </a>
                 </h3>
                 <p className='text-neutral-700 mb-4'>{group.description}</p>
-                <div className='border-b-2 border-t-2 border-neutral-400 pb-2 mt-4 opacity-75 mb-4 md:grid md:grid-cols-2 md:gap-4'>
+                <div className='border-b-2 border-t-2 border-neutral-400 pb-3 mt-4 opacity-75 mb-4 md:grid md:grid-cols-3 md:gap-4'>
+                    <div>
+                        <p className='font-bold'>Platform: {group.requiredPlatform}</p>
+                    </div>
                     <div>
-                        <p className='font-bold'>Game: {group.relatedGame}</p>
                         <p className='font-bold'>Language: {group.requiredLanguage}</p>
                     </div>
                     <div>
-                        <p className='font-bold'>Platform: {group.requiredPlatform}</p>
                         <p className='font-bold'>Mic/Cam: {group.micCamRequirement ? "yes" : "no"}</p>
+                        {false && <p className='font-bold'>Game: {group.relatedGame}</p>}
                     </div>
                 </div>
                 <div className='flex justify-between items-center'>

diff --git a/app/frontend/src/pages/LfgPage/LfgPage.js b/app/frontend/src/pages/LfgPage/LfgPage.js
@@ -1,6 +1,5 @@
 import React, { useState, useEffect } from 'react';
 import Navbarx from '../../components/navbar/Navbar';
-// import { getAllPosts } from '../../services/postService';
 import LfgCard from "./LfgCard";
 import {getUserInfoBySessionId} from "../../services/userService";
 import {getAllGroups} from "../../services/lfgService";
@@ -10,7 +9,6 @@ export default function LfgPage() {
 
     const [groups, setGroups] = useState([]);
     const [isLoading, setIsLoading] = useState(true);
-//    const [filteredPosts, setFilteredPosts] = useState([]);
     const [currentUser, setCurrentUser] = useState(null);