From ebbfca4cf86382ae9110662c92d483deeba296c0 Mon Sep 17 00:00:00 2001
From: Inna Sheremet <innsheremet88@gmail.com>
Date: Wed, 17 Jan 2024 19:02:57 +0200
Subject: [PATCH] solution

---
 src/components/NewMovie/NewMovie.tsx   | 14 ++++++++++----
 src/components/TextField/TextField.tsx |  4 +++-
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/src/components/NewMovie/NewMovie.tsx b/src/components/NewMovie/NewMovie.tsx
index 64d6f177c..83216c28b 100644
--- a/src/components/NewMovie/NewMovie.tsx
+++ b/src/components/NewMovie/NewMovie.tsx
@@ -29,14 +29,18 @@ export const NewMovie: React.FC<Props> = ({ onAdd }) => {
     setIsFormValid(false);
   };
 
+  const correctImgUrl = pattern.test(imgUrl);
+  const correctimdbUrl = pattern.test(imdbUrl);
+
+  // const isValid
+  // = !!title && pattern.test(imgUrl) && pattern.test(imdbUrl) && !!imdbId;
+
   const handleInputChange = (
     setter: React.Dispatch<React.SetStateAction<string>>, value: string,
   ) => {
-    const isValid = !!title && pattern.test(imgUrl)
-    && pattern.test(imdbUrl) && !!imdbId;
-
     setter(value);
-    setIsFormValid(isValid);
+
+    setIsFormValid(isFormValid);
   };
 
   const handleSubmit = (event: React.FormEvent) => {
@@ -88,6 +92,7 @@ export const NewMovie: React.FC<Props> = ({ onAdd }) => {
         label="Image URL"
         value={imgUrl}
         onChange={(value) => handleInputChange(setImgUrl, value)}
+        isValid={correctImgUrl}
         required
       />
 
@@ -96,6 +101,7 @@ export const NewMovie: React.FC<Props> = ({ onAdd }) => {
         label="Imdb URL"
         value={imdbUrl}
         onChange={(value) => handleInputChange(setImdbUrl, value)}
+        isValid={correctimdbUrl}
         required
       />
 
diff --git a/src/components/TextField/TextField.tsx b/src/components/TextField/TextField.tsx
index 966f708e5..882d866ec 100644
--- a/src/components/TextField/TextField.tsx
+++ b/src/components/TextField/TextField.tsx
@@ -8,6 +8,7 @@ type Props = {
   placeholder?: string,
   required?: boolean,
   onChange?: (newValue: string) => void,
+  isValid?: boolean,
 };
 
 function getRandomDigits() {
@@ -23,13 +24,14 @@ export const TextField: React.FC<Props> = ({
   placeholder = `Enter ${label}`,
   required = false,
   onChange = () => {},
+  isValid,
 }) => {
   // 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;
+  const hasError = touched && required && !value.trim() && !isValid;
 
   const handleTouchedChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     onChange(event.target.value);