lolpee69 / app.js

import axios from "axios"; import React, { useEffect, useState } from "react"; import "./App.css"; function Home() { const [data, setData] = useState([]); const [rating, setRating] = useState(1); const [refresh, setRefresh] = useState(false); // To trigger re-render on data changes // Fetch course data useEffect(() => { const fetchData = async () => { const response = await axios.get("http://localhost:8001/courses/get"); setData(response.data); }; fetchData(); }, [refresh]); // Apply for a course const handleApply = async (id) => { try { const response = await axios.post(`http://localhost:8001/courses/enroll/${id}`); alert("You have successfully enrolled for this course"); setRefresh(!refresh); // Refresh data after applying } catch (error) { alert("Error applying for the course"); } }; // Update rating state on change const handleRating = (event) => { setRating(event.target.value); }; // Add a rating to a course const handleAddRating = async (id) => { try { await axios.patch(`http://localhost:8001/courses/rating/${id}`, { rating: Number(rating)}); setRefresh(!refresh); // Refresh data after rating } catch (error) { alert("Error adding rating"); } }; // Drop a course const handleDrop = async (id) => { try { await axios.delete(`http://localhost:8001/courses/drop/${id}`); setRefresh(!refresh); // Refresh data after dropping } catch (error) { alert("Error dropping the course"); } }; return ( <div className="home"> <header> <h2>ABC Learning</h2> </header> <div className="cardContainer"> {data.map((course) => ( <div className="card" key={course._id}> <ul> <div className="header"> {/* Render course details */} <li data-testid="course-name">{course.courseName}</li> <li data-testid="course-dept">{course.courseDept}</li> <li data-testid="course-description">{course.description}</li> {/* Rating functionality */} <li> <> Rate: <select className="rating" name="rating" data-testid="select-box" value={rating} onChange={handleRating} > <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select> <button className="rate" data-testid="add-rate" onClick={() => handleAddRating(course._id)} > Add </button> </> </li> {/* Drop course button */} <li> <button className="drop" data-testid="drop" onClick={() => handleDrop(course._id)} > Drop Course </button> </li> {/* Apply button */} <li> <button className="btn" data-testid="apply" onClick={() => handleApply(course._id)} > Apply </button> </li> </div> <div className="footer"> {/* Footer contents can go here */} <li data-testid="footer">Course Footer</li> </div> </ul> </div> ))} </div> </div> ); } export default Home;