Lab Completed Without Css

src/App.js

@@ -1,5 +1,5 @@
-import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
-
+import { BrowserRouter as Router, Routes, Route, useParams, useNavigate } from "react-router-dom";
+import { useState, useEffect } from "react";
 // Components
 import Footer from "./components/common/Footer";
 import Home from "./components/home/Home";
@@ -8,23 +8,34 @@ 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 MovieForm from './components/movies/MovieForm'
+import EditMovieForm from './components/movies/EditMovieForm'
 
 function App() {
+
   return (
     <div className="wrapper">
       <Router>
         <Nav />
         <Routes>
+          {/* Show 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" element={<Show/>} />
           <Route path="/shows/:id/edit" element={<ShowsEditForm />} />
+          {/* Movie Routes */}
+          <Route path='/movies' element={<MoviesIndex/>} /> 
+          <Route path="/movies/:id" element={<Movie/>} />
+          <Route path="/movies/new" element={<MovieForm />} />
+          <Route path="/movies/:id/edit" element={<EditMovieForm />} />
         </Routes>
         <Footer />
       </Router>
     </div>
   );
 }
-
+//Routes for movies go in here. 
 export default App;

src/api/fetch.js

@@ -1,32 +1,92 @@
 // 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 => 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 =>res.json())
 }
 
 // Movies
 
-export function getAllMovies() {
-  return;
+//Create Movies
+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
+export function getAllMovies(id) {
+  return fetch(`${URL}/movies`).then((res) => res.json());
+}
+
+//Get One Movie
+export function getOneMovie(id){
+  return fetch(`${URL}/movies/${id}`).then((res) => res.json());
+} 
+
+// Delete Movies 
+export function destroyMovie(id){
+  const options = { method: "DELETE"}
+  return fetch(`${URL}/shows/${id}`, options)
 }
+
+// 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((res) => {
+      return(
+        res.json()
+      )
+    })
+  )
+}
+
+//Created Functions 
+
+export function filterShows(search, shows){
+  return shows.filter((show) => show.title.toLowerCase().match(search.toLowerCase()))
+}
+

src/components/movies/EditMovieForm.js

@@ -0,0 +1,128 @@
+import { useState, useEffect } from "react";
+import { updateMovie, getOneMovie } from "../../api/fetch";
+import { useNavigate, useParams } from "react-router-dom";
+
+export default function EditMovieForm() {
+    let navigate = useNavigate()
+    const {id} = useParams()
+    const [movie, setMovie] = useState({
+    type: "",
+    title: "",
+    country: "",
+    dateAdded: "",
+    description: "",
+    duration: "",
+    listedIn: "",
+    rating: "",
+    releaseYear: "",
+    });
+
+
+  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,
+    });
+  }
+
+  useEffect(() => {
+    getOneMovie(id)
+    .then((res) => {
+      setMovie(res)
+    })
+    .catch((error) => {
+      console.error(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>
+  );
+}

src/components/movies/Movie.js

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