add and link edit view

Author: Aishwarya Nair

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

@@ -3,60 +3,100 @@ import './Question.css'
 import delete_icon from '../Assets/bin.png'
 import edit_icon from '../Assets/pencil.png'
 
-export const Question = ({question, i}) => {
+export const Question = ({question, i, deleteQuestion, updateQuestion}) => {
     const [selected, setSelected] = useState(null);
+    const [title, setTitle] = useState(question.title);
+    const [difficulty, setDifficulty] = useState(question.complexity);
+    const [topic, setTopic] = useState(question.category);
+    const [description, setDescription] = useState(question.description)
+
     const toggle = (i) => {
-        if(selected === i) {
-            return setSelected(null)
+        if (!isEdit) {
+            if(selected === i) {
+                return setSelected(null)
+            }
+            setSelected(i)
         }
-        setSelected(i)
     };
+    const [isEdit, setEdit] = useState(false);
     let tagClass = "q-tag";
 
-    if(question.difficulty.toLowerCase() === "easy") {
+    if(question.complexity.toLowerCase() === "easy") {
         tagClass += " q-tag-green"
-    } else if (question.difficulty.toLowerCase() === "medium") {
+    } else if (question.complexity.toLowerCase() === "medium") {
         tagClass += " q-tag-orange"
-    } else if (question.difficulty.toLowerCase() === "hard"){
+    } else if (question.complexity.toLowerCase() === "hard"){
         tagClass += " q-tag-red"
     } else {
         tagClass += " q-tag-white"
     }
   return (
-    <div className="question-container">
-        <div className="question">
-        <div className="q-header" onClick = {() => toggle(i)}>
-            <div className="q-name">
-                <div className="q-id">#{question.id}</div>
-                <div className="q-title">{question.title}</div>
-            </div>
-           <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>
-                    <div className="q-tag">{question.topic}</div>
+    <div className= {isEdit ? "form-container": "question-container"}>
+        <div className={isEdit ? "container": "question"}>
+            <div className="q-header" onClick = {() => toggle(i)}>
+                <div className="q-name">
+                    <div className={isEdit ? "q-form-id": "q-id"}>#{question.id}</div>
+                    {isEdit === true? <input type="text" className="q-form-title q-form-input" defaultValue = {question.title}
+                    onChange = {(e) => {setTitle(e.target.value)}}/> : 
+                    <div className="q-title">{question.title}</div>}
                 </div>
-                <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
+                <span> {selected === i ? "-" : "+"}</span>
             </div>
 
-            <div className="q-description">{question.description}</div>
+            {!isEdit 
+                ? 
+                <div className= {selected === i ? "q-content-show": "q-content"}>
+                    <div className="q-tag-container">
+                        <div className={isEdit ? "q-form-tags" : "q-tags"}>
+                            {isEdit === true? <input type="text" className="q-form-tag q-form-input" defaultValue = {question.complexity} 
+                            onChange = {(e) => {setDifficulty(e.target.value)}}/> : 
+                            <div className= {tagClass}>{question.complexity}</div>}
+                            {isEdit === true? <input type="text" className="q-form-tag q-form-input" defaultValue = {question.category}
+                            onChange = {(e) => {setTopic(e.target.value)}}/> : 
+                            <div className="q-tag">{question.category}</div>}
+                        </div>
+                        <div className="q-edit" onClick = {()=> setEdit(true)}>
+                            <img src = {edit_icon} alt=""/>
+                        </div>
+                    </div>
+
+                    {isEdit === true? <textarea type="text" className="q-form-description q-form-input" defaultValue = {question.description}
+                    onChange = {(e) => {setDescription(e.target.value)}}/> : 
+                    <div className="q-description">{question.description}</div>}
+                    
+                    {isEdit === true? <button className="submit-btn" 
+                    onClick = {(e) => {
+                        setEdit(false);
+                        updateQuestion(question.id, title, description, difficulty, topic)
+                        }}>Submit</button> : <div></div>}
+                </div>
+                : 
+                <div className="q-tag-container">
+                    <div className={isEdit ? "q-form-tags" : "q-tags"}>
+                        {isEdit === true? <input type="text" className="q-form-tag q-form-input" defaultValue = {question.complexity} 
+                        onChange = {(e) => {setDifficulty(e.target.value)}}/> : 
+                        <div className= {tagClass}>{question.complexity}</div>}
+                        {isEdit === true? <input type="text" className="q-form-tag q-form-input" defaultValue = {question.category}
+                        onChange = {(e) => {setTopic(e.target.value)}}/> : 
+                        <div className="q-tag">{question.category}</div>}
+                    </div>
+                </div>}
+
+            {isEdit === true? <textarea type="text" className="q-form-description q-form-input" defaultValue = {question.description}
+            onChange = {(e) => {setDescription(e.target.value)}}/> : null}
+            
+            {isEdit === true? 
+            <div className="btn-container">
+                <button className="submit-btn" 
+            onClick = {(e) => {
+                setEdit(false);
+                updateQuestion(question.id, title, description, difficulty, topic)
+                }}>Submit</button> </div> : null}
+            
+        </div>
+        <div className="delete-btn" onClick = {(e) => deleteQuestion(i)}>
+            <img src= {delete_icon} alt="" />
         </div>
-       
-        
-    </div>
-    <div className="delete-btn">
-        <img src= {delete_icon} alt="" />
-    </div>
     </div>
 
   )

peer-prep/src/Components/QuestionList/QuestionForm.css

@@ -72,14 +72,22 @@
     margin-left: 20px;
   }
 
+  .btn-container {
+    display: flex;
+    gap: 40px;
+    height: fit-content;
+    width: fit-content;
+    margin: auto;
+    justify-self: center;
+  }
 
   .submit-btn {
     display: flex;
     margin: auto;
     justify-content: center;
     align-items: center;
     width: 90px;
-    height: 130px;
+    height: 50px;
     color: #fff;
     background: #52CC65;
     border: none;
@@ -88,6 +96,21 @@
     cursor: pointer;
   }
 
+  .cancel-btn {
+    display: flex;
+    margin: auto;
+    justify-content: center;
+    align-items: center;
+    width: 90px;
+    height: 50px;
+    color: #fff;
+    background: #bebaba;
+    border: none;
+    border-radius: 5px;
+    font-size: 19px;
+    cursor: pointer;
+  }
+
   .ghost-btn img {
     width: 40px;
     visibility: hidden;

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

@@ -2,7 +2,7 @@ import React, { useState } from 'react'
 import './QuestionForm.css'
 import delete_icon from '../Assets/bin.png'
 
-export const QuestionForm = ({qId, addQuestion, setAddQ}) => {
+export const QuestionForm = ({qId, addQuestion, setAddQ, setQId}) => {
   const [title, setTitle] = useState("");
   const [difficulty, setDifficulty] = useState("");
   const [topic, setTopic] = useState("");
@@ -42,8 +42,11 @@ export const QuestionForm = ({qId, addQuestion, setAddQ}) => {
           onChange = {
             (e) => setDescription(e.target.value)
           }/>
-
-          <button type = "submit" className="submit-btn">Submit</button>
+          <div className="btn-container">
+            <button type = "cancel" className="cancel-btn" onClick = {(e)=> {setAddQ(false); setQId(qId - 1)}}>Cancel</button>
+            <button type = "submit" className="submit-btn">Submit</button>
+          </div>
+          
       </form>
       <div className="ghost-btn">
         <img src= {delete_icon} alt=""/>

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

@@ -3,7 +3,7 @@ import { QuestionForm } from './QuestionForm'
 import { Question } from './Question'
 import './QuestionList.css'
 
-import QuestionModel from '../../DataModel/Question'
+import QuestionModel from '../../DataModel/QuestionModel'
 import { setupQuestionDatabase, retrieveQuestionDatabase, updateLocalQuestionDatabase } from "../../Utility/localStorage"
 
 export const Questions = () => {
@@ -14,9 +14,7 @@ export const Questions = () => {
   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) => {
@@ -64,20 +62,18 @@ export const Questions = () => {
     setQs(Array.from(database.database));
     setQId(Array.from(database.database).length);
   }, [])
-  
-  useEffect(() => console.log(qs), [qs]);
 
   return (
 
     <div className="q-wrapper">
       <div className="accordion">
         {qs.map((q, i) => (
-          <Question key = {q[0]} question = {q[1]} i = {i}/>
+          <Question key = {q[0]} question = {q[1]} i = {i} deleteQuestion = {deleteQuestion} updateQuestion = {updateQuestion}/>
         ))}
       </div>
 
       {isAddQ === false ? <div></div> : 
-                          <QuestionForm qId = {qId} addQuestion = {addQuestion} setAddQ = {setAddQ}/>}
+                          <QuestionForm qId = {qId} addQuestion = {addQuestion} setAddQ = {setAddQ} setQId = {setQId}/>}
       <div className="add-q-btn" onClick = {() => {
         if (!isAddQ) {
           setQId(qId + 1);

peer-prep/src/DataModel/Question.js renamed to peer-prep/src/DataModel/QuestionModel.js

@@ -1,6 +1,6 @@
 // Class that stores and encapsulates the Question and its related fields
 
-class Question {
+class QuestionModel {
     constructor(id, title, description, complexity, category) {
       this.id = id;
       this.title = title;
@@ -36,4 +36,4 @@ class Question {
     }
 }
 
-export default Question;
+export default QuestionModel;

peer-prep/src/Utility/localStorage.js

@@ -7,16 +7,16 @@ function updateLocalQuestionDatabase(updatedDatabase) {
 
 function retrieveQuestionDatabase() {
     let questionDatabase = new QuestionDatabase();
+    console.log(localStorage.getItem("questions"));
     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())
+        localStorage.setItem("questions", JSON.stringify([]))
     };
 }