From 0499f4d6065a813f62332415065c4766a9f1107d Mon Sep 17 00:00:00 2001 From: Vitalii Venher Date: Sat, 18 Jan 2025 19:58:32 +0200 Subject: [PATCH 1/3] solution --- src/App.tsx | 11 ++- src/components/NewMovie/NewMovie.tsx | 103 ++++++++++++++++++++++++--- 2 files changed, 103 insertions(+), 11 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 34be670b0..3b8c8b954 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -2,15 +2,22 @@ import './App.scss'; import { MoviesList } from './components/MoviesList'; import { NewMovie } from './components/NewMovie'; import moviesFromServer from './api/movies.json'; +import { Movie } from './types/Movie'; +import { useState } from 'react'; export const App = () => { + const [movies, setMovies] = useState(moviesFromServer); + const handleMovie = (newMovie: Movie) => { + setMovies(prevMovies => [...prevMovies, newMovie]); + }; + return (
- +
- {}} */ /> +
); diff --git a/src/components/NewMovie/NewMovie.tsx b/src/components/NewMovie/NewMovie.tsx index 85bace9dd..d59da058e 100644 --- a/src/components/NewMovie/NewMovie.tsx +++ b/src/components/NewMovie/NewMovie.tsx @@ -1,30 +1,112 @@ import { useState } from 'react'; import { TextField } from '../TextField'; +import { Movie } from '../../types/Movie'; +type Props = { + onAdd: (movie: Movie) => void; +}; -export const NewMovie = () => { +export const NewMovie: React.FC = ({ onAdd }) => { // Increase the count after successful form submission // to reset touched status of all the `Field`s - const [count] = useState(0); + const [count, setCount] = useState(0); + const [title, setTitle] = useState(''); + const [description, setDescription] = useState(''); + const [imgUrl, setImgUrl] = useState(''); + const [imdbUrl, setImdbUrl] = useState(''); + const [imdbId, setImdbId] = useState(''); + // const [hasError, setError] = useState(false); + + const handleTitle = (val: string) => { + setTitle(val); + }; + + const handleDescription = (val: string) => { + setDescription(val); + }; + + const handleImgUrl = (val: string) => { + setImgUrl(val); + }; + + const handleImdbUrl = (val: string) => { + setImdbUrl(val); + }; + + const handleImdbUId = (val: string) => { + setImdbId(val); + }; + + const trimedTitle = title.trim(); + const trimedDescription = description.trim(); + const trimedImgUrl = imgUrl.trim(); + const trimmedImdbUrl = imdbUrl.trim(); + const trimmedImdbId = imdbId.trim(); + + const newMovie = { + title: trimedTitle, + description: trimedDescription, + imgUrl: trimedImgUrl, + imdbUrl: trimmedImdbUrl, + imdbId: trimmedImdbId, + }; + + const handleSubmit = (event: React.FormEvent) => { + event.preventDefault(); + + if (trimedTitle || trimedImgUrl || trimmedImdbUrl || trimmedImdbId) { + onAdd(newMovie); + } + + setTitle(''); + setDescription(''); + setImgUrl(''); + setImdbUrl(''); + setImdbId(''); + setCount(prev => prev + 1); + }; return ( -
+

Add a movie

{}} + value={title} + onChange={handleTitle} required /> - + - + - + - +
@@ -32,6 +114,9 @@ export const NewMovie = () => { type="submit" data-cy="submit-button" className="button is-link" + disabled={ + !trimedTitle || !trimedImgUrl || !trimmedImdbUrl || !trimmedImdbId + } > Add From b03bb65aaa9a9ae20e7cb3adc15f5cdd3b71dc99 Mon Sep 17 00:00:00 2001 From: Vitalii Venher Date: Sat, 18 Jan 2025 20:00:21 +0200 Subject: [PATCH 2/3] fixed README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index abe3db5d7..eed80a468 100644 --- a/README.md +++ b/README.md @@ -27,4 +27,4 @@ const pattern = /^((([A-Za-z]{3,9}:(?:\/\/)?)(?:[-;:&=+$,\w]+@)?[A-Za-z0-9.-]+|( - Implement a solution following the [React task guideline](https://github.com/mate-academy/react_task-guideline#react-tasks-guideline). - Use the [React TypeScript cheat sheet](https://mate-academy.github.io/fe-program/js/extra/react-typescript). - Open one more terminal and run tests with `npm test` to ensure your solution is correct. -- Replace `` with your Github username in the [DEMO LINK](https://.github.io/react_movies-list-add-form/) and add it to the PR description. +- Replace `` with your Github username in the [DEMO LINK](https://venher-v.github.io/react_movies-list-add-form/) and add it to the PR description. From 89e363d99541e6c4e7deb91723ac2468818f3b04 Mon Sep 17 00:00:00 2001 From: Vitalii Venher Date: Sat, 18 Jan 2025 20:09:54 +0200 Subject: [PATCH 3/3] solution --- src/components/NewMovie/NewMovie.tsx | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/src/components/NewMovie/NewMovie.tsx b/src/components/NewMovie/NewMovie.tsx index d59da058e..2a56ef291 100644 --- a/src/components/NewMovie/NewMovie.tsx +++ b/src/components/NewMovie/NewMovie.tsx @@ -32,20 +32,20 @@ export const NewMovie: React.FC = ({ onAdd }) => { setImdbUrl(val); }; - const handleImdbUId = (val: string) => { + const handleImdbId = (val: string) => { setImdbId(val); }; - const trimedTitle = title.trim(); - const trimedDescription = description.trim(); - const trimedImgUrl = imgUrl.trim(); + const trimmedTitle = title.trim(); + const trimmedDescription = description.trim(); + const trimmedImgUrl = imgUrl.trim(); const trimmedImdbUrl = imdbUrl.trim(); const trimmedImdbId = imdbId.trim(); const newMovie = { - title: trimedTitle, - description: trimedDescription, - imgUrl: trimedImgUrl, + title: trimmedTitle, + description: trimmedDescription, + imgUrl: trimmedImgUrl, imdbUrl: trimmedImdbUrl, imdbId: trimmedImdbId, }; @@ -53,7 +53,7 @@ export const NewMovie: React.FC = ({ onAdd }) => { const handleSubmit = (event: React.FormEvent) => { event.preventDefault(); - if (trimedTitle || trimedImgUrl || trimmedImdbUrl || trimmedImdbId) { + if (trimmedTitle && trimmedImgUrl && trimmedImdbUrl && trimmedImdbId) { onAdd(newMovie); } @@ -104,7 +104,7 @@ export const NewMovie: React.FC = ({ onAdd }) => { name="imdbId" label="Imdb ID" value={imdbId} - onChange={handleImdbUId} + onChange={handleImdbId} required />