Friend's history now available

Arquisoft · Apr 27, 2024 · 94de92a · 94de92a
1 parent 164d750
commit 94de92a
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 47 deletions.
diff --git a/gatewayservice/routes/historyRoutes.js b/gatewayservice/routes/historyRoutes.js
@@ -4,7 +4,7 @@ const historyServiceUrl = process.env.HISTORY_SERVICE_URL || "http://localhost:8
 const userServiceUrl = process.env.USER_SERVICE_URL || "http://localhost:8001";
 
 module.exports = (app, axios, authMiddleware) => {
-  app.get("/history/get/:userId", authMiddleware, (req, res, next) => {
+  app.get("/history/get/:userId", (req, res, next) => {
     const { userId } = req.params
     const { page, limit } = req.query
 

diff --git a/webapp/src/views/Social.jsx b/webapp/src/views/Social.jsx
@@ -13,8 +13,11 @@ import axios from "axios";
 import { useContext, useEffect, useState } from "react";
 import InfoSnackBAr from "./components/InfoSnackBar";
 import ProtectedComponent from "./components/ProtectedComponent";
+import SaveList from "./components/SaveList";
 import UserAvatar from './components/UserAvatar';
 import { AuthContext } from "./context/AuthContext";
+
+
 const tabStyle = {
     display: "flex",
     flexDirection: "column",
@@ -367,9 +370,8 @@ const UserProfile = (props) => {
                     <Typography variant="body1" element="p">Joined: {parseDate(user.createdAt)}</Typography>
                 </Box>
             </Box>
-
             <Divider sx={{padding:'.5em'}}/>
-
+            <SaveList user={user}/>
         </Container>
 
     )
@@ -476,7 +478,7 @@ export default function Social() {
                     marginTop: 4,
                     display: "grid",
                     gridTemplateColumns: "1fr 2fr",
-                    height: "600px"
+                    height: "600px",
                 }}
             >
 

diff --git a/webapp/src/views/components/SaveDetails.jsx b/webapp/src/views/components/SaveDetails.jsx
@@ -1,46 +1,45 @@
-import {Box, Typography, Container, Button, Divider} from "@mui/material";
-import ArrowBackIcon from "@mui/icons-material/ArrowBack";
+import CloseIcon from '@mui/icons-material/Close';
+import { Box, Container, Divider, Typography } from "@mui/material";
 import textFormat from "../../scripts/textFormat";
 
-const Summary = ({category, points}) => {
+const Summary = ({ category, points }) => {
   return (
-    <Box sx={{display: "flex", justifyContent: "space-between"}}>
+    <Box sx={{ display: "flex", justifyContent: "space-between" }}>
       <Typography variant="h5" component="p">{textFormat(category)}</Typography>
       <Typography variant="h5" component="p">Points: {points}</Typography>
     </Box>
   )
 }
 
-const Question = ({index, question}) => {
+const Question = ({ index, question }) => {
   return (
-    <Box sx={{position: "relative"}}>
+    <Box sx={{ position: "relative" }}>
       <Typography variant="h6" component="p">{index}. {question.statement}</Typography>
-        <Container>
-          {question.options.map((option, i) => {
-            if (i === question.correct) return <Typography key={i} color="success.main">{option}</Typography>
-            if(i === question.answer && question.answer !== question.correct) return <Typography key={i} color="error.main">{option}</Typography>
-            return <Typography key={i} color="">{option}</Typography>
-          })}
-        </Container>
-        <Box sx={{position: "absolute", right: 0, top: 0}}>
-          <Typography>Points: {question.points}</Typography>
-          <Typography>Time: {question.time} s</Typography>
-        </Box>
+      <Container>
+        {question.options.map((option, i) => {
+          if (i === question.correct) return <Typography key={i} color="success.main">{option}</Typography>
+          if (i === question.answer && question.answer !== question.correct) return <Typography key={i} color="error.main">{option}</Typography>
+          return <Typography key={i} color="">{option}</Typography>
+        })}
+      </Container>
+      <Box sx={{ position: "absolute", right: 0, top: 0 }}>
+        <Typography>Points: {question.points}</Typography>
+        <Typography>Time: {question.time} s</Typography>
+      </Box>
     </Box>
   )
 }
 
-const SaveDetails = ({save, back}) => {
+const SaveDetails = ({ save, back }) => {
   return (
-    <Box sx={{display: "flex", flexFlow: "column", gap: "1rem"}}>
-      <Button color="primary" onClick={back} startIcon={<ArrowBackIcon />} sx={{alignSelf: "start"}}>
-       Go back
-      </Button>
-      <Summary category={save.category} points={save.questions.reduce((acc, curr) => curr.points + acc, 0)}/>
+    <Box sx={{ display: "flex", flexFlow: "column", gap: "1rem" }}>
+
+      <CloseIcon sx={{ cursor: 'pointer', paddingTop: '.5em', marginLeft: "auto" }} onClick={back} />
+      <Summary category={save.category} points={save.questions.reduce((acc, curr) => curr.points + acc, 0)} />
       <Divider />
-      <Box sx={{display: "flex", flexFlow: "column", gap: "1rem"}}>
+      <Box sx={{ display: "flex", flexFlow: "column", gap: "1rem" }}>
         {save.questions.map((q, i) =>
-          <Question key={i} index={i + 1} question={q}/>)}
+          <Question key={i} index={i + 1} question={q} />)}
       </Box>
     </Box>
   )

diff --git a/webapp/src/views/components/SaveList.jsx b/webapp/src/views/components/SaveList.jsx
@@ -1,13 +1,13 @@
-import {Container, List, ListItem, ListItemText, Pagination} from "@mui/material";
+import { Container, List, ListItem, ListItemText, Pagination } from "@mui/material";
 import axios from "axios";
-import {useContext, useEffect, useState} from "react";
-import {AuthContext} from "../context/AuthContext";
-import SaveDetails from "./SaveDetails";
+import { useContext, useEffect, useState } from "react";
 import textFormat from "../../scripts/textFormat";
+import { AuthContext } from "../context/AuthContext";
+import SaveDetails from "./SaveDetails";
 
-const limit= 10
+const limit = 10
 
-const Save = ({save, onClick}) => {
+const Save = ({ save, onClick }) => {
   const date = new Date(save.createdAt)
   const formattedDate = date.toISOString().split("T")[0];
 
@@ -18,22 +18,29 @@ const Save = ({save, onClick}) => {
       onClick={() => onClick(save)}
       secondaryAction={<ListItemText primary={points} secondary="Points" />}
     >
-      <ListItemText primary={textFormat(save.category)} secondary={formattedDate}/>
+      <ListItemText primary={textFormat(save.category)} secondary={formattedDate} />
     </ListItem>
   )
 }
 
-const SaveList = () => {
+const SaveList = (props) => {
   const { getUser } = useContext(AuthContext)
+  let { user } = props
   const [saves, setSaves] = useState([])
   const [displayedSave, setDisplayedSave] = useState()
   const [page, setPage] = useState(0)
   const [maxPages, setMaxPages] = useState(0)
 
+  //If there is no user in passed, use logged user
+  if (!user)
+    user = getUser();
+  else
+    user.userId = user._id;
+
   const fetchSaves = () => {
     axios({
       method: 'get',
-      url: `/history/get/${getUser().userId}?page=${page}&limit=${limit}`,
+      url: `/history/get/${user.userId}?page=${page}&limit=${limit}`,
       headers: {
         'Authorization': `Bearer ${getUser().token}`
       }
@@ -48,27 +55,27 @@ const SaveList = () => {
       })
   }
 
-  useEffect(fetchSaves, [page, getUser]);
+  useEffect(fetchSaves, [page]);
 
   return (
-    <Container sx={{display:"flex", flexFlow: "column", alignItems: "stretch"}}>
+    <Container sx={{ display: "flex", flexFlow: "column", alignItems: "stretch" }}>
       {
         displayedSave ?
-          <SaveDetails save={displayedSave} back={() => setDisplayedSave(null)}/> :
+          <SaveDetails save={displayedSave} back={() => setDisplayedSave(null)} /> :
           (<>
             <List>
-            {
-              saves.map((save, index) =>
-                <Save key={index} save={save} onClick={setDisplayedSave}/>
-              )
-            }
+              {
+                saves.map((save, index) =>
+                  <Save key={index} save={save} onClick={setDisplayedSave} />
+                )
+              }
             </List>
             <Pagination
               count={maxPages}
               color="primary"
               showFirstButton
               showLastButton
-              sx={{alignSelf: "center"}}
+              sx={{ alignSelf: "center" }}
               onChange={(_, p) => setPage(p - 1)}
             />
           </>)