Simida- Assignment 3

App.js

import React, { Component } from "react";
import {
  Route,
  BrowserRouter,
  NavLink,
  Switch,
  Redirect,
} from "react-router-dom";
import Courses from "./containers/Courses/Courses";
import Users from "./containers/Users/Users";
import "./App.css";

class App extends Component {
  render() {
    const question = (
      <ol style={{ textAlign: "left" }}>
        <li>
          Add Routes to load "Users" and "Courses" on different pages (by
          entering a URL, without Links)
        </li>
        <li>
          Add a simple navigation with two links :- One leading to "Users", one
          leading to "Courses"
        </li>
        <li>
          Make the courses in "Courses" clickable by adding a link and load the
          "Course" component in the place of "Courses" (without passing any data
          for now)
        </li>
        <li>Pass the course ID to the "Course" page and output it there</li>
        <li>
          Pass the course title to the "Course" page - pass it as a param or
          score bonus points by passing it as query params (you need to manually
          parse them though!)
        </li>
        <li>Load the "Course" component as a nested component of "Courses"</li>
        <li>Add a 404 error page and render it for any unknown routes</li>
        <li>
          Redirect requests to /all-courses to /courses (:- Your "Courses" page)
        </li>
      </ol>
    );
    return (
      <BrowserRouter>
        <div className="App">
          <header>
            <nav>
              <ul>
                <li>
                  <NavLink to="/" exact>
                    Home
                  </NavLink>
                </li>
                <li>
                  <NavLink
                    to={{
                      pathname: "/users",
                      hash: "#users",
                      search: "?quick-users=true",
                    }}
                  >
                    Users
                  </NavLink>
                </li>
                <li>
                  <NavLink
                    to={{
                      pathname: "/courses",
                      hash: "#courses",
                      search: "?quick-courses=true",
                    }}
                  >
                    Courses
                  </NavLink>
                </li>
              </ul>
            </nav>
          </header>

          <Switch>
            <Route path="/courses" component={Courses} />
            <Route path="/users" exact component={Users} />
            <Route
              path="/"
              exact
              render={() => {
                return question;
              }}
            />
            <Redirect from="/all-courses" to="/courses" />
            <Route render={() => <h1>404 - Page Not Found</h1>} />
          </Switch>
        </div>
      </BrowserRouter>
    );
  }
}

export default App;

Course.js

import React, { Component } from "react";
import { Route, withRouter } from "react-router-dom";

class Course extends Component {
  state = {
    loadedCourse: null,
    title: "",
    redirectMain: false,
  };

  componentWillMount() {
    this.setState({ loadedCourse: this.props.match });
    this.loadedData();
  }

  componentDidMount() {
    this.loadedData();
  }

  componentDidUpdate() {
    this.loadedData();
  }

  loadedData = () => {
    if (this.props.match.params.id) {
      if (
        !this.state.loadedCourse ||
        (this.state.loadedCourse &&
          this.state.loadedCourse.params.id !== this.props.match.params.id)
      ) {
        this.setState({ loadedCourse: this.props.match });
        const query = new URLSearchParams(this.props.location.search);
        query.forEach((param) => this.setState({ title: param }));
      }
    }
  };

  render() {
    return (
      <div>
        <h1>{this.state.title}</h1>
        <p>
          You selected the Course with ID: {this.state.loadedCourse.params.id}
        </p>
      </div>
    );
  }
}

export default withRouter(Course);

Courses.js

import React, { Component } from "react";
import Course from "../Course/Course";
import { Route, Link, useLocation } from "react-router-dom";
import "./Courses.css";

class Courses extends Component {
  state = {
    courses: [
      { id: 1, title: " HTML  " },
      { id: 2, title: " CSS " },
      { id: 3, title: " Javascript" },
    ],
    showCourse: true,
    location: null,
  };

  contentHandler = () => {
    this.setState((prevState) => {
      return {
        showCourse: !prevState.showCourse,
      };
    });
  };

  render() {
    let theCourse = this.state.courses.map((course) => {
      let quePrams = `?title=${course.title}`;
      return (
        <Link
          to={{
            pathname: "/courses/" + course.id,
            search: quePrams,
          }}
          key={course.id}
          onClick={this.contentHandler}
        >
          <article className="Course">{course.title}</article>
        </Link>
      );
    });

    let headerCheck = null;

    if (this.state.showCourse) {
      headerCheck = (
        <div>
          <h1>Amazing Courses</h1>
          <section className="Courses">{theCourse}</section>
        </div>
      );
    }

    return (
      <div>
        {headerCheck}
        <Route path={"/courses/:id"} exact component={Course} />
      </div>
    );
  }
}

export default Courses;

Users.js

import React, { Component } from 'react';

class Users extends Component {
    render () {
        return (
            <div>
                <h1>The Users Page</h1>
            </div>
        );
    }
}

export default Users;