// src/Home.js

import Banner from "./Banner";
import Category from "./Category";
import requests from "./requests";

const categories = [
  { title: "Now Playing", fetchUrl: requests.fetchNowPlaying },
  { title: "Popular", fetchUrl: requests.fetchPopular },
  { title: "Top Rated", fetchUrl: requests.fetchTopRated },
  { title: "Upcoming", fetchUrl: requests.fetchUpcoming },
];

const Home = () => {
  return (
    <div>
      <Banner fetchUrl={requests.fetchTrending} />
      {categories.map((category) => (
        <Category
          key={category.title}
          title={category.title}
          fetchUrl={category.fetchUrl}
        />
      ))}
    </div>
  );
};

export default Home;

// src/App.js

import { BrowserRouter as Router, Route } from "react-router-dom";
import Details from "./Details";
import Home from "./Home";

const App = () => {
  return (
    <Router>
      <header
        style=
      >
        <h1>React Workshop</h1>
        <Search />
      </header>

      <Route path="/movies/:id">
        <Details />
      </Route>

      <Route path="/">
        <Home />
      </Route>
    </Router>
  );
};

// src/App.js

const App = () => {
  return (
    <Router>
      ...
      <Switch>
        ...
      </Switch>
    </Router>
  );
};

// src/Movie.js

import { Link } from "react-router-dom";

const Movie = (props) => {
  return (
    <Link to={`/movies/${props.id}`} style=>
      <img
        style=
        src={props.poster_path}
        alt={props.title}
      />
      <h3>{props.title}</h3>
    </Link>
  );
};

// src/Details.js
import { useParams } from "react-router";

const Details = () => {
  const { id } = useParams();

  return <h1>{id}</h1>;
};

export default Details;

// src/Search.js

import { useHistory } from "react-router";

const Search = () => {
  const history = useHistory();

  async function fetchSearchResults() {
    if (query) {
      const response = await axios.get(requests.fetchQuery(query));
      history.push({
        pathname: "/search",
        search: `?q=${query}`,
        state: { movies: response.data.results },
      });
      setQuery("");
    }
  }
};

// src/Results.js

import { useLocation } from "react-router";
import Movie from "./Movie";

const Results = () => {
  const {
    state: { movies },
  } = useLocation();

  return (
    <div style=>
      {movies.map((movie) => (
        <Movie
          key={movie.id}
          id={movie.id}
          title={movie.title || movie.name}
          poster_path={movie.poster_path}
        />
      ))}
    </div>
  );
};

export default Results;

// src/App.js

import Results from "./Results";

const App = () => {
  return (
    ...
    <Route path="/search">
      <Results />
    </Route>
    ... 
  );
};