From be069aeb0a91e3374afdc5c09b20db4f27f9daac Mon Sep 17 00:00:00 2001
From: Yuriy Shvorob <yuriy.sh@mate.academy>
Date: Thu, 16 Jan 2025 16:24:03 +0200
Subject: [PATCH 01/10] ready component for todo list

---
 src/App.scss                          | 23 ------------
 src/App.tsx                           | 53 ++++++++++++---------------
 src/App.types.ts                      | 17 +++++++++
 src/components/TodoInfo/TodoInfo.scss | 22 +++++++++++
 src/components/TodoInfo/TodoInfo.tsx  | 28 +++++++++++++-
 src/components/TodoList/TodoList.tsx  | 17 ++++++++-
 6 files changed, 106 insertions(+), 54 deletions(-)
 create mode 100644 src/App.types.ts
 create mode 100644 src/components/TodoInfo/TodoInfo.scss

diff --git a/src/App.scss b/src/App.scss
index 9b9ddc979c..ed7adc8ef4 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -14,26 +14,3 @@ button {
 .error {
   color: red;
 }
-
-.TodoInfo {
-  width: max-content;
-  padding: 8px;
-  margin: 12px 0;
-  border: 1px solid #000;
-  border-radius: 8px;
-  background-color: antiquewhite;
-
-  &__title {
-    margin: 4px 0;
-    font-size: inherit;
-    color: #f00;
-  }
-
-  &--completed &__title {
-    color: #080;
-  }
-}
-
-.UserInfo {
-  font-style: italic;
-}
diff --git a/src/App.tsx b/src/App.tsx
index a9a9bb4c53..f4f63ccff1 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,7 +1,28 @@
 import './App.scss';
 
-// import usersFromServer from './api/users';
-// import todosFromServer from './api/todos';
+import usersFromServer from './api/users';
+import todosFromServer from './api/todos';
+import { TodoWithUser } from './App.types';
+import { TodoList } from './components/TodoList';
+
+const todos: TodoWithUser[] = todosFromServer
+  .map(todo => {
+    if (!todo) {
+      return null;
+    }
+
+    const user = usersFromServer.find(userInfo => userInfo.id === todo.userId);
+
+    if (!user) {
+      return null;
+    }
+
+    return {
+      ...todo,
+      user,
+    };
+  })
+  .filter((todo): todo is TodoWithUser => todo !== null);
 
 export const App = () => {
   return (
@@ -29,33 +50,7 @@ export const App = () => {
         </button>
       </form>
 
-      <section className="TodoList">
-        <article data-id="1" className="TodoInfo TodoInfo--completed">
-          <h2 className="TodoInfo__title">delectus aut autem</h2>
-
-          <a className="UserInfo" href="mailto:Sincere@april.biz">
-            Leanne Graham
-          </a>
-        </article>
-
-        <article data-id="15" className="TodoInfo TodoInfo--completed">
-          <h2 className="TodoInfo__title">delectus aut autem</h2>
-
-          <a className="UserInfo" href="mailto:Sincere@april.biz">
-            Leanne Graham
-          </a>
-        </article>
-
-        <article data-id="2" className="TodoInfo">
-          <h2 className="TodoInfo__title">
-            quis ut nam facilis et officia qui
-          </h2>
-
-          <a className="UserInfo" href="mailto:Julianne.OConner@kory.org">
-            Patricia Lebsack
-          </a>
-        </article>
-      </section>
+      <TodoList todos={todos} />
     </div>
   );
 };
diff --git a/src/App.types.ts b/src/App.types.ts
new file mode 100644
index 0000000000..641492d45e
--- /dev/null
+++ b/src/App.types.ts
@@ -0,0 +1,17 @@
+export type User = {
+  id: number;
+  name: string;
+  username: string;
+  email: string;
+};
+
+export type Todo = {
+  userId: number;
+  id: number;
+  title: string;
+  completed: boolean;
+};
+
+export interface TodoWithUser extends Todo {
+  user: User;
+}
diff --git a/src/components/TodoInfo/TodoInfo.scss b/src/components/TodoInfo/TodoInfo.scss
new file mode 100644
index 0000000000..0aa322b7cd
--- /dev/null
+++ b/src/components/TodoInfo/TodoInfo.scss
@@ -0,0 +1,22 @@
+.TodoInfo {
+  width: max-content;
+  padding: 8px;
+  margin: 12px 0;
+  border: 1px solid #000;
+  border-radius: 8px;
+  background-color: antiquewhite;
+
+  &__title {
+    margin: 4px 0;
+    font-size: inherit;
+    color: #f00;
+  }
+
+  &--completed &__title {
+    color: #080;
+  }
+}
+
+.UserInfo {
+  font-style: italic;
+}
diff --git a/src/components/TodoInfo/TodoInfo.tsx b/src/components/TodoInfo/TodoInfo.tsx
index d164511fa8..9d6dc3f539 100644
--- a/src/components/TodoInfo/TodoInfo.tsx
+++ b/src/components/TodoInfo/TodoInfo.tsx
@@ -1 +1,27 @@
-export const TodoInfo = () => {};
+import classNames from 'classnames';
+import { TodoWithUser } from '../../App.types';
+import './TodoInfo.scss';
+
+interface Props {
+  todo: TodoWithUser;
+}
+
+export const TodoInfo = ({ todo }: Props) => {
+  const { title, user, completed } = todo;
+  const { name, email } = user;
+
+  return (
+    <article
+      data-id="1"
+      className={classNames('TodoInfo', {
+        'TodoInfo--completed': completed,
+      })}
+    >
+      <h2 className="TodoInfo__title">{title}</h2>
+
+      <a className="UserInfo" href={email}>
+        {name}
+      </a>
+    </article>
+  );
+};
diff --git a/src/components/TodoList/TodoList.tsx b/src/components/TodoList/TodoList.tsx
index c12fae07c0..f76dc4fbbf 100644
--- a/src/components/TodoList/TodoList.tsx
+++ b/src/components/TodoList/TodoList.tsx
@@ -1 +1,16 @@
-export const TodoList = () => {};
+import { TodoWithUser } from '../../App.types';
+import { TodoInfo } from '../TodoInfo';
+
+type Props = {
+  todos: TodoWithUser[];
+};
+
+export const TodoList = ({ todos }: Props) => {
+  return (
+    <section className="TodoList">
+      {todos.map(todo => {
+        return <TodoInfo todo={todo} key={todo.id} />;
+      })}
+    </section>
+  );
+};

From 05a8ff89c84226d022400ebbaad1ec3b254ff452 Mon Sep 17 00:00:00 2001
From: Yuriy Shvorob <yuriy.sh@mate.academy>
Date: Thu, 16 Jan 2025 16:32:36 +0200
Subject: [PATCH 02/10] fix types

---
 src/App.tsx | 28 ++++++++++------------------
 1 file changed, 10 insertions(+), 18 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index f4f63ccff1..0e397591e6 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -2,27 +2,19 @@ import './App.scss';
 
 import usersFromServer from './api/users';
 import todosFromServer from './api/todos';
-import { TodoWithUser } from './App.types';
+import { TodoWithUser, User } from './App.types';
 import { TodoList } from './components/TodoList';
 
-const todos: TodoWithUser[] = todosFromServer
-  .map(todo => {
-    if (!todo) {
-      return null;
-    }
+const todos: TodoWithUser[] = todosFromServer.map((todo): TodoWithUser => {
+  const user = usersFromServer.find(
+    userInfo => userInfo.id === todo.userId,
+  ) as User;
 
-    const user = usersFromServer.find(userInfo => userInfo.id === todo.userId);
-
-    if (!user) {
-      return null;
-    }
-
-    return {
-      ...todo,
-      user,
-    };
-  })
-  .filter((todo): todo is TodoWithUser => todo !== null);
+  return {
+    ...todo,
+    user,
+  };
+});
 
 export const App = () => {
   return (

From 9dd3aba431b7e0eeb1f006b5d88c71b355304b16 Mon Sep 17 00:00:00 2001
From: Yuriy Shvorob <yuriy.sh@mate.academy>
Date: Thu, 16 Jan 2025 21:45:11 +0200
Subject: [PATCH 03/10] ready form submit and clear

---
 src/App.tsx                          | 74 +++++++++++++++++++++++-----
 src/components/TodoInfo/TodoInfo.tsx |  2 +-
 2 files changed, 63 insertions(+), 13 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 0e397591e6..b74c967f95 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,37 +1,87 @@
 import './App.scss';
+import { useState } from 'react';
 
 import usersFromServer from './api/users';
 import todosFromServer from './api/todos';
 import { TodoWithUser, User } from './App.types';
 import { TodoList } from './components/TodoList';
 
-const todos: TodoWithUser[] = todosFromServer.map((todo): TodoWithUser => {
-  const user = usersFromServer.find(
-    userInfo => userInfo.id === todo.userId,
-  ) as User;
+const todosWithUser: TodoWithUser[] = todosFromServer.map(
+  (todo): TodoWithUser => {
+    const user = usersFromServer.find(
+      userInfo => userInfo.id === todo.userId,
+    ) as User;
 
-  return {
-    ...todo,
-    user,
-  };
-});
+    return {
+      ...todo,
+      user,
+    };
+  },
+);
 
 export const App = () => {
+  const [todos, setTodos] = useState<TodoWithUser[]>([...todosWithUser]);
+  const [title, setTitle] = useState('');
+  const [userName, setUserName] = useState('0');
+
   return (
     <div className="App">
       <h1>Add todo form</h1>
 
-      <form action="/api/todos" method="POST">
+      <form
+        action="/api/todos"
+        method="POST"
+        onSubmit={event => {
+          event.preventDefault();
+          if (title && userName) {
+            const newTodo: TodoWithUser = {
+              userId: usersFromServer.find(user => user.name === userName)
+                ?.id as number,
+              id: Math.max(...todos.map(todo => todo.id)) + 1,
+              title,
+              completed: false,
+              user: usersFromServer.find(
+                user => user.id === Number(userName),
+              ) as User,
+            };
+
+            setTodos([...todos, newTodo]);
+            setTitle('');
+            setUserName('0');
+          }
+        }}
+      >
         <div className="field">
-          <input type="text" data-cy="titleInput" />
+          <input
+            type="text"
+            value={title}
+            data-cy="titleInput"
+            placeholder="Please enter a title"
+            onChange={event => {
+              setTitle(event.target.value);
+            }}
+          />
           <span className="error">Please enter a title</span>
         </div>
 
         <div className="field">
-          <select data-cy="userSelect">
+          <select
+            data-cy="userSelect"
+            value={userName}
+            onChange={event => {
+              setUserName(event.target.value);
+            }}
+          >
             <option value="0" disabled>
               Choose a user
             </option>
+            {usersFromServer.map(user => {
+              return (
+                <option key={user.id} value={user.id}>
+                  {user.name}
+                </option>
+              );
+            })}
           </select>
 
           <span className="error">Please choose a user</span>
diff --git a/src/components/TodoInfo/TodoInfo.tsx b/src/components/TodoInfo/TodoInfo.tsx
index 9d6dc3f539..f90ce565c0 100644
--- a/src/components/TodoInfo/TodoInfo.tsx
+++ b/src/components/TodoInfo/TodoInfo.tsx
@@ -12,7 +12,7 @@ export const TodoInfo = ({ todo }: Props) => {
 
   return (
     <article
-      data-id="1"
+      data-id={todo.id}
       className={classNames('TodoInfo', {
         'TodoInfo--completed': completed,
       })}

From 8d5e03a8e1113c27c1dd7f1240d77b53320891ab Mon Sep 17 00:00:00 2001
From: Yuriy Shvorob <yuriy.sh@mate.academy>
Date: Fri, 17 Jan 2025 12:15:30 +0200
Subject: [PATCH 04/10] required task is read

---
 src/App.tsx                          | 69 ++++++++++++++++++----------
 src/components/TodoInfo/TodoInfo.tsx |  6 +--
 src/components/UserInfo/UserInfo.tsx | 16 ++++++-
 3 files changed, 61 insertions(+), 30 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index b74c967f95..bc13e1c947 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,5 +1,5 @@
 import './App.scss';
-import { useState } from 'react';
+import React, { useState } from 'react';
 
 import usersFromServer from './api/users';
 import todosFromServer from './api/todos';
@@ -8,9 +8,7 @@ import { TodoList } from './components/TodoList';
 
 const todosWithUser: TodoWithUser[] = todosFromServer.map(
   (todo): TodoWithUser => {
-    const user = usersFromServer.find(
-      userInfo => userInfo.id === todo.userId,
-    ) as User;
+    const user = usersFromServer.find(({ id }) => id === todo.userId) as User;
 
     return {
       ...todo,
@@ -18,11 +16,46 @@ const todosWithUser: TodoWithUser[] = todosFromServer.map(
     };
   },
 );
+const defaultOptionIndex = '0';
 
 export const App = () => {
   const [todos, setTodos] = useState<TodoWithUser[]>([...todosWithUser]);
   const [title, setTitle] = useState('');
-  const [userName, setUserName] = useState('0');
+  const [userName, setUserName] = useState(defaultOptionIndex);
+  const [hasTitleError, setHasTitleError] = useState(false);
+  const [hasUserError, setHasUserError] = useState(false);
+
+  const clearForm = () => {
+    setTitle('');
+    setUserName(defaultOptionIndex);
+  };
+
+  const handleSubmit = (event: React.FormEvent<HTMLFormElement>): null => {
+    event.preventDefault();
+    if (!title) {
+      setHasTitleError(true);
+    }
+
+    if (userName === defaultOptionIndex) {
+      setHasUserError(true);
+    }
+
+    if (title && userName !== defaultOptionIndex) {
+      const newTodo: TodoWithUser = {
+        userId: usersFromServer.find(user => user.name === userName)
+          ?.id as number,
+        id: Math.max(...todos.map(todo => todo.id)) + 1,
+        title,
+        completed: false,
+        user: usersFromServer.find(
+          user => user.id === Number(userName),
+        ) as User,
+      };
+
+      setTodos([...todos, newTodo]);
+      clearForm();
+    }
+  };
 
   return (
     <div className="App">
@@ -32,23 +65,7 @@ export const App = () => {
         action="/api/todos"
         method="POST"
         onSubmit={event => {
-          event.preventDefault();
-          if (title && userName) {
-            const newTodo: TodoWithUser = {
-              userId: usersFromServer.find(user => user.name === userName)
-                ?.id as number,
-              id: Math.max(...todos.map(todo => todo.id)) + 1,
-              title,
-              completed: false,
-              user: usersFromServer.find(
-                user => user.id === Number(userName),
-              ) as User,
-            };
-
-            setTodos([...todos, newTodo]);
-            setTitle('');
-            setUserName('0');
-          }
+          handleSubmit(event);
         }}
       >
         <div className="field">
@@ -59,9 +76,10 @@ export const App = () => {
             placeholder="Please enter a title"
             onChange={event => {
               setTitle(event.target.value);
+              setHasTitleError(false);
             }}
           />
-          <span className="error">Please enter a title</span>
+          {hasTitleError && <span className="error">Please enter a title</span>}
         </div>
 
         <div className="field">
@@ -70,9 +88,10 @@ export const App = () => {
             value={userName}
             onChange={event => {
               setUserName(event.target.value);
+              setHasUserError(false);
             }}
           >
-            <option value="0" disabled>
+            <option value={defaultOptionIndex} disabled>
               Choose a user
             </option>
             {usersFromServer.map(user => {
@@ -84,7 +103,7 @@ export const App = () => {
             })}
           </select>
 
-          <span className="error">Please choose a user</span>
+          {hasUserError && <span className="error">Please choose a user</span>}
         </div>
 
         <button type="submit" data-cy="submitButton">
diff --git a/src/components/TodoInfo/TodoInfo.tsx b/src/components/TodoInfo/TodoInfo.tsx
index f90ce565c0..fa6a61aac6 100644
--- a/src/components/TodoInfo/TodoInfo.tsx
+++ b/src/components/TodoInfo/TodoInfo.tsx
@@ -1,6 +1,7 @@
 import classNames from 'classnames';
 import { TodoWithUser } from '../../App.types';
 import './TodoInfo.scss';
+import { UserInfo } from '../UserInfo';
 
 interface Props {
   todo: TodoWithUser;
@@ -8,7 +9,6 @@ interface Props {
 
 export const TodoInfo = ({ todo }: Props) => {
   const { title, user, completed } = todo;
-  const { name, email } = user;
 
   return (
     <article
@@ -19,9 +19,7 @@ export const TodoInfo = ({ todo }: Props) => {
     >
       <h2 className="TodoInfo__title">{title}</h2>
 
-      <a className="UserInfo" href={email}>
-        {name}
-      </a>
+      <UserInfo user={user} />
     </article>
   );
 };
diff --git a/src/components/UserInfo/UserInfo.tsx b/src/components/UserInfo/UserInfo.tsx
index f7bf0410ec..0b20d2a026 100644
--- a/src/components/UserInfo/UserInfo.tsx
+++ b/src/components/UserInfo/UserInfo.tsx
@@ -1 +1,15 @@
-export const UserInfo = () => {};
+import { User } from '../../App.types';
+
+type Props = {
+  user: User;
+};
+
+export const UserInfo = ({ user }: Props) => {
+  const { name, email } = user;
+
+  return (
+    <a className="UserInfo" href={`mailto:${email}`}>
+      {name}
+    </a>
+  );
+};

From b2d6d55557029a5cdd4ac79b2936d54f8a5604de Mon Sep 17 00:00:00 2001
From: Yuriy Shvorob <yuriy.sh@mate.academy>
Date: Fri, 17 Jan 2025 12:16:24 +0200
Subject: [PATCH 05/10] removed extra type

---
 src/App.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/App.tsx b/src/App.tsx
index bc13e1c947..5ce6a9a528 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -30,7 +30,7 @@ export const App = () => {
     setUserName(defaultOptionIndex);
   };
 
-  const handleSubmit = (event: React.FormEvent<HTMLFormElement>): null => {
+  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault();
     if (!title) {
       setHasTitleError(true);

From 0890707d1952fa01ebb21ed3bb86d0d7fd8981c6 Mon Sep 17 00:00:00 2001
From: Yuriy Shvorob <yuriy.sh@mate.academy>
Date: Fri, 17 Jan 2025 15:06:26 +0200
Subject: [PATCH 06/10] refactoring

---
 src/App.tsx | 32 +++++++++++++++++---------------
 1 file changed, 17 insertions(+), 15 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 5ce6a9a528..78c24724ae 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -16,40 +16,42 @@ const todosWithUser: TodoWithUser[] = todosFromServer.map(
     };
   },
 );
-const defaultOptionIndex = '0';
+const defaultUserId = '0';
 
 export const App = () => {
   const [todos, setTodos] = useState<TodoWithUser[]>([...todosWithUser]);
   const [title, setTitle] = useState('');
-  const [userName, setUserName] = useState(defaultOptionIndex);
+  const [userId, setUserId] = useState(defaultUserId);
   const [hasTitleError, setHasTitleError] = useState(false);
   const [hasUserError, setHasUserError] = useState(false);
 
   const clearForm = () => {
     setTitle('');
-    setUserName(defaultOptionIndex);
+    setUserId(defaultUserId);
   };
 
-  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+  const handleSubmit = (
+    event: React.FormEvent<HTMLFormElement>,
+  ): null | void => {
     event.preventDefault();
     if (!title) {
       setHasTitleError(true);
     }
 
-    if (userName === defaultOptionIndex) {
+    if (userId === defaultUserId) {
       setHasUserError(true);
     }
 
-    if (title && userName !== defaultOptionIndex) {
+    if (title || userId !== defaultUserId) {
+      const user = usersFromServer.find(({ id }) => id === +userId) as User;
+      const newId = Math.max(...todos.map(todo => todo.id)) + 1;
+
       const newTodo: TodoWithUser = {
-        userId: usersFromServer.find(user => user.name === userName)
-          ?.id as number,
-        id: Math.max(...todos.map(todo => todo.id)) + 1,
+        userId: +userId,
+        id: newId,
         title,
         completed: false,
-        user: usersFromServer.find(
-          user => user.id === Number(userName),
-        ) as User,
+        user,
       };
 
       setTodos([...todos, newTodo]);
@@ -85,13 +87,13 @@ export const App = () => {
         <div className="field">
           <select
             data-cy="userSelect"
-            value={userName}
+            value={userId}
             onChange={event => {
-              setUserName(event.target.value);
+              setUserId(event.target.value);
               setHasUserError(false);
             }}
           >
-            <option value={defaultOptionIndex} disabled>
+            <option value={defaultUserId} disabled>
               Choose a user
             </option>
             {usersFromServer.map(user => {

From 31639dda0caa939b359f4de8318ea268e981a275 Mon Sep 17 00:00:00 2001
From: Yuriy Shvorob <yuriy.sh@mate.academy>
Date: Fri, 17 Jan 2025 15:16:13 +0200
Subject: [PATCH 07/10] fixing errors

---
 src/App.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 78c24724ae..1b28305a76 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -24,6 +24,7 @@ export const App = () => {
   const [userId, setUserId] = useState(defaultUserId);
   const [hasTitleError, setHasTitleError] = useState(false);
   const [hasUserError, setHasUserError] = useState(false);
+  const isNotSelectedUser = userId === defaultUserId;
 
   const clearForm = () => {
     setTitle('');
@@ -38,11 +39,11 @@ export const App = () => {
       setHasTitleError(true);
     }
 
-    if (userId === defaultUserId) {
+    if (isNotSelectedUser) {
       setHasUserError(true);
     }
 
-    if (title || userId !== defaultUserId) {
+    if (title && !isNotSelectedUser) {
       const user = usersFromServer.find(({ id }) => id === +userId) as User;
       const newId = Math.max(...todos.map(todo => todo.id)) + 1;
 

From 63958a2620677de44b9556d09da5fa96c7dc0304 Mon Sep 17 00:00:00 2001
From: Yuriy Shvorob <yuriy.sh@mate.academy>
Date: Fri, 17 Jan 2025 15:53:27 +0200
Subject: [PATCH 08/10] adding title validation

---
 src/App.tsx | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 1b28305a76..77d7c397d7 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -17,6 +17,9 @@ const todosWithUser: TodoWithUser[] = todosFromServer.map(
   },
 );
 const defaultUserId = '0';
+const titleRegexp = /^[a-zA-Zа-яА-ЯёЁїЇіІєЄґҐ0-9\s]*$/;
+
+const validateTitle = (title: string): boolean => titleRegexp.test(title);
 
 export const App = () => {
   const [todos, setTodos] = useState<TodoWithUser[]>([...todosWithUser]);
@@ -25,6 +28,10 @@ export const App = () => {
   const [hasTitleError, setHasTitleError] = useState(false);
   const [hasUserError, setHasUserError] = useState(false);
   const isNotSelectedUser = userId === defaultUserId;
+  const hasForbiddenSymbolsInTitle = !validateTitle(title);
+  const titleErrorMessage = hasForbiddenSymbolsInTitle
+    ? 'Title contains special symbols'
+    : 'Please enter a title';
 
   const clearForm = () => {
     setTitle('');
@@ -35,7 +42,7 @@ export const App = () => {
     event: React.FormEvent<HTMLFormElement>,
   ): null | void => {
     event.preventDefault();
-    if (!title) {
+    if (!title || hasForbiddenSymbolsInTitle) {
       setHasTitleError(true);
     }
 
@@ -82,7 +89,7 @@ export const App = () => {
               setHasTitleError(false);
             }}
           />
-          {hasTitleError && <span className="error">Please enter a title</span>}
+          {hasTitleError && <span className="error">{titleErrorMessage}</span>}
         </div>
 
         <div className="field">

From 9c5ee1bd4e4061b931d20060a5815cc85f850c30 Mon Sep 17 00:00:00 2001
From: Yuriy Shvorob <yuriy.sh@mate.academy>
Date: Thu, 23 Jan 2025 11:44:12 +0200
Subject: [PATCH 09/10] fixes according to comments

---
 src/App.tsx                          | 46 +++++++++++++++-------------
 src/components/TodoList/TodoList.tsx | 16 +++++-----
 2 files changed, 32 insertions(+), 30 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 77d7c397d7..dffaccb55c 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -3,12 +3,16 @@ import React, { useState } from 'react';
 
 import usersFromServer from './api/users';
 import todosFromServer from './api/todos';
-import { TodoWithUser, User } from './App.types';
+import { TodoWithUser } from './App.types';
 import { TodoList } from './components/TodoList';
 
 const todosWithUser: TodoWithUser[] = todosFromServer.map(
   (todo): TodoWithUser => {
-    const user = usersFromServer.find(({ id }) => id === todo.userId) as User;
+    let user = usersFromServer.find(({ id }) => id === todo.userId);
+
+    if (!user) {
+      user = usersFromServer[0];
+    }
 
     return {
       ...todo,
@@ -17,9 +21,10 @@ const todosWithUser: TodoWithUser[] = todosFromServer.map(
   },
 );
 const defaultUserId = '0';
-const titleRegexp = /^[a-zA-Zа-яА-ЯёЁїЇіІєЄґҐ0-9\s]*$/;
+const titleAllowedSymbols = /^[a-zA-Zа-яА-ЯёЁїЇіІєЄґҐ0-9\s]*$/;
 
-const validateTitle = (title: string): boolean => titleRegexp.test(title);
+const validateTitleSymbols = (title: string): boolean =>
+  titleAllowedSymbols.test(title);
 
 export const App = () => {
   const [todos, setTodos] = useState<TodoWithUser[]>([...todosWithUser]);
@@ -27,11 +32,10 @@ export const App = () => {
   const [userId, setUserId] = useState(defaultUserId);
   const [hasTitleError, setHasTitleError] = useState(false);
   const [hasUserError, setHasUserError] = useState(false);
-  const isNotSelectedUser = userId === defaultUserId;
-  const hasForbiddenSymbolsInTitle = !validateTitle(title);
-  const titleErrorMessage = hasForbiddenSymbolsInTitle
-    ? 'Title contains special symbols'
-    : 'Please enter a title';
+  const isSelectedUser = userId !== defaultUserId;
+  const titleErrorMessage = validateTitleSymbols(title)
+    ? 'Please enter a title'
+    : 'Title contains special symbols';
 
   const clearForm = () => {
     setTitle('');
@@ -42,20 +46,22 @@ export const App = () => {
     event: React.FormEvent<HTMLFormElement>,
   ): null | void => {
     event.preventDefault();
-    if (!title || hasForbiddenSymbolsInTitle) {
+    if (!title || !validateTitleSymbols(title)) {
       setHasTitleError(true);
     }
 
-    if (isNotSelectedUser) {
+    if (!isSelectedUser) {
       setHasUserError(true);
     }
 
-    if (title && !isNotSelectedUser) {
-      const user = usersFromServer.find(({ id }) => id === +userId) as User;
+    if (title && isSelectedUser) {
+      const user =
+        usersFromServer.find(({ id }) => id === Number(userId)) ||
+        usersFromServer[0];
       const newId = Math.max(...todos.map(todo => todo.id)) + 1;
 
       const newTodo: TodoWithUser = {
-        userId: +userId,
+        userId: Number(userId),
         id: newId,
         title,
         completed: false,
@@ -104,13 +110,11 @@ export const App = () => {
             <option value={defaultUserId} disabled>
               Choose a user
             </option>
-            {usersFromServer.map(user => {
-              return (
-                <option key={user.id} value={user.id}>
-                  {user.name}
-                </option>
-              );
-            })}
+            {usersFromServer.map(user => (
+              <option key={user.id} value={user.id}>
+                {user.name}
+              </option>
+            ))}
           </select>
 
           {hasUserError && <span className="error">Please choose a user</span>}
diff --git a/src/components/TodoList/TodoList.tsx b/src/components/TodoList/TodoList.tsx
index f76dc4fbbf..981e996038 100644
--- a/src/components/TodoList/TodoList.tsx
+++ b/src/components/TodoList/TodoList.tsx
@@ -5,12 +5,10 @@ type Props = {
   todos: TodoWithUser[];
 };
 
-export const TodoList = ({ todos }: Props) => {
-  return (
-    <section className="TodoList">
-      {todos.map(todo => {
-        return <TodoInfo todo={todo} key={todo.id} />;
-      })}
-    </section>
-  );
-};
+export const TodoList = ({ todos }: Props) => (
+  <section className="TodoList">
+    {todos.map(todo => (
+      <TodoInfo todo={todo} key={todo.id} />
+    ))}
+  </section>
+);

From ead84ecc47cba46b7a0c0360b92c124b0e21849e Mon Sep 17 00:00:00 2001
From: Yuriy Shvorob <yuriy.sh@mate.academy>
Date: Thu, 23 Jan 2025 11:51:14 +0200
Subject: [PATCH 10/10] refactored title error message function

---
 src/App.tsx | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index dffaccb55c..6bf8899338 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -26,6 +26,18 @@ const titleAllowedSymbols = /^[a-zA-Zа-яА-ЯёЁїЇіІєЄґҐ0-9\s]*$/;
 const validateTitleSymbols = (title: string): boolean =>
   titleAllowedSymbols.test(title);
 
+const getTitleErrorMessage = (title: string): string | null => {
+  if (!title) {
+    return 'Please enter a title';
+  }
+
+  if (!validateTitleSymbols(title)) {
+    return 'Title contains special symbols';
+  }
+
+  return null;
+};
+
 export const App = () => {
   const [todos, setTodos] = useState<TodoWithUser[]>([...todosWithUser]);
   const [title, setTitle] = useState('');
@@ -33,9 +45,6 @@ export const App = () => {
   const [hasTitleError, setHasTitleError] = useState(false);
   const [hasUserError, setHasUserError] = useState(false);
   const isSelectedUser = userId !== defaultUserId;
-  const titleErrorMessage = validateTitleSymbols(title)
-    ? 'Please enter a title'
-    : 'Title contains special symbols';
 
   const clearForm = () => {
     setTitle('');
@@ -95,7 +104,9 @@ export const App = () => {
               setHasTitleError(false);
             }}
           />
-          {hasTitleError && <span className="error">{titleErrorMessage}</span>}
+          {hasTitleError && (
+            <span className="error">{getTitleErrorMessage(title)}</span>
+          )}
         </div>
 
         <div className="field">