Que

src/AddQuestion/AddQuestion.jsx

@@ -1,13 +1,14 @@
 import { useDropzone } from 'react-dropzone';
-import { FaTimes } from 'react-icons/fa';
+import { FaArrowLeft, FaTimes } from 'react-icons/fa';
 import { IoCloudUploadOutline } from 'react-icons/io5';
 import './AddQuestion.css';
 import { useEffect, useState } from 'react';
 import axios from 'axios';
 import AlertModal from '../AlertModel/AlertModel';
 import { useNavigate } from 'react-router-dom';
+import PropTypes from 'prop-types';
 
-const AddQuestion = () => {
+const AddQuestion = ({ questionData, onBack }) => {
   const navigate = useNavigate();
   const [isFlex, setIsFlex] = useState(true);
   const [tags, setTags] = useState([]);
@@ -31,12 +32,30 @@ const AddQuestion = () => {
   const [divTag, setDivTag] = useState([]);
   const [images, setImages] = useState([]);
 
+  useEffect(() => {
+    if (questionData) {
+      // Populate form with existing data
+      setHeading(questionData.heading || '');
+      setDescription(questionData.description || '');
+      setDifficultyLevel(questionData.difficultyLevel || '');
+      setMarks(questionData.marks || '');
+      setOption(questionData.option || '');
+      setMcqOptions(questionData.mcqOptions || ['']);
+      setMcqAnswer(questionData.mcqAnswer || '');
+      setHours(questionData.expectedTime?.hours || '');
+      setMinutes(questionData.expectedTime?.minutes || '');
+      setTags(questionData.tags || []);
+      setDivTag(questionData.tags || []);
+    }
+  }, [questionData]);
+
   useEffect(() => {
     document.title = 'Add Questions | EduWiz';
   }, []);
 
   useEffect(() => {
     setExpectedTime({ hours, minutes });
+    // console.log(expectedTime);
   }, [hours, minutes]);
 
   const onDrop = (acceptedFiles) => {
@@ -130,8 +149,15 @@ const AddQuestion = () => {
     }
     setLoading(true);
     const teacherId = localStorage.getItem('teacherId');
+
     try {
-      const response = await axios.post('http://localhost:5000/question/addQuestion', {
+      const endpoint = questionData
+        ? `http://localhost:5000/question/updateQuestion/${questionData._id}`
+        : 'http://localhost:5000/question/addQuestion';
+
+      const method = questionData ? 'put' : 'post';
+
+      const response = await axios[method](endpoint, {
         teacherId,
         heading,
         description,
@@ -143,10 +169,11 @@ const AddQuestion = () => {
         expectedTime,
         divTag,
       });
+
       if (response.status === 200) {
         setModalIsError(false);
         setModalIsOpen(true);
-        setModalMessage(response.data.message);
+        setModalMessage(questionData ? 'Question updated successfully!' : 'Question added successfully!');
       }
     } catch (error) {
       setModalIsError(true);
@@ -178,9 +205,15 @@ const AddQuestion = () => {
   return (
     <div className="add-question-container-display">
       <div className="add-question-container">
+        <button
+          onClick={onBack}
+          className="mb-4 bg-gray-200 hover:bg-gray-300 px-4 py-2 rounded-md flex items-center gap-2 absolute top-16 left-16 hover:underline"
+        >
+          <FaArrowLeft /> Back to Questions
+        </button>
         <div className="add-question-form">
           <center>
-            <div className="add-question-heading">Question Upload</div>
+            <div className="add-question-heading">{questionData ? 'Edit Question' : 'Add Question'}</div>
           </center>
           <form
             onSubmit={(e) => {
@@ -194,9 +227,8 @@ const AddQuestion = () => {
                   type="text"
                   placeholder="Enter Question Heading:"
                   required
-                  onChange={(e) => {
-                    setHeading(e.target.value);
-                  }}
+                  value={heading}
+                  onChange={(e) => setHeading(e.target.value)}
                 />
               </div>
             </center>
@@ -206,6 +238,7 @@ const AddQuestion = () => {
                 <textarea
                   placeholder="Enter Question Description:"
                   required
+                  value={description}
                   onChange={(e) => {
                     setDescription(e.target.value);
                   }}
@@ -219,6 +252,7 @@ const AddQuestion = () => {
                   <div className="add-question-input-container">
                     <select
                       required
+                      value={difficultyLevel}
                       onChange={(e) => {
                         setDifficultyLevel(e.target.value);
                       }}
@@ -241,6 +275,7 @@ const AddQuestion = () => {
                       type="number"
                       placeholder="Enter Marks:"
                       required
+                      value={marks}
                       onChange={(e) => {
                         setMarks(e.target.value);
                       }}
@@ -259,6 +294,7 @@ const AddQuestion = () => {
                         handleMCQ(e);
                       }}
                       required
+                      value={mcqOptions}
                     >
                       <option selected>Select Question Type</option>
                       <option value="mcq">MCQ</option>
@@ -320,6 +356,7 @@ const AddQuestion = () => {
                           onChange={(e) => {
                             setHours(e.target.value);
                           }}
+                          value={hours}
                           required
                         />
                       </div>
@@ -389,6 +426,7 @@ const AddQuestion = () => {
                   onChange={(e) => {
                     setMcqAnswer(e.target.value);
                   }}
+                  value={mcqAnswer}
                   required
                 />
               </div>
@@ -456,7 +494,19 @@ const AddQuestion = () => {
             </div>
             <center>
               <div className="add-question-input-container">
-                <input type="submit" value={loading ? 'Adding...' : 'Add Question'} disabled={loading} />
+                <input
+                  type="submit"
+                  value={
+                    loading
+                      ? questionData
+                        ? 'Updating...'
+                        : 'Adding...'
+                      : questionData
+                        ? 'Update Question'
+                        : 'Add Question'
+                  }
+                  disabled={loading}
+                />
               </div>
             </center>
           </form>
@@ -466,6 +516,7 @@ const AddQuestion = () => {
         isOpen={modalIsOpen}
         onClose={() => {
           setModalIsOpen(false);
+          if (!modalIsError) onBack();
           navigate('/questions-upload');
         }}
         isError={modalIsError}
@@ -475,4 +526,27 @@ const AddQuestion = () => {
   );
 };
 
+AddQuestion.propTypes = {
+  questionData: PropTypes.shape({
+    _id: PropTypes.string,
+    heading: PropTypes.string,
+    description: PropTypes.string,
+    difficultyLevel: PropTypes.string,
+    marks: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    option: PropTypes.string,
+    mcqOptions: PropTypes.arrayOf(PropTypes.string),
+    mcqAnswer: PropTypes.string,
+    expectedTime: PropTypes.shape({
+      hours: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+      minutes: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    }),
+    tags: PropTypes.arrayOf(PropTypes.string),
+  }),
+  onBack: PropTypes.func.isRequired,
+};
+
+AddQuestion.defaultProps = {
+  questionData: null,
+};
+
 export default AddQuestion;

src/App.jsx

@@ -16,7 +16,7 @@ import UploadOmr from './UploadOMR/UploadOmr.jsx';
 import SubmitPage from './Submit/SubmitPage.jsx';
 import IHaveAPasscode from './IHaveAPasscode/IHaveAPasscode.jsx';
 import QuestionsUpload from './QuestionsUpload/QuestionsUpload.jsx';
-import AddQuestion from './AddQuestion/AddQuestion.jsx';
+// import AddQuestion from './AddQuestion/AddQuestion.jsx';
 
 const App = () => {
   const [isAuthenticated, setIsAuthenticated] = useState(false);
@@ -76,7 +76,7 @@ const App = () => {
           <Route path="/upload-omr" element={<UploadOmr />} />
           <Route path="/submit" element={<SubmitPage />} />
           <Route path="/questions-upload" element={<QuestionsUpload />} />
-          <Route path="/add-question" element={<AddQuestion />} />
+          {/* <Route path="/add-question" element={<AddQuestion />} /> */}
           <Route path="/profile" element={<Profile />} />
         </Route>
       )}

src/QuestionsUpload/QuestionsUpload.css

@@ -82,9 +82,17 @@
 .dark .questionupload-hr {
   color: #ffffff4b;
 }
+.question-upload-main-div {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-right: 20px;
+}
+.question_uploadfirst_hr {
+  transform: translateX(-10px);
+}
 .question-upload-marks {
-  position: absolute;
-  top: 15px;
+  top: 60px;
   right: 20px;
   background-color: rgba(0, 255, 255, 0.253);
   color: #1e3a8a;