From 276649b05a458f490a3d2495fccd6cdf1ac67140 Mon Sep 17 00:00:00 2001
From: i-guerrero <isaacguerrero@pursuit.org>
Date: Sun, 27 Nov 2022 18:09:43 -0500
Subject: [PATCH 1/7] Add movie route

---
 src/App.js                             |  4 ++++
 src/components/movies/MoviesIndex.js   |  7 ++++++-
 src/components/movies/MoviesNewForm.js | 12 ++++++++++++
 3 files changed, 22 insertions(+), 1 deletion(-)
 create mode 100644 src/components/movies/MoviesNewForm.js

diff --git a/src/App.js b/src/App.js
index 206efa9..5d15b0a 100644
--- a/src/App.js
+++ b/src/App.js
@@ -8,6 +8,8 @@ import Show from "./components/shows/Show";
 import ShowsEditForm from "./components/shows/ShowsEditForm";
 import ShowsIndex from "./components/shows/ShowsIndex";
 import ShowsNewForm from "./components/shows/ShowsNewForm";
+import MoviesIndex from "./components/movies/MoviesIndex";
+import MoviesNewForm from "./components/movies/MoviesNewForm";
 
 function App() {
   return (
@@ -20,6 +22,8 @@ function App() {
           <Route path="/shows/new" element={<ShowsNewForm />} />
           <Route path="/shows/:id" element={<Show />} />
           <Route path="/shows/:id/edit" element={<ShowsEditForm />} />
+          <Route path="/movies" element={<MoviesIndex />} />
+          <Route path="/movies/new" element={<MoviesNewForm />} />
         </Routes>
         <Footer />
       </Router>
diff --git a/src/components/movies/MoviesIndex.js b/src/components/movies/MoviesIndex.js
index 28e9dd7..795ed91 100644
--- a/src/components/movies/MoviesIndex.js
+++ b/src/components/movies/MoviesIndex.js
@@ -1,3 +1,8 @@
 export default function MoviesIndex() {
-  return <p>Movie List</p>;
+  return (
+    <div className="movies-index">
+      <p>Movie List</p>
+      <button>Add a new movie</button>
+    </div>
+  );
 }
diff --git a/src/components/movies/MoviesNewForm.js b/src/components/movies/MoviesNewForm.js
new file mode 100644
index 0000000..c6d5759
--- /dev/null
+++ b/src/components/movies/MoviesNewForm.js
@@ -0,0 +1,12 @@
+import React from "react";
+
+export default function MoviesNewForm() {
+  return (
+    <div>
+      <form>
+        <label for="new-movie">New Movie</label>
+        <input id="new-movie" name="new-movie" type="text" />
+      </form>
+    </div>
+  );
+}

From 6dc64dd11d6c60ed12c0611e22ed336b9388831d Mon Sep 17 00:00:00 2001
From: i-guerrero <isaacguerrero@pursuit.org>
Date: Mon, 28 Nov 2022 17:17:38 -0500
Subject: [PATCH 2/7] Add index of shows, error message, detailed view and
 delete show functionality

---
 src/App.js                              |  4 +++
 src/api/fetch.js                        |  8 +++--
 src/components/common/Footer.js         |  2 +-
 src/components/movies/Movie.js          |  5 +++
 src/components/movies/MovieListing.js   |  5 +++
 src/components/movies/MoviesEditForm.js |  5 +++
 src/components/shows/Show.js            | 30 +++++++++++++++--
 src/components/shows/ShowsIndex.js      | 44 ++++++++++++++++++++++---
 8 files changed, 92 insertions(+), 11 deletions(-)
 create mode 100644 src/components/movies/Movie.js
 create mode 100644 src/components/movies/MovieListing.js
 create mode 100644 src/components/movies/MoviesEditForm.js

diff --git a/src/App.js b/src/App.js
index 5d15b0a..8712325 100644
--- a/src/App.js
+++ b/src/App.js
@@ -10,6 +10,8 @@ import ShowsIndex from "./components/shows/ShowsIndex";
 import ShowsNewForm from "./components/shows/ShowsNewForm";
 import MoviesIndex from "./components/movies/MoviesIndex";
 import MoviesNewForm from "./components/movies/MoviesNewForm";
+import Movie from "./components/movies/Movie";
+import MoviesEditForm from "./components/movies/MoviesEditForm";
 
 function App() {
   return (
@@ -24,6 +26,8 @@ function App() {
           <Route path="/shows/:id/edit" element={<ShowsEditForm />} />
           <Route path="/movies" element={<MoviesIndex />} />
           <Route path="/movies/new" element={<MoviesNewForm />} />
+          <Route path="/movies/:id" element={<Movie />} />
+          <Route path="/movies/:id/edit" element={<MoviesEditForm />} />
         </Routes>
         <Footer />
       </Router>
diff --git a/src/api/fetch.js b/src/api/fetch.js
index cfb057a..2bc2885 100644
--- a/src/api/fetch.js
+++ b/src/api/fetch.js
@@ -1,3 +1,4 @@
+const URL = process.env.REACT_APP_API_BASE_URL;
 // Shows
 
 // Create
@@ -7,17 +8,18 @@ export function createShow(show) {
 
 // Delete
 export function destroyShow(id) {
-  return;
+  const options = { method: "DELETE" };
+  return fetch(`${URL}/shows/${id}`, options);
 }
 
 // Index/Get all
 export function getAllShows() {
-  return;
+  return fetch(`${URL}/shows`).then((response) => response.json());
 }
 
 // Show/Get one
 export function getOneShow(id) {
-  return;
+  return fetch(`${URL}/shows/${id}`).then((response) => response.json());
 }
 
 // Update
diff --git a/src/components/common/Footer.js b/src/components/common/Footer.js
index 14d0023..ed1d77f 100644
--- a/src/components/common/Footer.js
+++ b/src/components/common/Footer.js
@@ -3,7 +3,7 @@ import "./Footer.css";
 export default function Footer() {
   return (
     <footer>
-      <p>ScreenViews. An application created by YOUR_NAME.</p>
+      <p>ScreenViews. An application created by Isaac Guerrero.</p>
     </footer>
   );
 }
diff --git a/src/components/movies/Movie.js b/src/components/movies/Movie.js
new file mode 100644
index 0000000..cfd3846
--- /dev/null
+++ b/src/components/movies/Movie.js
@@ -0,0 +1,5 @@
+import React from "react";
+
+export default function Movie() {
+  return <div></div>;
+}
diff --git a/src/components/movies/MovieListing.js b/src/components/movies/MovieListing.js
new file mode 100644
index 0000000..1bcca53
--- /dev/null
+++ b/src/components/movies/MovieListing.js
@@ -0,0 +1,5 @@
+import React from "react";
+
+export default function MovieListing() {
+  return <div></div>;
+}
diff --git a/src/components/movies/MoviesEditForm.js b/src/components/movies/MoviesEditForm.js
new file mode 100644
index 0000000..71222ae
--- /dev/null
+++ b/src/components/movies/MoviesEditForm.js
@@ -0,0 +1,5 @@
+import React from "react";
+
+export default function MoviesEditForm() {
+  return <div></div>;
+}
diff --git a/src/components/shows/Show.js b/src/components/shows/Show.js
index 263bddf..693ab99 100644
--- a/src/components/shows/Show.js
+++ b/src/components/shows/Show.js
@@ -1,5 +1,6 @@
-import { useState } from "react";
-import { Link, useParams } from "react-router-dom";
+import { useState, useEffect } from "react";
+import { Link, useParams, useNavigate } from "react-router-dom";
+import { getOneShow, destroyShow } from "../../api/fetch";
 
 import "./Show.css";
 
@@ -10,8 +11,31 @@ function Show() {
   const [loadingError, setLoadingError] = useState(false);
 
   const { id } = useParams();
+  let navigate = useNavigate();
 
-  function handleDelete() {}
+  useEffect(() => {
+    getOneShow(id)
+      .then((response) => {
+        setShow(response);
+        if (Object.keys(response) === 0) {
+          setLoadingError(true);
+        } else {
+          setLoadingError(false);
+        }
+      })
+      .catch((error) => {
+        setLoadingError(true);
+      });
+  }, [id]);
+
+  function handleDelete() {
+    destroyShow(id)
+      .then(() => navigate("/shows"))
+      .catch((error) => {
+        console.log(error);
+        setLoadingError(true);
+      });
+  }
 
   return (
     <section className="shows-show-wrapper">
diff --git a/src/components/shows/ShowsIndex.js b/src/components/shows/ShowsIndex.js
index a25373b..bcf95bc 100644
--- a/src/components/shows/ShowsIndex.js
+++ b/src/components/shows/ShowsIndex.js
@@ -1,13 +1,47 @@
 import { Link } from "react-router-dom";
+import { useState, useEffect } from "react";
+import { getAllShows } from "../../api/fetch";
+import ShowListing from "./ShowListing";
 
 import ErrorMessage from "../errors/ErrorMessage";
 
 import "./ShowsIndex.css";
 
 export default function ShowsIndex() {
+  const [loadingError, setLoadingError] = useState(false);
+  const [shows, setShows] = useState([]);
+  const [allShows, setAllShows] = useState([]);
+  const [searchTitle, setSearchTitle] = useState("");
+
+  useEffect(() => {
+    getAllShows()
+      .then((response) => {
+        setAllShows(response);
+        setShows(response);
+        setLoadingError(false);
+      })
+      .catch((error) => {
+        console.log(error);
+        setLoadingError(true);
+      });
+  }, []);
+
+  function handleTextChange(event) {
+    const title = event.target.value;
+    const result = title.length ? filterShows(title, allShows) : allShows;
+    setSearchTitle(title);
+    setShows(result);
+  }
+
+  function filterShows(search, shows) {
+    return shows.filter((show) => {
+      return show.title.toLowerCase().match(search.toLowerCase());
+    });
+  }
+
   return (
     <div>
-      {false ? (
+      {loadingError ? (
         <ErrorMessage />
       ) : (
         <section className="shows-index-wrapper">
@@ -20,13 +54,15 @@ export default function ShowsIndex() {
             Search Shows:
             <input
               type="text"
-              // value={searchTitle}
+              value={searchTitle}
               id="searchTitle"
-              // onChange={handleTextChange}
+              onChange={handleTextChange}
             />
           </label>
           <section className="shows-index">
-            {/* <!-- ShowListing components --> */}
+            {shows.map((show) => {
+              return <ShowListing show={show} key={show.id} />;
+            })}
           </section>
         </section>
       )}

From 297bee854675aef2cbb24491ee1d91cc9ef2e668 Mon Sep 17 00:00:00 2001
From: i-guerrero <isaacguerrero@pursuit.org>
Date: Mon, 28 Nov 2022 17:44:23 -0500
Subject: [PATCH 3/7] Add index of movies, error message, detailed view and
 delete movie functionality

---
 src/api/fetch.js                       | 22 +++++++
 src/components/movies/Movie.css        | 47 ++++++++++++++
 src/components/movies/Movie.js         | 84 +++++++++++++++++++++++++-
 src/components/movies/MovieListing.css | 39 ++++++++++++
 src/components/movies/MovieListing.js  | 23 ++++++-
 src/components/movies/MoviesIndex.css  | 42 +++++++++++++
 src/components/movies/MoviesIndex.js   | 69 ++++++++++++++++++++-
 7 files changed, 317 insertions(+), 9 deletions(-)
 create mode 100644 src/components/movies/Movie.css
 create mode 100644 src/components/movies/MovieListing.css
 create mode 100644 src/components/movies/MoviesIndex.css

diff --git a/src/api/fetch.js b/src/api/fetch.js
index 2bc2885..574069b 100644
--- a/src/api/fetch.js
+++ b/src/api/fetch.js
@@ -29,6 +29,28 @@ export function updateShow(id, show) {
 
 // Movies
 
+// Create
+export function createMovie(show) {
+  return;
+}
+
+// Delete
+export function destroyMovie(id) {
+  const options = { method: "DELETE" };
+  return fetch(`${URL}/movies/${id}`, options);
+}
+
+// Index/Get all
 export function getAllMovies() {
+  return fetch(`${URL}/movies`).then((response) => response.json());
+}
+
+// Show/Get one
+export function getOneMovie(id) {
+  return fetch(`${URL}/movies/${id}`).then((response) => response.json());
+}
+
+// Update
+export function updateMovie(id, show) {
   return;
 }
diff --git a/src/components/movies/Movie.css b/src/components/movies/Movie.css
new file mode 100644
index 0000000..a068691
--- /dev/null
+++ b/src/components/movies/Movie.css
@@ -0,0 +1,47 @@
+.movies-movie-wrapper {
+    margin: 0 auto;
+    width: 70%;
+  }
+  
+  .movies-movie {
+    border: 1px solid var(--primary);
+    border-radius: 3px;
+    color: var(--gray);
+    display: grid;
+    grid-template-rows: auto 1fr auto;
+  }
+  
+  .movies-movie article {
+    padding: 10px 25px;
+  }
+  
+  .movies-movie aside {
+    background: var(--primary);
+    color: var(--light);
+  }
+  
+  .movies-movie aside p {
+    display: inline-block;
+    font-size: 14px;
+    margin: 10px 25px;
+    padding: 0;
+    width: auto;
+  }
+  
+  .movies-movie aside span {
+    font-weight: bold;
+  }
+  
+  .movies-movie aside button {
+    background: none;
+    border: none;
+    color: var(--light);
+    cursor: pointer;
+    margin: 10px 25px;
+    text-decoration: underline;
+  }
+  
+  .movies-movie aside button:hover {
+    text-decoration: none;
+  }
+  
\ No newline at end of file
diff --git a/src/components/movies/Movie.js b/src/components/movies/Movie.js
index cfd3846..a5ef306 100644
--- a/src/components/movies/Movie.js
+++ b/src/components/movies/Movie.js
@@ -1,5 +1,83 @@
-import React from "react";
+import { useState, useEffect } from "react";
+import { Link, useParams, useNavigate } from "react-router-dom";
+import { getOneMovie, destroyMovie } from "../../api/fetch";
 
-export default function Movie() {
-  return <div></div>;
+import "./Movie.css";
+
+import ErrorMessage from "../errors/ErrorMessage";
+
+function Movie() {
+  const [movie, setMovie] = useState({});
+  const [loadingError, setLoadingError] = useState(false);
+
+  const { id } = useParams();
+  let navigate = useNavigate();
+
+  useEffect(() => {
+    getOneMovie(id)
+      .then((response) => {
+        setMovie(response);
+        if (Object.keys(response) === 0) {
+          setLoadingError(true);
+        } else {
+          setLoadingError(false);
+        }
+      })
+      .catch((error) => {
+        setLoadingError(true);
+      });
+  }, [id]);
+
+  function handleDelete() {
+    destroyMovie(id)
+      .then(() => navigate("/movies"))
+      .catch((error) => {
+        console.log(error);
+        setLoadingError(true);
+      });
+  }
+
+  return (
+    <section className="movies-movie-wrapper">
+      <h2>{movie.title}</h2>
+      <section className="movies-movie">
+        {loadingError ? (
+          <ErrorMessage />
+        ) : (
+          <>
+            <aside>
+              <p>
+                <span>Duration:</span> {movie.duration}
+              </p>
+              <p>
+                <span>Listed Categories:</span> {movie.listedIn}
+              </p>
+              <p>
+                <span>Country:</span> {movie.country}
+              </p>
+              <p>
+                <span>Rating:</span> {movie.rating}
+              </p>
+              <p>
+                <span>Date Added:</span> {movie.dateAdded}
+              </p>
+            </aside>
+            <article>
+              <p>{movie.description}</p>
+            </article>
+            <aside>
+              <button className="delete" onClick={() => handleDelete(movie.id)}>
+                Remove movie
+              </button>
+              <Link to={`/movies/${id}/edit`}>
+                <button>Edit</button>
+              </Link>
+            </aside>
+          </>
+        )}
+      </section>
+    </section>
+  );
 }
+
+export default Movie;
diff --git a/src/components/movies/MovieListing.css b/src/components/movies/MovieListing.css
new file mode 100644
index 0000000..332a4a4
--- /dev/null
+++ b/src/components/movies/MovieListing.css
@@ -0,0 +1,39 @@
+.movie {
+    border: 1px solid var(--primary);
+    border-radius: 3px;
+    color: var(--gray);
+    display: grid;
+    grid-template-rows: auto 1fr auto;
+    padding: 10px 25px;
+  }
+  
+  .movie a {
+    border-bottom: 1px solid var(--primary);
+    color: var(--primary);
+    text-decoration: none;
+  }
+  
+  .movie .title {
+    text-decoration: none;
+    font-variant: small-caps;
+    margin-bottom: 0;
+  }
+  
+  .movie .description {
+    font-size: 14px;
+  }
+  
+  .movie .details {
+    border-top: 1px solid var(--primary);
+    padding-top: 10px;
+  }
+  
+  .movie .details p {
+    font-size: 12px;
+    margin: 0 0 5px;
+  }
+  
+  .movie .details span {
+    font-weight: bold;
+  }
+  
\ No newline at end of file
diff --git a/src/components/movies/MovieListing.js b/src/components/movies/MovieListing.js
index 1bcca53..e2c219d 100644
--- a/src/components/movies/MovieListing.js
+++ b/src/components/movies/MovieListing.js
@@ -1,5 +1,22 @@
-import React from "react";
+import { Link } from "react-router-dom";
+import "./MovieListing.css";
 
-export default function MovieListing() {
-  return <div></div>;
+export default function MovieListing({ movie }) {
+  return (
+    <article className="movie">
+      <h3 className="title">
+        <Link to={`/movies/${movie.id}`}>{movie.title}</Link>
+      </h3>
+      <p className="description">{movie.description}</p>
+      <aside className="details">
+        <p>
+          <span>Listed Categories:</span>
+          {movie.listedIn}
+        </p>
+        <p>
+          <span>Duration:</span> {movie.duration}
+        </p>
+      </aside>
+    </article>
+  );
 }
diff --git a/src/components/movies/MoviesIndex.css b/src/components/movies/MoviesIndex.css
new file mode 100644
index 0000000..9e91b1c
--- /dev/null
+++ b/src/components/movies/MoviesIndex.css
@@ -0,0 +1,42 @@
+.movies-index-wrapper {
+    margin: 0 auto;
+    width: 70%;
+  }
+  
+  .movies-index-wrapper label {
+    display: block;
+    width: 50%;
+    margin: auto;
+    text-align: center;
+  }
+  
+  .movies-index {
+    display: grid;
+    gap: 15px;
+    grid-template-columns: repeat(2, 1fr);
+    margin: 20px 0;
+  }
+  
+  button a {
+    color: var(--primary);
+    border-bottom: 2px solid var(--light);
+    font-weight: 500;
+    padding: 1em;
+    text-decoration: none;
+  }
+  
+  @media screen and (max-width: 1000px) {
+    .movies-index-wrapper {
+      width: 90%;
+    }
+    .movies-index {
+      grid-template-columns: repeat(2, 1fr);
+    }
+  }
+  
+  @media screen and (max-width: 800px) {
+    .movies-index {
+      grid-template-columns: 1fr;
+    }
+  }
+  
\ No newline at end of file
diff --git a/src/components/movies/MoviesIndex.js b/src/components/movies/MoviesIndex.js
index 795ed91..0a44144 100644
--- a/src/components/movies/MoviesIndex.js
+++ b/src/components/movies/MoviesIndex.js
@@ -1,8 +1,71 @@
+import { Link } from "react-router-dom";
+import { useState, useEffect } from "react";
+import { getAllMovies } from "../../api/fetch";
+import MovieListing from "./MovieListing";
+
+import ErrorMessage from "../errors/ErrorMessage";
+
+import "./MoviesIndex.css";
+
 export default function MoviesIndex() {
+  const [loadingError, setLoadingError] = useState(false);
+  const [movies, setMovies] = useState([]);
+  const [allMovies, setAllMovies] = useState([]);
+  const [searchTitle, setSearchTitle] = useState("");
+
+  useEffect(() => {
+    getAllMovies()
+      .then((response) => {
+        setAllMovies(response);
+        setMovies(response);
+        setLoadingError(false);
+      })
+      .catch((error) => {
+        console.log(error);
+        setLoadingError(true);
+      });
+  }, []);
+
+  function handleTextChange(event) {
+    const title = event.target.value;
+    const result = title.length ? filterMovies(title, allMovies) : allMovies;
+    setSearchTitle(title);
+    setMovies(result);
+  }
+
+  function filterMovies(search, movies) {
+    return movies.filter((movie) => {
+      return movie.title.toLowerCase().match(search.toLowerCase());
+    });
+  }
+
   return (
-    <div className="movies-index">
-      <p>Movie List</p>
-      <button>Add a new movie</button>
+    <div>
+      {loadingError ? (
+        <ErrorMessage />
+      ) : (
+        <section className="movies-index-wrapper">
+          <h2>All Movies</h2>
+          <button>
+            <Link to="/movies/new">Add a new movie</Link>
+          </button>
+          <br />
+          <label htmlFor="searchTitle">
+            Search Movies:
+            <input
+              type="text"
+              value={searchTitle}
+              id="searchTitle"
+              onChange={handleTextChange}
+            />
+          </label>
+          <section className="movies-index">
+            {movies.map((movie) => {
+              return <MovieListing movie={movie} key={movie.id} />;
+            })}
+          </section>
+        </section>
+      )}
     </div>
   );
 }

From 727edd1aa7fa8484632308f2ad4d494300c7e5b2 Mon Sep 17 00:00:00 2001
From: Isaac Guerrero <guerreroi@infinitytoll.local>
Date: Tue, 29 Nov 2022 13:22:16 -0500
Subject: [PATCH 4/7] Add Show functionality completed

---
 src/api/fetch.js                     |  7 ++++++-
 src/components/shows/ShowsNewForm.js | 15 ++++++++++++++-
 2 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/src/api/fetch.js b/src/api/fetch.js
index 574069b..ecd20d2 100644
--- a/src/api/fetch.js
+++ b/src/api/fetch.js
@@ -3,7 +3,12 @@ const URL = process.env.REACT_APP_API_BASE_URL;
 
 // Create
 export function createShow(show) {
-  return;
+  const options ={
+    method: "POST",
+    body: JSON.stringify(show),
+    headers: { "Content-Type": "application/json"},
+  }
+  return fetch(`${URL}/shows/`, options).then((response => response.json()));
 }
 
 // Delete
diff --git a/src/components/shows/ShowsNewForm.js b/src/components/shows/ShowsNewForm.js
index ddcec1b..3d4f0a9 100644
--- a/src/components/shows/ShowsNewForm.js
+++ b/src/components/shows/ShowsNewForm.js
@@ -1,4 +1,6 @@
 import { useState } from "react";
+import { createShow } from "../../api/fetch";
+import { useNavigate } from "react-router-dom";
 
 import "./ShowsForm.css";
 
@@ -15,7 +17,18 @@ export default function ShowsForm() {
     releaseYear: "",
   });
 
-  function handleSubmit(event) {}
+  let navigate = useNavigate();
+
+  function handleSubmit(event) {
+    event.preventDefault();
+    createShow(show)
+      .then(response => {
+        navigate(`/shows/${response.id}`)
+      })
+      .catch(error => {
+        console.log(error)
+      })
+  }
 
   function handleTextChange(event) {
     setShow({

From 8c8de87e60c1f3443f8a4d4a523a68c4c33fa9fd Mon Sep 17 00:00:00 2001
From: isaacguerrero <isaacguerrero@pursuit.org>
Date: Tue, 29 Nov 2022 14:00:13 -0500
Subject: [PATCH 5/7] Add Edit Show functionality

---
 src/api/fetch.js                      |  9 ++++++++-
 src/components/shows/ShowsEditForm.js | 29 +++++++++++++++++++++++++--
 2 files changed, 35 insertions(+), 3 deletions(-)

diff --git a/src/api/fetch.js b/src/api/fetch.js
index ecd20d2..b4b619b 100644
--- a/src/api/fetch.js
+++ b/src/api/fetch.js
@@ -29,9 +29,16 @@ export function getOneShow(id) {
 
 // Update
 export function updateShow(id, show) {
-  return;
+  const options = {
+    method: "PUT",
+    body: JSON.stringify(show),
+    headers: { "Content-Type": "application/json" },
+  }
+  return fetch(`${URL}/shows/${id}`, options).then(response => response.json());
 }
 
+
+
 // Movies
 
 // Create
diff --git a/src/components/shows/ShowsEditForm.js b/src/components/shows/ShowsEditForm.js
index b58f9bf..1dff90f 100644
--- a/src/components/shows/ShowsEditForm.js
+++ b/src/components/shows/ShowsEditForm.js
@@ -1,5 +1,7 @@
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import "./ShowsForm.css";
+import { updateShow, getOneShow } from "../../api/fetch";
+import { useNavigate, useParams } from "react-router-dom";
 
 export default function ShowsForm() {
   const [show, setShow] = useState({
@@ -14,7 +16,30 @@ export default function ShowsForm() {
     releaseYear: "",
   });
 
-  function handleSubmit(event) {}
+  let navigate = useNavigate();
+  const { id } = useParams();
+
+  useEffect(() => {
+    getOneShow(id)
+      .then((response) => {
+        setShow(response);
+      })
+      .catch(error => {
+        console.log(error);
+      })
+  }, [id]);
+
+  function handleSubmit(event) {
+    event.preventDefault();
+
+    updateShow(id, show)
+      .then(() => {
+        navigate(`/shows/${id}`);
+      })
+      .catch(error => {
+        console.log(error);
+      });
+  }
 
   function handleTextChange(event) {
     setShow({

From b3fd6d436840a9e6759f1992754a49f2e0ce2844 Mon Sep 17 00:00:00 2001
From: isaacguerrero <isaacguerrero@pursuit.org>
Date: Tue, 29 Nov 2022 15:52:55 -0500
Subject: [PATCH 6/7] Add the add new movie functionality

---
 src/api/fetch.js                       |   9 +-
 src/components/movies/MoviesNewForm.js | 121 +++++++++++++++++++++++--
 2 files changed, 121 insertions(+), 9 deletions(-)

diff --git a/src/api/fetch.js b/src/api/fetch.js
index b4b619b..c6177f4 100644
--- a/src/api/fetch.js
+++ b/src/api/fetch.js
@@ -8,7 +8,7 @@ export function createShow(show) {
     body: JSON.stringify(show),
     headers: { "Content-Type": "application/json"},
   }
-  return fetch(`${URL}/shows/`, options).then((response => response.json()));
+  return fetch(`${URL}/shows/`, options).then((response) => response.json());
 }
 
 // Delete
@@ -43,7 +43,12 @@ export function updateShow(id, show) {
 
 // Create
 export function createMovie(show) {
-  return;
+  const options = {
+    method: "POST",
+    body: JSON.stringify(show),
+    headers: { "Content-Type": "application/json" },
+  }
+  return fetch(`${URL}/movies/`, options).then(response => response.json());
 }
 
 // Delete
diff --git a/src/components/movies/MoviesNewForm.js b/src/components/movies/MoviesNewForm.js
index c6d5759..8c4c86f 100644
--- a/src/components/movies/MoviesNewForm.js
+++ b/src/components/movies/MoviesNewForm.js
@@ -1,12 +1,119 @@
-import React from "react";
+import { useState } from "react";
+import { createMovie } from "../../api/fetch";
+import { useNavigate } from "react-router-dom";
+
+// import "./MoviesForm.css";
 
 export default function MoviesNewForm() {
+  const [movie, setMovie] = useState({
+    type: "",
+    title: "",
+    country: "",
+    dateAdded: "",
+    description: "",
+    duration: "",
+    listedIn: "",
+    rating: "",
+    releaseYear: "",
+  });
+
+  let navigate = useNavigate();
+
+  function handleSubmit(event) {
+    event.preventDefault();
+    createMovie(movie)
+      .then(response => {
+        navigate(`/movies/${response.id}`);
+      })
+      .catch(error => {
+        console.log(error);
+      });
+  };
+
+  function handleTextChange(event) {
+    setMovie({
+      ...movie,
+      [event.target.id]: event.target.value,
+    });
+  }
+
   return (
-    <div>
-      <form>
-        <label for="new-movie">New Movie</label>
-        <input id="new-movie" name="new-movie" type="text" />
-      </form>
-    </div>
+    <form onSubmit={handleSubmit}>
+      <label htmlFor="title">Title:</label>
+      <input
+        type="text"
+        id="title"
+        value={movie.title}
+        onChange={handleTextChange}
+      />
+
+      <label htmlFor="description">Description:</label>
+      <input
+        type="text"
+        id="description"
+        value={movie.description}
+        onChange={handleTextChange}
+      />
+
+      <label htmlFor="type">Type</label>
+      <input
+        type="text"
+        id="type"
+        value={movie.type}
+        onChange={handleTextChange}
+      />
+
+      <label htmlFor="rating">Rating:</label>
+      <input
+        type="text"
+        id="rating"
+        value={movie.rating}
+        onChange={handleTextChange}
+      />
+
+      <label htmlFor="listedIn">Listed in</label>
+      <input
+        type="text"
+        id="listedIn"
+        value={movie.listedIn}
+        onChange={handleTextChange}
+      />
+
+      <label htmlFor="duration">Duration</label>
+      <input
+        type="text"
+        id="duration"
+        value={movie.duration}
+        onChange={handleTextChange}
+      />
+
+      <label htmlFor="releaseYear">Release Year</label>
+      <input
+        type="text"
+        id="releaseYear"
+        value={movie.releaseYear}
+        onChange={handleTextChange}
+      />
+
+      <label htmlFor="country">Country</label>
+      <input
+        type="text"
+        id="country"
+        value={movie.country}
+        onChange={handleTextChange}
+      />
+
+      <label htmlFor="dateAdded">Date added:</label>
+      <input
+        type="text"
+        id="dateAdded"
+        value={movie.dateAdded}
+        onChange={handleTextChange}
+      />
+
+      <br />
+
+      <input type="submit" />
+    </form>
   );
 }

From 5163ecbc59f16a8b6daf9a55932b9e754f61a055 Mon Sep 17 00:00:00 2001
From: isaacguerrero <isaacguerrero@pursuit.org>
Date: Tue, 29 Nov 2022 16:05:26 -0500
Subject: [PATCH 7/7] Add edit movie functionality

---
 src/api/fetch.js                        |  13 ++-
 src/components/movies/MoviesEditForm.js | 129 +++++++++++++++++++++++-
 2 files changed, 136 insertions(+), 6 deletions(-)

diff --git a/src/api/fetch.js b/src/api/fetch.js
index c6177f4..882098a 100644
--- a/src/api/fetch.js
+++ b/src/api/fetch.js
@@ -42,10 +42,10 @@ export function updateShow(id, show) {
 // Movies
 
 // Create
-export function createMovie(show) {
+export function createMovie(movie) {
   const options = {
     method: "POST",
-    body: JSON.stringify(show),
+    body: JSON.stringify(movie),
     headers: { "Content-Type": "application/json" },
   }
   return fetch(`${URL}/movies/`, options).then(response => response.json());
@@ -68,6 +68,11 @@ export function getOneMovie(id) {
 }
 
 // Update
-export function updateMovie(id, show) {
-  return;
+export function updateMovie(id, movie) {
+  const options = {
+    method: "PUT",
+    body: JSON.stringify(movie),
+    headers: { "Content-Type": "application/json" },
+  }
+  return fetch(`${URL}/movies/${id}`, options).then((response) => response.json());
 }
diff --git a/src/components/movies/MoviesEditForm.js b/src/components/movies/MoviesEditForm.js
index 71222ae..282c894 100644
--- a/src/components/movies/MoviesEditForm.js
+++ b/src/components/movies/MoviesEditForm.js
@@ -1,5 +1,130 @@
-import React from "react";
+import { useState, useEffect } from "react";
+// import "./MoviesNewForm.css";
+import { updateMovie, getOneMovie } from "../../api/fetch";
+import { useNavigate, useParams } from "react-router-dom";
 
 export default function MoviesEditForm() {
-  return <div></div>;
+  const [movie, setMovie] = useState({
+    type: "",
+    title: "",
+    country: "",
+    dateAdded: "",
+    description: "",
+    duration: "",
+    listedIn: "",
+    rating: "",
+    releaseYear: "",
+  });
+
+  let navigate = useNavigate();
+  const { id } = useParams();
+
+  useEffect(() => {
+    getOneMovie(id)
+      .then((response) => {
+        setMovie(response);
+      })
+      .catch(error => {
+        console.log(error);
+      })
+  }, [id]);
+
+  function handleSubmit(event) {
+    event.preventDefault();
+
+    updateMovie(id, movie)
+      .then(() => {
+        navigate(`/movies/${id}`);
+      })
+      .catch(error => {
+        console.log(error);
+      });
+  }
+
+  function handleTextChange(event) {
+    setMovie({
+      ...movie,
+      [event.target.id]: event.target.value,
+    });
+  }
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <label htmlFor="title">Title:</label>
+      <input
+        type="text"
+        id="title"
+        value={movie.title}
+        onChange={handleTextChange}
+      />
+
+      <label htmlFor="description">Description:</label>
+      <input
+        type="text"
+        id="description"
+        value={movie.description}
+        onChange={handleTextChange}
+      />
+
+      <label htmlFor="type">Type</label>
+      <input
+        type="text"
+        id="type"
+        value={movie.type}
+        onChange={handleTextChange}
+      />
+
+      <label htmlFor="rating">Rating:</label>
+      <input
+        type="text"
+        id="rating"
+        value={movie.rating}
+        onChange={handleTextChange}
+      />
+
+      <label htmlFor="listedIn">Listed in</label>
+      <input
+        type="text"
+        id="listedIn"
+        value={movie.listedIn}
+        onChange={handleTextChange}
+      />
+
+      <label htmlFor="duration">Duration</label>
+      <input
+        type="text"
+        id="duration"
+        value={movie.duration}
+        onChange={handleTextChange}
+      />
+
+      <label htmlFor="releaseYear">Release Year</label>
+      <input
+        type="text"
+        id="releaseYear"
+        value={movie.releaseYear}
+        onChange={handleTextChange}
+      />
+
+      <label htmlFor="country">Country</label>
+      <input
+        type="text"
+        id="country"
+        value={movie.country}
+        onChange={handleTextChange}
+      />
+
+      <label htmlFor="dateAdded">Date added:</label>
+      <input
+        type="text"
+        id="dateAdded"
+        value={movie.dateAdded}
+        onChange={handleTextChange}
+      />
+
+      <br />
+
+      <input type="submit" />
+    </form>
+  );
 }