Lab Completed - not reviewed yet

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5502
+}

src/App.js

@@ -18,7 +18,7 @@ function App() {
           <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 />} />
         </Routes>
         <Footer />

src/api/fetch.js

@@ -1,28 +1,47 @@
 // Shows
-
+const URL = process.env.REACT_APP_API_BASE_URL; //This will get the value of the base URL from the `.env` file. Currently, the fetch request are going to a locally running API version. However, if you want to put this app on the internet, the URL needs to be updated. Using environmental variables lets you manage how applications will run in different environments.
+// Create
+// src/api/fetch.js
 // 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) => {
+    return response.json();
+  });
 }
 
 // Delete
 export function destroyShow(id) {
-  return;
+  const options = { method: "DELETE" };  //options variable is assigned the value of the object method
+  return fetch(`${URL}/shows/${id}`, options);  
 }
 
 // Index/Get all
 export function getAllShows() {
-  return;
+  return fetch(`${URL}/shows`).then((response) => response.json()); //Add this fetch request inside the getAllShows() function. This is creating a promise to extract data from the json file.
 }
 
 // Show/Get one
 export function getOneShow(id) {
-  return;
+  return fetch(`${URL}/shows/${id}`).then((response) => response.json()); //fetching data 
 }
 
+// Update
+// src/api/fetch.js
 // 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) => {
+    return response.json();
+  });
 }
 
 // Movies

src/components/shows/Show.js

@@ -1,17 +1,47 @@
-import { useState } from "react";
-import { Link, useParams } from "react-router-dom";
+import { Link, useNavigate, useParams } from "react-router-dom";
 
 import "./Show.css";
 
 import ErrorMessage from "../errors/ErrorMessage";
