Added group tab to the game page

ludos/frontend/src/components/GroupTab.js

@@ -0,0 +1,35 @@
+import axios from "axios";
+import React, { useEffect, useState } from "react";
+import { Grid } from "@mui/material";
+import GroupTopic from "./GroupTopic";
+
+function GroupTab(data) {
+  const [forum, setForum] = useState([]);
+  useEffect(() => {
+    const link = `http://${process.env.REACT_APP_API_URL}/group?gameId=${data.id}`;
+    axios
+      .get(link, {
+        headers: {
+          Authorization: "Bearer " + localStorage.getItem("accessToken"),
+        },
+      })
+      .then((response) => {
+        console.log(response.data.items);
+        setForum(response.data.items);
+        console.log(forum);
+      })
+      .catch((error) => {
+        console.log(error);
+      });
+  }, []);
+
+  return (
+    <Grid style={{ display: "grid", gap: "32px" }}>
+      {forum &&
+        forum.length > 0 &&
+        forum.map((topic, key) => <GroupTopic topic={topic} key={key} />)}
+    </Grid>
+  );
+}
+
+export default GroupTab;

ludos/frontend/src/pages/GamePage.js

@@ -22,6 +22,7 @@ import RelatedGames from "../components/RelatedGamesTab.js";
 import EntityTab from "../components/EntityTab.js";
 import GameForum from "../components/GameForums.js";
 import { useNavigate } from "react-router-dom";
+import GroupTab from "../components/GroupTab.js";
 import { FaIgloo } from "react-icons/fa";
 
 function GamePage(id) {
@@ -836,9 +837,7 @@ function GamePage(id) {
                 </Typography>
               </TabPanel>
               <TabPanel value="5">
-                <Typography
-                  style={{ fontSize: "15px", color: "white" }}
-                ></Typography>
+                <GroupTab id={game.id} />
               </TabPanel>
               <TabPanel value="6">
                 <Reviews data={[]} id={game.id} showButtons={auth} />