From 34291c69914252f8a7e348386261d62c59b4ad6b Mon Sep 17 00:00:00 2001 From: Vladyslav Atanov Date: Thu, 19 Oct 2023 21:34:22 +0300 Subject: [PATCH 1/3] made add form for movie list --- README.md | 4 +- src/App.tsx | 11 +++- src/components/NewMovie/NewMovie.tsx | 79 ++++++++++++++++++++++++---- 3 files changed, 81 insertions(+), 13 deletions(-) diff --git a/README.md b/README.md index 6001d15be..5e98e82f7 100644 --- a/README.md +++ b/README.md @@ -4,7 +4,7 @@ You have the `App` with the `MoviesList` and `NewMovie` form containing ready to use `TextField` components. Learn how it works and implement an ability to add movies from [IMDB](https://www.imdb.com/). -If you want to test your page you can get first image from a [movie page](https://www.imdb.com/title/tt1312171) using `DevTools` -> `Network` -> `Img` +If you want to test your page you can get first image from a [movie page](https://www.imdb.com/title/tt1312171) using `DevTools` -> `Network` -> `Img` > Here is [the demo page](https://mate-academy.github.io/react_movies-list-add-form/) @@ -30,4 +30,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://sintax1s.github.io/react_movies-list-add-form/) and add it to the PR description. diff --git a/src/App.tsx b/src/App.tsx index 34be670b0..b702edfdc 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,16 +1,23 @@ +import { useState } from 'react'; import './App.scss'; import { MoviesList } from './components/MoviesList'; import { NewMovie } from './components/NewMovie'; import moviesFromServer from './api/movies.json'; +import { Movie } from './types/Movie'; export const App = () => { + const [movies, setMovies] = useState(moviesFromServer); + return (
- +
- {}} */ /> + { + setMovies([...movies, movie]); + }} + />
); diff --git a/src/components/NewMovie/NewMovie.tsx b/src/components/NewMovie/NewMovie.tsx index 34f22fb0a..005a0af86 100644 --- a/src/components/NewMovie/NewMovie.tsx +++ b/src/components/NewMovie/NewMovie.tsx @@ -1,45 +1,105 @@ import { useState } from 'react'; import { TextField } from '../TextField'; +import { Movie } from '../../types/Movie'; -export const NewMovie = () => { +type Props = { + onAdd: (movie: Movie) => void +}; + +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); + + // #region state + const [title, setTitle] = useState(''); + const [description, setDescription] = useState(''); + const [imgUrl, setImgUrl] = useState(''); + const [imdbUrl, setImdbUrl] = useState(''); + const [imdbId, setImdbId] = useState(''); + // #endregion + const isDisabled = !( + title + && imgUrl + && imdbUrl + && imdbId + ); + + const handleSubmit = (event: React.FormEvent) => { + event.preventDefault(); + + onAdd({ + title, + description, + imgUrl, + imdbUrl, + imdbId, + }); + + setTitle(''); + setDescription(''); + setImgUrl(''); + setImdbUrl(''); + setImdbId(''); + + setCount(prev => prev + 1); + }; return ( -
+

Add a movie

{}} + value={title} + onChange={(value: string): void => { + setTitle(value); + }} required /> { + setDescription(value); + }} /> { + setImgUrl(value); + }} + required /> { + setImdbUrl(value); + }} + required /> { + setImdbId(value); + }} + required />
@@ -48,6 +108,7 @@ export const NewMovie = () => { type="submit" data-cy="submit-button" className="button is-link" + disabled={isDisabled} > Add From da907c277d01148a617e8fa130c5f97f8492fb31 Mon Sep 17 00:00:00 2001 From: Vladyslav Atanov Date: Thu, 19 Oct 2023 21:41:33 +0300 Subject: [PATCH 2/3] add spred for copy --- src/App.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/App.tsx b/src/App.tsx index b702edfdc..eec852974 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -6,7 +6,7 @@ import moviesFromServer from './api/movies.json'; import { Movie } from './types/Movie'; export const App = () => { - const [movies, setMovies] = useState(moviesFromServer); + const [movies, setMovies] = useState([...moviesFromServer]); return (
From 7e3ddd1c55dec094682ae9aa53e91d11d7600665 Mon Sep 17 00:00:00 2001 From: Vladyslav Atanov Date: Sun, 22 Oct 2023 19:12:43 +0300 Subject: [PATCH 3/3] made fixes --- src/components/NewMovie/NewMovie.tsx | 39 +++++++++++----------------- 1 file changed, 15 insertions(+), 24 deletions(-) diff --git a/src/components/NewMovie/NewMovie.tsx b/src/components/NewMovie/NewMovie.tsx index 005a0af86..862530227 100644 --- a/src/components/NewMovie/NewMovie.tsx +++ b/src/components/NewMovie/NewMovie.tsx @@ -7,17 +7,14 @@ type Props = { }; export const NewMovie: React.FC = ({ onAdd }) => { - // Increase the count after successful form submission - // to reset touched status of all the `Field`s const [count, setCount] = useState(0); - // #region state const [title, setTitle] = useState(''); const [description, setDescription] = useState(''); const [imgUrl, setImgUrl] = useState(''); const [imdbUrl, setImdbUrl] = useState(''); const [imdbId, setImdbId] = useState(''); - // #endregion + const isDisabled = !( title && imgUrl @@ -25,6 +22,14 @@ export const NewMovie: React.FC = ({ onAdd }) => { && imdbId ); + function resetStates(): void { + setTitle(''); + setDescription(''); + setImgUrl(''); + setImdbUrl(''); + setImdbId(''); + } + const handleSubmit = (event: React.FormEvent) => { event.preventDefault(); @@ -36,11 +41,7 @@ export const NewMovie: React.FC = ({ onAdd }) => { imdbId, }); - setTitle(''); - setDescription(''); - setImgUrl(''); - setImdbUrl(''); - setImdbId(''); + resetStates(); setCount(prev => prev + 1); }; @@ -57,9 +58,7 @@ export const NewMovie: React.FC = ({ onAdd }) => { name="title" label="Title" value={title} - onChange={(value: string): void => { - setTitle(value); - }} + onChange={setTitle} required /> @@ -67,18 +66,14 @@ export const NewMovie: React.FC = ({ onAdd }) => { name="description" label="Description" value={description} - onChange={(value: string): void => { - setDescription(value); - }} + onChange={setDescription} /> { - setImgUrl(value); - }} + onChange={setImgUrl} required /> @@ -86,9 +81,7 @@ export const NewMovie: React.FC = ({ onAdd }) => { name="imdbUrl" label="Imdb URL" value={imdbUrl} - onChange={(value: string): void => { - setImdbUrl(value); - }} + onChange={setImdbUrl} required /> @@ -96,9 +89,7 @@ export const NewMovie: React.FC = ({ onAdd }) => { name="imdbId" label="Imdb ID" value={imdbId} - onChange={(value: string): void => { - setImdbId(value); - }} + onChange={setImdbId} required />