From 7e3488173d861658ca9c507eb6e45f1f93060bd1 Mon Sep 17 00:00:00 2001 From: tomek krok Date: Sat, 25 Jan 2025 12:10:48 +0100 Subject: [PATCH 01/15] added async function between front and back end --- ui/src/App.js | 18 ++++++++++++++---- 1 file changed, 14 insertions(+), 4 deletions(-) diff --git a/ui/src/App.js b/ui/src/App.js index 8b633d1..fdb4804 100644 --- a/ui/src/App.js +++ b/ui/src/App.js @@ -4,13 +4,23 @@ import "milligram"; import MovieForm from "./MovieForm"; import MoviesList from "./MoviesList"; + function App() { const [movies, setMovies] = useState([]); const [addingMovie, setAddingMovie] = useState(false); - function handleAddMovie(movie) { - setMovies([...movies, movie]); - setAddingMovie(false); + async function handleAddMovie(movie) { + const response = await fetch('/movies', { + method: 'POST', + body: JSON.stringify(movie), + headers: { 'Content-Type': 'application/json' } + }); + + if (response.ok) { + setMovies([...movies, movie]); + setAddingMovie(false); + } + } return ( @@ -23,7 +33,7 @@ function App() { />} {addingMovie ? : } From 4e2b1452dcc7f917a666f758a08394979de8fe46 Mon Sep 17 00:00:00 2001 From: tomek krok Date: Sun, 26 Jan 2025 09:36:02 +0100 Subject: [PATCH 02/15] added use effect for first render --- ui/src/App.js | 19 ++++++++++++++++++- 1 file changed, 18 insertions(+), 1 deletion(-) diff --git a/ui/src/App.js b/ui/src/App.js index fdb4804..bb9e876 100644 --- a/ui/src/App.js +++ b/ui/src/App.js @@ -1,5 +1,5 @@ import './App.css'; -import {useState} from "react"; +import {useEffect, useState} from "react"; import "milligram"; import MovieForm from "./MovieForm"; import MoviesList from "./MoviesList"; @@ -23,6 +23,23 @@ function App() { } + //use effect = it will fetch data from backend only on start + // + useEffect(() => { + const fetchMovies = async () => { + const response = await fetch(`/movies`); + + if (response.ok) { + const movies = await response.json(); + setMovies(movies); + } + }; + + fetchMovies(); +// empty array [] gives option that it is executed only onece because array is empty and it guarantte thei1 execution +// in other word effect worka on changes of array so if it is empty never change + }, []); + return (

My favourite movies to watch

From a14750f3a35ae3f96e21debdafb16dd85d56cf99 Mon Sep 17 00:00:00 2001 From: tomek krok Date: Sun, 26 Jan 2025 10:13:58 +0100 Subject: [PATCH 03/15] added remove the movie --- ui/src/App.js | 20 ++++++++++++++++++-- 1 file changed, 18 insertions(+), 2 deletions(-) diff --git a/ui/src/App.js b/ui/src/App.js index bb9e876..290db95 100644 --- a/ui/src/App.js +++ b/ui/src/App.js @@ -8,6 +8,7 @@ import MoviesList from "./MoviesList"; function App() { const [movies, setMovies] = useState([]); const [addingMovie, setAddingMovie] = useState(false); + // const [removeMovie, setRemoveMovie] = useState(false); async function handleAddMovie(movie) { const response = await fetch('/movies', { @@ -23,8 +24,22 @@ function App() { } + async function handleRemoveMovie(movie) { + const response = await fetch(`/movies/${movie.id}`, { + method: 'DELETE' + }); + + if (response.ok) { + setMovies([...movies, movie]); + const removeMovie = movies.filter(m => m !== movie); + + setMovies(removeMovie); + } + + } + //use effect = it will fetch data from backend only on start - // + // useEffect(() => { const fetchMovies = async () => { const response = await fetch(`/movies`); @@ -46,13 +61,14 @@ function App() { {movies.length === 0 ?

No movies yet. Maybe add something?

: setMovies(movies.filter(m => m !== movie))} + onDeleteMovie={handleRemoveMovie} />} {addingMovie ? : } +
); } From 0191ec955257c8676eb95d33233d6f40396745c8 Mon Sep 17 00:00:00 2001 From: tomek krok Date: Sun, 26 Jan 2025 10:22:56 +0100 Subject: [PATCH 04/15] fix for adding and removing file one by one --- api/movies.db | Bin 28672 -> 28672 bytes ui/src/App.js | 5 ++++- 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/api/movies.db b/api/movies.db index c2a64adff3f8ddfdfbcfaf9b76e43e116c42be6b..e337d5675fa8c46b42380b9cc66d92cadd453eb9 100644 GIT binary patch delta 149 zcmZp8z}WDBae_3XOXP)^_^cTCtoZ)$ALqA#z|DpNDtw!*^wuy+iRv=( edL@<@2bZLlrRFIF7i6a9B&8Omvu|Hy-~a${Ul%3- diff --git a/ui/src/App.js b/ui/src/App.js index 290db95..c2a49a5 100644 --- a/ui/src/App.js +++ b/ui/src/App.js @@ -10,6 +10,7 @@ function App() { const [addingMovie, setAddingMovie] = useState(false); // const [removeMovie, setRemoveMovie] = useState(false); + //current issue to fix read ID from backend that we can remove directly after adding async function handleAddMovie(movie) { const response = await fetch('/movies', { method: 'POST', @@ -18,7 +19,9 @@ function App() { }); if (response.ok) { - setMovies([...movies, movie]); + // fixed issue by adding reading (async) response deserialized from recived json + const movieFromServer = await response.json(); + setMovies([...movies, movieFromServer]); setAddingMovie(false); } From 9e141f960d2f7294f6f5de7d89aa2487a8285af6 Mon Sep 17 00:00:00 2001 From: tomek krok Date: Sun, 26 Jan 2025 10:32:25 +0100 Subject: [PATCH 05/15] avoid when title was the same so map by id - which is unique --- ui/src/MoviesList.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/ui/src/MoviesList.js b/ui/src/MoviesList.js index 09166ef..b0ce2cd 100644 --- a/ui/src/MoviesList.js +++ b/ui/src/MoviesList.js @@ -4,7 +4,8 @@ export default function MoviesList(props) { return

Movies

    - {props.movies.map(movie =>
  • + {/* map by id it avoid issue when title is the same */} + {props.movies.map(movie =>
  • props.onDeleteMovie(movie)}/>
    • )}
From d23b8fa9bc9a88e55003f7819a2e366e68d7a4b5 Mon Sep 17 00:00:00 2001 From: "Tomasz.Krok" Date: Sun, 9 Feb 2025 19:57:27 +0100 Subject: [PATCH 06/15] added button and actor input text --- ui/src/MovieForm.js | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/ui/src/MovieForm.js b/ui/src/MovieForm.js index ee733f0..8a85af2 100644 --- a/ui/src/MovieForm.js +++ b/ui/src/MovieForm.js @@ -5,6 +5,8 @@ export default function MovieForm(props) { const [year, setYear] = useState(''); const [director, setDirector] = useState(''); const [description, setDescription] = useState(''); + const [actorName, setActorName] = useState(''); + const [actorSurname, setActorSurname] = useState(''); function addMovie(event) { event.preventDefault(); @@ -36,6 +38,14 @@ export default function MovieForm(props) {