Exercise: React Router

Objective#

Your objective is to add home and film routes to your react project. Additional goals will be to add filter functionality to the films page to filter by director.

Getting Started#

This is part 5 of TrueCoders' React Exercise Series.

We'll be in the same react repository that you worked in for part 4.

Steps#

React Series Part 5 has two parts with multiple exercises each.

Part 1: Setting up React Router with two pages, Home and Films.
Part 2: Adding filter functionality to the Films list for director, and showing films stats based on the filtered list of films

Part 1#

This section covers setting up React Router with two pages, Home and Films.

Exercise 1: Restructure Project Files#

To clear space for React Router to be in App.jsx, move your existing code from there to a specific page component.

Create a new folder in src/ called pages/
Within pages/, create a new file called home.page.jsx
Copy the contents from App.jsx into home.page.jsx
Change the component name from App to HomePage
Remove the FilmsList component from the HomePage return statement (it will be it's own page component later 😉)

Your HomePage component should resemble:

import React, { useState } from "react";

export function HomePage() {
  const [text, setText] = useState("");
  const [list, setList] = useState(["ready", "set", "GO"]);

  function onSubmit(event) {
    event.preventDefault();

    let newList = [...list, text];
    setList(newList);
    setText("");
  }

  return (
    <div>
      <h1>Learning React</h1>

      <form onSubmit={onSubmit}>
        <input
          type="text"
          name="listitem"
          id="listitem"
          value={text}
          onChange={(e) => setText(e.target.value)}
        />
        <button type="submit">Add</button>
      </form>

      <ul>
        {list.map((item, idx) => {
          return <li key={idx}>{item}</li>;
        })}
      </ul>
    </div>
  );
}

Exercise 2: Create a Films Page#

Convert FilmsList to a page component.

Create a new file in pages/ called films.page.jsx
Copy the contents of components/FilmsList.jsx into films.page.jsx
Rename FilmsList to FilmsPage
Add to the return statement
- wrap the ul in a div
- add an h1 element that says "Studio Ghibli Films"

Your FilmsPage should resemble:

import React, { useState, useEffect } from "react";

export function HomePage() {
  const [list, setList] = useState([]);

  function getFilms() {
    fetch("https://ghibliapi.herokuapp.com/films")
      .then((res) => res.json())
      .then((films) => setList(films))
      .catch((err) => console.error(err));
  }

  useEffect(() => {
    getFilms();
  }, []);

  return (
    <div>
      <h1>Studio Ghibli Films</h1>
      <ul>
        {list.map((film) => {
          return <li key={film.id}>{film.title}</li>;
        })}
      </ul>
    </div>
  );
}

Exercise 3: Export Pages#

As a pattern, you may see index.js files used as single entry points for module exports. Although not required, that is what you will follow moving forward.

Create an index.js file in pages/
Import HomePage and FilmsPage
Export an object that contains both HomePage and FilmsPage by default

Your index.js file should resemble:

import { HomePage } from "./home.page";
import { FilmsPage } from "./films.page";

export { HomePage, FilmsPage };

Exercise 4: Setup React Router#

Setup React Router in App.jsx.

Use npm to install react-router-dom (from your terminal)
In App.jsx, import BrowserRouter, NavLink, Routes and Route from react-router-dom
Import HomePage and FilmsPage from the index.js file in pages/
Clear the current contents of App
Add a return statement that:
- returns BrowserRouter
- with Routes rendered as a child of BrowserRouter
- with two Route components
  - HomePage should be rendered for "/"
  - FilmsPage should be rendered for "films"
Add a nav inside the BrowserRouter above the Routes
- with a ul of two li
- each li should contain a NavLink
- match one NavLink's to prop to "/", and give it text that displays "Home"
- match the other NavLink's to prop to "films", and give it text that displays "Films"

Part 2#

This section covers adding filter functionality to the Films list by director.

Exercise 1: Setup Filter Elements#

Open films.page.jsx.

Declare another piece of state, searchDirector and setSearchDirector, that will be destructured from the return of useState("")
Add a form to the return statement beneath the existing h1
Add a div with class name form-group inside of the form
Add a label and select inside of the div.form-group
- set the select's value prop to the searchDirector state
- set the select's onChange prop to a function that calls setSearchDirector and updates searchDirector with the chose option value
- add a single option to the select (for now) with the value set to "" and text content displaying "All"

Exercise 2: Helper Functions for Film Directors#

Create some helper functions that can be used with the Studio Ghibli film data.

Create a new folder in src/ called helpers/
Create a file in helpers/ called film.helpers.js
In film.helpers.js, create and export a function called filterFilmsByDirector
In film.helpers.js, create and export a function called getListOf

Exercise 3: `filterFilmsByDirector`#

The goal of filterFilmsByDirector, as per the name, is to receive list (array) and director (string) parameters, and return a filtered list of films where only the films by a the specified director are included.

For example:

Input:
list - [
        { title: "Castle in the Sky", director: "Hayao Miyazaki" },
        { title: "Grave of the Fireflies", director: "Isao Takahata" },
        { title: "My Neighbor Totoro", director: "Hayao Miyazaki" }
      ]
director - "Hayao Miyazaki"

Output:
[
  { title: "Castle in the Sky", director: "Hayao Miyazaki" },
  { title: "My Neighbor Totoro", director: "Hayao Miyazaki" }
]

Implement filterFilmsByDirector
Once done, import filterFilmsByDirector in films.page.jsx
Call filterFilmsByDirector before your return statement
- pass in list (state) and searchDirector (state) as parameters
- assign the result to a variable called filmsByDirector
In your return statement, change list.map(...) to filmsByDirector.map(...)

Exercise 4: `getListOf`#

The goal of getListOf is to receive list (array) and prop (string) parameters, and return a cumulative list of items including every unique value that exists in the list at the specified property.