App.js
import React, { Component } from "react";
import "./App.css";
class Home extends Component {
BASE_URL = "http://localhost:8001/courses";
state = {
show: false,
data: [],
rating: 1,
};
componentDidMount = () => {
// Write your code here
this.handleGetData();
};
handleGetData = async () => {
// Write your code here
const res = await fetch(this.BASE_URL + "/get");
this.setState({ data: await res.json() });
};
handleApply = async (id) => {
// Write your code here
const res = await fetch(this.BASE_URL + "/enroll/" + id, {
method: "post",
headers: { "Content-Type": "application/json" },
});
const data = await res.json();
alert(data.message);
this.handleGetData();
};
handleRating = (e) => {
// Write your code here
this.setState({ rating: e.target.value });
};
handleAddRating = async (id) => {
// Write your code here
const res = await fetch(this.BASE_URL + "/rating/" + id, {
method: "PATCH",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({ rating: this.state.rating }),
});
const { error } = await res.json();
error && alert(error);
this.handleGetData();
};
handleDrop = async (id) => {
// Write your code here
const res = await fetch(this.BASE_URL + "/drop/" + id, {
method: "DELETE",
headers: { "Content-Type": "application/json" },
});
const data = await res.json();
alert(data.message);
this.handleGetData();
};
render() {
return (
<div className="home">
<header>
<h2>ABC Learning</h2>
</header>
{/* write your code here */}
<div className="cardContainer">
{this.state.data.map((course) => {
const {
_id,
courseName,
courseDept,
description,
isApplied,
isRated,
duration,
noOfRatings,
rating,
} = course;
return (
<div className="card" key={_id}>
<ul>
<div className="header">
<li>{courseName}</li>
<li>{courseDept}</li>
<li>{description}</li>
{isApplied ? (
<li>
{!isRated && (
<li>
Rate:
<select
className="rating"
name="rating"
onChange={this.handleRating}
>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<button
className="rate"
onClick={() => {
this.handleAddRating(_id);
}}
>
Add
</button>
</li>
)}
<button
className="drop"
onClick={() => {
this.handleDrop(_id);
}}
>
Drop Course
</button>
</li>
) : (
<li>
<button
className="btn"
onClick={() => {
this.handleApply(_id);
}}
>
Apply
</button>
</li>
)}
</div>
<div className="footer">
<li>
{duration} hrs . {noOfRatings} Ratings . {rating}/5
</li>
</div>
</ul>
</div>
);
})}
</div>
</div>
);
}
}
export default Home;
