problems are fixed

mate-academy · Oct 23, 2023 · 89bb488 · 89bb488
1 parent c12105b
commit 89bb488
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 21 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -6,15 +6,18 @@ import moviesFromServer from './api/movies.json';
 import { Movie } from './types/Movie';
 
 export const App = () => {
-  const [add, onAdd] = useState<Movie[]>(moviesFromServer);
+  const [movies, setMovies] = useState<Movie[]>(moviesFromServer);
 
   return (
     <div className="page">
       <div className="page-content">
-        <MoviesList movies={add} />
+        <MoviesList movies={movies} />
       </div>
       <div className="sidebar">
-        <NewMovie onAdd={(movie) => onAdd(([...add, movie]))} />
+        <NewMovie setMovies={(newMovie) => {
+          setMovies(([...movies, newMovie]));
+        }}
+        />
       </div>
     </div>
   );

diff --git a/src/components/NewMovie/NewMovie.tsx b/src/components/NewMovie/NewMovie.tsx
@@ -3,10 +3,10 @@ import { Movie } from '../../types/Movie';
 import { TextField } from '../TextField';
 
 type Props = {
-  onAdd: (value: Movie) => void,
+  setMovies: (value: Movie) => void,
 };
 
-export const NewMovie: React.FC<Props> = ({ onAdd }) => {
+export const NewMovie: React.FC<Props> = ({ setMovies }) => {
   const [count, setCount] = useState(0);
 
   const [state, setState] = useState({
@@ -20,20 +20,33 @@ export const NewMovie: React.FC<Props> = ({ onAdd }) => {
   // eslint-disable-next-line max-len
   const pattern = /^((([A-Za-z]{3,9}:(?:\/\/)?)(?:[-;:&=+$,\w]+@)?[A-Za-z0-9.-]+|(?:www\.|[-;:&=+$,\w]+@)[A-Za-z0-9.-]+)((?:\/[+~%/.\w-_]*)?\??(?:[-+=&;%@,.\w_]*)#?(?:[,.!/\\\w]*))?)$/;
 
-  const [errorImgUrl, setErrorImgUrl] = useState('');
-  const [errorImdbUrl, setErrorImdbUrl] = useState('');
+  const [hasImgUrl, setHasImgUrl] = useState('');
+  const [hasImdbUrl, sethasImdbUrl] = useState('');
 
   function handleReset(event: React.FormEvent) {
     event.preventDefault();
 
-    const newErrorImgUrl = !pattern.test(state.imgUrl) ? 'error' : '';
-    const newErrorImdbUrl = !pattern.test(state.imdbUrl) ? 'error' : '';
+    const newhasImgUrl = !pattern.test(state.imgUrl) ? 'error' : '';
+    const newhasImdbUrl = !pattern.test(state.imdbUrl) ? 'error' : '';
 
-    setErrorImgUrl(newErrorImgUrl);
-    setErrorImdbUrl(newErrorImdbUrl);
+    setHasImgUrl((currImgUrl) => {
+      if (currImgUrl !== newhasImgUrl) {
+        return newhasImgUrl;
+      }
 
-    if (!newErrorImgUrl && !newErrorImdbUrl) {
-      onAdd(state);
+      return currImgUrl;
+    });
+
+    sethasImdbUrl((currImdbUrl) => {
+      if (currImdbUrl !== newhasImdbUrl) {
+        return newhasImdbUrl;
+      }
+
+      return currImdbUrl;
+    });
+
+    if (!newhasImgUrl && !newhasImdbUrl) {
+      setMovies(state);
       setState({
         title: '',
         description: '',
@@ -72,7 +85,7 @@ export const NewMovie: React.FC<Props> = ({ onAdd }) => {
         name="imgUrl"
         label="Image URL"
         value={state.imgUrl}
-        errorImgUrl={errorImgUrl}
+        hasImgUrl={hasImgUrl}
         onChange={value => setState({ ...state, imgUrl: value })}
         required
       />
@@ -81,7 +94,7 @@ export const NewMovie: React.FC<Props> = ({ onAdd }) => {
         name="imdbUrl"
         label="Imdb URL"
         value={state.imdbUrl}
-        errorImdbUrl={errorImdbUrl}
+        hasImdbUrl={hasImdbUrl}
         onChange={value => setState({ ...state, imdbUrl: value })}
         required
       />

diff --git a/src/components/TextField/TextField.tsx b/src/components/TextField/TextField.tsx
@@ -7,8 +7,8 @@ type Props = {
   label?: string,
   placeholder?: string,
   required?: boolean,
-  errorImgUrl?: string,
-  errorImdbUrl?: string,
+  hasImgUrl?: string,
+  hasImdbUrl?: string,
   onChange?: (newValue: string) => void,
 };
 
@@ -24,8 +24,8 @@ export const TextField: React.FC<Props> = ({
   label = name,
   placeholder = `Enter ${label}`,
   required = false,
-  errorImgUrl,
-  errorImdbUrl,
+  hasImgUrl,
+  hasImdbUrl,
   onChange = () => { },
 }) => {
   const [id] = useState(() => `${name}-${getRandomDigits()}`);
@@ -46,7 +46,7 @@ export const TextField: React.FC<Props> = ({
           id={id}
           data-cy={`movie-${name}`}
           className={classNames('input', {
-            'is-danger': hasError || errorImgUrl || errorImdbUrl,
+            'is-danger': hasError || hasImgUrl || hasImdbUrl,
           })}
           placeholder={placeholder}
           value={value}
@@ -59,7 +59,7 @@ export const TextField: React.FC<Props> = ({
         <p className="help is-danger">{`${label} is required`}</p>
       )}
 
-      {(errorImgUrl || errorImdbUrl) && (
+      {(hasImgUrl || hasImdbUrl) && (
         <p className="help is-danger">{`${label} is not valid`}</p>
       )}
     </div>