Scribd Logo
Upload

Welcome to Scribd!

  • 6 views

    A 3

    Uploaded by

    gitok412
    This document contains code for a React component that fetches course data from an API and displays it. It allows users to view course details, apply for courses, rate courses, and drop courses from their enrollments. State is used to manage data loading and form values. Async functions call APIs to get data and submit forms.

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd

    A 3

    Uploaded by

    gitok412
    6 views3 pages
    This document contains code for a React component that fetches course data from an API and displays it. It allows users to view course details, apply for courses, rate courses, and drop courses from their enrollments. State is used to manage data loading and form values. Async functions call APIs to get data and submit forms.

    Original Description:

    app

    Original Title

    a3

    Copyright

    © © All Rights Reserved

    Available Formats

    TXT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    This document contains code for a React component that fetches course data from an API and displays it. It allows users to view course details, apply for courses, rate courses, and drop courses from their enrollments. State is used to manage data loading and form values. Async functions call APIs to get data and submit forms.

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Download as txt, pdf, or txt
    6 views3 pages

    A 3

    Uploaded by

    gitok412
    This document contains code for a React component that fetches course data from an API and displays it. It allows users to view course details, apply for courses, rate courses, and drop courses from their enrollments. State is used to manage data loading and form values. Async functions call APIs to get data and submit forms.

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Download as txt, pdf, or txt
    of 3

    import React, { Component } from 'react';

    import "./App.css"

    class Home extends Component {

    state = {
    show: false,
    data: [],
    rating: 1,
    }
    componentDidMount = () => {
    // Write your code here
    this.handleGetData();
    }

    handleGetData = async () => {


    // Write your code here
    const fetchPromise = await fetch("http://localhost:8001/courses/get");
    const data = await fetchPromise.json();
    this.setState({ data: data, show: true })
    }

    handleApply = async (id) => {


    // Write your code here
    var url = 'http://localhost:8001/courses/enroll/' + id;
    const requestOptions = {
    method: 'post',
    headers: { 'Content-Type': 'application/json' },
    };
    const fetchPromise = await fetch(url, requestOptions)
    const data = await fetchPromise.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
    var url = 'http://localhost:8001/courses/rating/' + id;
    const requestOptions = {
    method: 'PATCH',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
    "rating": this.state.rating
    })
    };
    const Promise = await fetch(url, requestOptions)
    const da = await Promise.json();
    alert(da["message"]);
    this.handleGetData();
    }

    handleDrop = async (id) => {


    // Write your code here
    var url = 'http://localhost:8001/courses/drop/' + id;
    const requestOptions = {
    method: 'DELETE',
    headers: { 'Content-Type': 'application/json' },
    };
    const fetchPromise = await fetch(url, requestOptions)
    const data = await fetchPromise.json();
    alert(data["message"]);
    this.handleGetData();
    }

    render() {
    return (
    <div className="home">
    <header>
    <h2>ABC Learning</h2>
    </header>

    {
    !this.state.show || !this.state.data ? "Fetching DATA" :
    this.state.data.map(
    (course, index) => (
    <div className="cardContainer" key={index}>
    <div className="card">
    <ul>
    <div className="header">
    <li>{course.courseName}</li>
    <li>{course.courseDept}</li>
    <li>{course.description}</li>
    {course.isApplied ?
    (<li>
    {
    !course.isRated &&
    (<li>Rate:
    <select
    className="rating"
    name="rating"
    onChange={(e) => { this.handleRating(e) }}>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    </select>
    <button className="rate"
    onClick={() => {
    this.handleAddRating(this.state.data[index]
    ["_id"]);
    }}> Add</button>
    </li>)
    }
    <button
    className="drop"
    onClick={() => {
    this.handleDrop(this.state.data[index]["_id"]);
    }}>Drop Course</button>
    </li>) :
    (<li>
    <button
    className="btn"
    onClick={() => {
    this.handleApply(this.state.data[index]["_id"]);
    }}>Apply</button>
    </li>)}
    </div>
    <div className="footer">
    <li>{course.duration} hrs . {course.noOfRatings} Ratings .
    {course.rating}/5</li>
    </div>
    </ul>
    </div>
    </div >
    )
    )
    }

    </div>
    );
    }
    }

    export default Home;

    You might also like