resolve merge conflict

Author: Aishwarya Nair

package-lock.json

@@ -33,6 +33,7 @@ export const Question = ({question, i}) => {
            <span> {selected === i ? "-" : "+"}</span>
         </div>
         <div className= {selected === i ? "q-content-show": "q-content"}>
+<<<<<<< HEAD
             <div className="q-tag-container">
                 <div className="q-tags">
                     <div className= {tagClass}>{question.difficulty}</div>
@@ -41,6 +42,11 @@ export const Question = ({question, i}) => {
                 <div className="q-edit">
                     <img src = {edit_icon} alt=""/>
                 </div>
+=======
+            <div className="q-tags">
+                <div className="q-tag">{question.complexity}</div>
+                <div className="q-tag">{question.category}</div>
+>>>>>>> 2d10aa60338d872e3fe12c04076ef7f7dbda4179
             </div>
 
             <div className="q-description">{question.description}</div>

peer-prep.zip

@@ -1,20 +1,69 @@
-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([])
   const toggle = (i) => {
     return i
   }
 
+  // Add a new Question
   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);
+    
+    updateLocalDatabase();
+    updateStates();
+
+    // setQs([...qs, {id: qId, title: qTitle, difficulty: qDifficulty,
+    //   topic: qTopic, description: qDescription}]);
   }
+
+  // Delete a Question
+  const deleteQuestion = (questionId) => {
+    database.deleteQuestion(questionId);
+
+    updateLocalDatabase();
+    updateStates();
+  }
+
+  // Update an existing Question
+  const updateQuestion = (qId, qTitle, qDescription, qDifficulty, qTopic) => {
+    let updatedQuestion = new QuestionModel(qId, qTitle, qDescription, qDifficulty, qTopic);
+    database.updateQuestion(updatedQuestion);
+
+    updateLocalDatabase();
+    updateStates();
+  }
+
+  const updateLocalDatabase = () => {
+    // Updating Database in Local Storageß
+    updateLocalQuestionDatabase(database);
+  }
+
+  const updateStates = () => {
+    // Update States
+    setQs(Array.from(database.database));
+    setQId(Array.from(database.database).length);
+  }
+
+  // To load data on mount
+  useEffect(() => {
+    setQs(Array.from(database.database));
+    setQId(Array.from(database.database).length);
+  }, [])
 
   useEffect(() => console.log(qs), [qs]);
 
@@ -23,21 +72,18 @@ 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 = {() => {
         if (!isAddQ) {
           setQId(qId + 1);
           setAddQ(true);
         }
     }}> Add question</div>
     </div>
-    
-   
-    
   )
 }

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

@@ -0,0 +1,39 @@
+// Class that stores and encapsulates the Question and its related fields
+
+class Question {
+    constructor(id, title, description, complexity, category) {
+      this.id = id;
+      this.title = title;
+      this.description = description;
+      this.complexity = complexity;
+      this.category= category;
+    }
+
+    updateQuestionTitle(newQuestionTitle) {
+        this.title = newQuestionTitle;
+    }
+
+    updateQuestionDescription(newQuestionDescription) {
+        this.description = newQuestionDescription;
+    }
+
+    updateQuestionComplexity(newQuestionComplexity) {
+        this.complexity = newQuestionComplexity;
+    }
+
+    updateQuestionCategory(newQuestionCategory) {
+        this.category = newQuestionCategory;
+    }
+
+    toJSON() {
+        return {
+            id: this.id,
+            title: this.title,
+            description: this.description,
+            complexity: this.complexity,
+            category: this.category,
+        };
+    }
+}
+  
+export default Question;

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

@@ -0,0 +1,67 @@
+// A Class that stores and encapsulates Database Features
+
+class QuestionDatabase {
+    constructor() {
+        this.database = new Map();
+    }
+
+    setDatabase(database) {
+        this.database = database;
+    }
+
+    clearDatabase() {
+        this.database = new Map();
+    }
+
+    addQuestion(questionToAdd) {
+        if (!this.isDuplicateQuestion(questionToAdd)) {
+            this.database.set(questionToAdd.id, questionToAdd);
+        }
+    }
+
+    deleteQuestion(questionId) {
+        if (this.database.has(questionId)) {
+            this.database.delete(questionId);
+        }
+    }
+
+    updateQuestion(questionToUpdate) {
+        this.database.set(questionToUpdate.id, questionToUpdate);
+    }
+
+    getAllQuestions() {
+        var questionList = [];
+
+        for (const [key, value] of this.database) {
+            questionList.push(value);
+        }
+
+        return questionList;
+    }
+
+    isDuplicateQuestion(questionToCheck) {
+        if (this.database.has(questionToCheck.id)) {
+            return true;
+        }
+
+        var questionList = this.getAllQuestions();
+
+        for (var i = 0; i < questionList.length; i++) {
+            if (questionToCheck.title === questionList[i].title) {
+                return true;
+            }
+
+            if (questionToCheck.description === questionList[i].description) {
+                return true;
+            }
+        }
+
+        return false;
+    }
+
+    toJSON() {
+        return this.database;
+    }
+}
+
+export default QuestionDatabase;

peer-prep/src/DataModel/Question.js

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