Add Edit Feature

Author: SinhaVedant

frontend/src/components/editquestionform.tsx

@@ -0,0 +1,62 @@
+import React, { useState } from 'react';
+import { Question } from './questiontable'; // Adjust the import based on your file structure
+
+interface EditQuestionFormProps {
+    question: Question;
+    onUpdate: (updatedQuestion: Question) => void;
+    onClose: () => void;
+}
+
+const EditQuestionForm: React.FC<EditQuestionFormProps> = ({ question, onUpdate, onClose }) => {
+    const [title, setTitle] = useState(question.title);
+    const [description, setDescription] = useState(question.description);
+    const [categories, setCategories] = useState(question.categories);
+    const [complexity, setComplexity] = useState(question.complexity);
+    const [link, setLink] = useState(question.link);
+
+    const handleSubmit = (e: React.FormEvent) => {
+        e.preventDefault();
+        const updatedQuestion = {
+            ...question,
+            title,
+            description,
+            categories,
+            complexity,
+            link,
+        };
+        onUpdate(updatedQuestion);
+        onClose();
+    };
+
+    return (
+        <div className="fixed top-0 left-0 right-0 bottom-0 flex items-center justify-center bg-black bg-opacity-50">
+            <form className="bg-white text-black p-5 rounded flex flex-col space-y-4" onSubmit={handleSubmit}>
+                <h1 className="text-xl font-bold">Edit Question</h1>
+                <label className="flex flex-row gap-4">
+                <span className="text-lg font-semibold">Title:</span>
+                    <input type="text" className="rounded border border-gray-300 p-2" value={title} onChange={(e) => setTitle(e.target.value)} required />
+                </label>
+                <label className="flex flex-row gap-4">
+                <span className="text-lg font-semibold">Description:</span>
+                    <textarea value={description} className="rounded border border-gray-300 p-2" onChange={(e) => setDescription(e.target.value)} required />
+                </label>
+                <label className="flex flex-row gap-4">
+                <span className="text-lg font-semibold">Categories:</span>
+                    <input type="text" className="rounded border border-gray-300 p-2" value={categories} onChange={(e) => setCategories(e.target.value)} required />
+                </label>
+                <label className="flex flex-row gap-4">
+                <span className="text-lg font-semibold">Complexity:</span>
+                    <input type="text" className="rounded border border-gray-300 p-2" value={complexity} onChange={(e) => setComplexity(e.target.value)} required />
+                </label>
+                <label className="flex flex-row gap-4">
+                <span className="text-lg font-semibold">Link:</span>
+                    <input type="url" className="rounded border border-gray-300 p-2" value={link} onChange={(e) => setLink(e.target.value)} required />
+                </label>
+                <button type="submit" className="bg-blue-500 text-white rounded px-2 py-1">Update</button>
+                <button type="button" onClick={onClose} className="bg-blue-500 text-white rounded px-2 py-1">Cancel</button>
+            </form>
+        </div>
+    );
+};
+
+export default EditQuestionForm;

frontend/src/components/questiontable.tsx

@@ -1,4 +1,5 @@
-import React from 'react';
+import React, { useState } from 'react';
+import EditQuestionForm from './editquestionform';
 
 export interface Question {
     id: number;
@@ -18,6 +19,8 @@ interface QuestionTableProps {
 }
 
 const QuestionTable: React.FC<QuestionTableProps> = ({ searchTerm, category, complexity, questions, setQuestions }) => {
+
+    const [editingQuestion, setEditingQuestion] = useState<Question | null>(null);
 
     const filteredQuestions = questions.filter((question) => {
         const matchesSearchTerm = question.title.toLowerCase().includes(searchTerm.toLowerCase());
@@ -30,7 +33,18 @@ const QuestionTable: React.FC<QuestionTableProps> = ({ searchTerm, category, com
         setQuestions((prevQuestions) => prevQuestions.filter(question => question.id !== id));
     };
 
+    const handleUpdate = (updatedQuestion: Question) => {
+        setQuestions((prevQuestions) =>
+            prevQuestions.map(question => (question.id === updatedQuestion.id ? updatedQuestion : question))
+        );
+    };
+
+    const closeEditForm = () => {
+        setEditingQuestion(null);
+    };
+
     return (
+        <div>
         <table className="min-w-full table-auto">
             <thead>
                 <tr>
@@ -57,9 +71,14 @@ const QuestionTable: React.FC<QuestionTableProps> = ({ searchTerm, category, com
                             </a>
                         </td>
                         <td className="border px-4 py-2">
+                        <div className="flex space-x-2">
                             <button onClick={() => handleDelete(question.id)} className="bg-red-500 text-white rounded px-2 py-1">
                                 Delete
                             </button>
+                            <button onClick={() => setEditingQuestion(question)} className="bg-red-500 text-white rounded px-2 py-1">
+                                    Edit
+                            </button>
+                        </div>
                         </td>
                     </tr>
                 ))}
@@ -72,6 +91,14 @@ const QuestionTable: React.FC<QuestionTableProps> = ({ searchTerm, category, com
                 )}
             </tbody>
         </table>
+        {editingQuestion && (
+            <EditQuestionForm 
+                question={editingQuestion} 
+                onUpdate={handleUpdate} 
+                onClose={closeEditForm} 
+            />
+        )}
+    </div>
     );
 };