React Crud Lab

src/App.js

@@ -8,6 +8,10 @@ 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";
+import Movie from "./components/movies/Movie";
+import MoviesEditForm from "./components/movies/MoviesEditForm";
 
 function App() {
   return (
@@ -20,6 +24,10 @@ 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 />} />
+          <Route path="/movies/:id" element={<Movie />} />
+          <Route path="/movies/:id/edit" element={<MoviesEditForm />} />
         </Routes>
         <Footer />
       </Router>

src/api/fetch.js

@@ -1,32 +1,78 @@
+const URL = process.env.REACT_APP_API_BASE_URL;
 // Shows
 
 // 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
 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
 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
+export function createMovie(movie) {
+  const options = {
+    method: "POST",
+    body: JSON.stringify(movie),
+    headers: { "Content-Type": "application/json" },
+  }
+  return fetch(`${URL}/movies/`, options).then(response => response.json());
+}
+
+// Delete
+export function destroyMovie(id) {
+  const options = { method: "DELETE" };
+  return fetch(`${URL}/movies/${id}`, options);
+}
+
+// Index/Get all
 export function getAllMovies() {
-  return;
+  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, movie) {
+  const options = {
+    method: "PUT",
+    body: JSON.stringify(movie),
+    headers: { "Content-Type": "application/json" },
+  }
+  return fetch(`${URL}/movies/${id}`, options).then((response) => response.json());
 }

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>
   );
 }

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;
+  }
+

src/components/movies/Movie.js

@@ -0,0 +1,83 @@
+import { useState, useEffect } from "react";
+import { Link, useParams, useNavigate } from "react-router-dom";
+import { getOneMovie, destroyMovie } from "../../api/fetch";
+
+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;

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;
+  }
+

src/components/movies/MovieListing.js

@@ -0,0 +1,22 @@
+import { Link } from "react-router-dom";
+import "./MovieListing.css";
+
+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>
+  );
+}