import React, { Component } from 1 react1;
import "./App.css"
class Home extends Component {
url = "http://localhost:8001/courses/"
state = {
show: false,
data:[],
rating:
}
componentDidMount = () => {
this.handleGetData()
}
handleGetData = () => {
fetch(this.url + "get")
.then((res) => res.json())
.then((json) => {
this.setState({ data: json })
})
}
handleApply = async (id) => {
const requestoption = {
method: ’post1,
headers: { ’Content-Type1: 1 application/json’ }
}；
fetch(this.url + 'enroll/' + id, requestoption) •then(() => {
this.handleGetData()
})
};
handleRating = (e) => {
this.setState({ rating: e.target.value })
}
handleAddRating = async (id) => {
const requestoption = {
method: 'PATCH',
headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ rating: this.state.rating }) }
fetch(this.url + "rating/" + id, requestoption)
•then(() => {
this.handleGetData()
})
}
handleDrop = async (id) => {
const requestoption = {
method: 'DELETE',
headers: { 'Content-Type': 'application/json' },
}；
fetch(this.url + "drop/" + id, requestoption)
•then(() => {
this.handleGetData()
})
}
render() {
return (
<div className="home">
<header>
<h2>ABC Learning</h2>
</header>
<div className="cardContainer">
{this.state.data.map(courses => { return (
<div className="card">
<ul>
<div className="header">
<li>{courses.courseName}</li>
<li>{courses.courseDept}</li>
<li>{courses.description}</li>
{courses.isApplied &&
<li>
{!courses.isRated &&
<li>Rate:
<select
className="rating" name="rating" onChange={this.handleRating}>
<option>l</option>
<option>2</option> <option>3</option> <option>4</option> <option>5</option> </select>
<button className="rate" onClick={() => this.handleAddRating(courses._id)}>Add</button>
</li>
}
{courses.isApplied && <button className="drop" onClick={() => this.handleDrop(courses._id)}>Drop Course</button>
~ }
</li>
}
{1 courses.isApplied && <lixbutton className="btn" onClick={() => this.handleApply(courses._id)}>Apply</buttonx/li>
}
</div> <div className="footer">
<li>{courses.duration} hrs .
{courses.noOfRatings} Ratings . {courses.rating}/5</li>
</div>
</ul> </div>
</div>
</div>
)；
}
}
export default Home