From 6a8275adfa1469ebc0e81d48b71bdaf25f4bb377 Mon Sep 17 00:00:00 2001 From: Dmytro Pivkopa Date: Mon, 15 Jan 2024 18:39:23 +0200 Subject: [PATCH 1/6] solution --- README.md | 4 +- src/App.tsx | 10 +++- src/components/NewMovie/NewMovie.tsx | 86 +++++++++++++++++++++++++--- 3 files changed, 87 insertions(+), 13 deletions(-) diff --git a/README.md b/README.md index 6001d15be..cbcf97d0c 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://pivkopa.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..c7e51c1aa 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,16 +1,22 @@ +import { useState } from 'react'; import './App.scss'; import { MoviesList } from './components/MoviesList'; import { NewMovie } from './components/NewMovie'; import moviesFromServer from './api/movies.json'; export const App = () => { + const [prepMovies, setPrepMovies] = useState(moviesFromServer); + return (
- +
- {}} */ /> + { + setPrepMovies(currentMovies => [...currentMovies, movie]); + }} + />
); diff --git a/src/components/NewMovie/NewMovie.tsx b/src/components/NewMovie/NewMovie.tsx index 34f22fb0a..5141b9a6b 100644 --- a/src/components/NewMovie/NewMovie.tsx +++ b/src/components/NewMovie/NewMovie.tsx @@ -1,56 +1,124 @@ import { useState } from 'react'; import { TextField } from '../TextField'; +import { Movie } from '../../types/Movie'; -export const NewMovie = () => { +export interface NewMovieProps { + onAdd: (movie: Movie) => void; +} + +export const NewMovie = ({ onAdd }: NewMovieProps) => { // 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 [titleValue, setTitleValue] = useState(''); + const [description, setDescription] = useState(''); + const [imgUrlValue, setImgUrl] = useState(''); + const [imdbUrl, setImdbUrl] = useState(''); + const [imdbId, setImdbId] = useState(''); + + // const [hasReset, setHasReset] = useState(false); + + const able = titleValue.trim() + && imgUrlValue.trim() && imdbUrl.trim() + && imdbId.trim(); + + const createMovie = (): Movie => { + return { + title: titleValue, + description, + imgUrl: imgUrlValue, + imdbUrl, + imdbId, + }; + }; + + const submitAddMovie = () => { + const movie = createMovie(); + + setTitleValue(''); + setDescription(''); + setImgUrl(''); + setImdbUrl(''); + setImdbId(''); + + setCount((currentCount) => currentCount + 1); + + onAdd(movie); + }; return ( -
+ { + event.preventDefault(); + submitAddMovie(); + }} + >

Add a movie

{}} + value={titleValue} + onChange={(event) => { + setTitleValue(event); + }} required /> { + setDescription(event); + }} /> { + setImgUrl(event); + }} + required /> { + setImdbUrl(event); + }} + required /> { + setImdbId(event); + }} + required />
+ +
From 852fab6b72a6332dec224f93f91a3fd0d0be46d0 Mon Sep 17 00:00:00 2001 From: Dmytro Pivkopa Date: Tue, 16 Jan 2024 11:34:41 +0200 Subject: [PATCH 2/6] add edits of the student --- src/components/NewMovie/NewMovie.tsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/components/NewMovie/NewMovie.tsx b/src/components/NewMovie/NewMovie.tsx index 5141b9a6b..2c2461224 100644 --- a/src/components/NewMovie/NewMovie.tsx +++ b/src/components/NewMovie/NewMovie.tsx @@ -17,9 +17,7 @@ export const NewMovie = ({ onAdd }: NewMovieProps) => { const [imdbUrl, setImdbUrl] = useState(''); const [imdbId, setImdbId] = useState(''); - // const [hasReset, setHasReset] = useState(false); - - const able = titleValue.trim() + const ableToAddMovie = titleValue.trim() && imgUrlValue.trim() && imdbUrl.trim() && imdbId.trim(); @@ -114,7 +112,7 @@ export const NewMovie = ({ onAdd }: NewMovieProps) => { type="submit" data-cy="submit-button" className="button is-link" - disabled={!able} + disabled={!ableToAddMovie} > Add From de763bcd36176a8e1c9d0bf8358816efe253995f Mon Sep 17 00:00:00 2001 From: Dmytro Pivkopa Date: Thu, 18 Jan 2024 14:09:10 +0200 Subject: [PATCH 3/6] add edits of the mentor --- src/components/NewMovie/NewMovie.tsx | 93 +++++++++++++++++++--------- 1 file changed, 63 insertions(+), 30 deletions(-) diff --git a/src/components/NewMovie/NewMovie.tsx b/src/components/NewMovie/NewMovie.tsx index 2c2461224..ed2c84d72 100644 --- a/src/components/NewMovie/NewMovie.tsx +++ b/src/components/NewMovie/NewMovie.tsx @@ -1,4 +1,4 @@ -import { useState } from 'react'; +import React, { useState } from 'react'; import { TextField } from '../TextField'; import { Movie } from '../../types/Movie'; @@ -9,36 +9,44 @@ export interface NewMovieProps { export const NewMovie = ({ onAdd }: NewMovieProps) => { // Increase the count after successful form submission // to reset touched status of all the `Field`s - const [count, setCount] = useState(0); + const defaultMovie = { + title: '', + description: '', + imgUrl: '', + imdbUrl: '', + imdbId: '', + }; - const [titleValue, setTitleValue] = useState(''); - const [description, setDescription] = useState(''); - const [imgUrlValue, setImgUrl] = useState(''); - const [imdbUrl, setImdbUrl] = useState(''); - const [imdbId, setImdbId] = useState(''); + const [count, setCount] = useState(0); + const [newMovie, setNewMovie] = useState(defaultMovie); - const ableToAddMovie = titleValue.trim() - && imgUrlValue.trim() && imdbUrl.trim() - && imdbId.trim(); + const ableToAddMovie = newMovie.title.trim() + && newMovie.imgUrl.trim() && newMovie.imdbUrl.trim() + && newMovie.imdbId.trim(); const createMovie = (): Movie => { return { - title: titleValue, - description, - imgUrl: imgUrlValue, - imdbUrl, - imdbId, + title: newMovie.title, + description: newMovie.description, + imgUrl: newMovie.imgUrl, + imdbUrl: newMovie.imdbUrl, + imdbId: newMovie.imdbId, }; }; const submitAddMovie = () => { const movie = createMovie(); - setTitleValue(''); - setDescription(''); - setImgUrl(''); - setImdbUrl(''); - setImdbId(''); + setNewMovie(currentMovie => { + return { + ...currentMovie, + title: '', + description: '', + imgUrl: '', + imdbUrl: '', + imdbId: '', + }; + }); setCount((currentCount) => currentCount + 1); @@ -59,9 +67,14 @@ export const NewMovie = ({ onAdd }: NewMovieProps) => { { - setTitleValue(event); + setNewMovie(currentMovie => { + return { + ...currentMovie, + title: event, + }; + }); }} required /> @@ -69,18 +82,28 @@ export const NewMovie = ({ onAdd }: NewMovieProps) => { { - setDescription(event); + setNewMovie(currentMovie => { + return { + ...currentMovie, + description: event, + }; + }); }} /> { - setImgUrl(event); + setNewMovie(currentMovie => { + return { + ...currentMovie, + imgUrl: event, + }; + }); }} required /> @@ -88,9 +111,14 @@ export const NewMovie = ({ onAdd }: NewMovieProps) => { { - setImdbUrl(event); + setNewMovie(currentMovie => { + return { + ...currentMovie, + imdbUrl: event, + }; + }); }} required /> @@ -98,9 +126,14 @@ export const NewMovie = ({ onAdd }: NewMovieProps) => { { - setImdbId(event); + setNewMovie(currentMovie => { + return { + ...currentMovie, + imdbId: event, + }; + }); }} required /> From 57cc9ad7a016ded4c2ed7110ad91d1ae723b1969 Mon Sep 17 00:00:00 2001 From: Dmytro Pivkopa Date: Thu, 18 Jan 2024 14:17:00 +0200 Subject: [PATCH 4/6] solving npm error --- src/components/NewMovie/NewMovie.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/NewMovie/NewMovie.tsx b/src/components/NewMovie/NewMovie.tsx index ed2c84d72..8bf60a3e6 100644 --- a/src/components/NewMovie/NewMovie.tsx +++ b/src/components/NewMovie/NewMovie.tsx @@ -6,7 +6,7 @@ export interface NewMovieProps { onAdd: (movie: Movie) => void; } -export const NewMovie = ({ onAdd }: NewMovieProps) => { +export const NewMovie: React.FC = ({ onAdd }) => { // Increase the count after successful form submission // to reset touched status of all the `Field`s const defaultMovie = { From f7b1c65b00839f18b811ad4f8108ac92bee7d4c6 Mon Sep 17 00:00:00 2001 From: Dmytro Pivkopa Date: Thu, 18 Jan 2024 18:23:41 +0200 Subject: [PATCH 5/6] add third edits of the mentor --- src/components/NewMovie/NewMovie.tsx | 26 ++++++-------------------- 1 file changed, 6 insertions(+), 20 deletions(-) diff --git a/src/components/NewMovie/NewMovie.tsx b/src/components/NewMovie/NewMovie.tsx index 8bf60a3e6..1c15c1acf 100644 --- a/src/components/NewMovie/NewMovie.tsx +++ b/src/components/NewMovie/NewMovie.tsx @@ -24,29 +24,18 @@ export const NewMovie: React.FC = ({ onAdd }) => { && newMovie.imgUrl.trim() && newMovie.imdbUrl.trim() && newMovie.imdbId.trim(); - const createMovie = (): Movie => { - return { + const submitAddMovie = (event: React.FormEvent) => { + event.preventDefault(); + + const movie = { title: newMovie.title, description: newMovie.description, imgUrl: newMovie.imgUrl, imdbUrl: newMovie.imdbUrl, imdbId: newMovie.imdbId, }; - }; - - const submitAddMovie = () => { - const movie = createMovie(); - setNewMovie(currentMovie => { - return { - ...currentMovie, - title: '', - description: '', - imgUrl: '', - imdbUrl: '', - imdbId: '', - }; - }); + setNewMovie(defaultMovie); setCount((currentCount) => currentCount + 1); @@ -57,10 +46,7 @@ export const NewMovie: React.FC = ({ onAdd }) => {
{ - event.preventDefault(); - submitAddMovie(); - }} + onSubmit={submitAddMovie} >

Add a movie

From 789d11d2f1326eb7e826ca2f2817683bc1d3f459 Mon Sep 17 00:00:00 2001 From: Dmytro Pivkopa Date: Fri, 19 Jan 2024 15:23:25 +0200 Subject: [PATCH 6/6] add fourth edits of the entor --- src/components/NewMovie/NewMovie.tsx | 10 +--------- 1 file changed, 1 insertion(+), 9 deletions(-) diff --git a/src/components/NewMovie/NewMovie.tsx b/src/components/NewMovie/NewMovie.tsx index 1c15c1acf..736cd59bf 100644 --- a/src/components/NewMovie/NewMovie.tsx +++ b/src/components/NewMovie/NewMovie.tsx @@ -27,19 +27,11 @@ export const NewMovie: React.FC = ({ onAdd }) => { const submitAddMovie = (event: React.FormEvent) => { event.preventDefault(); - const movie = { - title: newMovie.title, - description: newMovie.description, - imgUrl: newMovie.imgUrl, - imdbUrl: newMovie.imdbUrl, - imdbId: newMovie.imdbId, - }; - setNewMovie(defaultMovie); setCount((currentCount) => currentCount + 1); - onAdd(movie); + onAdd(newMovie); }; return (