Leo Ọládimú

client/package.json

@@ -3,11 +3,11 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "axios": "^0.19.0",
+    "axios": "^0.23.0",
     "react": "^16.9.0",
     "react-dom": "^16.9.0",
     "react-router-dom": "^5.0.1",
-    "react-scripts": "^3.1.1"
+    "react-scripts": "^4.0.3"
   },
   "scripts": {
     "start": "react-scripts start",

client/src/App.js

@@ -10,22 +10,28 @@ import EditMovieForm from './components/EditMovieForm';
 import FavoriteMovieList from './components/FavoriteMovieList';
 
 import axios from 'axios';
+import AddMovieForm from "./components/AddMovieForm";
 
 const App = (props) => {
   const [movies, setMovies] = useState([]);
+  console.log('☃︎', '☠︎', props, movies);
   const [favoriteMovies, setFavoriteMovies] = useState([]);
 
-  useEffect(()=>{
-    axios.get('http://localhost:5000/api/movies')
-      .then(res => {
-        setMovies(res.data);
-      })
-      .catch(err => {
-        console.log(err);
-      });
-  }, []);
-
-  const deleteMovie = (id)=> {
+  // useEffect(() => {
+  //   axios.get('http://localhost:3002/api/movies')
+  //     .then('☠︎', r => {
+  //       setMovies(r.data);
+  //     })
+  //     .catch(err => {
+  //       console.log(err);
+  //     });
+  // }, []);
+
+  const deleteMovie = (id) => {
+    setMovies(
+      movies.filter(
+        movie => movie.id !== Number(id)
+    ));
   }
 
   const addToFavorites = (movie) => {
@@ -35,7 +41,7 @@ const App = (props) => {
   return (
     <div>
       <nav className="navbar navbar-dark bg-dark">
-        <span className="navbar-brand" ><img width="40px" alt="" src="./Lambda-Logo-Red.png"/> HTTP / CRUD Module Project</span>
+        <span className="navbar-brand" ><img width="40px" alt="" src="./Lambda-Logo-Red.png"/> HTTP / CRUD Module Project </span>
       </nav>
 
       <div className="container">
@@ -45,12 +51,17 @@ const App = (props) => {
 
           <Switch>
             <Route path="/movies/edit/:id">
+              <EditMovieForm setMovies = { setMovies } /> 
             </Route>
 
             <Route path="/movies/:id">
               <Movie/>
             </Route>
 
+            <Route path="/movies/add">
+              <AddMovieForm setMovies = { setMovies } />
+            </Route>
+
             <Route path="/movies">
               <MovieList movies={movies}/>
             </Route>
@@ -67,4 +78,3 @@ const App = (props) => {
 
 
 export default App;
-

client/src/components/AddMovieForm.js

@@ -0,0 +1,87 @@
+import React, { useState, useEffect } from 'react';
+import { useParams, useHistory } from 'react-router-dom';
+import { Link } from 'react-router-dom';
+import axios from 'axios';
+
+const AddMovieForm = (props) => {
+console.log(props);
+  const { push } = useHistory();
+
+  useEffect(() => {
+	axios.get(`http://localhost:3002/api/movies/${id}`)
+	.then(res => {
+		setNewMovie(res.data);
+	})
+	.catch(err => console.log(err));
+}, [])
+
+	const [movie, setMovie] = useState({
+		title:'',
+		director:'',
+		genre: '',
+		metascore: 0,
+		description: ''
+	});
+
+	const handleChange = (e) => {
+        setMovie({
+            ...movie,
+            [e.target.name]: e.target.value
+        });
+  }
+
+  const handleSubmit = (e) => {
+		e.preventDefault();
+		axios.post(`http://localhost:3002/api/movies`, movie)
+      .then(res => {
+        props.setMovies(res.data);
+				push(`/movies`);
+      })
+      .catch(err => {
+        console.log(err.response);
+      });
+  };
+
+	const { title, director, genre, metascore, description } = movie;
+
+    return (
+
+        <div className="col">
+            <div className="modal-content">
+                <form onSubmit={handleSubmit}>
+                    <div className="modal-header">										
+					<h4 className="modal-title">Adding <strong>{movie.title}</strong></h4>
+				</div>
+				<div className="modal-body">					
+					<div className="form-group">
+						<label>Title</label>
+						<input value={title} onChange={handleChange} name="title" type="text" className="form-control"/>
+					</div>
+					<div className="form-group">
+						<label>Director</label>
+						<input value={director} onChange={handleChange} name="director" type="text" className="form-control"/>
+					</div>
+					<div className="form-group">
+						<label>Genre</label>
+						<input value={genre} onChange={handleChange} name="genre" type="text" className="form-control"/>
+					</div>
+					<div className="form-group">
+						<label>Metascore</label>
+						<input value={metascore} onChange={handleChange} name="metascore" type="number" className="form-control"/>
+					</div>		
+					<div className="form-group">
+						<label>Description</label>
+						<textarea value={description} onChange={handleChange} name="description" className="form-control"></textarea>
+					</div>
+
+				</div>
+				<div className="modal-footer">			    
+					<input type="submit" className="btn btn-info" value="Save"/>
+					<Link to={`/movies`}><input type="button" className="btn btn-default" value="Cancel"/></Link>
+				</div>
+			</form>
+		</div>
+	</div>);
+}
+
+export default AddMovieForm;

client/src/components/DeleteMovieModal.js

@@ -9,7 +9,7 @@ const DeleteMovieModal = () => {
                         <h4 className="modal-title">Delete Movie</h4>
                         <button type="button" className="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                     </div>
-                    <div className="modal-body">					
+                    <div className="modal-body">		
                         <p>Are you sure you want to delete these records?</p>
                         <p className="text-warning"><small>This action cannot be undone.</small></p>
                     </div>

client/src/components/MovieList.js

@@ -19,10 +19,9 @@ const MovieList = (props)=> {
                     <th></th>
                 </tr>
                 </thead>
-
                 <tbody>
                     {
-                        movies.map(movie=><MovieListItem key={movie.id} movie={movie}/>)
+                        movies.map(movie => <MovieListItem key={movie.id} movie={movie}/>)
                     }
                 </tbody>
             </table>