EditQuiz.js

import React, { useState, useEffect } from 'react';
import axios from 'axios';
import { useNavigate, useParams } from 'react-router-dom';

const EditQuiz = () => {
  const { id } = useParams(); // Get ID from URL
  const navigate = useNavigate();
  const [title, setTitle] = useState('');
  const [questions, setQuestions] = useState([]);

  // Fetch the existing quiz data
  useEffect(() => {
    const fetchQuiz = async () => {
      const user = JSON.parse(localStorage.getItem('userInfo'));
      const config = { headers: { Authorization: `Bearer ${user.token}` } };
      try {
        const { data } = await axios.get(`https://studysync-backend-gnzb.onrender.com/api/quizzes/${id}`, config);
        setTitle(data.title);
        setQuestions(data.questions);
      } catch (error) {
        console.error(error);
      }
    };
    fetchQuiz();
  }, [id]);

  // Handle Input Changes (Same as CreateQuiz)
  const handleQuestionTextChange = (index, value) => {
    const newQuestions = [...questions];
    newQuestions[index].questionText = value;
    setQuestions(newQuestions);
  };

  const handleOptionChange = (qIndex, oIndex, value) => {
    const newQuestions = [...questions];
    newQuestions[qIndex].options[oIndex] = value;
    setQuestions(newQuestions);
  };

  const handleCorrectOptionChange = (qIndex, value) => {
    const newQuestions = [...questions];
    newQuestions[qIndex].correctOption = parseInt(value);
    setQuestions(newQuestions);
  };

  const addQuestion = () => {
    setQuestions([...questions, { questionText: '', options: ['', '', '', ''], correctOption: 0 }]);
  };

  // Submit Updates
  const handleUpdate = async (e) => {
    e.preventDefault();
    const user = JSON.parse(localStorage.getItem('userInfo'));
    try {
      const config = { headers: { Authorization: `Bearer ${user.token}` } };
      await axios.put(`const API_URL = "https://studysync-backend-gnzb.onrender.com";/api/quizzes/${id}`, { title, questions }, config);
      alert('Quiz Updated Successfully!');
      navigate('/quizzes');
    } catch (error) {
      alert('Update failed');
    }
  };

  return (
    <div style={{ padding: '40px', maxWidth: '800px', margin: '0 auto' }}>
      <h1>Edit Quiz</h1>
      
      <div style={{ marginBottom: '20px' }}>
        <label>Title:</label>
        <input 
            type="text" 
            value={title}
            onChange={(e) => setTitle(e.target.value)}
            style={{ width: '100%', padding: '10px' }}
        />
      </div>

      <hr />

      {questions.map((q, qIndex) => (
        <div key={qIndex} style={{ border: '1px solid #ddd', padding: '20px', marginBottom: '20px', borderRadius: '10px' }}>
          <h3>Question {qIndex + 1}</h3>
          <input 
            type="text" 
            value={q.questionText}
            onChange={(e) => handleQuestionTextChange(qIndex, e.target.value)}
            style={{ width: '100%', marginBottom: '10px', padding: '10px' }}
          />
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '10px' }}>
            {q.options.map((opt, oIndex) => (
              <input 
                key={oIndex}
                type="text" 
                value={opt}
                onChange={(e) => handleOptionChange(qIndex, oIndex, e.target.value)}
                style={{ padding: '8px' }}
              />
            ))}
          </div>
          <div style={{ marginTop: '10px' }}>
            <label>Correct Answer: </label>
            <select 
                value={q.correctOption} 
                onChange={(e) => handleCorrectOptionChange(qIndex, e.target.value)}
            >
              <option value={0}>Option 1</option>
              <option value={1}>Option 2</option>
              <option value={2}>Option 3</option>
              <option value={3}>Option 4</option>
            </select>
          </div>
        </div>
      ))}

      <button onClick={addQuestion} style={{ marginRight: '10px', padding: '10px' }}>+ Add Question</button>
      <button onClick={handleUpdate} style={{ padding: '10px 20px', backgroundColor: 'blue', color: 'white', border: 'none' }}>
        Save Changes
      </button>
    </div>
  );
};

export default EditQuiz;