Completed Proj

src/App.js

@@ -1,40 +1,43 @@
 import React, { useEffect, useState } from "react";
 
 import { Route, Routes, Navigate } from "react-router-dom";
-import MovieList from './components/MovieList';
-import Movie from './components/Movie';
+import MovieList from "./components/MovieList";
+import Movie from "./components/Movie";
+EditMovieForm;
 
-import MovieHeader from './components/MovieHeader';
+import MovieHeader from "./components/MovieHeader";
 
-import FavoriteMovieList from './components/FavoriteMovieList';
+import FavoriteMovieList from "./components/FavoriteMovieList";
 
-import axios from 'axios';
+import axios from "axios";
+import EditMovieForm from "./components/EditMovieForm";
+import AddMovieForm from "./components/AddMovieForm";
 
 const App = (props) => {
   const [movies, setMovies] = useState([]);
   const [favoriteMovies, setFavoriteMovies] = useState([]);
 
   useEffect(() => {
-    axios.get('http://localhost:9000/api/movies')
-      .then(res => {
+    axios
+      .get("http://localhost:9000/api/movies")
+      .then((res) => {
         setMovies(res.data);
       })
-      .catch(err => {
+      .catch((err) => {
         console.log(err);
       });
   }, []);
 
   const deleteMovie = (id) => {
-  }
+    setMovies(movies.filter((movie) => movie.id != id));
+  };
 
-  const addToFavorites = (movie) => {
-
-  }
+  const addToFavorites = (movie) => {};
 
   return (
     <div>
       <nav className="navbar navbar-dark bg-dark">
-        <span className="navbar-brand" > HTTP / CRUD Module Project</span>
+        <span className="navbar-brand"> HTTP / CRUD Module Project</span>
       </nav>
 
       <div className="container">
@@ -43,12 +46,23 @@ const App = (props) => {
           <FavoriteMovieList favoriteMovies={favoriteMovies} />
 
           <Routes>
-            <Route path="movies/edit/:id" />
+            <Route
+              path="movies/edit/:id"
+              element={<EditMovieForm setMovies={setMovies} />}
+            />
 
-            <Route path="movies/:id" />
+            <Route
+              path="movies/:id"
+              element={<Movie deleteMovie={deleteMovie} />}
+            />
 
             <Route path="movies" element={<MovieList movies={movies} />} />
 
+            <Route
+              path="/movies/add"
+              element={<AddMovieForm setMovies={setMovies} />}
+            />
+
             <Route path="/" element={<Navigate to="/movies" />} />
           </Routes>
         </div>
@@ -57,5 +71,4 @@ const App = (props) => {
   );
 };
 
-
 export default App;

src/components/AddMovieForm.js

@@ -0,0 +1,113 @@
+import React, { useState, useEffect } from "react";
+import { useParams, useNavigate } from "react-router-dom";
+import { Link } from "react-router-dom";
+
+import axios from "axios";
+
+const AddMovieForm = (props) => {
+  const navigate = useNavigate();
+
+  const { setMovies } = props;
+  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:9000/api/movies`, movie)
+      .then((res) => {
+        props.setMovies(res.data);
+        navigate("/movies");
+      })
+      .catch((err) => {
+        console.log(err);
+      });
+  };
+
+  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">
+              Add <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;

src/components/EditMovieForm.js

@@ -1,39 +1,48 @@
-import React, { useState, useEffect } from 'react';
-import { useParams, useNavigate } from 'react-router-dom';
-import { Link } from 'react-router-dom';
+import React, { useState, useEffect } from "react";
+import { useParams, useNavigate } from "react-router-dom";
+import { Link } from "react-router-dom";
 
-import axios from 'axios';
+import axios from "axios";
 
 const EditMovieForm = (props) => {
   const navigate = useNavigate();
+  const { id } = useParams();
 
   const { setMovies } = props;
   const [movie, setMovie] = useState({
     title: "",
     director: "",
     genre: "",
     metascore: 0,
-    description: ""
+    description: "",
   });
 
   const handleChange = (e) => {
     setMovie({
       ...movie,
-      [e.target.name]: e.target.value
+      [e.target.name]: e.target.value,
     });
-  }
+  };
+
+  useEffect(() => {
+    axios
+      .get(`http://localhost:9000/api/movies/${id}`)
+      .then((res) => setMovie(res.data))
+      .catch((err) => console.log(err));
+  }, []);
 
   const handleSubmit = (e) => {
     e.preventDefault();
-    axios.put(`http://localhost:9000/api/movies/${id}`, movie)
-      .then(res => {
+    axios
+      .put(`http://localhost:9000/api/movies/${id}`, movie)
+      .then((res) => {
         setMovies(res.data);
         navigate(`/movies/${movie.id}`);
       })
-      .catch(err => {
+      .catch((err) => {
         console.log(err);
-      })
-  }
+      });
+  };
 
   const { title, director, genre, metascore, description } = movie;
 
@@ -42,38 +51,71 @@ const EditMovieForm = (props) => {
       <div className="modal-content">
         <form onSubmit={handleSubmit}>
           <div className="modal-header">
-            <h4 className="modal-title">Editing <strong>{movie.title}</strong></h4>
+            <h4 className="modal-title">
+              Editing <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" />
+              <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" />
+              <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" />
+              <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" />
+              <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>
+              <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/1`}><input type="button" className="btn btn-default" value="Cancel" /></Link>
+            <Link to={`/movies/1`}>
+              <input type="button" className="btn btn-default" value="Cancel" />
+            </Link>
           </div>
         </form>
       </div>
-    </div>);
-}
+    </div>
+  );
+};
 
 export default EditMovieForm;