Separate Question ID vs Question Number

Separate to allow for Unique IDs and displaying of question numbers in ascending order

Author: Jai2501

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

@@ -35,7 +35,7 @@ export const Question = ({question, i, deleteQuestion, updateQuestion}) => {
         <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>
+                    <div className={isEdit ? "q-form-id": "q-id"}>#{i + 1}</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>}
@@ -94,7 +94,7 @@ export const Question = ({question, i, deleteQuestion, updateQuestion}) => {
                 }}>Submit</button> </div> : null}
 
         </div>
-        <div className="delete-btn" onClick = {(e) => deleteQuestion(i)}>
+        <div className="delete-btn" onClick = {(e) => deleteQuestion(question.id)}>
             <img src= {delete_icon} alt="" />
         </div>
     </div>

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, setQId}) => {
+export const QuestionForm = ({qId, addQuestion, setAddQ, setQId, questionNumber}) => {
   const [title, setTitle] = useState("");
   const [difficulty, setDifficulty] = useState("");
   const [topic, setTopic] = useState("");
@@ -17,7 +17,7 @@ export const QuestionForm = ({qId, addQuestion, setAddQ, setQId}) => {
     <div className="form-container">
       <form className = "container" onSubmit={handleSubmit(setAddQ, addQuestion)}>
         <div className="q-form-header">
-          <div className="q-form-id">#{qId}</div>
+          <div className="q-form-id">#{questionNumber}</div>
           <input type="text" className="q-form-title q-form-input" 
           placeholder='Question Title' onChange = {
             (e) => setTitle(e.target.value)

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

@@ -75,13 +75,13 @@ export const Questions = () => {
 
     <div className="q-wrapper">
       <div className="accordion">
-        {qs.map((q, i) => (
-          <Question key = {q[0]} question = {q[1]} i = {q[0]} deleteQuestion = {deleteQuestion} updateQuestion = {updateQuestion}/>
+        {qs.map((q, index) => (
+          <Question key = {index} question = {q[1]} i = {index} deleteQuestion = {deleteQuestion} updateQuestion = {updateQuestion}/>
         ))}
       </div>
 
       {isAddQ === false ? <div></div> : 
-                          <QuestionForm qId = {qId} addQuestion = {addQuestion} setAddQ = {setAddQ} setQId = {setQId}/>}
+                          <QuestionForm questionNumber = {Array.from(database.database).length + 1} qId = {qId} addQuestion = {addQuestion} setAddQ = {setAddQ} setQId = {setQId}/>}
       <div className="add-q-btn" onClick = {() => {
         if (!isAddQ) {
           setQId(qId + 1);