From bbe481031fc06bab364e20616b6409aa6aa21f1a Mon Sep 17 00:00:00 2001
From: iyanfdezz <uo288231@uniovi.es>
Date: Sun, 7 Apr 2024 14:27:52 +0200
Subject: [PATCH 01/20] =?UTF-8?q?Eliminando=20relaci=C3=B3n=20innecesaria?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 users/userservice/user-model.js | 20 +++++---------------
 1 file changed, 5 insertions(+), 15 deletions(-)

diff --git a/users/userservice/user-model.js b/users/userservice/user-model.js
index 2e26fad8..cbd6319c 100644
--- a/users/userservice/user-model.js
+++ b/users/userservice/user-model.js
@@ -39,24 +39,14 @@ const groupSchema = new mongoose.Schema({
       type: Date,
       default: Date.now
   },
+  members: [{
+    type: String,
+    required: true
+  }]
 });
 
 const Group = mongoose.model('Group', groupSchema);
 
-// Modelo para la relación entre usuarios y grupos
-const userGroupSchema = new mongoose.Schema({
-  user: {
-      type: mongoose.Schema.Types.ObjectId,
-      ref: 'User',
-      required: true
-  },
-  group: {
-      type: mongoose.Schema.Types.ObjectId,
-      ref: 'Group',
-      required: true
-  },
-});
 
-const UserGroup = mongoose.model('UserGroup', userGroupSchema);
 
-module.exports = { User, Group, UserGroup };
\ No newline at end of file
+module.exports = { User, Group };
\ No newline at end of file

From df8147cbc4fd0399283deaf72e0fc44ff28ed1b9 Mon Sep 17 00:00:00 2001
From: iyanfdezz <uo288231@uniovi.es>
Date: Sun, 7 Apr 2024 14:28:16 +0200
Subject: [PATCH 02/20] Modificando vista de Grupos

---
 webapp/src/pages/Social/Groups.js | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/webapp/src/pages/Social/Groups.js b/webapp/src/pages/Social/Groups.js
