react.js code

import React, { useState, useEffect } from 'react';
import axios from 'axios';

const API_BASE_URL = 'http://localhost:8081/api'; // Replace with your backend URL

function App() {
const [courses, setCourses] = useState([]);
const [users, setUsers] = useState([]);
const [enrollments, setEnrollments] = useState([]);
const [newCourse, setNewCourse] = useState({ title: '', description: '', price: 0, instructor: null });
const [newUser, setNewUser] = useState({ fullName: '', email: '', password: '', role: 'STUDENT' });
const [newEnrollment, setNewEnrollment] = useState({ student: null, course: null });
const [publishedCourses, setPublishedCourses] = useState([]);
const [studentEnrollments, setStudentEnrollments] = useState([]);
const [studentIdForEnrollments, setStudentIdForEnrollments] = useState('');

useEffect(() => {
fetchCourses();
fetchUsers();
fetchEnrollments();
fetchPublishedCourses();
}, []);

const fetchCourses = async () => {
try {
const response = await axios.get(${API_BASE_URL}/courses);
setCourses(response.data);
} catch (error) {
console.error('Error fetching courses:', error);
}
};

const fetchUsers = async () => {
try {
const response = await axios.get(${API_BASE_URL}/users);
setUsers(response.data);
} catch (error) {
console.error('Error fetching users:', error);
}
};

const fetchEnrollments = async () => {
try {
const response = await axios.get(${API_BASE_URL}/enrollments);
setEnrollments(response.data);
} catch (error) {
console.error('Error fetching enrollments:', error);
}
};

const fetchPublishedCourses = async () => {
    try {
        const response = await axios.get(`${API_BASE_URL}/courses/published`);
        setPublishedCourses(response.data);
    } catch (error) {
        console.error("Error fetching published courses:", error);
    }
};
const fetchStudentEnrollments = async () => {
    try {
        const response = await axios.get(`<span class="math-inline">\{API\_BASE\_URL\}/enrollments/student/</span>{studentIdForEnrollments}`);
        setStudentEnrollments(response.data);
    } catch (error) {
        console.error("Error fetching student enrollments:", error);
    }
};

const handleCreateCourse = async () => {
try {
await axios.post(${API_BASE_URL}/courses, newCourse);
fetchCourses(); // Refresh course list
setNewCourse({ title: '', description: '', price: 0, instructor: null }); // Clear form
} catch (error) {
console.error('Error creating course:', error);
}
};

const handleRegisterUser = async () => {
try {
await axios.post(${API_BASE_URL}/users/register, newUser);
fetchUsers();
setNewUser({ fullName: '', email: '', password: '', role: 'STUDENT' });
} catch (error) {
console.error('Error registering user:', error);
}
};

const handleEnrollInCourse = async () => {
try {
await axios.post(${API_BASE_URL}/enrollments, newEnrollment);
fetchEnrollments();
setNewEnrollment({ student: null, course: null });
} catch (error) {
console.error('Error enrolling in course:', error);
}
};

const handleStatusUpdate = async (courseId, newStatus) => {
    try {
        await axios.put(`<span class="math-inline">\{API\_BASE\_URL\}/courses/</span>{courseId}/status?status=${newStatus}`);
        fetchCourses(); // Refresh course list
    } catch (error) {
        console.error("Error updating course status:", error);
    }
};

const handleProgressUpdate = async (enrollmentId, newProgress) => {
    try {
        await axios.put(`<span class="math-inline">\{API\_BASE\_URL\}/enrollments/</span>{enrollmentId}/progress?progress=${newProgress}`);
        fetchEnrollments(); // Refresh enrollment list
    } catch (error) {
        console.error("Error updating progress:", error);
    }
};

return (
<div className="App">
<h1>Courses</h1>
<ul>
{courses.map((course) => (
<li key={course.id}>
{course.title} - {course.description} - ${course.price} - Instructor: {course.instructor?.fullName} - Status: {course.status}
<button onClick={() => handleStatusUpdate(course.id, "PUBLISHED")}>Publish</button>
<button onClick={() => handleStatusUpdate(course.id, "ARCHIVED")}>Archive</button>
<button onClick={() => handleStatusUpdate(course.id, "DRAFT")}>Draft</button>
</li>
))}
</ul>

    <h1>Published Courses</h1>
    <ul>
        {publishedCourses.map((course) => (
            <li key={course.id}>
                {course.title} - {course.description} - ${course.price} - Instructor: {course.instructor?.fullName}
            </li>
        ))}
    </ul>

  <h2>Create Course</h2>
  <input type="text" placeholder="Title" value={newCourse.title} onChange={(e) => setNewCourse({ ...newCourse, title: e.target.value })} />
  <input type="text" placeholder="Description" value={newCourse.description} onChange={(e) => setNewCourse({ ...newCourse, description: e.target.value })} />
  <input type="number" placeholder="Price" value={newCourse.price} onChange={(e) => setNewCourse({ ...newCourse, price: parseFloat(e.target.value) })} />
  <button onClick={handleCreateCourse}>Create</button>

  <h1>Users</h1>
  <ul>
    {users.map((user) => (
      <li key={user.id}>
        {user.fullName} - {user.email} - {user.role}
      </li>
    ))}
  </ul>

  <h2>Register User</h2>
  <input type="text" placeholder="Full Name" value={newUser.fullName} onChange={(e) => setNewUser({ ...newUser, fullName: e.target.value })} />
  <input type="email" placeholder="Email" value={newUser.email} onChange={(e) => setNewUser({ ...newUser, email: e.target.value })} />
  <input type="password" placeholder="Password" value={newUser.password} onChange={(e) => setNewUser({ ...newUser, password: e.target.value })} />
  <select value={newUser.role} onChange={(e) => setNewUser({ ...newUser, role: e.target.value })}>
      <option value="STUDENT">Student</option>
      <option value="INSTRUCTOR">Instructor</option>
      <option value="ADMIN">Admin</option>
  </select>
  <button onClick={handleRegisterUser}>Register</button>

  <h1>Enrollments</h1>
  <ul>
    {enrollments.map((enrollment) => (
      <li key={enrollment.id}>
        Student: {enrollment.student?.fullName} - Course: {enrollment.course?.title} - Progress: {enrollment.progress} - Status: {enrollment.status}
          <input type="number" placeholder="Progress" onChange={(e) => handleProgressUpdate(enrollment.id, parseFloat(e.target.value))} />
      </li>
    ))}
  </ul>

  <h2>Enroll in Course</h2>
  <select onChange={(e) => setNewEnrollment({ ...newEnrollment, student: {id: e.target.value} })}>
    <option value="">Select Student</option>
    {users.map((user) => (
      <option key={user.id} value={user.id}>{user.fullName}</option>
    ))}
  </select>
  <select onChange={(e) => setNewEnrollment({ ...newEnrollment, course: {id: e.target.value} })}>
    <option value="">Select Course</option>
    {courses.map((course) => (
      <option key={course.id} value={course.id}>{course.title}</option>
    ))}
  </select>
  <button onClick={handleEnrollInCourse}>Enroll</button>

    <h2>Get Student enrollments</h2>
    <input type="number" placeholder="Student Id" onChange={(e) => setStudentIdForEnrollments(e.target.value)}/>
    <button onClick={fetchStudentEnrollments}>Get Enrollments</button>
    <ul>
        {studentEnroll