From 12df1cec9d94a1d16e2c1ea6383e8ffe16e60dba Mon Sep 17 00:00:00 2001 From: bowersjuan Date: Wed, 2 Nov 2022 19:18:14 -0400 Subject: [PATCH 01/31] Update fetch getAllShows function and call to process response in ShowsIndex component --- src/api/fetch.js | 3 ++- src/components/shows/ShowsIndex.js | 25 +++++++++++++++++++++++-- 2 files changed, 25 insertions(+), 3 deletions(-) diff --git a/src/api/fetch.js b/src/api/fetch.js index cfb057a..28444bc 100644 --- a/src/api/fetch.js +++ b/src/api/fetch.js @@ -1,3 +1,4 @@ +const URL = process.env.REACT_APP_API_BASE_URL; // Shows // Create @@ -12,7 +13,7 @@ export function destroyShow(id) { // Index/Get all export function getAllShows() { - return; + return fetch(`${URL}/shows`).then((response) => response.json()); } // Show/Get one diff --git a/src/components/shows/ShowsIndex.js b/src/components/shows/ShowsIndex.js index a25373b..1580683 100644 --- a/src/components/shows/ShowsIndex.js +++ b/src/components/shows/ShowsIndex.js @@ -1,13 +1,32 @@ +import { useState, useEffect } from "react"; import { Link } from "react-router-dom"; +import ShowListing from "./ShowListing"; import ErrorMessage from "../errors/ErrorMessage"; import "./ShowsIndex.css"; +import { getAllShows } from "../../api/fetch"; + export default function ShowsIndex() { + const [shows, setShows] = useState([]); + const [loadingError, setLoadingError] = useState(false); + + useEffect(() => { + getAllShows() + .then((response) => { + setShows(response); + setLoadingError(false); + }) + .catch((error) => { + console.error(error); + setLoadingError(true); + }); + }, []); + return (
- {false ? ( + {loadingError ? ( ) : (
@@ -26,7 +45,9 @@ export default function ShowsIndex() { />
- {/* */} + {shows.map((show) => { + return ; + })}
)} From 5fa78e7d9936eb99023cf345190853a296c143d6 Mon Sep 17 00:00:00 2001 From: bowersjuan Date: Thu, 3 Nov 2022 10:32:35 -0400 Subject: [PATCH 02/31] Create state and controlled search input for ShowsIndex component --- src/components/shows/ShowsIndex.js | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/src/components/shows/ShowsIndex.js b/src/components/shows/ShowsIndex.js index 1580683..610d652 100644 --- a/src/components/shows/ShowsIndex.js +++ b/src/components/shows/ShowsIndex.js @@ -11,10 +11,18 @@ import { getAllShows } from "../../api/fetch"; export default function ShowsIndex() { const [shows, setShows] = useState([]); const [loadingError, setLoadingError] = useState(false); + const [allShows, setAllShows] = useState(); + const [searchTitle, setSearchTitle] = useState(""); + + function handleTextChange(e) { + const title = e.target.value; + setSearchTitle(title); + } useEffect(() => { getAllShows() .then((response) => { + setAllShows(response); setShows(response); setLoadingError(false); }) @@ -39,9 +47,9 @@ export default function ShowsIndex() { Search Shows:
From cbe8825e70cdd48463ed66fb2c8c8199217d80d8 Mon Sep 17 00:00:00 2001 From: bowersjuan Date: Thu, 3 Nov 2022 11:20:57 -0400 Subject: [PATCH 03/31] Add search function to ShowsIndex --- src/components/shows/ShowsIndex.js | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/src/components/shows/ShowsIndex.js b/src/components/shows/ShowsIndex.js index 610d652..64c0949 100644 --- a/src/components/shows/ShowsIndex.js +++ b/src/components/shows/ShowsIndex.js @@ -8,15 +8,28 @@ import "./ShowsIndex.css"; import { getAllShows } from "../../api/fetch"; +function filterShows(search, shows) { + return shows.filter((show) => { + return show.title.toLowerCase().match(search.toLowerCase()); + }); +} + export default function ShowsIndex() { const [shows, setShows] = useState([]); const [loadingError, setLoadingError] = useState(false); const [allShows, setAllShows] = useState(); const [searchTitle, setSearchTitle] = useState(""); + /** + * Saves text input for search in state + * @param {str} e + */ function handleTextChange(e) { const title = e.target.value; + const result = title.length ? filterShows(title, allShows) : allShows; + setSearchTitle(title); + setShows(result); } useEffect(() => { From ef6209dbb899f2debbf6fdf4723fa5ce9f11e1b9 Mon Sep 17 00:00:00 2001 From: bowersjuan Date: Thu, 3 Nov 2022 11:46:25 -0400 Subject: [PATCH 04/31] Add show page for individual shows and create fetch call --- src/api/fetch.js | 2 +- src/components/shows/Show.js | 16 +++++++++++++++- 2 files changed, 16 insertions(+), 2 deletions(-) diff --git a/src/api/fetch.js b/src/api/fetch.js index 28444bc..603274a 100644 --- a/src/api/fetch.js +++ b/src/api/fetch.js @@ -18,7 +18,7 @@ export function getAllShows() { // Show/Get one export function getOneShow(id) { - return; + return fetch(`${URL}/shows/${id}`).then((response) => response.json()); } // Update diff --git a/src/components/shows/Show.js b/src/components/shows/Show.js index 263bddf..720ec24 100644 --- a/src/components/shows/Show.js +++ b/src/components/shows/Show.js @@ -1,9 +1,10 @@ -import { useState } from "react"; +import { useState, useEffect } from "react"; import { Link, useParams } from "react-router-dom"; import "./Show.css"; import ErrorMessage from "../errors/ErrorMessage"; +import { getOneShow } from "../../api/fetch"; function Show() { const [show, setShow] = useState({}); @@ -13,6 +14,19 @@ function Show() { function handleDelete() {} + useEffect(() => { + getOneShow(id) + .then((response) => { + setShow(response); + if (Object.keys(response).length === 0) { + setLoadingError(true); + } else setLoadingError(false); + }) + .catch((error) => { + setLoadingError(true); + }); + }, [id]); + return (

{show.title}

From de315e38aacebc20507a965e511d32e967e33c78 Mon Sep 17 00:00:00 2001 From: bowersjuan Date: Thu, 3 Nov 2022 12:24:15 -0400 Subject: [PATCH 05/31] Add delete single show functionality --- src/api/fetch.js | 3 ++- src/components/shows/Show.js | 14 +++++++++++--- 2 files changed, 13 insertions(+), 4 deletions(-) diff --git a/src/api/fetch.js b/src/api/fetch.js index 603274a..2bc2885 100644 --- a/src/api/fetch.js +++ b/src/api/fetch.js @@ -8,7 +8,8 @@ export function createShow(show) { // Delete export function destroyShow(id) { - return; + const options = { method: "DELETE" }; + return fetch(`${URL}/shows/${id}`, options); } // Index/Get all diff --git a/src/components/shows/Show.js b/src/components/shows/Show.js index 720ec24..12e2e78 100644 --- a/src/components/shows/Show.js +++ b/src/components/shows/Show.js @@ -1,18 +1,26 @@ import { useState, useEffect } from "react"; -import { Link, useParams } from "react-router-dom"; +import { Link, useParams, useNavigate } from "react-router-dom"; import "./Show.css"; import ErrorMessage from "../errors/ErrorMessage"; -import { getOneShow } from "../../api/fetch"; +import { getOneShow, destroyShow } from "../../api/fetch"; function Show() { const [show, setShow] = useState({}); const [loadingError, setLoadingError] = useState(false); const { id } = useParams(); + const navigate = useNavigate(); - function handleDelete() {} + function handleDelete(id) { + destroyShow(id) + .then(() => navigate("/shows")) + .catch((error) => { + console.error(error); + setLoadingError(true); + }); + } useEffect(() => { getOneShow(id) From 7aed03bd0b2f8394b8748f1aed7b63f5e6dde7be Mon Sep 17 00:00:00 2001 From: bowersjuan Date: Thu, 3 Nov 2022 13:16:12 -0400 Subject: [PATCH 06/31] Initial commit --- src/components/movies/movie.js | 0 src/components/movies/moviesListing.js | 0 2 files changed, 0 insertions(+), 0 deletions(-) create mode 100644 src/components/movies/movie.js create mode 100644 src/components/movies/moviesListing.js diff --git a/src/components/movies/movie.js b/src/components/movies/movie.js new file mode 100644 index 0000000..e69de29 diff --git a/src/components/movies/moviesListing.js b/src/components/movies/moviesListing.js new file mode 100644 index 0000000..e69de29 From 5773bca05e8fa5bb8d66544d2051af6f63a7010a Mon Sep 17 00:00:00 2001 From: bowersjuan Date: Thu, 3 Nov 2022 13:21:43 -0400 Subject: [PATCH 07/31] Update MoviesIndex component --- src/components/movies/MoviesIndex.js | 17 ++++++++++++++++- 1 file changed, 16 insertions(+), 1 deletion(-) diff --git a/src/components/movies/MoviesIndex.js b/src/components/movies/MoviesIndex.js index 28e9dd7..c87bc0f 100644 --- a/src/components/movies/MoviesIndex.js +++ b/src/components/movies/MoviesIndex.js @@ -1,3 +1,18 @@ +import { useState } from "react"; +import ErrorMessage from "../errors/ErrorMessage"; + export default function MoviesIndex() { - return

Movie List

; + const [loadingError, setLoadingError] = useState(); + + return ( +
+ {loadingError ? ( + + ) : ( +
+ All Movies +
+ )} +
+ ); } From cfb1c1fbcee714c34ec54105d7a182214b154001 Mon Sep 17 00:00:00 2001 From: bowersjuan Date: Thu, 3 Nov 2022 19:09:26 -0400 Subject: [PATCH 08/31] Create fetch call for movies data and update MoviesIndex --- src/App.js | 2 ++ src/api/fetch.js | 2 +- src/components/movies/MoviesIndex.js | 24 ++++++++++++++++++++++-- 3 files changed, 25 insertions(+), 3 deletions(-) diff --git a/src/App.js b/src/App.js index 206efa9..1f18541 100644 --- a/src/App.js +++ b/src/App.js @@ -8,6 +8,7 @@ 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"; function App() { return ( @@ -20,6 +21,7 @@ function App() { } /> } /> } /> + } />
diff --git a/src/api/fetch.js b/src/api/fetch.js index 2bc2885..2488429 100644 --- a/src/api/fetch.js +++ b/src/api/fetch.js @@ -30,5 +30,5 @@ export function updateShow(id, show) { // Movies export function getAllMovies() { - return; + return fetch(`${URL}/movies`).then((response) => response.json()); } diff --git a/src/components/movies/MoviesIndex.js b/src/components/movies/MoviesIndex.js index c87bc0f..d3a6075 100644 --- a/src/components/movies/MoviesIndex.js +++ b/src/components/movies/MoviesIndex.js @@ -1,8 +1,23 @@ -import { useState } from "react"; +import { useState, useEffect } from "react"; import ErrorMessage from "../errors/ErrorMessage"; +import { getAllMovies } from "../../api/fetch"; + export default function MoviesIndex() { const [loadingError, setLoadingError] = useState(); + const [movies, setMovies] = useState([]); + + useEffect(() => { + getAllMovies() + .then((response) => { + setMovies(response); + setLoadingError(false); + }) + .catch((error) => { + console.log(error); + setLoadingError(true); + }); + }, []); return (
@@ -10,7 +25,12 @@ export default function MoviesIndex() { ) : (
- All Movies +

Amount: {movies.length}

+ {movies.map((movie) => ( +
+

{movie.title}

+
+ ))}
)}
From 94a0bb796e8056ef3b8fbcbff9fa02b673b8fbce Mon Sep 17 00:00:00 2001 From: bowersjuan Date: Thu, 3 Nov 2022 20:45:45 -0400 Subject: [PATCH 09/31] Create helper function handle-text-change --- src/helpers/formHelpers.js | 13 +++++++++++++ 1 file changed, 13 insertions(+) create mode 100644 src/helpers/formHelpers.js diff --git a/src/helpers/formHelpers.js b/src/helpers/formHelpers.js new file mode 100644 index 0000000..ffa1802 --- /dev/null +++ b/src/helpers/formHelpers.js @@ -0,0 +1,13 @@ +/** + * Saves text input for search in state + * @param {str} e + */ +function handleTextChange(e) { + const title = e.target.value; + const result = title.length ? filterShows(title, allShows) : allShows; + + setSearchTitle(title); + setShows(result); +} + +export { handleTextChange }; From 5448a1f1c1de9df7687cf023d7ac005c3567227a Mon Sep 17 00:00:00 2001 From: bowersjuan Date: Thu, 3 Nov 2022 20:53:06 -0400 Subject: [PATCH 10/31] Delete helpers --- src/helpers/formHelpers.js | 12 ------------ 1 file changed, 12 deletions(-) diff --git a/src/helpers/formHelpers.js b/src/helpers/formHelpers.js index ffa1802..8b13789 100644 --- a/src/helpers/formHelpers.js +++ b/src/helpers/formHelpers.js @@ -1,13 +1 @@ -/** - * Saves text input for search in state - * @param {str} e - */ -function handleTextChange(e) { - const title = e.target.value; - const result = title.length ? filterShows(title, allShows) : allShows; - setSearchTitle(title); - setShows(result); -} - -export { handleTextChange }; From 7229b684fac1dab8a6c9110fff016c469ef8fdad Mon Sep 17 00:00:00 2001 From: bowersjuan Date: Thu, 3 Nov 2022 20:53:42 -0400 Subject: [PATCH 11/31] Update MovieIndex and Movie Listing --- src/components/movies/MoviesIndex.js | 48 ++++++++++++++++++++++---- src/components/movies/moviesListing.js | 21 +++++++++++ src/helpers/formHelpers.js | 1 - 3 files changed, 62 insertions(+), 8 deletions(-) delete mode 100644 src/helpers/formHelpers.js diff --git a/src/components/movies/MoviesIndex.js b/src/components/movies/MoviesIndex.js index d3a6075..e1a8086 100644 --- a/src/components/movies/MoviesIndex.js +++ b/src/components/movies/MoviesIndex.js @@ -1,11 +1,32 @@ import { useState, useEffect } from "react"; import ErrorMessage from "../errors/ErrorMessage"; +import MovieListing from "./MoviesListing"; import { getAllMovies } from "../../api/fetch"; +function filterMovies(search, movies) { + return movies.filter((movie) => { + return movie.title.toLowerCase().match(search.toLowerCase()); + }); +} + export default function MoviesIndex() { const [loadingError, setLoadingError] = useState(); const [movies, setMovies] = useState([]); + const [allMovies, setAllMovies] = useState(); + const [searchTitle, setSearchTitle] = useState(""); + + /** + * Saves text input for search in state + * @param {str} e + */ + function handleTextChange(e) { + const title = e.target.value; + const result = title.length ? filterMovies(title, allMovies) : allMovies; + + setSearchTitle(title); + setMovies(result); + } useEffect(() => { getAllMovies() @@ -24,13 +45,26 @@ export default function MoviesIndex() { {loadingError ? ( ) : ( -
-

Amount: {movies.length}

- {movies.map((movie) => ( -
-

{movie.title}

-
- ))} +
+

All Movies

+ +
+ +
+ {movies.map((movie) => { + return ; + })} +
)}
diff --git a/src/components/movies/moviesListing.js b/src/components/movies/moviesListing.js index e69de29..2022976 100644 --- a/src/components/movies/moviesListing.js +++ b/src/components/movies/moviesListing.js @@ -0,0 +1,21 @@ +import { Link } from "react-router-dom"; + +export default function ShowListing({ movie }) { + return ( +
+

+ {movie.title} +

+

{movie.description}

+ +
+ ); +} diff --git a/src/helpers/formHelpers.js b/src/helpers/formHelpers.js deleted file mode 100644 index 8b13789..0000000 --- a/src/helpers/formHelpers.js +++ /dev/null @@ -1 +0,0 @@ - From 72c88f53ebadd37b9f064dc96c474850c8742f20 Mon Sep 17 00:00:00 2001 From: bowersjuan Date: Thu, 3 Nov 2022 20:55:19 -0400 Subject: [PATCH 12/31] Update MoviesIndex --- src/components/movies/MoviesIndex.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/components/movies/MoviesIndex.js b/src/components/movies/MoviesIndex.js index e1a8086..e1e20cd 100644 --- a/src/components/movies/MoviesIndex.js +++ b/src/components/movies/MoviesIndex.js @@ -47,9 +47,7 @@ export default function MoviesIndex() { ) : (

All Movies

- +