+// src/components/shows/Show.js
+import { destroyShow, getOneShow } from "../../api/fetch";
+
+import { useEffect, useState } from "react";
+
+
 
 function Show() {
+  let navigate = useNavigate();
   const [show, setShow] = useState({});
   const [loadingError, setLoadingError] = useState(false);
 
-  const { id } = useParams();
+  const { id } = useParams();  // The useParam hook called useParams with id. Type in the url. after the `/`, wild card.  The id (wildcard) is the property in the object and will access the value of the id.
+
+  function handleDelete() {
+    destroyShow(id)
+      .then(() => navigate("/shows"))
+      .catch((error) => {
+        console.error(error);
+        setLoadingError(true);
+      });
+  }
+
+  useEffect(() => {
+    getOneShow(id)
+      .then((response) => {
+        setShow(response);
+        if (Object.keys(response).length === 0) {
+          setLoadingError(true);
+        } else {
+          setLoadingError(false);
+        }
+      })
+      .catch((error) => {
+        setLoadingError(true);
+      });
+  }, [id]);  //dependency array
+
 
-  function handleDelete() {}
 
   return (
     <section className="shows-show-wrapper">
@@ -57,3 +87,5 @@ function Show() {
 }
 
 export default Show;
+
+// CRUD - create read update delete

src/components/shows/ShowsEditForm.js

@@ -1,7 +1,14 @@
-import { useState } from "react";
+
 import "./ShowsForm.css";
+// src/components/shows/ShowsEditForm.js
+import { updateShow, getOneShow } from "../../api/fetch";
+import { useNavigate, useParams } from "react-router-dom";
+import { useEffect, useState } from "react";
+
 
 export default function ShowsForm() {
+let navigate = useNavigate();
+const { id } = useParams();
   const [show, setShow] = useState({
     type: "",
     title: "",
@@ -14,7 +21,31 @@ export default function ShowsForm() {
     releaseYear: "",
   });
 
-  function handleSubmit(event) {}
+  useEffect(() => {
+    getOneShow(id)
+      .then((response) => {
+        setShow(response);
+      })
+      .catch((error) => {
+        console.error(error);
+      });
+  }, [id]);
+
+
+  function handleSubmit(event) {
+    event.preventDefault();
+
+    updateShow(id, show)
+      .then(() => {
+        navigate(`/shows/${id}`);
+      })
+      .catch((error) => {
+        console.error(error);
+      });
+  }
+
+
+
 
   function handleTextChange(event) {
     setShow({

src/components/shows/ShowsIndex.js

@@ -1,13 +1,58 @@
+//import { useState } from "react"; //Add state to the `ShowsIndex` component with `useState`
 import { Link } from "react-router-dom";
-
 import ErrorMessage from "../errors/ErrorMessage";
-
 import "./ShowsIndex.css";
+// Top of file
+import { getAllShows } from "../../api/fetch"; //Import and call getAllShows() on component mount. Then setShows()to the incoming data and setLoadingError() to false. If there is an error, log the error and change the loadingError to true.
+import { useEffect, useState } from "react"; //import the useEfferct() function 
+import ShowListing from "./ShowListing"; //Import the component to have a `ShowListing` componenet for each show.
+
+
+function filterShows(search, shows) {
+  return shows.filter((show) => {
+    return show.title.toLowerCase().match(search.toLowerCase());
+  });
+}
+
 
 export default function ShowsIndex() {
+  // Create a state variable called `loadingErro`r` and a function called `setLoadingError` to update the state of the variable.
+  // Set loadingError default to false
+  // Inside functional component
+const [loadingError, setLoadingError] = useState(false); //ternary - when it's false, then it will show `section className="shows-index-wrapper"`; if it's true, it will return the value of the component error message.
+// src/components/show/ShowIndex
+const [shows, setShows] = useState([]); // Created state to hold the shows.; This is an empty array when it was mounted
+
+const [allShows, setAllShows] = useState([]);
+
+const [searchTitle, setSearchTitle] = useState("");
+
+// Call getAllShows(). getAllShows() is a function that returns a promise. When a promise is returned, you can chain a .then() function that will execute when getAllShows() has either fulfilled or rejected the promise. If the promise is fulfilled (the fetch request successfully requested data), it will return a response containing the data. Additionally, there is no loading error, so set that to false. If the promise is rejected, use .catch() to run the code that handles the error. Log the error and setLoadingError in this case to true.
+useEffect(() => {
+  getAllShows()   //aka `GET` request
+    .then((response) => {
+      setAllShows(response);
+      setShows(response);  // update the shows state variable with line 16 useState. causes the useEffect function to be invoked.
+      setLoadingError(false);
+    })
+    .catch((error) => {
+      console.error(error);
+      setLoadingError(true);
+    });
+}, []);
+//The above will load the data into state, you can add in the component that will display the data
+
+function handleTextChange(event) {
+  const title = event.target.value; // Search Shows field input box
+  const result = title.length ? filterShows(title, allShows) : allShows;
+  setSearchTitle(title); //updating what I am seeing in the input box
+  setShows(result); //the array of objects or list of shows as the result
+}
+
+
   return (
     <div>
-      {false ? (
+      {loadingError ? ( //if it is hardcoded to `false`, the error message will never show; replace the hard-coded false (after the opening div) inside the return to be the variable loadingError; To test that this component loads, you can change the initial state for loadingError to true. However, for a better user experience, the initial value should be false.
         <ErrorMessage />
       ) : (
         <section className="shows-index-wrapper">
@@ -20,13 +65,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} />; // show is in an array of objects. .map will extract that info. Each element will pass onto ShowsListing as a prop. Show-index will pass the show to ShowsListing component as a prop.
+            })}
           </section>
         </section>
       )}

src/components/shows/ShowsNewForm.js

@@ -1,8 +1,14 @@
 import { useState } from "react";
 
 import "./ShowsForm.css";
+// src/components/shows/ShowsNewForm.js
+import { createShow } from "../../api/fetch";
+import { useNavigate } from "react-router-dom";
+
 
 export default function ShowsForm() {
+  let navigate = useNavigate();
+
   const [show, setShow] = useState({
     type: "",
     title: "",
@@ -15,7 +21,16 @@ export default function ShowsForm() {
     releaseYear: "",
   });
 
-  function handleSubmit(event) {}
+  function handleSubmit(event) {
+    event.preventDefault();
+    createShow(show)
+      .then((response) => {
+        navigate(`/shows/${response.id}`);
+      })
+      .catch((error) => {
+        console.error(error);
+      });
+  }
 
   function handleTextChange(event) {
     setShow({