lolpee69 / app.js

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