Submit 8-0-react-crud-lab

src/App.js

@@ -1,26 +1,42 @@
 import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
 
-// Components
+// Common Components
 import Footer from "./components/common/Footer";
 import Home from "./components/home/Home";
 import Nav from "./components/common/Nav";
+
+// Shows Components
 import Show from "./components/shows/Show";
 import ShowsEditForm from "./components/shows/ShowsEditForm";
 import ShowsIndex from "./components/shows/ShowsIndex";
 import ShowsNewForm from "./components/shows/ShowsNewForm";
 
+// Movies Components
+import Movie from "./components/movies/Movie";
+import MoviesEditForm from "./components/movies/MoviesEditForm";
+import MoviesIndex from "./components/movies/MoviesIndex";
+import MoviesNewForm from "./components/movies/MoviesNewForm";
+
 function App() {
   return (
     <div className="wrapper">
       <Router>
         <Nav />
+
         <Routes>
           <Route path="/" element={<Home />} />
+
           <Route path="/shows" element={<ShowsIndex />} />
           <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>
     </div>

src/api/fetch.js

@@ -1,32 +1,89 @@
-// Shows
+const URL = process.env.REACT_APP_API_BASE_URL;
 
-// Create
-export function createShow(show) {
-  return;
-}
+// SHOWS
 
-// Delete
-export function destroyShow(id) {
-  return;
+// CREATE SHOW
+export function createShow(show) {
+  const options = {
+    method: "Post",
+    body: JSON.stringify(show),
+    headers: { "Content-Type": "application/json" },
+  };
+  return fetch(`${URL}/shows/`, options).then((response) => {
+    return response.json();
+  });
 }
 
-// Index/Get all
+// Index/Get all (READ SHOWS)
 export function getAllShows() {
-  return;
+  return fetch(`${URL}/shows`).then((response) => response.json());
 }
 
-// Show/Get one
+// Show/Get one (READ SHOW)
 export function getOneShow(id) {
-  return;
+  return fetch(`${URL}/shows/${id}`).then((response) => response.json());
 }
 
-// Update
+// UPDATE SHOW
 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) => {
+    return response.json();
+  });
 }
 
-// Movies
+// DELETE SHOW
+export function destroyShow(id) {
+  const options = {
+    method: "DELETE",
+  };
+  return fetch(`${URL}/shows/${id}`, options);
+}
 
+// MOVIES
+
+// CREATE MOVIE
+export function createMovie(movie) {
+  const options = {
+    method: "POST",
+    body: JSON.stringify(movie),
+    headers: { "Content-Type": "application/json" },
+  };
+  return fetch(`${URL}/movies/`, options).then((response) => {
+    return response.json();
+  });
+}
+
+// Index/Get all (READ MOVIES)
 export function getAllMovies() {
-  return;
+  return fetch(`${URL}/movies`).then((response) => response.json());
+}
+
+// Movie/Get one (READ MOVIE)
+export function getOneMovie(id) {
+  return fetch(`${URL}/movies/${id}`).then((response) => response.json());
+}
+
+// UPDATE MOVIE
+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) => {
+    return response.json();
+  });
+}
+
+// DELETE
+export function destroyMovie(id) {
+  const options = {
+    method: "DELETE",
+  };
+  return fetch(`${URL}/movies/${id}`, options);
 }

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/MoviesEditForm.js

@@ -0,0 +1,125 @@
+import { useState, useEffect } from "react";
+import { useNavigate, useParams } from "react-router-dom";
+
+import "./MoviesForm.css";
+
+import { getOneMovie, updateMovie } from "../../api/fetch";
+
+export default function MoviesEditForm() {
+  const [movie, setMovie] = useState({
+    type: "",
+    title: "",
+    country: "",
+    dateAdded: "",
+    description: "",
+    duration: "",
+    listedIn: "",
+    rating: "",
+    releaseYear: "",
+  });
+
+  const navigate = useNavigate();
+  const { id } = useParams();
+
+  function handleSubmit(event) {
+    event.preventDefault();
+    updateMovie(id, movie)
+      .then((response) => navigate(`/movies/${response.id}`))
+      .catch((error) => {
+        console.log(error);
+      });
+  }
+
+  function handleTextChange(event) {
+    setMovie({
+      ...movie,
+      [event.target.id]: event.target.value,
+    });
+  }
+
+  useEffect(() => {
+    getOneMovie(id)
+      .then((response) => setMovie(response))
+      .catch((error) => console.log(error));
+  }, [id]);
+
+  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>
+  );
+}