From f64d2997127f24cb7ebb25b103cae8a20f7e2f33 Mon Sep 17 00:00:00 2001
From: Patrick Dal Gobbo <juandalgobbo@Juans-Air.lan1>
Date: Mon, 23 Mar 2020 19:07:27 -0400
Subject: [PATCH 1/3] wrapped my app

---
 client/src/index.js | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/client/src/index.js b/client/src/index.js
index 9eac967ab4..4251c52b67 100644
--- a/client/src/index.js
+++ b/client/src/index.js
@@ -1,7 +1,12 @@
 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'));
+const rootElement = document.getElementById('root');
+ReactDOM.render(
+<Router><App /></Router>
+, rootElement
+);

From eeb5ac4489349988ce361cc0d30c7319170c1f81 Mon Sep 17 00:00:00 2001
From: Patrick Dal Gobbo <juandalgobbo@Juans-Air.lan1>
Date: Mon, 23 Mar 2020 20:37:07 -0400
Subject: [PATCH 2/3] created link

---
 client/src/App.js              | 8 ++++++--
 client/src/Movies/MovieList.js | 3 +++
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/client/src/App.js b/client/src/App.js
index 740adc7a8a..7a5c10a874 100644
--- a/client/src/App.js
+++ b/client/src/App.js
@@ -1,7 +1,9 @@
 import React, { useState } from 'react';
-
+import { Route, Link } from 'react-router-dom';
 import SavedList from './Movies/SavedList';
 
+
+
 const App = () => {
   const [savedList, setSavedList] = useState( [] );
 
@@ -12,7 +14,9 @@ const App = () => {
   return (
     <div>
       <SavedList list={savedList} />
-      <div>Replace this Div with your Routes</div>
+      <Route path='/'>MovieList</Route>
+      <Route path='/movies/:id'>Movies</Route>
+      
     </div>
   );
 };
diff --git a/client/src/Movies/MovieList.js b/client/src/Movies/MovieList.js
index ab22a906a1..d63f71ea20 100644
--- a/client/src/Movies/MovieList.js
+++ b/client/src/Movies/MovieList.js
@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import axios from 'axios';
+import { Link} from 'react-router-dom';
 
 const MovieList = props => {
   const [movies, setMovies] = useState([])
@@ -21,7 +22,9 @@ const MovieList = props => {
   return (
     <div className="movie-list">
       {movies.map(movie => (
+        <Link to={`/movies/${movie.id}`}>
         <MovieDetails key={movie.id} movie={movie} />
+        </Link>
       ))}
     </div>
   );

From d9dae72e8374827817dd1ee6d14d6d92380b8ccf Mon Sep 17 00:00:00 2001
From: Patrick Dal Gobbo <juandalgobbo@Juans-Air.lan1>
Date: Mon, 23 Mar 2020 21:38:23 -0400
Subject: [PATCH 3/3] mvp

---
 client/src/App.js              | 7 ++++---
 client/src/Movies/Movie.js     | 4 ++--
 client/src/Movies/SavedList.js | 3 +++
 3 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/client/src/App.js b/client/src/App.js
index 7a5c10a874..5aa6648c12 100644
--- a/client/src/App.js
+++ b/client/src/App.js
@@ -1,7 +1,8 @@
 import React, { useState } from 'react';
 import { Route, Link } from 'react-router-dom';
 import SavedList from './Movies/SavedList';
-
+import MovieList from './Movies/MovieList';
+import Movie from './Movies/Movie';
 
 
 const App = () => {
@@ -14,8 +15,8 @@ const App = () => {
   return (
     <div>
       <SavedList list={savedList} />
-      <Route path='/'>MovieList</Route>
-      <Route path='/movies/:id'>Movies</Route>
+      <Route exact path='/' component={MovieList} />
+      <Route path='/movies/:id' component={Movie} />
       
     </div>
   );
diff --git a/client/src/Movies/Movie.js b/client/src/Movies/Movie.js
index 76f5210642..008980e4d1 100644
--- a/client/src/Movies/Movie.js
+++ b/client/src/Movies/Movie.js
@@ -5,7 +5,7 @@ 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
 
@@ -18,7 +18,7 @@ const Movie = (props) => {
           console.error(error);
         });
 
-  },[]);
+  },[props.match.params.id]);
   
   // Uncomment this only when you have moved on to the stretch goals
   // const saveMovie = () => {
diff --git a/client/src/Movies/SavedList.js b/client/src/Movies/SavedList.js
index 2c7d484cac..508eed6bef 100644
--- a/client/src/Movies/SavedList.js
+++ b/client/src/Movies/SavedList.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import { Link } from 'react-router-dom';
 
 const SavedList = props => (
   <div className="saved-list">
@@ -6,7 +7,9 @@ const SavedList = props => (
     {props.list.map(movie => (
       <span className="saved-movie">{movie.title}</span>
     ))}
+    <Link to='/'>
     <div className="home-button">Home</div>
+    </Link>
   </div>
 );