index 6fdede4b..9ac045a1 100644
--- a/webapp/src/pages/Social/Groups.js
+++ b/webapp/src/pages/Social/Groups.js
@@ -17,7 +17,7 @@ const Groups = () => {
   useEffect(() => {
     const fetchData = async () => {
       try {
-        const response = await axios.get(`${apiEndpoint}/group/list`);
+        const response = await axios.get(`${apiEndpoint}/groups`);
         setGroups(response.data.groups);
       } catch (error) {
         console.error('Error fetching data:', error);
@@ -28,7 +28,7 @@ const Groups = () => {
 
   const addGroup = async () => {
     try {
-      await axios.post(`${apiEndpoint}/group/add`, {
+      await axios.post(`${apiEndpoint}/groups`, {
         name: name,
         username: username
       });
@@ -41,7 +41,7 @@ const Groups = () => {
 
   const handleJoinGroup = async (groupId) => {
     try {
-      await axios.post(`${apiEndpoint}/group/join`, { groupId });
+      await axios.post(`${apiEndpoint}/groups/${groupId}/join`, { username });
       setGroups(prevGroups => prevGroups.filter(group => group._id !== groupId));
     } catch (error) {
       console.error('Error joining group:', error);
@@ -80,7 +80,7 @@ const Groups = () => {
         <Text fontSize="3xl" fontWeight="bold" mb="4">GROUPS</Text>
         <List>
           {groups.map((group) => (
-            <ListItem key={group.name} display="flex" justifyContent="space-between" alignItems="center" mb="2">
+            <ListItem key={group._id} display="flex" justifyContent="space-between" alignItems="center" mb="2">
               <Text>{group.name}</Text>
               <Button colorScheme="blue" onClick={() => handleJoinGroup(group._id)}>Join</Button>
             </ListItem>
@@ -95,3 +95,4 @@ const Groups = () => {
 };
 
 export default Groups;
+

From ec9cb6f32de15afde61aed33b252b74c1c6bfbab Mon Sep 17 00:00:00 2001
From: iyanfdezz <uo288231@uniovi.es>
Date: Sun, 7 Apr 2024 14:29:12 +0200
Subject: [PATCH 03/20] Modificando endpoints

---
 users/userservice/user-service.js | 38 +++++++++++--------------------
 1 file changed, 13 insertions(+), 25 deletions(-)

diff --git a/users/userservice/user-service.js b/users/userservice/user-service.js
index 1da6492f..db020174 100644
--- a/users/userservice/user-service.js
+++ b/users/userservice/user-service.js
@@ -179,7 +179,7 @@ app.post("/saveGameList", async (req, res) => {
   }
 });
 
-app.get('/group/list', async (req, res) => {
+app.get('/groups', async (req, res) => {
   try {
       const allGroups = await Group.find();
       res.json({ groups: allGroups });
@@ -198,33 +198,25 @@ app.get('/group/:name', async (req, res) => {
           return res.status(404).json({ error: 'Group not found' });
       }
 
-      const groupUsers = await UserGroup.find({ group: group._id }).populate('user');
-
-      res.json({ group, users: groupUsers });
+      res.json({ group });
   } catch (error) {
       res.status(400).json({ error: error.message });
   }
 });
 
 // Crear un nuevo grupo
-app.post('/group/add', async (req, res) => {
+app.post('/groups', async (req, res) => {
   try {
-      const { name, userId } = req.body;
+      const { name, username } = req.body;
 
-      // Verifica si el usuario existe
-      const user = await User.findById(userId);
+      const user = await User.findOne({ username });
       if (!user) {
           return res.status(404).json({ error: 'User not found' });
       }
 
-      // Crea un nuevo grupo
-      const newGroup = new Group({ name });
+      const newGroup = new Group({ name, members: [username] });
       await newGroup.save();
 
-      // Agrega al usuario como miembro del grupo
-      const userGroup = new UserGroup({ user: userId, group: newGroup._id });
-      await userGroup.save();
-
       res.json({ message: 'Group created successfully' });
   } catch (error) {
       res.status(400).json({ error: error.message });
@@ -232,31 +224,26 @@ app.post('/group/add', async (req, res) => {
 });
 
 // Unirse a un grupo existente
-app.post('/group/join', async (req, res) => {
+app.post('/groups/:groupId/join', async (req, res) => {
   try {
-      const { groupId, userId } = req.body;
+      const { groupId, username } = req.body;
 
-      // Verifica si el usuario existe
-      const user = await User.findById(userId);
+      const user = await User.findOne({ username });
       if (!user) {
           return res.status(404).json({ error: 'User not found' });
       }
 
-      // Verifica si el grupo existe
       const group = await Group.findById(groupId);
       if (!group) {
           return res.status(404).json({ error: 'Group not found' });
       }
 
-      // Verifica si el usuario ya es miembro del grupo
-      const existingMembership = await UserGroup.findOne({ user: userId, group: groupId });
-      if (existingMembership) {
+      if (group.members.includes(username)) {
           return res.status(400).json({ error: 'User already a member of this group' });
       }
 
-      // Agrega al usuario como miembro del grupo
-      const userGroup = new UserGroup({ user: userId, group: groupId });
-      await userGroup.save();
+      group.members.push(username);
+      await group.save();
 
       res.json({ message: 'User joined the group successfully' });
   } catch (error) {
@@ -264,6 +251,7 @@ app.post('/group/join', async (req, res) => {
   }
 });
 
+
 const server = app.listen(port, () => {
   console.log(`User Service listening at http://localhost:${port}`);
 });

From 5e3ee88beba738c67933f4c629917b2f6046a850 Mon Sep 17 00:00:00 2001
From: iyanfdezz <uo288231@uniovi.es>
Date: Sun, 7 Apr 2024 15:01:24 +0200
Subject: [PATCH 04/20] Cambios en los endpoints

---
 users/userservice/user-service.js | 10 ++++++----
 webapp/src/pages/Social/Groups.js |  2 +-
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/users/userservice/user-service.js b/users/userservice/user-service.js
index db020174..d5bb0458 100644
--- a/users/userservice/user-service.js
+++ b/users/userservice/user-service.js
@@ -205,16 +205,18 @@ app.get('/group/:name', async (req, res) => {
 });
 
 // Crear un nuevo grupo
-app.post('/groups', async (req, res) => {
+app.post('/group/create', async (req, res) => {
   try {
-      const { name, username } = req.body;
+      const name= req.body.name;
+      const username= req.body.username;
 
-      const user = await User.findOne({ username });
+      const user = await User.findOne({ username:username });
       if (!user) {
           return res.status(404).json({ error: 'User not found' });
       }
 
-      const newGroup = new Group({ name, members: [username] });
+      const newGroup = new Group({ name: name,
+         members: [username] });
       await newGroup.save();
 
       res.json({ message: 'Group created successfully' });
diff --git a/webapp/src/pages/Social/Groups.js b/webapp/src/pages/Social/Groups.js
index 9ac045a1..9b97f398 100644
--- a/webapp/src/pages/Social/Groups.js
+++ b/webapp/src/pages/Social/Groups.js
@@ -28,7 +28,7 @@ const Groups = () => {
 
   const addGroup = async () => {
     try {
-      await axios.post(`${apiEndpoint}/groups`, {
+      await axios.post(`${apiEndpoint}/group/create`, {
         name: name,
         username: username
       });

From aa4b3c88cfd129846ed6785309bda0a477101d66 Mon Sep 17 00:00:00 2001
From: iyanfdezz <uo288231@uniovi.es>
Date: Sun, 7 Apr 2024 15:13:01 +0200
Subject: [PATCH 05/20] Ya funciona el unirse a grupos y crearlos

---
 users/userservice/user-service.js | 4 ++--
 webapp/src/pages/Social/Groups.js | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/users/userservice/user-service.js b/users/userservice/user-service.js
index d5bb0458..43b1fd93 100644
--- a/users/userservice/user-service.js
+++ b/users/userservice/user-service.js
@@ -179,7 +179,7 @@ app.post("/saveGameList", async (req, res) => {
   }
 });
 
-app.get('/groups', async (req, res) => {
+app.get('/group/list', async (req, res) => {
   try {
       const allGroups = await Group.find();
       res.json({ groups: allGroups });
@@ -205,7 +205,7 @@ app.get('/group/:name', async (req, res) => {
 });
 
 // Crear un nuevo grupo
-app.post('/group/create', async (req, res) => {
+app.post('/group/add', async (req, res) => {
   try {
       const name= req.body.name;
       const username= req.body.username;
diff --git a/webapp/src/pages/Social/Groups.js b/webapp/src/pages/Social/Groups.js
index 9b97f398..b2de0ce5 100644
--- a/webapp/src/pages/Social/Groups.js
+++ b/webapp/src/pages/Social/Groups.js
@@ -17,7 +17,7 @@ const Groups = () => {
   useEffect(() => {
     const fetchData = async () => {
       try {
-        const response = await axios.get(`${apiEndpoint}/groups`);
+        const response = await axios.get(`${apiEndpoint}/group/list`);
         setGroups(response.data.groups);
       } catch (error) {
         console.error('Error fetching data:', error);
@@ -28,7 +28,7 @@ const Groups = () => {
 
   const addGroup = async () => {
     try {
-      await axios.post(`${apiEndpoint}/group/create`, {
+      await axios.post(`${apiEndpoint}/group/add`, {
         name: name,
         username: username
       });

From 085f4a0e3d1709ea4400c5f7d66f84720b64e26a Mon Sep 17 00:00:00 2001
From: iyanfdezz <uo288231@uniovi.es>
Date: Sun, 7 Apr 2024 15:28:35 +0200
Subject: [PATCH 06/20] Dividiendo los grupos en dos vistas

---
 users/userservice/user-service.js     |   5 +-
 webapp/src/pages/Social/Groups.js     | 113 +++++++++++++++-----------
 webapp/src/pages/Social/UserGroups.js |  88 ++++++++++++++++++++
 3 files changed, 156 insertions(+), 50 deletions(-)
 create mode 100644 webapp/src/pages/Social/UserGroups.js

diff --git a/users/userservice/user-service.js b/users/userservice/user-service.js
index 43b1fd93..ac05569e 100644
--- a/users/userservice/user-service.js
+++ b/users/userservice/user-service.js
@@ -226,9 +226,10 @@ app.post('/group/add', async (req, res) => {
 });
 
 // Unirse a un grupo existente
-app.post('/groups/:groupId/join', async (req, res) => {
+app.post('/group/join', async (req, res) => {
   try {
-      const { groupId, username } = req.body;
+      const groupId=req.body.groupId;
+      const username=req.body.username;
 
       const user = await User.findOne({ username });
       if (!user) {
diff --git a/webapp/src/pages/Social/Groups.js b/webapp/src/pages/Social/Groups.js
index b2de0ce5..9470776d 100644
--- a/webapp/src/pages/Social/Groups.js
+++ b/webapp/src/pages/Social/Groups.js
@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import axios from 'axios';
-import { Container, Box, Text, List, ListItem, Button, Divider, Input, Alert } from '@chakra-ui/react';
+import { Container, Box, Text, List, ListItem, Button, Input, Alert } from '@chakra-ui/react';
 import Nav from "../../components/Nav/Nav.js";
 import Footer from "../../components/Footer/Footer.js";
 
@@ -15,17 +15,19 @@ const Groups = () => {
   const apiEndpoint = process.env.REACT_APP_API_ENDPOINT || 'http://localhost:8000';
 
   useEffect(() => {
-    const fetchData = async () => {
-      try {
-        const response = await axios.get(`${apiEndpoint}/group/list`);
-        setGroups(response.data.groups);
-      } catch (error) {
-        console.error('Error fetching data:', error);
-      }
-    };
     fetchData();
   }, []);
 
+  const fetchData = async () => {
+    try {
+      const response = await axios.get(`${apiEndpoint}/group/list`);
+      const userGroups = response.data.groups.filter(group => !group.members.includes(username));
+      setGroups(userGroups);
+    } catch (error) {
+      console.error('Error fetching data:', error);
+    }
+  };
+
   const addGroup = async () => {
     try {
       await axios.post(`${apiEndpoint}/group/add`, {
@@ -39,14 +41,29 @@ const Groups = () => {
     }
   };
 
-  const handleJoinGroup = async (groupId) => {
-    try {
-      await axios.post(`${apiEndpoint}/groups/${groupId}/join`, { username });
+  const handleJoinGroup = (groupId) => {
+    fetch(`${apiEndpoint}/group/join`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({
+        groupId: groupId,
+        username: localStorage.getItem('username')
+      })
+    })
+    .then(response => {
+      if (!response.ok) {
+        throw new Error('Failed to join group');
+      }
+      
       setGroups(prevGroups => prevGroups.filter(group => group._id !== groupId));
-    } catch (error) {
+    })
+    .catch(error => {
       console.error('Error joining group:', error);
-    }
+    });
   };
+  
 
   const handleCloseAlert = () => {
     setOpenAlert(false);
@@ -54,45 +71,45 @@ const Groups = () => {
 
   return (
     <>
-    <Nav/>
-    <Container maxW="xs" mt="8">
-      <Box>
-        <Text fontSize="2xl" fontWeight="bold" mb="4">Create a Group</Text>
-        <Input
-          name="name"
-          mb="4"
-          placeholder="Name"
-          value={name}
-          onChange={(e) => setName(e.target.value)}
-        />
-        <Button colorScheme="blue" onClick={addGroup} mb="4">Create</Button>
-        <Alert status="success" variant="subtle" mt="2" isOpen={openAlert} onClose={handleCloseAlert}>
-          {alertMessage}
-        </Alert>
-        {error && (
-          <Alert status="error" variant="subtle" mt="2">
-            {`Error: ${error}`}
+      <Nav/>
+      <Container maxW="xs" mt="8">
+        <Box>
+          <Text fontSize="2xl" fontWeight="bold" mb="4">Crea un grupo</Text>
+          <Input
+            name="name"
+            mb="4"
+            placeholder="Name"
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+          />
+          <Button colorScheme="blue" onClick={addGroup} mb="4">Crear</Button>
+          <Alert status="success" variant="subtle" mt="2" isOpen={openAlert} onClose={handleCloseAlert}>
+            {alertMessage}
           </Alert>
-        )}
-      </Box>
+          {error && (
+            <Alert status="error" variant="subtle" mt="2">
+              {`Error: ${error}`}
+            </Alert>
+          )}
+        </Box>
 
-      <Box mt="8">
-        <Text fontSize="3xl" fontWeight="bold" mb="4">GROUPS</Text>
-        <List>
-          {groups.map((group) => (
-            <ListItem key={group._id} display="flex" justifyContent="space-between" alignItems="center" mb="2">
-              <Text>{group.name}</Text>
-              <Button colorScheme="blue" onClick={() => handleJoinGroup(group._id)}>Join</Button>
-            </ListItem>
-          ))}
-        </List>
-      </Box>
-    </Container>
-    <Footer/>
+        <Box mt="8">
+          <Text fontSize="3xl" fontWeight="bold" mb="4">Grupos a los que puedes unirte</Text>
+          <List>
+            {groups.map((group) => (
+              <ListItem key={group._id} display="flex" justifyContent="space-between" alignItems="center" mb="2">
+                <Text>{group.name}</Text>
+                <Button colorScheme="blue" onClick={() => handleJoinGroup(group._id)}>Join</Button>
+              </ListItem>
+            ))}
+          </List>
+        </Box>
+      </Container>
+      <Footer/>
     </>
-    
   );
 };
 
 export default Groups;
 
+
diff --git a/webapp/src/pages/Social/UserGroups.js b/webapp/src/pages/Social/UserGroups.js
new file mode 100644
index 00000000..7f65abf6
--- /dev/null
+++ b/webapp/src/pages/Social/UserGroups.js
@@ -0,0 +1,88 @@
+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
+import { Container, Box, Text, List, ListItem, Button, Input, Alert } from '@chakra-ui/react';
+import Nav from "../../components/Nav/Nav.js";
+import Footer from "../../components/Footer/Footer.js";
+
+const UserGroups = () => {
+  const [groups, setGroups] = useState([]);
+  const [name, setName] = useState('');
+  const [error, setError] = useState('');
+  const [openAlert, setOpenAlert] = useState(false);
+  const [alertMessage, setAlertMessage] = useState('');
+  const username = localStorage.getItem('username');
+
+  const apiEndpoint = process.env.REACT_APP_API_ENDPOINT || 'http://localhost:8000';
+
+  useEffect(() => {
+    fetchData();
+  }, []);
+
+  const fetchData = async () => {
+    try {
+      const response = await axios.get(`${apiEndpoint}/group/list`);
+      const userGroups = response.data.groups.filter(group => group.members.includes(username));
+      setGroups(userGroups);
+    } catch (error) {
+      console.error('Error fetching data:', error);
+    }
+  };
+
+  const addGroup = async () => {
+    try {
+      await axios.post(`${apiEndpoint}/group/add`, {
+        name: name,
+        username: username
+      });
+      setAlertMessage('Group created successfully');
+      setOpenAlert(true);
+    } catch (error) {
+      setError(error.response.data.error);
+    }
+  };
+
+  const handleJoinGroup = (groupId) => {
+    fetch(`${apiEndpoint}/group/join`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({
+        groupId: groupId,
+        username: localStorage.getItem('username')
+      })
+    })
+    .then(response => {
+      if (!response.ok) {
+        throw new Error('Failed to join group');
+      }
+      
+      setGroups(prevGroups => prevGroups.filter(group => group._id !== groupId));
+    })
+    .catch(error => {
+      console.error('Error joining group:', error);
+    });
+  };
+
+  return (
+    <>
+      <Nav/>
+      <Container maxW="xs" mt="8">
+        <Box mt="8">
+          <Text fontSize="3xl" fontWeight="bold" mb="4">Tus grupos</Text>
+          <List>
+            {groups.map((group) => (
+              <ListItem key={group._id} display="flex" justifyContent="space-between" alignItems="center" mb="2">
+                <Text>{group.name}</Text>
+                <Button colorScheme="blue" onClick={() => seeGroupDetails(group._id)}>Join</Button>
+              </ListItem>
+            ))}
+          </List>
+        </Box>
+      </Container>
+      <Footer/>
+    </>
+  );
+};
+
+export default UserGroups;

From df4b4f890da41c0f1e3a76ca98467fa44586a9cb Mon Sep 17 00:00:00 2001
From: iyanfdezz <uo288231@uniovi.es>
Date: Sun, 7 Apr 2024 15:36:59 +0200
Subject: [PATCH 07/20] =?UTF-8?q?A=C3=B1adiendo=20rutas=20y=20arreglando?=
 =?UTF-8?q?=20endpoints?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 webapp/src/App.js                     |  2 ++
 webapp/src/components/Nav/Nav.js      |  1 +
 webapp/src/pages/Social/UserGroups.js | 43 ++++++++-------------------
 3 files changed, 15 insertions(+), 31 deletions(-)

diff --git a/webapp/src/App.js b/webapp/src/App.js
index 5eea487d..e6cd9413 100644
--- a/webapp/src/App.js
+++ b/webapp/src/App.js
@@ -17,6 +17,7 @@ import CalculadoraHumana from "./pages/Calculadora/Calculadora.js";
 import UsersPage from "./pages/Social/UsersPage.js";
 import FriendList from "./pages/Social/FriendsList.js";
 import Groups from "./pages/Social/Groups.js";
+import UserGroups from "./pages/Social/UserGroups.js";
 
 function App() {
   useEffect(() => {
@@ -41,6 +42,7 @@ function App() {
           <Route path="/social/usuarios" element={<UsersPage />} />
           <Route path="/social/amigos" element={<FriendList />} />
           <Route path="/social/grupos" element={<Groups />} />
+          <Route path="/social/misgrupos" element={<UserGroups />} />
           <Route path="/perfil" element={<Perfil />} />
           <Route path="/config" element={<Config />} />
         </Route>
diff --git a/webapp/src/components/Nav/Nav.js b/webapp/src/components/Nav/Nav.js
index 6c7aa3f7..3677f0ee 100644
--- a/webapp/src/components/Nav/Nav.js
+++ b/webapp/src/components/Nav/Nav.js
@@ -60,6 +60,7 @@ const Nav = () => {
               <Text cursor="pointer" onClick={() => handleNavigate("/social/usuarios")} color={textColor}>Usuarios</Text>
               <Text cursor="pointer" onClick={() => handleNavigate("/social/amigos")} color={textColor}>Amigos</Text>
               <Text cursor="pointer" onClick={() => handleNavigate("/social/grupos")} color={textColor}>Grupos</Text>
+              <Text cursor="pointer" onClick={() => handleNavigate("/social/misgrupos")} color={textColor}>Mis grupos</Text>
             </PopoverBody>
           </PopoverContent>
         </Popover>
diff --git a/webapp/src/pages/Social/UserGroups.js b/webapp/src/pages/Social/UserGroups.js
index 7f65abf6..6f1ba42a 100644
--- a/webapp/src/pages/Social/UserGroups.js
+++ b/webapp/src/pages/Social/UserGroups.js
@@ -28,40 +28,21 @@ const UserGroups = () => {
     }
   };
 
-  const addGroup = async () => {
+  const seeGroupDetails = async (groupId) => {
     try {
-      await axios.post(`${apiEndpoint}/group/add`, {
-        name: name,
-        username: username
-      });
-      setAlertMessage('Group created successfully');
-      setOpenAlert(true);
-    } catch (error) {
-      setError(error.response.data.error);
-    }
-  };
-
-  const handleJoinGroup = (groupId) => {
-    fetch(`${apiEndpoint}/group/join`, {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify({
-        groupId: groupId,
-        username: localStorage.getItem('username')
-      })
-    })
-    .then(response => {
+      const response = await fetch(`${apiEndpoint}/group/${groupId}`);
+      const data = await response.json();
+  
       if (!response.ok) {
-        throw new Error('Failed to join group');
+        throw new Error('Failed to see group details');
       }
-      
-      setGroups(prevGroups => prevGroups.filter(group => group._id !== groupId));
-    })
-    .catch(error => {
-      console.error('Error joining group:', error);
-    });
+  
+      const { group } = data;
+  
+      setGroups(prevGroups => prevGroups.filter(existingGroup => existingGroup._id !== group._id));
+    } catch (error) {
+      console.error('Error seeing group details:', error);
+    }
   };
 
   return (

From 4f1b3e8bf428e811dbb6a79f7563e844c0d60192 Mon Sep 17 00:00:00 2001
From: iyanfdezz <uo288231@uniovi.es>
Date: Sun, 7 Apr 2024 15:47:24 +0200
Subject: [PATCH 08/20] =?UTF-8?q?A=C3=B1adiendo=20vista=20de=20detalles=20?=
 =?UTF-8?q?de=20grupo?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 gatewayservice/gateway-service.js       | 10 ++++++
 users/userservice/user-service.js       |  9 +++++
 webapp/src/components/Nav/Nav.js        |  2 +-
 webapp/src/pages/Social/GroupDetails.js | 47 +++++++++++++++++++++++++
 webapp/src/pages/Social/UserGroups.js   |  2 +-
 5 files changed, 68 insertions(+), 2 deletions(-)
 create mode 100644 webapp/src/pages/Social/GroupDetails.js

diff --git a/gatewayservice/gateway-service.js b/gatewayservice/gateway-service.js
index a8bbb6d6..c7d7f348 100644
--- a/gatewayservice/gateway-service.js
+++ b/gatewayservice/gateway-service.js
@@ -134,6 +134,16 @@ app.get("/group/list", async (req, res) => {
   }
 });
 
+app.get('/group/:name', async (req, res) => {
+  try {
+    const groupName = req.params.name;
+    const userResponse = await axios.get(`${userServiceUrl}/group/${groupName}`);
+    res.json(userResponse.data);
+  } catch (error) {
+    res.status(400).json({ error: error.message });
+  }
+});
+
 app.get("/users/search", async (req, res) => {
   try {
     // Forward the question request to the user service
diff --git a/users/userservice/user-service.js b/users/userservice/user-service.js
index ac05569e..589b55e5 100644
--- a/users/userservice/user-service.js
+++ b/users/userservice/user-service.js
@@ -210,6 +210,15 @@ app.post('/group/add', async (req, res) => {
       const name= req.body.name;
       const username= req.body.username;
 
+      if (!name) {
+        return res.status(400).json({ error: 'Group name cannot be empty' });
+      }
+
+      const existingGroup = await Group.findOne({ name: name });
+      if (existingGroup) {
+        return res.status(400).json({ error: 'Group name already exists' });
+      }
+
       const user = await User.findOne({ username:username });
       if (!user) {
           return res.status(404).json({ error: 'User not found' });
diff --git a/webapp/src/components/Nav/Nav.js b/webapp/src/components/Nav/Nav.js
index 3677f0ee..49f30523 100644
--- a/webapp/src/components/Nav/Nav.js
+++ b/webapp/src/components/Nav/Nav.js
@@ -31,7 +31,7 @@ const Nav = () => {
         <Button variant="link" color={textColor} mr={4} p={2} _hover={{ backgroundColor: 'gray.400', color: 'white' }} onClick={() => handleNavigate("/home")}>Home</Button>
         <Popover>
           <PopoverTrigger>
-            <Button p={2} _hover={{ backgroundColor: 'gray.400', color: 'white' }} p={4} variant="link" color={textColor}>
+            <Button p={2} _hover={{ backgroundColor: 'gray.400', color: 'white' }} variant="link" color={textColor}>
               Modos de Juego
             </Button>
           </PopoverTrigger>
diff --git a/webapp/src/pages/Social/GroupDetails.js b/webapp/src/pages/Social/GroupDetails.js
new file mode 100644
index 00000000..2c107f22
--- /dev/null
+++ b/webapp/src/pages/Social/GroupDetails.js
@@ -0,0 +1,47 @@
+import React, { useState, useEffect } from 'react';
+import { useParams } from 'react-router-dom';
+import axios from 'axios';
+import { Container, Box, Text } from '@chakra-ui/react';
+import Nav from "../../components/Nav/Nav.js";
+import Footer from "../../components/Footer/Footer.js";
+
+const GroupDetails = () => {
+  const [group, setGroup] = useState(null);
+  const { groupId } = useParams();
+  const apiEndpoint = process.env.REACT_APP_API_ENDPOINT || 'http://localhost:8000';
+
+  useEffect(() => {
+    const fetchGroupDetails = async () => {
+      try {
+        const response = await axios.get(`${apiEndpoint}/group/${groupId}`);
+        setGroup(response.data.group);
+      } catch (error) {
+        console.error('Error fetching group details:', error);
+      }
+    };
+
+    fetchGroupDetails();
+  }, [groupId]);
+
+  return (
+    <>
+      <Nav/>
+      <Container maxW="md" mt="8">
+        {group ? (
+          <Box>
+            <Text fontSize="2xl" fontWeight="bold" mb="4">{group.name}</Text>
+            <Text fontSize="2xl" fontWeight="bold" mb="4">
+                Creado por {group.members.length > 0 ? group.members[0] : ''} 
+                el {new Date(group.createdAt).toLocaleDateString()}</Text>
+            <Text fontSize="lg" mb="4">Participantes: {group.members.length}</Text>
+          </Box>
+        ) : (
+          <Text>Loading...</Text>
+        )}
+      </Container>
+      <Footer/>
+    </>
+  );
+};
+
+export default GroupDetails;
diff --git a/webapp/src/pages/Social/UserGroups.js b/webapp/src/pages/Social/UserGroups.js
index 6f1ba42a..06f6bbae 100644
--- a/webapp/src/pages/Social/UserGroups.js
+++ b/webapp/src/pages/Social/UserGroups.js
@@ -55,7 +55,7 @@ const UserGroups = () => {
             {groups.map((group) => (
               <ListItem key={group._id} display="flex" justifyContent="space-between" alignItems="center" mb="2">
                 <Text>{group.name}</Text>
-                <Button colorScheme="blue" onClick={() => seeGroupDetails(group._id)}>Join</Button>
+                <Button colorScheme="blue" onClick={() => seeGroupDetails(group._id)}>Ver grupo</Button>
               </ListItem>
             ))}
           </List>

From dd7ea2614b928580778731c8e019596da4804888 Mon Sep 17 00:00:00 2001
From: iyanfdezz <uo288231@uniovi.es>
Date: Sun, 7 Apr 2024 16:05:38 +0200
Subject: [PATCH 09/20] =?UTF-8?q?A=C3=B1adiendo=20la=20ruta=20de=20detalle?=
 =?UTF-8?q?s=20del=20grupo?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 gatewayservice/gateway-service.js     |  2 +-
 webapp/src/App.js                     |  2 ++
 webapp/src/pages/Social/UserGroups.js | 17 +++--------------
 3 files changed, 6 insertions(+), 15 deletions(-)

diff --git a/gatewayservice/gateway-service.js b/gatewayservice/gateway-service.js
index c7d7f348..9411019b 100644
--- a/gatewayservice/gateway-service.js
+++ b/gatewayservice/gateway-service.js
@@ -134,7 +134,7 @@ app.get("/group/list", async (req, res) => {
   }
 });
 
-app.get('/group/:name', async (req, res) => {
+app.get('/group/:groupid', async (req, res) => {
   try {
     const groupName = req.params.name;
     const userResponse = await axios.get(`${userServiceUrl}/group/${groupName}`);
diff --git a/webapp/src/App.js b/webapp/src/App.js
index e6cd9413..515c089b 100644
--- a/webapp/src/App.js
+++ b/webapp/src/App.js
@@ -18,6 +18,7 @@ import UsersPage from "./pages/Social/UsersPage.js";
 import FriendList from "./pages/Social/FriendsList.js";
 import Groups from "./pages/Social/Groups.js";
 import UserGroups from "./pages/Social/UserGroups.js";
+import GroupDetails from "./pages/Social/GroupDetails.js";
 
 function App() {
   useEffect(() => {
@@ -43,6 +44,7 @@ function App() {
           <Route path="/social/amigos" element={<FriendList />} />
           <Route path="/social/grupos" element={<Groups />} />
           <Route path="/social/misgrupos" element={<UserGroups />} />
+          <Route path="/social/grupo/:groupid" element={<GroupDetails />} />
           <Route path="/perfil" element={<Perfil />} />
           <Route path="/config" element={<Config />} />
         </Route>
diff --git a/webapp/src/pages/Social/UserGroups.js b/webapp/src/pages/Social/UserGroups.js
index 06f6bbae..d6d868e6 100644
--- a/webapp/src/pages/Social/UserGroups.js
+++ b/webapp/src/pages/Social/UserGroups.js
@@ -3,6 +3,7 @@ import axios from 'axios';
 import { Container, Box, Text, List, ListItem, Button, Input, Alert } from '@chakra-ui/react';
 import Nav from "../../components/Nav/Nav.js";
 import Footer from "../../components/Footer/Footer.js";
+import { useNavigate } from "react-router-dom";
 
 const UserGroups = () => {
   const [groups, setGroups] = useState([]);
@@ -11,6 +12,7 @@ const UserGroups = () => {
   const [openAlert, setOpenAlert] = useState(false);
   const [alertMessage, setAlertMessage] = useState('');
   const username = localStorage.getItem('username');
+  const navigate = useNavigate();
 
   const apiEndpoint = process.env.REACT_APP_API_ENDPOINT || 'http://localhost:8000';
 
@@ -29,20 +31,7 @@ const UserGroups = () => {
   };
 
   const seeGroupDetails = async (groupId) => {
-    try {
-      const response = await fetch(`${apiEndpoint}/group/${groupId}`);
-      const data = await response.json();
-  
-      if (!response.ok) {
-        throw new Error('Failed to see group details');
-      }
-  
-      const { group } = data;
-  
-      setGroups(prevGroups => prevGroups.filter(existingGroup => existingGroup._id !== group._id));
-    } catch (error) {
-      console.error('Error seeing group details:', error);
-    }
+    navigate(`/group/${groupId}`);
   };
 
   return (

From ea5c5f151a1a1498691718f1eec6f41c598f2b81 Mon Sep 17 00:00:00 2001
From: iyanfdezz <uo288231@uniovi.es>
Date: Sun, 7 Apr 2024 16:07:52 +0200
Subject: [PATCH 10/20] =?UTF-8?q?A=C3=B1adida=20lista=20de=20participantes?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 webapp/src/pages/Social/GroupDetails.js | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/webapp/src/pages/Social/GroupDetails.js b/webapp/src/pages/Social/GroupDetails.js
index 2c107f22..1e8b2e45 100644
--- a/webapp/src/pages/Social/GroupDetails.js
+++ b/webapp/src/pages/Social/GroupDetails.js
@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { useParams } from 'react-router-dom';
 import axios from 'axios';
-import { Container, Box, Text } from '@chakra-ui/react';
+import { Container, Box, Text, Link } from '@chakra-ui/react';
 import Nav from "../../components/Nav/Nav.js";
 import Footer from "../../components/Footer/Footer.js";
 
@@ -31,9 +31,18 @@ const GroupDetails = () => {
           <Box>
             <Text fontSize="2xl" fontWeight="bold" mb="4">{group.name}</Text>
             <Text fontSize="2xl" fontWeight="bold" mb="4">
-                Creado por {group.members.length > 0 ? group.members[0] : ''} 
-                el {new Date(group.createdAt).toLocaleDateString()}</Text>
+              Creado por {group.members.length > 0 ? group.members[0] : ''} 
+              el {new Date(group.createdAt).toLocaleDateString()}
+            </Text>
             <Text fontSize="lg" mb="4">Participantes: {group.members.length}</Text>
+            <Text fontSize="lg" mb="2">Lista de participantes:</Text>
+            <ul>
+              {group.members.map((member, index) => (
+                <li key={index}>
+                  {member}
+                </li>
+              ))}
+            </ul>
           </Box>
         ) : (
           <Text>Loading...</Text>
@@ -45,3 +54,4 @@ const GroupDetails = () => {
 };
 
 export default GroupDetails;
+

From dbf56b0f4519db2a27bdba8861002b4a48d9e1bf Mon Sep 17 00:00:00 2001
From: iyanfdezz <uo288231@uniovi.es>
Date: Sun, 7 Apr 2024 16:25:52 +0200
Subject: [PATCH 11/20] No va el groupDetails

---
 users/userservice/user-service.js     | 2 +-
 webapp/src/pages/Social/UserGroups.js | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/users/userservice/user-service.js b/users/userservice/user-service.js
index 589b55e5..68782881 100644
--- a/users/userservice/user-service.js
+++ b/users/userservice/user-service.js
@@ -189,7 +189,7 @@ app.get('/group/list', async (req, res) => {
 });
 
 // Obtener un grupo por su nombre
-app.get('/group/:name', async (req, res) => {
+app.get('/group/:groupid', async (req, res) => {
   try {
       const groupName = req.params.name;
       const group = await Group.findOne({ name: groupName });
diff --git a/webapp/src/pages/Social/UserGroups.js b/webapp/src/pages/Social/UserGroups.js
index d6d868e6..53e28741 100644
--- a/webapp/src/pages/Social/UserGroups.js
+++ b/webapp/src/pages/Social/UserGroups.js
@@ -30,8 +30,8 @@ const UserGroups = () => {
     }
   };
 
-  const seeGroupDetails = async (groupId) => {
-    navigate(`/group/${groupId}`);
+  const seeGroupDetails = (groupId) => {
+    navigate(`/social/grupo/${groupId}`);
   };
 
   return (

From 378b45602d6605b67c52eb3540660a483ffab6c9 Mon Sep 17 00:00:00 2001
From: iyanfdezz <uo288231@uniovi.es>
Date: Sun, 7 Apr 2024 17:01:03 +0200
Subject: [PATCH 12/20] Usando group.name en vez de el id

---
 users/userservice/user-service.js       | 5 +++--
 webapp/src/pages/Social/GroupDetails.js | 9 ++++-----
 webapp/src/pages/Social/UserGroups.js   | 7 ++++---
 3 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/users/userservice/user-service.js b/users/userservice/user-service.js
index 68782881..1c06b813 100644
--- a/users/userservice/user-service.js
+++ b/users/userservice/user-service.js
@@ -189,9 +189,9 @@ app.get('/group/list', async (req, res) => {
 });
 
 // Obtener un grupo por su nombre
-app.get('/group/:groupid', async (req, res) => {
+app.get('/group/:groupName', async (req, res) => {
   try {
-      const groupName = req.params.name;
+      const groupName = req.params.groupName;
       const group = await Group.findOne({ name: groupName });
 
       if (!group) {
@@ -204,6 +204,7 @@ app.get('/group/:groupid', async (req, res) => {
   }
 });
 
+
 // Crear un nuevo grupo
 app.post('/group/add', async (req, res) => {
   try {
diff --git a/webapp/src/pages/Social/GroupDetails.js b/webapp/src/pages/Social/GroupDetails.js
index 1e8b2e45..b75b39ed 100644
--- a/webapp/src/pages/Social/GroupDetails.js
+++ b/webapp/src/pages/Social/GroupDetails.js
@@ -1,19 +1,19 @@
 import React, { useState, useEffect } from 'react';
 import { useParams } from 'react-router-dom';
 import axios from 'axios';
-import { Container, Box, Text, Link } from '@chakra-ui/react';
+import { Container, Box, Text } from '@chakra-ui/react';
 import Nav from "../../components/Nav/Nav.js";
 import Footer from "../../components/Footer/Footer.js";
 
 const GroupDetails = () => {
   const [group, setGroup] = useState(null);
-  const { groupId } = useParams();
+  const { groupName } = useParams();
   const apiEndpoint = process.env.REACT_APP_API_ENDPOINT || 'http://localhost:8000';
 
   useEffect(() => {
     const fetchGroupDetails = async () => {
       try {
-        const response = await axios.get(`${apiEndpoint}/group/${groupId}`);
+        const response = await axios.get(`${apiEndpoint}/group/${encodeURIComponent(groupName)}`); // Cambiar groupId a groupName
         setGroup(response.data.group);
       } catch (error) {
         console.error('Error fetching group details:', error);
@@ -21,7 +21,7 @@ const GroupDetails = () => {
     };
 
     fetchGroupDetails();
-  }, [groupId]);
+  }, [groupName]); // Cambiar groupId a groupName
 
   return (
     <>
@@ -54,4 +54,3 @@ const GroupDetails = () => {
 };
 
 export default GroupDetails;
-
diff --git a/webapp/src/pages/Social/UserGroups.js b/webapp/src/pages/Social/UserGroups.js
index 53e28741..8b156a75 100644
--- a/webapp/src/pages/Social/UserGroups.js
+++ b/webapp/src/pages/Social/UserGroups.js
@@ -30,9 +30,10 @@ const UserGroups = () => {
     }
   };
 
-  const seeGroupDetails = (groupId) => {
-    navigate(`/social/grupo/${groupId}`);
+  const seeGroupDetails = (groupName) => {
+    navigate(`/social/grupo/${encodeURIComponent(groupName)}`);
   };
+  
 
   return (
     <>
@@ -44,7 +45,7 @@ const UserGroups = () => {
             {groups.map((group) => (
               <ListItem key={group._id} display="flex" justifyContent="space-between" alignItems="center" mb="2">
                 <Text>{group.name}</Text>
-                <Button colorScheme="blue" onClick={() => seeGroupDetails(group._id)}>Ver grupo</Button>
+                <Button colorScheme="blue" onClick={() => seeGroupDetails(group.name)}>Ver grupo</Button>
               </ListItem>
             ))}
           </List>

From e1f1519cf33e6e25bc827a5274605fd35f33ac57 Mon Sep 17 00:00:00 2001
From: iyanfdezz <uo288231@uniovi.es>
Date: Sun, 7 Apr 2024 17:23:11 +0200
Subject: [PATCH 13/20] Ya funciona

---
 gatewayservice/gateway-service.js | 4 ++--
 webapp/src/App.js                 | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/gatewayservice/gateway-service.js b/gatewayservice/gateway-service.js
index 9411019b..f929312f 100644
--- a/gatewayservice/gateway-service.js
+++ b/gatewayservice/gateway-service.js
@@ -134,9 +134,9 @@ app.get("/group/list", async (req, res) => {
   }
 });
 
-app.get('/group/:groupid', async (req, res) => {
+app.get('/group/:groupName', async (req, res) => {
   try {
-    const groupName = req.params.name;
+    const groupName = req.params.groupName;
     const userResponse = await axios.get(`${userServiceUrl}/group/${groupName}`);
     res.json(userResponse.data);
   } catch (error) {
diff --git a/webapp/src/App.js b/webapp/src/App.js
index 515c089b..e1b3b45d 100644
--- a/webapp/src/App.js
+++ b/webapp/src/App.js
@@ -44,7 +44,7 @@ function App() {
           <Route path="/social/amigos" element={<FriendList />} />
           <Route path="/social/grupos" element={<Groups />} />
           <Route path="/social/misgrupos" element={<UserGroups />} />
-          <Route path="/social/grupo/:groupid" element={<GroupDetails />} />
+          <Route path="/social/grupo/:groupName" element={<GroupDetails />} />
           <Route path="/perfil" element={<Perfil />} />
           <Route path="/config" element={<Config />} />
         </Route>

From 3d2dce61e41925eef566213b97d10148ca605948 Mon Sep 17 00:00:00 2001
From: iyanfdezz <uo288231@uniovi.es>
Date: Sun, 7 Apr 2024 17:25:55 +0200
Subject: [PATCH 14/20] Mejorando la UI

---
 webapp/src/pages/Social/GroupDetails.js | 33 ++++++++++++++-----------
 1 file changed, 19 insertions(+), 14 deletions(-)

diff --git a/webapp/src/pages/Social/GroupDetails.js b/webapp/src/pages/Social/GroupDetails.js
index b75b39ed..429c408b 100644
--- a/webapp/src/pages/Social/GroupDetails.js
+++ b/webapp/src/pages/Social/GroupDetails.js
@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { useParams } from 'react-router-dom';
 import axios from 'axios';
-import { Container, Box, Text } from '@chakra-ui/react';
+import { Container, Box, Text, Heading, List, ListItem } from '@chakra-ui/react';
 import Nav from "../../components/Nav/Nav.js";
 import Footer from "../../components/Footer/Footer.js";
 
@@ -13,7 +13,7 @@ const GroupDetails = () => {
   useEffect(() => {
     const fetchGroupDetails = async () => {
       try {
-        const response = await axios.get(`${apiEndpoint}/group/${encodeURIComponent(groupName)}`); // Cambiar groupId a groupName
+        const response = await axios.get(`${apiEndpoint}/group/${encodeURIComponent(groupName)}`);
         setGroup(response.data.group);
       } catch (error) {
         console.error('Error fetching group details:', error);
@@ -21,28 +21,32 @@ const GroupDetails = () => {
     };
 
     fetchGroupDetails();
-  }, [groupName]); // Cambiar groupId a groupName
+  }, [groupName]);
 
   return (
     <>
       <Nav/>
       <Container maxW="md" mt="8">
+        <Heading as="h1" mb="4">Detalles del grupo</Heading>
         {group ? (
           <Box>
-            <Text fontSize="2xl" fontWeight="bold" mb="4">{group.name}</Text>
-            <Text fontSize="2xl" fontWeight="bold" mb="4">
-              Creado por {group.members.length > 0 ? group.members[0] : ''} 
-              el {new Date(group.createdAt).toLocaleDateString()}
-            </Text>
-            <Text fontSize="lg" mb="4">Participantes: {group.members.length}</Text>
-            <Text fontSize="lg" mb="2">Lista de participantes:</Text>
-            <ul>
+            <Text fontSize="lg" fontWeight="bold" mb="2">Nombre:</Text>
+            <Text fontSize="xl" mb="4">{group.name}</Text>
+
+            <Text fontSize="lg" fontWeight="bold" mb="2">Creado por:</Text>
+            <Text fontSize="xl" mb="4">{group.members.length > 0 ? group.members[0] : ''}</Text>
+
+            <Text fontSize="lg" fontWeight="bold" mb="2">Fecha de creación:</Text>
+            <Text fontSize="xl" mb="4">{new Date(group.createdAt).toLocaleDateString()}</Text>
+
+            <Text fontSize="lg" fontWeight="bold" mb="2">Participantes ({group.members.length}):</Text>
+            <List>
               {group.members.map((member, index) => (
-                <li key={index}>
+                <ListItem key={index}>
                   {member}
-                </li>
+                </ListItem>
               ))}
-            </ul>
+            </List>
           </Box>
         ) : (
           <Text>Loading...</Text>
@@ -54,3 +58,4 @@ const GroupDetails = () => {
 };
 
 export default GroupDetails;
+

From 26fb39a879dfeaf4bfb8cb6293868ef5b289b595 Mon Sep 17 00:00:00 2001
From: iyanfdezz <uo288231@uniovi.es>
Date: Sun, 7 Apr 2024 17:39:05 +0200
Subject: [PATCH 15/20] Ahora se redirige al perfil del miembro y se muestra su
 avatar

---
 webapp/src/pages/Social/GroupDetails.js | 23 ++++++++++++++---------
 1 file changed, 14 insertions(+), 9 deletions(-)

diff --git a/webapp/src/pages/Social/GroupDetails.js b/webapp/src/pages/Social/GroupDetails.js
index 429c408b..92213460 100644
--- a/webapp/src/pages/Social/GroupDetails.js
+++ b/webapp/src/pages/Social/GroupDetails.js
@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
-import { useParams } from 'react-router-dom';
+import { useParams, useNavigate } from 'react-router-dom';
 import axios from 'axios';
-import { Container, Box, Text, Heading, List, ListItem } from '@chakra-ui/react';
+import { Container, Box, Text, Heading, List, ListItem, Avatar } from '@chakra-ui/react';
 import Nav from "../../components/Nav/Nav.js";
 import Footer from "../../components/Footer/Footer.js";
 
@@ -9,6 +9,7 @@ const GroupDetails = () => {
   const [group, setGroup] = useState(null);
   const { groupName } = useParams();
   const apiEndpoint = process.env.REACT_APP_API_ENDPOINT || 'http://localhost:8000';
+  const navigate = useNavigate();
 
   useEffect(() => {
     const fetchGroupDetails = async () => {
@@ -23,6 +24,10 @@ const GroupDetails = () => {
     fetchGroupDetails();
   }, [groupName]);
 
+  const redirectToProfile = (username) => {
+    navigate(`/perfil?user=${username}`);
+  };
+
   return (
     <>
       <Nav/>
@@ -33,17 +38,17 @@ const GroupDetails = () => {
             <Text fontSize="lg" fontWeight="bold" mb="2">Nombre:</Text>
             <Text fontSize="xl" mb="4">{group.name}</Text>
 
-            <Text fontSize="lg" fontWeight="bold" mb="2">Creado por:</Text>
-            <Text fontSize="xl" mb="4">{group.members.length > 0 ? group.members[0] : ''}</Text>
-
-            <Text fontSize="lg" fontWeight="bold" mb="2">Fecha de creación:</Text>
-            <Text fontSize="xl" mb="4">{new Date(group.createdAt).toLocaleDateString()}</Text>
+            <Text fontSize="lg" fontWeight="bold" mb="4">
+              Creado por {group.members.length > 0 ? group.members[0] : ''} el {new Date(group.createdAt).toLocaleDateString()}
+            </Text>
 
-            <Text fontSize="lg" fontWeight="bold" mb="2">Participantes ({group.members.length}):</Text>
+            <Text fontSize="lg" fontWeight="bold" mb="2">Participantes ({group.members.length}) :</Text>
             <List>
               {group.members.map((member, index) => (
                 <ListItem key={index}>
-                  {member}
+                  <Avatar size="sm" name={member} mr={2} />
+                  {member}{" "}
+                  <Link color="blue.500" onClick={() => redirectToProfile(member)}>Ver perfil</Link>
                 </ListItem>
               ))}
             </List>

From e90162929deb9caf59130551f6445ee93ae227c4 Mon Sep 17 00:00:00 2001
From: iyanfdezz <uo288231@uniovi.es>
Date: Sun, 7 Apr 2024 18:02:26 +0200
Subject: [PATCH 16/20] Formateo

---
 webapp/src/pages/Social/GroupDetails.js | 40 +++++++++++++++----------
 1 file changed, 25 insertions(+), 15 deletions(-)

diff --git a/webapp/src/pages/Social/GroupDetails.js b/webapp/src/pages/Social/GroupDetails.js
index 92213460..18ea20f7 100644
--- a/webapp/src/pages/Social/GroupDetails.js
+++ b/webapp/src/pages/Social/GroupDetails.js
@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { useParams, useNavigate } from 'react-router-dom';
 import axios from 'axios';
-import { Container, Box, Text, Heading, List, ListItem, Avatar } from '@chakra-ui/react';
+import { Container, Box, Text, Heading, Table, Thead, Tbody, Tr, Th, Td, Avatar, Link } from '@chakra-ui/react';
 import Nav from "../../components/Nav/Nav.js";
 import Footer from "../../components/Footer/Footer.js";
 
@@ -32,26 +32,36 @@ const GroupDetails = () => {
     <>
       <Nav/>
       <Container maxW="md" mt="8">
-        <Heading as="h1" mb="4">Detalles del grupo</Heading>
+        <Heading as="h1" mb="4">Detalles del grupo: {group.name}</Heading>
         {group ? (
           <Box>
-            <Text fontSize="lg" fontWeight="bold" mb="2">Nombre:</Text>
-            <Text fontSize="xl" mb="4">{group.name}</Text>
-
             <Text fontSize="lg" fontWeight="bold" mb="4">
               Creado por {group.members.length > 0 ? group.members[0] : ''} el {new Date(group.createdAt).toLocaleDateString()}
             </Text>
-
+  
             <Text fontSize="lg" fontWeight="bold" mb="2">Participantes ({group.members.length}) :</Text>
-            <List>
-              {group.members.map((member, index) => (
-                <ListItem key={index}>
-                  <Avatar size="sm" name={member} mr={2} />
-                  {member}{" "}
-                  <Link color="blue.500" onClick={() => redirectToProfile(member)}>Ver perfil</Link>
-                </ListItem>
-              ))}
-            </List>
+            <Table variant="striped" colorScheme="blue">
+              <Thead>
+                <Tr>
+                  <Th>Avatar</Th>
+                  <Th>Nombre</Th>
+                  <Th>Ver perfil</Th>
+                </Tr>
+              </Thead>
+              <Tbody>
+                {group.members.map((member, index) => (
+                  <Tr key={index}>
+                    <Td>
+                      <Avatar size="sm" name={member} />
+                    </Td>
+                    <Td>{member}</Td>
+                    <Td>
+                      <Link color="blue.500" onClick={() => redirectToProfile(member)}>Ver perfil</Link>
+                    </Td>
+                  </Tr>
+                ))}
+              </Tbody>
+            </Table>
           </Box>
         ) : (
           <Text>Loading...</Text>

From 5a05994e2a2a7627658b531fcf235d6b122b7af2 Mon Sep 17 00:00:00 2001
From: iyanfdezz <uo288231@uniovi.es>
Date: Sun, 7 Apr 2024 18:11:44 +0200
Subject: [PATCH 17/20] Funciona todo

---
 webapp/src/pages/Social/GroupDetails.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/webapp/src/pages/Social/GroupDetails.js b/webapp/src/pages/Social/GroupDetails.js
index 18ea20f7..dc4b6719 100644
--- a/webapp/src/pages/Social/GroupDetails.js
+++ b/webapp/src/pages/Social/GroupDetails.js
@@ -32,7 +32,7 @@ const GroupDetails = () => {
     <>
       <Nav/>
       <Container maxW="md" mt="8">
-        <Heading as="h1" mb="4">Detalles del grupo: {group.name}</Heading>
+        <Heading as="h1" mb="4">Detalles del grupo: {groupName}</Heading>
         {group ? (
           <Box>
             <Text fontSize="lg" fontWeight="bold" mb="4">

From 6f097be27f5388c6c8ebe6d72fd0d97ec2b1db19 Mon Sep 17 00:00:00 2001
From: iyanfdezz <uo288231@uniovi.es>
Date: Thu, 11 Apr 2024 17:03:56 +0200
Subject: [PATCH 18/20] Modificando la UI de Grupos

---
 users/userservice/user-service.js       |  2 +-
 webapp/src/pages/Social/GroupDetails.js |  2 +-
 webapp/src/pages/Social/Groups.js       | 64 ++++++++++++++-----------
 webapp/src/pages/Social/UserGroups.js   | 38 ++++++++++-----
 4 files changed, 66 insertions(+), 40 deletions(-)

diff --git a/users/userservice/user-service.js b/users/userservice/user-service.js
index 52e6c40c..531ec5da 100644
--- a/users/userservice/user-service.js
+++ b/users/userservice/user-service.js
@@ -4,7 +4,7 @@ const mongoose = require("mongoose");
 const bcrypt = require("bcrypt");
 const bodyParser = require("body-parser");
 const jwt = require("jsonwebtoken");
-const { User } = require("./user-model");
+const { User, Group } = require("./user-model");
 
 const app = express();
 const port = 8001;
diff --git a/webapp/src/pages/Social/GroupDetails.js b/webapp/src/pages/Social/GroupDetails.js
index dc4b6719..324d7a43 100644
--- a/webapp/src/pages/Social/GroupDetails.js
+++ b/webapp/src/pages/Social/GroupDetails.js
@@ -40,7 +40,7 @@ const GroupDetails = () => {
             </Text>
   
             <Text fontSize="lg" fontWeight="bold" mb="2">Participantes ({group.members.length}) :</Text>
-            <Table variant="striped" colorScheme="blue">
+            <Table variant="striped">
               <Thead>
                 <Tr>
                   <Th>Avatar</Th>
diff --git a/webapp/src/pages/Social/Groups.js b/webapp/src/pages/Social/Groups.js
index 9470776d..4ab4e9ec 100644
--- a/webapp/src/pages/Social/Groups.js
+++ b/webapp/src/pages/Social/Groups.js
@@ -63,51 +63,61 @@ const Groups = () => {
       console.error('Error joining group:', error);
     });
   };
-  
-
-  const handleCloseAlert = () => {
-    setOpenAlert(false);
-  };
 
   return (
     <>
-      <Nav/>
+      <Nav />
       <Container maxW="xs" mt="8">
         <Box>
           <Text fontSize="2xl" fontWeight="bold" mb="4">Crea un grupo</Text>
-          <Input
-            name="name"
-            mb="4"
-            placeholder="Name"
-            value={name}
-            onChange={(e) => setName(e.target.value)}
-          />
-          <Button colorScheme="blue" onClick={addGroup} mb="4">Crear</Button>
-          <Alert status="success" variant="subtle" mt="2" isOpen={openAlert} onClose={handleCloseAlert}>
-            {alertMessage}
-          </Alert>
+          <InputGroup mb="4">
+            <Input
+              name="name"
+              placeholder="Nombre"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+            />
+            <InputRightElement>
+              <Button colorScheme="blue" onClick={addGroup}>Crear</Button>
+            </InputRightElement>
+          </InputGroup>
           {error && (
             <Alert status="error" variant="subtle" mt="2">
               {`Error: ${error}`}
             </Alert>
           )}
         </Box>
-
+  
         <Box mt="8">
           <Text fontSize="3xl" fontWeight="bold" mb="4">Grupos a los que puedes unirte</Text>
-          <List>
-            {groups.map((group) => (
-              <ListItem key={group._id} display="flex" justifyContent="space-between" alignItems="center" mb="2">
-                <Text>{group.name}</Text>
-                <Button colorScheme="blue" onClick={() => handleJoinGroup(group._id)}>Join</Button>
-              </ListItem>
-            ))}
-          </List>
+          <Table variant="simple">
+            <Thead>
+              <Tr>
+                <Th>Nombre del grupo</Th>
+                <Th>Fecha de creación</Th>
+                <Th>Creador</Th>
+                <Th>Unirse al grupo</Th>
+              </Tr>
+            </Thead>
+            <Tbody>
+              {groups.map((group) => (
+                <Tr key={group._id}>
+                  <Td>{group.name}</Td>
+                  <Td>{group.createdAt}</Td>
+                  <Td>{group.members.length > 0 ? group.members[0] : ''}</Td>
+                  <Td>
+                    <Button colorScheme="blue" onClick={() => handleJoinGroup(group._id)}>Unirme</Button>
+                  </Td>
+                </Tr>
+              ))}
+            </Tbody>
+          </Table>
         </Box>
       </Container>
-      <Footer/>
+      <Footer />
     </>
   );
+  
 };
 
 export default Groups;
diff --git a/webapp/src/pages/Social/UserGroups.js b/webapp/src/pages/Social/UserGroups.js
index 8b156a75..e045f150 100644
--- a/webapp/src/pages/Social/UserGroups.js
+++ b/webapp/src/pages/Social/UserGroups.js
@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import axios from 'axios';
-import { Container, Box, Text, List, ListItem, Button, Input, Alert } from '@chakra-ui/react';
+import { Box, Container, Text, Button, Table, Thead, Tbody, Tr, Th, Td } from '@chakra-ui/react';
 import Nav from "../../components/Nav/Nav.js";
 import Footer from "../../components/Footer/Footer.js";
 import { useNavigate } from "react-router-dom";
@@ -37,23 +37,39 @@ const UserGroups = () => {
 
   return (
     <>
-      <Nav/>
+      <Nav />
       <Container maxW="xs" mt="8">
         <Box mt="8">
           <Text fontSize="3xl" fontWeight="bold" mb="4">Tus grupos</Text>
-          <List>
-            {groups.map((group) => (
-              <ListItem key={group._id} display="flex" justifyContent="space-between" alignItems="center" mb="2">
-                <Text>{group.name}</Text>
-                <Button colorScheme="blue" onClick={() => seeGroupDetails(group.name)}>Ver grupo</Button>
-              </ListItem>
-            ))}
-          </List>
+          <Table variant="simple">
+            <Thead>
+              <Tr>
+                <Th>Nombre del grupo</Th>
+                <Th>Creador</Th>
+                <Th>Fecha de creación</Th>
+                <Th>Ver grupo</Th>
+              </Tr>
+            </Thead>
+            <Tbody>
+              {groups.map((group) => (
+                <Tr key={group._id}>
+                  <Td>{group.name}</Td>
+                  <Td>{group.createdAt}</Td>
+                  <Td>{group.members.length > 0 ? group.members[0] : ''}</Td>
+                  <Td>
+                    <Button colorScheme="blue" onClick={() => seeGroupDetails(group.name)}>Ver grupo</Button>
+                  </Td>
+                </Tr>
+              ))}
+            </Tbody>
+          </Table>
         </Box>
       </Container>
-      <Footer/>
+      <Footer />
     </>
   );
+  
+  
 };
 
 export default UserGroups;

From 5d0e7d4aa13e422d1c2eaccd9f81fe989c5d6486 Mon Sep 17 00:00:00 2001
From: iyanfdezz <uo288231@uniovi.es>
Date: Thu, 11 Apr 2024 17:29:05 +0200
Subject: [PATCH 19/20] Ajustando la UI

---
 webapp/src/pages/Social/GroupDetails.js |  4 ++--
 webapp/src/pages/Social/Groups.js       | 32 ++++++++++++-------------
 webapp/src/pages/Social/UserGroups.js   |  9 +++----
 3 files changed, 23 insertions(+), 22 deletions(-)

diff --git a/webapp/src/pages/Social/GroupDetails.js b/webapp/src/pages/Social/GroupDetails.js
index 324d7a43..cba5e34b 100644
--- a/webapp/src/pages/Social/GroupDetails.js
+++ b/webapp/src/pages/Social/GroupDetails.js
@@ -31,8 +31,8 @@ const GroupDetails = () => {
   return (
     <>
       <Nav/>
-      <Container maxW="md" mt="8">
-        <Heading as="h1" mb="4">Detalles del grupo: {groupName}</Heading>
+      <Container maxW="md" mt="5">
+        <Heading as="h1" mb="5">Detalles del grupo: {groupName}</Heading>
         {group ? (
           <Box>
             <Text fontSize="lg" fontWeight="bold" mb="4">
diff --git a/webapp/src/pages/Social/Groups.js b/webapp/src/pages/Social/Groups.js
index 4ab4e9ec..fec56044 100644
--- a/webapp/src/pages/Social/Groups.js
+++ b/webapp/src/pages/Social/Groups.js
@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import axios from 'axios';
-import { Container, Box, Text, List, ListItem, Button, Input, Alert } from '@chakra-ui/react';
+import { Box, Container, Text, Button, Input, InputGroup, InputRightElement, Alert, Table, Thead, Tbody, Tr, Th, Td } from '@chakra-ui/react';
 import Nav from "../../components/Nav/Nav.js";
 import Footer from "../../components/Footer/Footer.js";
 
@@ -67,20 +67,20 @@ const Groups = () => {
   return (
     <>
       <Nav />
-      <Container maxW="xs" mt="8">
-        <Box>
+      <Container maxW="md" mt="5">
+        <Box mb="5">
           <Text fontSize="2xl" fontWeight="bold" mb="4">Crea un grupo</Text>
-          <InputGroup mb="4">
-            <Input
-              name="name"
-              placeholder="Nombre"
-              value={name}
-              onChange={(e) => setName(e.target.value)}
-            />
-            <InputRightElement>
-              <Button colorScheme="blue" onClick={addGroup}>Crear</Button>
-            </InputRightElement>
-          </InputGroup>
+          <Box display="flex" alignItems="center">
+            <InputGroup flex="1" mr="4">
+              <Input
+                name="name"
+                placeholder="Nombre"
+                value={name}
+                onChange={(e) => setName(e.target.value)}
+              />
+            </InputGroup>
+            <Button colorScheme="blue" onClick={addGroup}>Crear</Button>
+          </Box>
           {error && (
             <Alert status="error" variant="subtle" mt="2">
               {`Error: ${error}`}
@@ -88,7 +88,7 @@ const Groups = () => {
           )}
         </Box>
   
-        <Box mt="8">
+        <Box mt="4">
           <Text fontSize="3xl" fontWeight="bold" mb="4">Grupos a los que puedes unirte</Text>
           <Table variant="simple">
             <Thead>
@@ -103,7 +103,7 @@ const Groups = () => {
               {groups.map((group) => (
                 <Tr key={group._id}>
                   <Td>{group.name}</Td>
-                  <Td>{group.createdAt}</Td>
+                  <Td>{new Date(group.createdAt).toLocaleDateString()}</Td>
                   <Td>{group.members.length > 0 ? group.members[0] : ''}</Td>
                   <Td>
                     <Button colorScheme="blue" onClick={() => handleJoinGroup(group._id)}>Unirme</Button>
diff --git a/webapp/src/pages/Social/UserGroups.js b/webapp/src/pages/Social/UserGroups.js
index e045f150..e23e43a3 100644
--- a/webapp/src/pages/Social/UserGroups.js
+++ b/webapp/src/pages/Social/UserGroups.js
@@ -38,10 +38,10 @@ const UserGroups = () => {
   return (
     <>
       <Nav />
-      <Container maxW="xs" mt="8">
-        <Box mt="8">
+      <Container maxW="xs" mt="5" textAlign="center"> {/* Mover todo hacia arriba */}
+        <Box mt="5">
           <Text fontSize="3xl" fontWeight="bold" mb="4">Tus grupos</Text>
-          <Table variant="simple">
+          <Table variant="simple" mx="auto"> {/* Centrar la tabla */}
             <Thead>
               <Tr>
                 <Th>Nombre del grupo</Th>
@@ -54,8 +54,8 @@ const UserGroups = () => {
               {groups.map((group) => (
                 <Tr key={group._id}>
                   <Td>{group.name}</Td>
-                  <Td>{group.createdAt}</Td>
                   <Td>{group.members.length > 0 ? group.members[0] : ''}</Td>
+                  <Td>{new Date(group.createdAt).toLocaleDateString()}</Td>
                   <Td>
                     <Button colorScheme="blue" onClick={() => seeGroupDetails(group.name)}>Ver grupo</Button>
                   </Td>
@@ -70,6 +70,7 @@ const UserGroups = () => {
   );
   
   
+  
 };
 
 export default UserGroups;

From 6a0a028339cc4cce0356e73c182d90911d307e47 Mon Sep 17 00:00:00 2001
From: iyanfdezz <uo288231@uniovi.es>
Date: Thu, 11 Apr 2024 18:01:57 +0200
Subject: [PATCH 20/20] Ya funcionan los grupos

---
 webapp/src/pages/Social/GroupDetails.test.js | 0
 webapp/src/pages/Social/Groups.test.js       | 0
 webapp/src/pages/Social/UserGroups.js        | 4 ++--
 webapp/src/pages/Social/UserGroups.test.js   | 0
 4 files changed, 2 insertions(+), 2 deletions(-)
 create mode 100644 webapp/src/pages/Social/GroupDetails.test.js
 create mode 100644 webapp/src/pages/Social/Groups.test.js
 create mode 100644 webapp/src/pages/Social/UserGroups.test.js

diff --git a/webapp/src/pages/Social/GroupDetails.test.js b/webapp/src/pages/Social/GroupDetails.test.js
new file mode 100644
index 00000000..e69de29b
diff --git a/webapp/src/pages/Social/Groups.test.js b/webapp/src/pages/Social/Groups.test.js
new file mode 100644
index 00000000..e69de29b
diff --git a/webapp/src/pages/Social/UserGroups.js b/webapp/src/pages/Social/UserGroups.js
index e23e43a3..e20457b4 100644
--- a/webapp/src/pages/Social/UserGroups.js
+++ b/webapp/src/pages/Social/UserGroups.js
@@ -38,10 +38,10 @@ const UserGroups = () => {
   return (
     <>
       <Nav />
-      <Container maxW="xs" mt="5" textAlign="center"> {/* Mover todo hacia arriba */}
+      <Container maxW="xs" mt="5" textAlign="center">
         <Box mt="5">
           <Text fontSize="3xl" fontWeight="bold" mb="4">Tus grupos</Text>
-          <Table variant="simple" mx="auto"> {/* Centrar la tabla */}
+          <Table variant="simple" mx="auto">
             <Thead>
               <Tr>
                 <Th>Nombre del grupo</Th>
diff --git a/webapp/src/pages/Social/UserGroups.test.js b/webapp/src/pages/Social/UserGroups.test.js
new file mode 100644
index 00000000..e69de29b