solution

mate-academy · Jan 17, 2024 · dd9f2dd · dd9f2dd
1 parent ebbfca4
commit dd9f2dd
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 5 deletions.
diff --git a/src/components/NewMovie/NewMovie.tsx b/src/components/NewMovie/NewMovie.tsx
@@ -32,8 +32,8 @@ export const NewMovie: React.FC<Props> = ({ onAdd }) => {
   const correctImgUrl = pattern.test(imgUrl);
   const correctimdbUrl = pattern.test(imdbUrl);
 
-  // const isValid
-  // = !!title && pattern.test(imgUrl) && pattern.test(imdbUrl) && !!imdbId;
+  const isValid
+  = !!title && pattern.test(imgUrl) && pattern.test(imdbUrl) && !!imdbId;
 
   const handleInputChange = (
     setter: React.Dispatch<React.SetStateAction<string>>, value: string,
@@ -121,7 +121,7 @@ export const NewMovie: React.FC<Props> = ({ onAdd }) => {
             className={cn('button', 'is-link', {
               'is-disabled': !isFormValid,
             })}
-            disabled={!isFormValid}
+            disabled={!isValid}
           >
             Add
           </button>

diff --git a/src/components/TextField/TextField.tsx b/src/components/TextField/TextField.tsx
@@ -24,14 +24,15 @@ export const TextField: React.FC<Props> = ({
   placeholder = `Enter ${label}`,
   required = false,
   onChange = () => {},
-  isValid,
+  isValid = true,
 }) => {
   // generage a unique id once on component load
   const [id] = useState(() => `${name}-${getRandomDigits()}`);
 
   // To show errors only if the field was touched (onBlur)
   const [touched, setTouched] = useState(false);
-  const hasError = touched && required && !value.trim() && !isValid;
+  const hasError = (touched && required && !value.trim())
+  || (!isValid && touched && required);
 
   const handleTouchedChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     onChange(event.target.value);