diff --git a/package-lock.json b/package-lock.json index 1a037e5..c30cfb7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,7 +9,8 @@ "version": "0.0.0", "dependencies": { "react": "^18.2.0", - "react-dom": "^18.2.0" + "react-dom": "^18.2.0", + "uuid": "^9.0.1" }, "devDependencies": { "@types/react": "^18.2.43", @@ -3375,6 +3376,18 @@ "punycode": "^2.1.0" } }, + "node_modules/uuid": { + "version": "9.0.1", + "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.1.tgz", + "integrity": "sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==", + "funding": [ + "https://github.com/sponsors/broofa", + "https://github.com/sponsors/ctavan" + ], + "bin": { + "uuid": "dist/bin/uuid" + } + }, "node_modules/vite": { "version": "5.0.12", "resolved": "https://registry.npmjs.org/vite/-/vite-5.0.12.tgz", diff --git a/package.json b/package.json index 681d9b2..3107bad 100644 --- a/package.json +++ b/package.json @@ -11,7 +11,8 @@ }, "dependencies": { "react": "^18.2.0", - "react-dom": "^18.2.0" + "react-dom": "^18.2.0", + "uuid": "^9.0.1" }, "devDependencies": { "@types/react": "^18.2.43", diff --git a/src/App.css b/src/App.css deleted file mode 100644 index 902778b..0000000 --- a/src/App.css +++ /dev/null @@ -1,6 +0,0 @@ -#root { - max-width: 1280px; - margin: 0 auto; - padding: 2rem; - text-align: center; -} diff --git a/src/App.jsx b/src/App.jsx index 6cb7eeb..cda6c76 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,49 +1,45 @@ import { useState } from "react"; -import "./App.css"; +import styles from "./App.module.css"; import { Movies } from "./components/Movies"; +import { MovieForm } from "./components/MovieForm"; + +import { v4 as uuidv4 } from "uuid"; function App() { const [movies, setMovies] = useState([ { - id: 1, + id: uuidv4(), title: "Titanic", released: "1997", director: "James Cameron", favorite: false, }, { - id: 2, + id: uuidv4(), title: "The Naked Gun", released: "1988", director: "David Zucker", favorite: true, }, { - id: 3, - title: "Das Böse unter der Sonne", + id: uuidv4(), + title: "Evil under the sun", released: "1982", director: "Guy Hamilton", favorite: true, }, { - id: 5, + id: uuidv4(), title: "Sherlock Holmes", released: "2009", director: "Guy Ritchie", favorite: true, }, - - { - id: 6, - title: "Barbie", - released: "2023", - director: "Greta Gerwig", - favorite: false, - }, ]); + const [isFormOpen, setIsFormOpen] = useState(false); - function handleFavoriteChange(id, newFavoriteStatus) { + function handleToggleFavorite(id, newFavoriteStatus) { setMovies( movies.map((movie) => { if (movie.id === id) { @@ -57,7 +53,7 @@ function App() { }) ); } - + // delete function handleDeleteMovie(movieTitle) { setMovies( movies.filter((movie) => { @@ -65,19 +61,37 @@ function App() { }) ); } + // create + function handleMovie(newMovie) { + setMovies([ + { ...newMovie, id: uuidv4(), isFavorite: false }, + ...movies, + ]); + setIsFormOpen(false); + } return ( <>

Movies List

+
+ +
+ {isFormOpen ? : <>}
{movies.map((movie) => { return ( { - handleFavoriteChange(movie.id, newFavoriteStatus); + onToggleFavorite={(newFavoriteStatus) => { + handleToggleFavorite(movie.id, newFavoriteStatus); }} onMovieDelete={(movieTitle) => { handleDeleteMovie(movieTitle); @@ -90,6 +104,7 @@ function App() { ); })}
+ {/*

{JSON.stringify(movies)}

*/} ); } diff --git a/src/App.module.css b/src/App.module.css new file mode 100644 index 0000000..1c85acb --- /dev/null +++ b/src/App.module.css @@ -0,0 +1,18 @@ +#root { + max-width: 1280px; + margin: 0 auto; + padding: 2rem; + text-align: center; +} + +.header-box { + display: flex; + + gap: 15px; + margin: 0vh auto 0; + transform: translateY(-0%); + padding: 20px; +} +.header-box button { + padding: 30px; +} diff --git a/src/components/MovieForm.jsx b/src/components/MovieForm.jsx new file mode 100644 index 0000000..fb85ee2 --- /dev/null +++ b/src/components/MovieForm.jsx @@ -0,0 +1,68 @@ +import { useState } from "react"; +import styles from "./MovieForm.module.css"; + +export function MovieForm({ onAddMovie }) { + const [title, setTitle] = useState(""); + const [director, setDirector] = useState(""); + const [released, setReleased] = useState(""); + + return ( + <> +
{ + e.preventDefault(); + console.log("title:", title); + console.log("director:", director); + console.log("released:", released); + onAddMovie({ + title, + director, + released, + }); + }} + className={styles.form} + > +
+ + { + setTitle(event.target.value); + }} + type="text" + name="title" + id="title" + /> + {/*

{title}

*/} +
+
+ + { + setDirector(event.target.value); + }} + type="text" + name="director" + id="director" + /> + {/*

{director}

*/} +
+
+ + { + setReleased(event.target.value); + }} + type="text" + name="released" + id="released" + /> + {/*

{released}

*/} +
+ +
+ + ); +} diff --git a/src/components/MovieForm.module.css b/src/components/MovieForm.module.css new file mode 100644 index 0000000..bd34128 --- /dev/null +++ b/src/components/MovieForm.module.css @@ -0,0 +1,25 @@ +.form { + position: relative; + display: flex; + + gap: 15px; + margin: 0vh auto 0; + transform: translateY(-0%); + padding: 20px; + /* border: 1px solid red; */ +} + +.form .input-group { + display: flex; + flex-direction: column; + /* border: 1px solid red; */ + padding: 0; +} + +.form .input-group input { + padding: 10px; +} + +.form button { + margin-top: 20px; +} diff --git a/src/components/Movies.jsx b/src/components/Movies.jsx index 1d86d33..947353e 100644 --- a/src/components/Movies.jsx +++ b/src/components/Movies.jsx @@ -4,11 +4,11 @@ export function Movies({ released, director, favorite, - onFavoriteChange, + onToggleFavorite, onMovieDelete, }) { function handleFavorite() { - onFavoriteChange(favorite ? false : true); + onToggleFavorite(favorite ? false : true); } function handleDeleteMovie() { onMovieDelete(title); diff --git a/src/index.css b/src/index.css index 457f37a..2896eb2 100644 --- a/src/index.css +++ b/src/index.css @@ -39,7 +39,7 @@ body { header { display: flex; - margin: 20vh auto 0; + margin: 10vh auto 0; transform: translateY(-20%); padding: 20px; }