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 Movie from "./components/movies/Movie";
+import MoviesEditForm from "./components/movies/MoviesEditForm";
+import MoviesNewForm from "./components/movies/MoviesNewForm";
 
 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,83 @@
 // Shows
+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((res) => {
+    return res.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((res) => res.json());
 }
 
 // Show/Get one
 export function getOneShow(id) {
-  return;
+  return fetch(`${URL}/shows/${id}`).then((res) => res.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((res) => {
+    return res.json();
+  });
 }
 
 // Movies
 
 export function getAllMovies() {
-  return;
+  return fetch(`${URL}/movies`).then((res) => res.json());
+}
+
+//Movie/getOne
+
+export function getOneMovie(id) {
+  return fetch(`${URL}/movies/${id}`).then((res) => res.json());
+}
+
+//Movies/ delete
+
+export function destroyMovie(id) {
+  const options = { method: "DELETE" };
+  return fetch(`${URL}/movies/${id}`, options);
+}
+
+//Movie/create
+
+export function createMovie(movie) {
+  const options = {
+    method: "POST",
+    body: JSON.stringify(movie),
+    headers: { "Content-Type": "application/json" },
+  };
+  return fetch(`${URL}/movies/`, options).then((res) => res.json());
+}
+
+//Movie/edit
+
+export function editMovie(id, movie) {
+  const options = {
+    method: "PUT",
+    body: JSON.stringify(movie),
+    headers: { "Content-Type": "application/json" },
+  };
+  return fetch(`${URL}/movies/${id}`, options).then((res) => res.json());
 }

src/components/movies/Movie.css

@@ -0,0 +1,46 @@
+.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,81 @@
+import { useState, useEffect } from "react";
+import { Link, useParams, useNavigate } from "react-router-dom";
+import { destroyMovie } from "../../api/fetch";
+import { getOneMovie, detroyMovie } from "../../api/fetch";
+import ErrorMessage from "../errors/ErrorMessage";
+import "./Movie.css";
+
+export default function Movie() {
+  const [movie, setMovie] = useState({});
+  const [loadingError, setLoadingError] = useState(false);
+
+  const { id } = useParams();
+  const navigate = useNavigate();
+
+  function handleDelete(id) {
+    destroyMovie(id)
+      .then(() => navigate("/movies"))
+      .catch((error) => {
+        console.log(error);
+        setLoadingError(true);
+      });
+  }
+
+  useEffect(() => {
+    getOneMovie(id)
+      .then((res) => {
+        setMovie(res);
+        if (Object.keys(res).length === 0) {
+          setLoadingError(true);
+        } else {
+          setLoadingError(false);
+        }
+      })
+      .catch((err) => {
+        console.log(err);
+        setLoadingError(true);
+      });
+  }, [id]);
+
+  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 show
+              </button>
+              <Link to={`/movies/${id}/edit`}>
+                <button>Edit</button>
+              </Link>
+            </aside>
+          </>
+        )}
+      </section>
+    </section>
+  );
+}

src/components/movies/MovieListings.css

@@ -0,0 +1,38 @@
+.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/MovieListings.js

@@ -0,0 +1,21 @@
+import { Link } from "react-router-dom";
+import "./MovieListings.css";
+export default function MovieListing({ movie }) {
+  return (
+    <article className="movie">
+      <h3 className="title">
+        <Link to={`/movies/${movie.id}`}>{movie.title}</Link>
+      </h3>
+      <p className="descripition">{movie.description}</p>
+      <aside className="details">
+        <p>
+          <span>Listed Categories:</span>
+          {movie.listedIn}
+        </p>
+        <p>
+          <span>Duration:</span> {movie.duration}
+        </p>
+      </aside>
+    </article>
+  );
+}