Merge pull request #43 from Gavzzz/master

Nice to Have: Question History

Author: cheehongw

.gitignore

@@ -22,3 +22,4 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+frontend/package-lock.json

frontend/package-lock.json

@@ -0,0 +1,86 @@
+import { AxiosResponse } from "axios";
+import { SolvedQuestion } from "../models/SolvedQuestion.model"; // Import the SolvedQuestion model
+import { userServiceClient } from "./server";
+
+/**
+ * Fetch questions completed by the user.
+ * @param userId - The ID of the user for whom you want to fetch completed questions.
+ * @returns An array of completed questions.
+ */
+export async function fetchUserCompletedQuestions(
+  userId: String
+): Promise<SolvedQuestion[]> { 
+  try {
+    const response: AxiosResponse = await userServiceClient.get(
+      `/api/users/${userId}/questions`
+    );
+
+    const resData = response.data;
+    const completedQuestions: SolvedQuestion[] = resData.map(
+      (q: any) =>
+        new SolvedQuestion(
+          q._id,
+          q.id,
+          q.title,
+          q.description,
+          q.topics,
+          q.difficulty,
+          false, // Default value for solved
+          undefined // Default value for solvedDate
+        )
+    );
+
+    return completedQuestions;
+  } catch (error) {
+    // Handle errors appropriately, e.g., log the error, return an empty array, or throw an error.
+    console.error(error);
+    throw error;
+  }
+}
+
+/**
+ * Add a new question to the user's completed questions.
+ * @param userId - The ID of the user to whom you want to add the question.
+ * @param questionId - The ID of the question you want to add.
+ * @param complexity - The complexity of the question.
+ * @param category - The category of the question.
+ * @returns The added question.
+ */
+export async function addUserQuestion(
+  userId: number,
+  questionId: string,
+  complexity: number,
+  category: string[]
+): Promise<SolvedQuestion> { 
+  try {
+    const response: AxiosResponse = await userServiceClient.post(
+      `/api/users/${userId}/addquestions`,
+      {
+        userId,
+        questionId,
+        complexity,
+        category,
+      }
+    );
+
+    const resData = response.data;
+    const addedQuestion: SolvedQuestion = new SolvedQuestion(
+      resData._id,
+      resData.id,
+      resData.title,
+      resData.description,
+      resData.topics,
+      resData.difficulty,
+      false, // Default value for solved
+      undefined // Default value for solvedDate
+    );
+
+    return addedQuestion;
+  } catch (error) {
+    // Handle errors appropriately, e.g., log the error or throw it to be handled by the caller.
+    console.error(error);
+    throw error;
+  }
+}
+
+

frontend/src/api/user.ts

