task solution --focus and errors improvements

src/App.tsx

@@ -19,7 +19,6 @@ export const App: React.FC = () => {
   const [errorMessage, setErrorMessage] = useState('');
   const [tempTodo, setTempTodo] = useState<Todo | null>();
   const inputRef = useRef<HTMLInputElement>(null);
-  const [isErrorHiden, setIsErrorHiden] = useState(true);
 
   const focusInput = () => {
     if (inputRef.current) {
@@ -32,9 +31,7 @@ export const App: React.FC = () => {
       await postService
         .addTodos(todo)
         .then(newTodo => setTodos([...todos, newTodo]));
-      setIsErrorHiden(true);
     } catch (error) {
-      setIsErrorHiden(false);
       setErrorMessage('Unable to add a todo');
       throw error;
     }
@@ -188,8 +185,7 @@ export const App: React.FC = () => {
             filteredTodos={filteredTodos}
             onAddTodo={addTodo}
             onTempTodo={setTempTodo}
-            errorMessage={setErrorMessage}
-            isErrorHidden={setIsErrorHiden}
+            onErrorMessage={setErrorMessage}
             onBulkUpdate={bulkCheckTodo}
           />
         </header>
@@ -216,9 +212,7 @@ export const App: React.FC = () => {
 
       <ErrorMessage
         errorMessage={errorMessage}
-        isHidden={isErrorHiden}
-        setIsHidden={setIsErrorHiden}
-        setErrorMessage={setErrorMessage}
+        onErrorMessage={setErrorMessage}
       />
     </div>
   );

src/components/ErrorMessage/ErrorMessage.tsx

@@ -3,40 +3,33 @@ import { useEffect } from 'react';
 
 interface Props {
   errorMessage: string;
-  isHidden: boolean;
-  setIsHidden: (boolean: boolean) => void;
-  setErrorMessage: (string: string) => void;
+  onErrorMessage: (string: string) => void;
 }
 
 export const ErrorMessage: React.FC<Props> = ({
   errorMessage,
-  isHidden,
-  setIsHidden,
-  setErrorMessage,
+  onErrorMessage,
 }) => {
   const handleClose = () => {
-    setIsHidden(true);
-    setErrorMessage('');
+    onErrorMessage('');
   };
 
   useEffect(() => {
     if (errorMessage) {
-      setIsHidden(false);
-
       const timer = setTimeout(() => {
         handleClose();
       }, 3000);
 
       return () => clearTimeout(timer);
     }
-  }, [errorMessage, isHidden]);
+  }, [errorMessage]);
 
   return (
     <div
       data-cy="ErrorNotification"
       className={classNames(
         'notification is-danger is-light has-text-weight-normal',
-        isHidden && 'hidden',
+        !errorMessage && 'hidden',
       )}
     >
       <button

src/components/TodoForm/TodoForm.tsx

@@ -7,23 +7,21 @@ interface Props {
   todos: Todo[];
   filteredTodos: Todo[];
   onAddTodo: (todo: Todo) => Promise<void>;
-  errorMessage: (error: string) => void;
+  onErrorMessage: (error: string) => void;
   onTempTodo: (todo: Todo | null) => void;
   onBulkUpdate: (todoArr: Todo[], status: boolean) => void;
   focusInput: () => void;
   inputRef: React.RefObject<HTMLInputElement>;
-  isErrorHidden: (boolean: boolean) => void;
 }
 
 export const TodoForm: React.FC<Props> = ({
   todos,
   filteredTodos,
   onAddTodo,
-  errorMessage,
+  onErrorMessage,
   onTempTodo,
   focusInput,
   inputRef,
-  isErrorHidden,
   onBulkUpdate,
 }) => {
   const [todo, setTodo] = useState('');
@@ -40,7 +38,6 @@ export const TodoForm: React.FC<Props> = ({
   };
 
   const handleInput = (evnt: React.ChangeEvent<HTMLInputElement>) => {
-    isErrorHidden(true);
     setTodo(evnt.target.value);
     setDisableInput(false);
 
@@ -56,8 +53,7 @@ export const TodoForm: React.FC<Props> = ({
     setDisableInput(true);
 
     if (!todo.trim()) {
-      isErrorHidden(false);
-      errorMessage('Title should not be empty');
+      onErrorMessage('Title should not be empty');
       setDisableInput(false);
 
       return;
@@ -81,8 +77,7 @@ export const TodoForm: React.FC<Props> = ({
     } catch (error) {
       setDisableInput(false);
       onTempTodo(null);
-      isErrorHidden(false);
-      errorMessage('Unable to add a todo');
+      onErrorMessage('Unable to add a todo');
     }
   };