Merge pull request #19 from CS3219-AY2324S1/feat/profile-page

Implement user's profile page

Author: kvihashini

frontend/package-lock.json

@@ -13,8 +13,8 @@
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "@mui/icons-material": "^5.14.13",
-    "@mui/material": "^5.14.9",
-    "axios": "^1.5.0",
+    "@mui/material": "^5.14.10",
+    "axios": "^1.5.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-quill": "^2.0.0",

frontend/package.json

@@ -1,59 +1,42 @@
-import { useState, useEffect } from "react";
-import QuestionList from "./components/QuestionList";
 import "./App.css";
-import Box from "@mui/material/Box";
-import axios from "axios";
-import AddQuestionDialog from "./components/AddQuestionDialog";
+import { useState } from "react";
+import { Grid } from "@mui/material";
 import Theme from "./themes/Theme";
-import { reverseCategoryMapping } from "./utils/QuestionUtil";
+import ProfilePage from "./pages/ProfilePage/ProfilePage";
+import Home from "./pages/Home";
+import QuestionsRepo from "./pages/QuestionsRepo";
+import LoginPage from "./pages/LoginPage";
+import RegisterPage from "./pages/RegisterPage";
+import { Route, Routes } from "react-router-dom";
+import UserContextProvider from "./utils/UserContextUtil";
+import SnackbarProvider from "./utils/SnackbarContextUtil";
 
 function App() {
-  const databaseURL = import.meta.env.VITE_DATABASE_URL;
-  const [questions, setQuestions] = useState([]);
-  const loadQuestions = async () => {
-    const questions = await axios.get(`${databaseURL}/question`);
-    for (let i = 0; i < questions.data.length; i++) {
-      let question = questions.data[i];
-      for (let j = 0; j < question.categories.length; j++) {
-        question.categories[j] = reverseCategoryMapping[question.categories[j]];
-      }
-    }
-    setQuestions(questions.data);
-  };
-
-  const handleDelete = async (id) => {
-    await axios.delete(`${databaseURL}/question/${id}`);
-    loadQuestions();
-  };
-
-  const handleEdit = async (id, fieldsToUpdate) => {
-    await axios.patch(`${databaseURL}/question/${id}`, fieldsToUpdate);
-    loadQuestions();
-  };
-
-  useEffect(() => {
-    loadQuestions();
-  }, []);
+  const user = JSON.parse(localStorage.getItem("user"));
+  const [userContext, setUserContext] = useState({
+    username: user ? user.username : null,
+    userId: user ? user.id : null,
+  });
+  const value = { userContext, setUserContext };
 
   return (
     <>
       <Theme>
-        <h1>Peerprep</h1>
-        <Box direction="column">
-          <Box mb={2}>
-            <AddQuestionDialog
-              questions={questions}
-              onAddQuestion={loadQuestions}
-            />
-          </Box>
-          <Box mb={2}>
-            <QuestionList
-              questions={questions}
-              onDelete={handleDelete}
-              onEdit={handleEdit}
-            />
-          </Box>
-        </Box>
+        <Grid container>
+          <Grid item xs={12}>
+            <UserContextProvider.Provider value={value}>
+              <SnackbarProvider>
+                <Routes>
+                  <Route path="/" element={<LoginPage />} />
+                  <Route path="/register" element={<RegisterPage />} />
+                  <Route path="/home" element={<Home />} />
+                  <Route path="/profile" element={<ProfilePage />} />
+                  <Route path="/questions" element={<QuestionsRepo />} />
+                </Routes>
+              </SnackbarProvider>
+            </UserContextProvider.Provider>
+          </Grid>
+        </Grid>
       </Theme>
     </>
   );

frontend/src/App.jsx

@@ -1,4 +1,4 @@
-import { useState, useRef, useEffect } from "react";
+import { useState, useRef, useEffect, useContext } from "react";
 import {
   Button,
   TextField,
@@ -14,7 +14,7 @@ import {
   Select,
   Chip,
 } from "@mui/material";
-import CustomSnackbar from "./CustomSnackbar";
+import { SnackbarContext } from "../utils/SnackbarContextUtil";
 import axios from "axios";
 import ReactQuill from "react-quill";
 import "react-quill/dist/quill.snow.css";
@@ -40,8 +40,7 @@ function AddQuestionDialog({ questions, onAddQuestion }) {
   const [description, setDescription] = useState("");
   const [category, setCategory] = useState([]);
   const [openDialog, setOpenDialog] = useState(false);
-  const [isSnackbarOpen, setSnackbarOpen] = useState(false);
-  const [snackbarMessage, setsnackbarMessage] = useState("");
+  const { snack, setSnack } = useContext(SnackbarContext);
 
   const handleSelectChange = (event, id) => {
     const {
@@ -64,29 +63,12 @@ function AddQuestionDialog({ questions, onAddQuestion }) {
     setOpenDialog(false);
   };
 
-  const handleDuplicateQuestion = () => {
-    setsnackbarMessage("Duplicate question detected!");
-    setSnackbarOpen(true);
-  };
-
-  const handleEmptyInputField = () => {
-    setsnackbarMessage("Missing fields detected!");
-    setSnackbarOpen(true);
-  };
-
-  const handleSnackbarClose = (event, reason) => {
-    if (reason == "clickaway") {
-      return;
-    }
-    setSnackbarOpen(false);
-  };
-
   const handleSubmit = async (evt) => {
     evt.preventDefault();
 
-    const title = inputRefs["title"].current.value.trim();
+    const title = inputRefs["title"].current.value.trimEnd();
     const categories = category;
-    const descriptionClean = description.replace(/<(?!img)[^>]*>/g, "").trim();
+    const descriptionClean = description.replace(/<(?!img)[^>]*>/g, "").trimEnd();
 
     const isDuplicateQuestion = questions.some(
       (question) => question.title.toLowerCase() === title.toLowerCase()
@@ -99,9 +81,17 @@ function AddQuestionDialog({ questions, onAddQuestion }) {
       descriptionClean.length == 0;
 
     if (isDuplicateQuestion) {
-      handleDuplicateQuestion();
+      setSnack({
+        message: "Duplicate question detected!",
+        open: true,
+        severity: "warning",
+      });
     } else if (isInputFieldEmpty) {
-      handleEmptyInputField();
+      setSnack({
+        message: "Missing fields detected!",
+        open: true,
+        severity: "warning",
+      });
     } else {
       for (let i = 0; i < categories.length; i++) {
         categories[i] = categoryMapping[categories[i]];
@@ -224,12 +214,6 @@ function AddQuestionDialog({ questions, onAddQuestion }) {
           <Button onClick={handleSubmit}>Add Question</Button>
         </DialogActions>
       </Dialog>
-      <CustomSnackbar
-        open={isSnackbarOpen}
-        onClose={handleSnackbarClose}
-        message={snackbarMessage}
-        severity="warning"
-      ></CustomSnackbar>
     </div>
   );
 }