Something is off

README.md

@@ -34,7 +34,7 @@ Topics:
 * When a user clicks on a movie card they should be taken to `/movies/{id of movie here}` to see the details for the selected movie.
 * You will need to modify line 13 of `Movie.js` in order to accept the correct id for the movie selected.
 * Add functionality so the `Home` button on the `SavedList` component navigates back to home.
-* You should now be able to navigate back and forth between the individual movies and the home screen.
+** You should now be able to navigate back and forth between the individual movies and the home screen.
 
 ## Stretch Goals.
 

client/src/App.js

@@ -1,18 +1,22 @@
 import React, { useState } from 'react';
-
+import { Route } from 'react-router-dom';
+import Movie from './Movies/Movie';
+//import MovieCard from './Movies/MovieCard';
+import MovieList from './Movies/MovieList';
 import SavedList from './Movies/SavedList';
 
 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' component={Movie} />
     </div>
   );
 };

client/src/Movies/Movie.js

@@ -2,24 +2,26 @@ import React, { useState, useEffect } from 'react';
 import axios from 'axios';
 
 const Movie = (props) => {
-  const [movie, setMovie] = useState({});
-
+  const [movie, setMovie] = useState();
+  console.log('Movie', props, props.match.params.id);
+
   useEffect(() => {
-    const id = 1;
+    const id = props.match.params.id;
+    console.log(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;

client/src/Movies/MovieList.js

@@ -1,5 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import axios from 'axios';
+import { Link } from 'react-router-dom'
+
 
 const MovieList = props => {
   const [movies, setMovies] = useState([])
@@ -14,10 +16,10 @@ const MovieList = props => {
           console.error('Server Error', error);
         });
     }
-    
+
     getMovies();
   }, []);
-  
+
   return (
     <div className="movie-list">
       {movies.map(movie => (
@@ -28,13 +30,19 @@ const MovieList = props => {
 }
 
 function MovieDetails({ movie }) {
+
   const { title, director, metascore, stars } = movie;
   return (
+
     <div className="movie-card">
-      <h2>{title}</h2>
+      <Link to={`/movies/${movie.id}`}>
+        <h2>{title}</h2>
+      </Link>
+
       <div className="movie-director">
         Director: <em>{director}</em>
       </div>
+
       <div className="movie-metascore">
         Metascore: <strong>{metascore}</strong>
       </div>
@@ -46,6 +54,7 @@ function MovieDetails({ movie }) {
         </div>
       ))}
     </div>
+
   );
 }
 

client/src/Movies/SavedList.js

@@ -1,12 +1,13 @@
 import React from 'react';
+import { Link } 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>
     ))}
-    <div className="home-button">Home</div>
+    <Link to='/' className="home-button">Home</Link>
   </div>
 );
 

client/src/index.css

@@ -69,4 +69,5 @@ body {
 .home-button {
   padding: 5px 10px;
   background-color: lightskyblue;
+  text-decoration: none;
 }

client/src/index.js

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