Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Develop #2714

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Develop #2714

Changes from 2 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion README.md
Original file line number Diff line number Diff line change
@@ -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 `<your_account>` with your Github username in the [DEMO LINK](https://<your_account>.github.io/react_movies-list-add-form/) and add it to the PR description.
- Replace `<your_account>` 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.
11 changes: 9 additions & 2 deletions src/App.tsx
Original file line number Diff line number Diff line change
@@ -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 (
<div className="page">
<div className="page-content">
<MoviesList movies={moviesFromServer} />
<MoviesList movies={movies} />
</div>
<div className="sidebar">
<NewMovie /* onAdd={(movie) => {}} */ />
<NewMovie onAdd={handleMovie} />
</div>
</div>
);
103 changes: 94 additions & 9 deletions src/components/NewMovie/NewMovie.tsx
Original file line number Diff line number Diff line change
@@ -1,37 +1,122 @@
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<Props> = ({ 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);
};

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There is a typo in the function name handleImdbUId. It should be handleImdbId to maintain consistency with the state variable imdbId.


const trimedTitle = title.trim();
const trimedDescription = description.trim();
const trimedImgUrl = imgUrl.trim();

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There are typos in the variable names trimedTitle, trimedDescription, and trimedImgUrl. They should be trimmedTitle, trimmedDescription, and trimmedImgUrl respectively to maintain consistency and correct spelling.

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);
}

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The condition in the if statement should ensure that all required fields are filled before adding a new movie. Currently, it checks if any of the fields are filled. Consider changing the condition to check if all required fields are non-empty.


setTitle('');
setDescription('');
setImgUrl('');
setImdbUrl('');
setImdbId('');
setCount(prev => prev + 1);
};

return (
<form className="NewMovie" key={count}>
<form className="NewMovie" key={count} onSubmit={handleSubmit}>
<h2 className="title">Add a movie</h2>

<TextField
name="title"
label="Title"
value=""
onChange={() => {}}
value={title}
onChange={handleTitle}
required
/>

<TextField name="description" label="Description" value="" />
<TextField
name="description"
label="Description"
value={description}
onChange={handleDescription}
/>

<TextField name="imgUrl" label="Image URL" value="" />
<TextField
name="imgUrl"
label="Image URL"
value={imgUrl}
onChange={handleImgUrl}
required
/>

<TextField name="imdbUrl" label="Imdb URL" value="" />
<TextField
name="imdbUrl"
label="Imdb URL"
value={imdbUrl}
onChange={handleImdbUrl}
required
/>

<TextField name="imdbId" label="Imdb ID" value="" />
<TextField
name="imdbId"
label="Imdb ID"
value={imdbId}
onChange={handleImdbUId}
required
/>

<div className="field is-grouped">
<div className="control">
<button
type="submit"
data-cy="submit-button"
className="button is-link"
disabled={
!trimedTitle || !trimedImgUrl || !trimmedImdbUrl || !trimmedImdbId
}
>
Add
</button>