release-2.1.0

client/src/App.jsx

@@ -1,5 +1,5 @@
-import { ToastContainer } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
+import { ToastContainer, Slide } from 'react-toastify';
 
 import Router from "./Router";
 import Loading from './components/Loading';
@@ -17,7 +17,13 @@ export default function App() {
         <Loading />
         <Router />
       </LoadingProvider>
-      <ToastContainer theme="colored" draggable={false} hideProgressBar={true} position="bottom-right" />
+      <ToastContainer
+        theme="colored"
+        draggable={false}
+        transition={Slide}
+        hideProgressBar={true}
+        position="bottom-right"
+      />
     </ErrorBoundary>
   )
 }

client/src/Router.jsx

@@ -3,12 +3,13 @@ import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
 
 import Home from './pages/home/Home';
 import Login from './pages/login/Login';
+import Retro from './pages/retro/Retro';
+import Group from './pages/groups/Group';
 import RetroBoard from './pages/retro/RetroBoard';
 import ServerUnavl from './pages/503/ServerUnavl';
 import PageNotFound from './pages/404/PageNotFound';
 import { AuthProvider } from './contexts/AuthContext';
 import PrivateRoutes from './middleware/PrivateRoutes';
-import Retro from './pages/retro/Retro';
 
 
 // Router component to render the application routes
