Link Frontend and Backend

Able to Add Questions

TODO:
- Delete and Update Questions

Author: Jai2501

peer-prep/src/Components/QuestionList/Question.jsx

@@ -22,8 +22,8 @@ export const Question = ({question, i}) => {
         </div>
         <div className= {selected === i ? "q-content-show": "q-content"}>
             <div className="q-tags">
-                <div className="q-tag">{question.difficulty}</div>
-                <div className="q-tag">{question.topic}</div>
+                <div className="q-tag">{question.complexity}</div>
+                <div className="q-tag">{question.category}</div>
             </div>
             <div className="q-description">{question.description}</div>
         </div>

peer-prep/src/Components/QuestionList/QuestionList.jsx

@@ -1,9 +1,16 @@
-import React, { useState, useEffect} from 'react'
+import React, { useState, useEffect } from 'react'
 import { QuestionForm } from './QuestionForm'
-import {Question} from './Question'
+import { Question } from './Question'
 import './QuestionList.css'
 
+import QuestionModel from '../../DataModel/Question'
+import { setupQuestionDatabase, retrieveQuestionDatabase, updateLocalQuestionDatabase } from "../../Utility/localStorage"
+
 export const Questions = () => {
+  // Initializing Database
+  setupQuestionDatabase();
+
+  const [database, setDatabase] = useState(retrieveQuestionDatabase());
   const [qId, setQId] = useState(0);
   const [isAddQ, setAddQ] = useState(false);
   const [qs, setQs] = useState([])
@@ -12,9 +19,24 @@ export const Questions = () => {
   }
 
   const addQuestion = (qTitle, qDifficulty, qTopic, qDescription) => {
-    setQs([...qs, {id: qId, title: qTitle, difficulty: qDifficulty,
-      topic: qTopic, description: qDescription}]);
+    // Add in Database and Upload into Storage
+    let newQuestion = new QuestionModel(qId, qTitle, qDescription, qDifficulty, qTopic);
+    database.addQuestion(newQuestion);
+    updateLocalQuestionDatabase(database);
+
+    // Update States
+    setQs(Array.from(database.database));
+    setQId(Array.from(database.database).length);
+
+    // setQs([...qs, {id: qId, title: qTitle, difficulty: qDifficulty,
+    //   topic: qTopic, description: qDescription}]);
   }
+
+  // To load data on mount
+  useEffect(() => {
+    setQs(Array.from(database.database));
+    setQId(Array.from(database.database).length);
+  }, [])
 
   useEffect(() => console.log(qs), [qs]);
 
@@ -23,19 +45,16 @@ export const Questions = () => {
     <div className="q-wrapper">
       <div className="accordion">
         {qs.map((q, i) => (
-          <Question question = {q} key = {q.id} i = {i}/>
+          <Question key = {q[0]} question = {q[1]} i = {i}/>
         ))}
       </div>
 
-      {isAddQ === false ? <div></div> : <QuestionForm qId = {qId} addQuestion = {addQuestion}
-      setAddQ = {setAddQ}/>}
+      {isAddQ === false ? <div></div> : 
+                          <QuestionForm qId = {qId} addQuestion = {addQuestion} setAddQ = {setAddQ}/>}
       <div className="add-q-btn" onClick = {() => {
       setQId(qId + 1);
       setAddQ(true);
     }}> Add question</div>
     </div>
-    
-   
-    
   )
 }

peer-prep/src/DataModel/QuestionDatabase.js

@@ -5,6 +5,10 @@ class QuestionDatabase {
         this.database = new Map();
     }
 
+    setDatabase(database) {
+        this.database = database;
+    }
+
     addQuestion(questionToAdd) {
         if (!this.isDuplicateQuestion(questionToAdd)) {
             this.database.set(questionToAdd.id, questionToAdd);
@@ -36,7 +40,7 @@ class QuestionDatabase {
             return true;
         }
 
-        questionList = this.getAllQuestions();
+        var questionList = this.getAllQuestions();
 
         for (var i = 0; i < questionList.length; i++) {
             if (questionToCheck.title === questionList[i].title) {

peer-prep/src/Utility/localStorage.js

@@ -1,15 +1,23 @@
 import QuestionDatabase from "../DataModel/QuestionDatabase";
 
-function updateQuestionDatabase(updatedDatabase) {
-    localStorage.setItem("questions", updatedDatabase)
+function updateLocalQuestionDatabase(updatedDatabase) {
+    const data = JSON.stringify(Array.from(updatedDatabase.database.entries()));
+    localStorage.setItem("questions", data);
 }
 
 function retrieveQuestionDatabase() {
-    return localStorage.getItem("questions");
+    let questionDatabase = new QuestionDatabase();
+    questionDatabase.setDatabase(new Map(JSON.parse(localStorage.getItem("questions"))))
+
+    return questionDatabase;
 }
 
 function setupQuestionDatabase() {
-    localStorage.setItem("questions", QuestionDatabase());
+    var data = localStorage.getItem("questions");
+
+    if(!data) {
+        localStorage.setItem("questions", new QuestionDatabase())
+    };
 }
 
-export { setupQuestionDatabase, retrieveQuestionDatabase, updateQuestionDatabase };
+export { setupQuestionDatabase, retrieveQuestionDatabase, updateLocalQuestionDatabase };