small ui update, try to fix socket again

client/src/components/HomePage/BasicCard.js

@@ -1,37 +1,45 @@
-import { useNavigate } from 'react-router-dom';
-import Card from '@mui/material/Card';
-import CardActions from '@mui/material/CardActions';
-import CardContent from '@mui/material/CardContent';
-import Button from '@mui/material/Button';
-import Typography from '@mui/material/Typography';
-
-export default function BasicCard({title, description, label, link}) {
+import { useNavigate } from "react-router-dom";
+import Card from "@mui/material/Card";
+import CardActions from "@mui/material/CardActions";
+import CardContent from "@mui/material/CardContent";
+import Button from "@mui/material/Button";
+import Typography from "@mui/material/Typography";
 
+export default function BasicCard({ title, description, label, link }) {
   const navigate = useNavigate();
 
   const handleButtonClick = () => {
     navigate(link);
-  }
+  };
 
   return (
-    <Card sx={{ minWidth: 275, flex: 0, borderRadius: '16px'}}>
-      <CardContent>
-        <Typography variant="h4" component="div" fontWeight="bold" padding="2px">
+    <Card
+      sx={{
+        minWidth: 275,
+        flex: "1 1 auto",
+        display: "flex",
+        flexDirection: "column",
+        borderRadius: "16px"
+      }}
+    >
+      <CardContent sx={{ border: "1px solid red", flex: "1 1 auto" }}>
+        <Typography
+          variant="h4"
+          component="div"
+          fontWeight="bold"
+          padding="2px"
+        >
           {title}
         </Typography>
         <Typography variant="body2" paddingTop="6px">
           {description}
         </Typography>
       </CardContent>
-      <CardActions sx={{ justifyContent: 'center'}}>
-        <Button 
-          size="small" 
-          variant="outlined"
-          onClick={handleButtonClick}
-        >
+      <CardActions sx={{ justifyContent: "center", border: "1px solid red" }}>
+        <Button size="small" variant="outlined" onClick={handleButtonClick}>
           {label}
         </Button>
       </CardActions>
     </Card>
   );
-}
+}

client/src/components/HomePage/HomePage.js

@@ -3,9 +3,66 @@ import QueueCard from "./QueueCard";
 import BasicCard from "./BasicCard";
 
 function HomePage() {
-
   return (
     <>
+      <Grid2
+        container
+        spacing={3}
+        sx={{
+          padding: "35px 0",
+          justifyContent: "center",
+        }}
+      >
+        <Grid2 item xs={12} md={7} container spacing={2} direction="column">
+          <Grid2 item xs={12} md={5} container spacing={2} direction="column">
+            <Grid2 item>
+              <div>Ongoing Session</div>
+            </Grid2>
+            <Grid2 item>
+              <QueueCard />
+            </Grid2>
+          </Grid2>
+
+          <Grid2 item xs={12} md={7} container spacing={2}>
+            <Grid2 item size={4} sx={{display: "flex"}}>
+              <BasicCard
+                title="View All Questions"
+                description="View all the questions you can attempt."
+                label="Questions List"
+                link="/questionpage"
+              />
+            </Grid2>
+
+            <Grid2 item size={4} sx={{display: "flex"}}>
+              <BasicCard
+                title="Past Question Attempts"
+                description="View your previous question attempts and 
+                their solutions to track your progress and learn from 
+                your mistakes."
+                label="Profile"
+              />
+            </Grid2>
+
+            <Grid2 item size={4} sx={{display: "flex"}}>
+              <BasicCard
+                title="Previous Matches"
+                description="Enjoyed collaborating with someone? View 
+                your past matches and send a friend request to your previous 
+                matches."
+                label="Previous Matches"
+              />
+            </Grid2>
+          </Grid2>
+        </Grid2>
+      </Grid2>
+    </>
+  );
+}
+
+export default HomePage;
+
+/**
+ * <>
       <Grid2
         container
         spacing={3}
@@ -57,8 +114,6 @@ function HomePage() {
 
       </Grid2>
     </>
-  );
-}
-
-export default HomePage;
-
+ * 
+ * 
+ */

client/src/socket.js

@@ -5,29 +5,34 @@ const isProduction =
   process.env.REACT_APP_API_BASE_URL &&
   process.env.REACT_APP_API_BASE_URL !== "http://localhost";
 
+let settings = {
+  autoConnect: false,
+  reconnectionAttempts: 5,
+};
+
 export const matchingSocket = isProduction
   ? io(process.env.REACT_APP_API_BASE_URL, {
       path: "/matching",
-      autoConnect: false,
+      ...settings,
     })
   : io(SVC_ENDPOINTS.matching, {
-      autoConnect: false,
+      ...settings,
     });
 
 export const collaborationSocket = isProduction
   ? io(process.env.REACT_APP_API_BASE_URL, {
       path: "/collaboration",
-      autoConnect: false,
+      ...settings,
     })
   : io(SVC_ENDPOINTS.collaboration, {
-      autoConnect: false,
+      ...settings,
     });
 
 export const chatSocket = isProduction
   ? io(process.env.REACT_APP_API_BASE_URL, {
       path: "/chat",
-      autoConnect: false,
+      ...settings,
     })
   : io(SVC_ENDPOINTS.chat, {
-      autoConnect: false,
+      ...settings,
     });

server/chat-service/server.js

@@ -34,8 +34,12 @@ io.on("connection", (socket) => {
   });
 
   // Handle disconnection
-  socket.on("disconnect", () => {
+  socket.on("disconnect", (reason, details) => {
     console.log("User disconnected from chat service:", socket.id);
+    console.log("Reason", reason);
+    console.log("Message", details.message);
+    console.log("Description", details.description);
+    console.log("Context", details.context);
   });
 });
 

server/collaboration-service/server.js

@@ -28,8 +28,12 @@ io.on("connection", (socket) => {
     socket.to(roomName).emit("code_update", code);
   });
 
-  socket.on("disconnect", () => {
+  socket.on("disconnect", (reason, details) => {
     console.log("Client disconnected");
+    console.log("Reason", reason);
+    console.log("Message", details.message);
+    console.log("Description", details.description);
+    console.log("Context", details.context);
   });
 });