@@ -34,6 +35,7 @@ export default function Router() {
                     <Route path="/" element={<Navigate to="/login" />} />
                     <Route path="/" element={<PrivateRoutes />}>
                         <Route path='/home' element={<Home />} />
+                        <Route path='/group' element={<Group />} />
                         <Route path="/retro" element={<Retro />} />
                         <Route path='/retro/:id' element={<RetroBoard />} />
                     </Route>

client/src/hooks/useGetRetroData.js

@@ -0,0 +1,23 @@
+import { useAuth } from "./useAuth";
+import { useLoading } from "./useLoading";
+
+export const useGetRetroData = () => {
+    const { http } = useAuth();
+    const { setLoading } = useLoading();
+
+    const getRetroData = async () => {
+        try {
+            setLoading(true);
+            const response = await http.get('/group/fetch');
+            localStorage.setItem('retroData', JSON.stringify(response?.data));
+            return response?.data;
+        } catch (error) {
+            console.error("Error fetching retro:", error);
+            return null;
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    return { getRetroData };
+};

client/src/hooks/useRetroSocket.js

@@ -60,19 +60,16 @@ export const useRetroSocket = (retroId) => {
 
     // update mood
     const updateMood = (emoji) => {
-        console.log("UPDATING EMOJI", { emoji, email: userData?.email });
         socket?.emit("updateMood", { emoji, email: userData?.email });
     };
 
     // add review
     const addReview = (column, comment) => {
-        console.log("ADDING REVIEW", { column, comment, email: userData?.email });
         socket?.emit("addReview", { column, comment, email: userData?.email });
     };
 
     // update review
     const updateReview = (column, comment, index) => {
-        console.log("UPDATING REVIEW", { column, comment, index, email: userData?.email });
         socket?.emit("updateReview", { column, comment, index, email: userData?.email });
     };
 

client/src/layout/Header.jsx

@@ -9,8 +9,10 @@ import AdbIcon from '@mui/icons-material/Adb';
 import MenuIcon from '@mui/icons-material/Menu';
 import CloseIcon from '@mui/icons-material/Close';
 import HomeIcon from '@mui/icons-material/Home';
+import GroupIcon from '@mui/icons-material/Group';
+import LogoutIcon from '@mui/icons-material/Logout';
 import ReviewsIcon from '@mui/icons-material/Reviews';
-import DescriptionIcon from '@mui/icons-material/Description';
+import AccountCircleIcon from '@mui/icons-material/AccountCircle';
 
 import './Header.css';
 import { useAuth } from '../hooks/useAuth';
@@ -26,8 +28,7 @@ export default function Header() {
     const [popUser, setPopUser] = useState(null);
     const [openLogout, setOpenLogout] = useState(false);
 
-    const settings = ['Account', 'Logout'];
-    const isActive = (page) => location.pathname === '/' + page;
+    const isActive = (page) => location.pathname.split('/')[1] === page;
 
     const toggleDrawer = (page) => {
         setOpen(!open);
@@ -42,8 +43,7 @@ export default function Header() {
 
     const handleCloseUserMenu = (setting) => {
         setPopUser(null);
-        if (setting === 'Account') navigate('/account');
-        else if (setting === 'Logout') setOpenLogout(true);
+        if (setting === 'logout') setOpenLogout(true);
     };
 
     return (
@@ -60,11 +60,14 @@ export default function Header() {
                         <MenuItem onClick={() => navigate('/home')} className={isActive('home') ? "active-route" : "non-active-route"}>
                             <HomeIcon />&nbsp;<Typography variant="body1">Home</Typography>
                         </MenuItem>
+                        <MenuItem onClick={() => navigate('/group')} className={isActive('group') ? "active-route" : "non-active-route"}>
+                            <GroupIcon />&nbsp;<Typography variant="body1">Group</Typography>
+                        </MenuItem>
                         <MenuItem onClick={() => navigate('/retro')} className={isActive('retro') ? "active-route" : "non-active-route"}>
                             <ReviewsIcon />&nbsp;<Typography variant="body1">Retro-Board</Typography>
                         </MenuItem>
-                        <MenuItem onClick={() => navigate('/journal')} className={isActive('journal') ? "active-route" : "non-active-route"}>
-                            <DescriptionIcon />&nbsp;<Typography variant="body1">Reports</Typography>
+                        <MenuItem onClick={() => navigate('/account')} className={isActive('account') ? "active-route" : "non-active-route"}>
+                            <AccountCircleIcon />&nbsp;<Typography variant="body1">Account</Typography>
                         </MenuItem>
                     </Box>
 
@@ -84,7 +87,7 @@ export default function Header() {
                     </Typography>
 
                     <Box sx={{ flexGrow: 0 }}>
-                        <Tooltip title="Open settings">
+                        <Tooltip title="User Profile" arrow>
                             <IconButton onClick={handleOpenUserMenu} sx={{ p: 0 }}>
                                 <Avatar alt={userData?.name} src={userData?.image} className='profileAvt' />
                             </IconButton>
@@ -105,11 +108,11 @@ export default function Header() {
                             open={Boolean(popUser)}
                             onClose={handleCloseUserMenu}
                         >
-                            {settings.map((setting) => (
-                                <MenuItem key={setting} onClick={() => handleCloseUserMenu(setting)}>
-                                    <Typography sx={{ textAlign: 'center' }}>{setting}</Typography>
-                                </MenuItem>
-                            ))}
+                            <MenuItem onClick={() => handleCloseUserMenu("logout")}>
+                                <Typography sx={{ display: 'flex', textAlign: 'center', fontWeight: 600 }}>
+                                    Logout &nbsp; <LogoutIcon color='secondary' />
+                                </Typography>
+                            </MenuItem>
                         </Menu>
                     </Box>
 
@@ -129,11 +132,14 @@ export default function Header() {
                         <MenuItem onClick={() => toggleDrawer('home')} className={isActive('home') ? "pop-active" : "pop-non-active"}>
                             <HomeIcon />&nbsp;<Typography variant="body1" fontWeight={800}>Home</Typography>
                         </MenuItem>
+                        <MenuItem onClick={() => toggleDrawer('group')} className={isActive('group') ? "pop-active" : "pop-non-active"}>
+                            <GroupIcon />&nbsp;<Typography variant="body1" fontWeight={800}>Group</Typography>
+                        </MenuItem>
                         <MenuItem onClick={() => toggleDrawer('retro')} className={isActive('retro') ? "pop-active" : "pop-non-active"}>
                             <ReviewsIcon />&nbsp;<Typography variant="body1" fontWeight={800}>Retro-Board</Typography>
                         </MenuItem>
-                        <MenuItem onClick={() => toggleDrawer('journal')} className={isActive('journal') ? "pop-active" : "pop-non-active"}>
-                            <DescriptionIcon />&nbsp;<Typography variant="body1" fontWeight={800}>Reports</Typography>
+                        <MenuItem onClick={() => toggleDrawer('account')} className={isActive('account') ? "pop-active" : "pop-non-active"}>
+                            <AccountCircleIcon />&nbsp;<Typography variant="body1" fontWeight={800}>Account</Typography>
                         </MenuItem>
                     </Box>
                 </Collapse>