@@ -0,0 +1,103 @@
+import React, { useEffect, useState } from "react";
+import {
+  Table,
+  Thead,
+  Tbody,
+  Tr,
+  Th,
+  Td,
+  TableCaption,
+  Center,
+  TableContainer,
+} from "@chakra-ui/react";
+import { Paginator } from "../Paginator/Paginator.component";
+import { SolvedQuestion } from "../../models/SolvedQuestion.model";
+import { fetchUserCompletedQuestions } from "../../api/user"; // Import your API function
+
+export type TableProp = {
+  userId: String;
+  pageSize?: number;
+};
+
+export const SolvedTable = (props: TableProp) => {
+  const { userId, pageSize = 10 } = props;
+  const [currentPage, setCurrentPage] = useState(1);
+  const [solvedQuestions, setSolvedQuestions] = useState<SolvedQuestion[]>([]);
+
+  const onPageChange = (page: React.SetStateAction<number>) => {
+    setCurrentPage(page);
+  };
+
+  useEffect(() => {
+  const loadSolvedQuestions = async () => {
+    if (userId) {
+      try {
+        const data = await fetchUserCompletedQuestions(userId);
+        setSolvedQuestions(data);
+      } catch (error) {
+        console.error("Failed to fetch solved questions:", error);
+      }
+    }
+  };
+
+    loadSolvedQuestions();
+  }, [userId]);
+
+  const getQuestionsForPage = () => {
+    const startIndex = (currentPage - 1) * pageSize;
+    return solvedQuestions.slice(startIndex, startIndex + pageSize);
+  };
+
+  return (
+    <TableContainer width="100%">
+      <Table
+        variant="striped"
+        backgroundColor={"white"}
+        size="md"
+        boxShadow="md"
+        transition="box-shadow 0.2s"
+        _hover={{
+          boxShadow: "xl",
+        }}
+        width="60%"
+        sx={{ tableLayout: "fixed" }}
+      >
+        <TableCaption>
+          <Center>
+            <Paginator
+              adjacent={1}
+              page={currentPage}
+              totalPages={Math.ceil(solvedQuestions.length / pageSize)}
+              onPageChange={onPageChange}
+            />
+          </Center>
+        </TableCaption>
+        <Thead>
+          <Tr>
+            <Th colSpan={4}>Completed Questions</Th>
+          </Tr>
+          <Tr>
+            <Th>Question</Th>
+            <Th>Topics</Th>
+            <Th isNumeric>Difficulty</Th>
+            <Th isNumeric>Solved Date</Th>
+          </Tr>
+        </Thead>
+        <Tbody>
+          {getQuestionsForPage().map((question) => (
+            <Tr key={question._id}>
+              <Td>{question.title}</Td>
+              <Td>{question.topics.join(", ")}</Td>
+              <Td isNumeric>{question.difficulty}</Td>
+              <Td isNumeric>
+                {question.solvedDate
+                  ? new Date(question.solvedDate).toLocaleDateString()
+                  : "Not Available"}
+              </Td>
+            </Tr>
+          ))}
+        </Tbody>
+      </Table>
+    </TableContainer>
+  );
+};

frontend/src/components/SolvedTable/SolvedTable.component.tsx

@@ -65,3 +65,7 @@ export const getUnusedId = async () => {
     ) + 1
   );
 };
+
+
+
+

frontend/src/data/sampleqn.tsx

@@ -7,13 +7,14 @@ export class Question {
   id: number;
   _id: string;
 
+
   constructor(
     _id: string,
     id: number,
     title: string,
     descMd: string,
     categories: string[],
-    difficulty: number
+    difficulty: number,
   ) {
     this.title = title;
     this.descMd = descMd;

frontend/src/models/Question.model.tsx

@@ -0,0 +1,27 @@
+import { Question, QnFilter } from "./Question.model";
+
+export class SolvedQuestion extends Question {
+  solved: boolean;
+  solvedDate: Date | undefined; 
+
+  constructor(
+    _id: string,
+    id: number,
+    title: string,
+    descMd: string,
+    categories: string[],
+    difficulty: number,
+    solved: boolean = false,
+    solvedDate?: Date 
+  ) {
+    super(_id, id, title, descMd, categories, difficulty);
+    this.solved = solved;
+    this.solvedDate = solvedDate;
+  }
+}
+
+// Define a filter for SolvedQuestions, similar to QnFilter
+export type SolvedQnFilter = QnFilter & {
+  solved?: boolean;
+  solvedDate?: Date; // Change the type to Date
+};

frontend/src/models/SolvedQuestion.model.tsx

@@ -1,9 +1,30 @@
-import React from "react";
-import "./HomePage.css";
+import React, { useEffect, useState } from "react";
 import "bootstrap/dist/css/bootstrap.min.css";
+import { useNavigate } from "react-router-dom";
+import { QuestionEditor } from "../../components/QuestionEditor/QuestionEditor.component";
+import { SolvedTable } from "../../components/SolvedTable/SolvedTable.component";
+import { selectUser } from "../../reducers/authSlice";
+import { useSelector } from "react-redux";
 
 function HomePage() {
-  return <></>;
+  // Use the useSelector hook to access the user from the Redux store
+  const user = useSelector(selectUser);
+
+  if (user === null) {
+    return (
+      <div>
+        <QuestionEditor />
+      </div>
+    );
+  }
+
+  // At this point, you're sure that user is not null
+  return (
+    <div>
+      <QuestionEditor />
+      <SolvedTable userId={user.id} pageSize={4} />
+    </div>
+  );
 }
 
 export default HomePage;

frontend/src/pages/HomePage/HomePage.tsx

@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "cookie-parser": "^1.4.6"
+  }
+}