imports and links on App.js and index.js

client/src/App.js

@@ -1,18 +1,28 @@
-import React, { useState } from 'react';
+import React, { useState } from "react";
 
-import SavedList from './Movies/SavedList';
+import SavedList from "./Movies/SavedList";
+
+import MovieList from "./Movies/MovieList";
+
+import Movie from "./Movies/Movie";
+
+import { Route } from "react-router-dom";
 
 const App = () => {
-  const [savedList, setSavedList] = useState( [] );
+  const [savedList, setSavedList] = useState([]);
 
   const addToSavedList = movie => {
-    setSavedList( [...savedList, movie] );
+    setSavedList([...savedList, movie]);
   };
 
   return (
     <div>
       <SavedList list={savedList} />
-      <div>Replace this Div with your Routes</div>
+      <Route exact path="/" component={MovieList} />
+      <Route
+        path={"/movies/:id"}
+        render={props => <Movie {...props} addToSavedList={addToSavedList} />}
+      />
     </div>
   );
 };

client/src/Movies/Movie.js

@@ -1,57 +1,43 @@
-import React, { useState, useEffect } from 'react';
-import axios from 'axios';
+import React, { useState, useEffect } from "react";
+import axios from "axios";
+import MovieCard from "./MovieCard";
+
+const Movie = props => {
+  const [movie, setMovie] = useState();
 
-const Movie = (props) => {
-  const [movie, setMovie] = useState({});
-
   useEffect(() => {
-    const id = 1;
+    const id = props.match.params.id;
     // change ^^^ that line and grab the id from the URL
     // You will NEED to add a dependency array to this effect hook
 
-       axios
-        .get(`http://localhost:5000/api/movies/${id}`)
-        .then(response => {
-          setMovie(response.data);
-        })
-        .catch(error => {
-          console.error(error);
-        });
+    axios
+      .get(`http://localhost:5000/api/movies/${id}`)
+      .then(response => {
+        setMovie(response.data);
+      })
+      .catch(error => {
+        console.error(error);
+      });
+  }, [props.match.params.id]);
 
-  },[]);
-
-  // Uncomment this only when you have moved on to the stretch goals
-  // const saveMovie = () => {
-  //   const addToSavedList = props.addToSavedList;
-  //   addToSavedList(movie)
-  // }
+  //  Uncomment this only when you have moved on to the stretch goals
+  const saveMovie = () => {
+    const addToSavedList = props.addToSavedList;
+    addToSavedList(movie);
+  };
 
   if (!movie) {
     return <div>Loading movie information...</div>;
   }
 
-  const { title, director, metascore, stars } = movie;
   return (
     <div className="save-wrapper">
-      <div className="movie-card">
-        <h2>{title}</h2>
-        <div className="movie-director">
-          Director: <em>{director}</em>
-        </div>
-        <div className="movie-metascore">
-          Metascore: <strong>{metascore}</strong>
-        </div>
-        <h3>Actors</h3>
-
-        {stars.map(star => (
-          <div key={star} className="movie-star">
-            {star}
-          </div>
-        ))}
+      <MovieCard key={movie.id} movie={movie} />
+      <div className="save-button" onClick={saveMovie}>
+        Save
       </div>
-      <div className="save-button">Save</div>
     </div>
   );
-}
+};
 
 export default Movie;

client/src/Movies/MovieCard.js

@@ -1,7 +1,24 @@
-import React from 'react';
+import React from "react";
 
 const MovieCard = props => {
-  return;
+  return (
+    <div className="movie-card">
+      <h2>{props.movie.title}</h2>
+      <div className="movie-director">
+        Director: <em>{props.movie.director}</em>
+      </div>
+      <div className="movie-metascore">
+        Metascore: <strong>{props.movie.metascore}</strong>
+      </div>
+      <h3>Actors</h3>
+
+      {props.movie.stars.map(star => (
+        <div key={star} className="movie-star">
+          {star}
+        </div>
+      ))}
+    </div>
+  );
 };
 
 export default MovieCard;

client/src/Movies/MovieList.js

@@ -1,52 +1,34 @@
-import React, { useState, useEffect } from 'react';
-import axios from 'axios';
+import React, { useState, useEffect } from "react";
+import MovieCard from "./MovieCard";
+import { Link } from "react-router-dom";
+import axios from "axios";
 
 const MovieList = props => {
-  const [movies, setMovies] = useState([])
+  const [movies, setMovies] = useState([]);
   useEffect(() => {
     const getMovies = () => {
       axios
-        .get('http://localhost:5000/api/movies')
+        .get("http://localhost:5000/api/movies")
         .then(response => {
           setMovies(response.data);
         })
         .catch(error => {
-          console.error('Server Error', error);
+          console.error("Server Error", error);
         });
-    }
-    
+    };
+
     getMovies();
   }, []);
-  
+
   return (
     <div className="movie-list">
       {movies.map(movie => (
-        <MovieDetails key={movie.id} movie={movie} />
-      ))}
-    </div>
-  );
-}
-
-function MovieDetails({ movie }) {
-  const { title, director, metascore, stars } = movie;
-  return (
-    <div className="movie-card">
-      <h2>{title}</h2>
-      <div className="movie-director">
-        Director: <em>{director}</em>
-      </div>
-      <div className="movie-metascore">
-        Metascore: <strong>{metascore}</strong>
-      </div>
-      <h3>Actors</h3>
-
-      {stars.map(star => (
-        <div key={star} className="movie-star">
-          {star}
-        </div>
+        <Link to={`/movies/${movie.id}`} key={movie.id}>
+          <MovieCard key={movie.id} movie={movie} />
+        </Link>
       ))}
     </div>
   );
-}
+};
 
 export default MovieList;

client/src/Movies/SavedList.js

@@ -1,12 +1,19 @@
-import React from 'react';
+import React from "react";
+import { NavLink } from "react-router-dom";
 
 const SavedList = props => (
   <div className="saved-list">
     <h3>Saved Movies:</h3>
     {props.list.map(movie => (
-      <span className="saved-movie">{movie.title}</span>
+      <NavLink to={`/movies/${movie.id}`} key={movie.id}>
+        <span className="saved-movie" key={movie.id}>
+          {movie.title}
+        </span>
+      </NavLink>
     ))}
-    <div className="home-button">Home</div>
+    <NavLink to="/">
+      <div className="home-button">Home</div>
+    </NavLink>
   </div>
 );
 

client/src/index.css

@@ -5,6 +5,11 @@ body {
   background-color: #f2f2f2;
 }
 
+a {
+  text-decoration: none;
+  color: darkslategray;
+}
+
 .movie-card {
   background-color: #fff;
   border: 0;

client/src/index.js

@@ -1,7 +1,13 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
+import React from "react";
+import ReactDOM from "react-dom";
+import { BrowserRouter as Router } from "react-router-dom";
 
-import './index.css';
-import App from './App';
+import "./index.css";
+import App from "./App";
 
-ReactDOM.render(<App />, document.getElementById('root'));
+ReactDOM.render(
+  <Router>
+    <App />
+  </Router>,
+  document.getElementById("root")
+);