solution

src/App.tsx

@@ -1,61 +1,116 @@
+import { useEffect, useState } from 'react';
 import './App.scss';
+import todosFromServer from './api/todos';
+import usersFromServer from './api/users';
+import { TodoList } from './components/TodoList';
+import { Todo } from './type/todo';
+import { User } from './type/user';
 
 // import usersFromServer from './api/users';
 // import todosFromServer from './api/todos';
 
 export const App = () => {
+  const [todos, setTodos] = useState([] as Todo[]);
+  const [todoTitle, setTodoTitle] = useState('');
+  const [userId, setUserId] = useState(0);
+  const users: User[] = usersFromServer;
+  const [userError, setUserError] = useState(false);
+  const [titleError, setTitleError] = useState(false);
+
+  const clearState = () => {
+    setUserError(false);
+    setTitleError(false);
+    setTodoTitle('');
+    setUserId(0);
+  };
+
+  const changeTitle = (event: React.ChangeEvent<HTMLInputElement>) => {
+    event.preventDefault();
+    setTitleError(false);
+    setTodoTitle(event.target.value);
+  };
+
+  const addNewTodo = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    const isUserExist = users.some(el => el.id === userId);
+
+    if (!isUserExist || todoTitle.trim().length === 0) {
+      setTitleError(todoTitle.trim().length === 0);
+      setUserError(!isUserExist);
+
+      return;
+    }
+
+    const ids = todos.map(el => el.id);
+
+    const newTodo = {
+      id: ids ? Math.max(...ids) + 1 : 1,
+      title: todoTitle,
+      completed: false,
+      userId: userId,
+      user: users.find(el => el.id === userId),
+    };
+
+    setTodos([...todos, newTodo]);
+    clearState();
+  };
+
+  useEffect(() => {
+    const prepareTodos = todosFromServer.map(user => {
+      return {
+        ...user,
+        user: users.find(el => el.id === user.userId),
+      };
+    });
+
+    setTodos(prepareTodos);
+  }, [users]);
+
   return (
     <div className="App">
       <h1>Add todo form</h1>
 
-      <form action="/api/todos" method="POST">
+      <form onSubmit={addNewTodo}>
         <div className="field">
-          <input type="text" data-cy="titleInput" />
-          <span className="error">Please enter a title</span>
+          <input
+            type="text"
+            data-cy="titleInput"
+            placeholder="Add new todo..."
+            value={todoTitle}
+            onChange={event => changeTitle(event)}
+          />
+          {titleError && <span className="error">Please enter a title</span>}
         </div>
 
         <div className="field">
-          <select data-cy="userSelect">
+          <select
+            data-cy="userSelect"
+            onChange={event => {
+              setUserError(false);
+              setUserId(+event.target.value);
+            }}
+            value={userId}
+          >
             <option value="0" disabled>
               Choose a user
             </option>
+            {users.map(user => {
+              return (
+                <option value={user.id} key={user.id}>
+                  {user.name}
+                </option>
+              );
+            })}
           </select>
 
-          <span className="error">Please choose a user</span>
+          {userError && <span className="error">Please choose a user</span>}
         </div>
 
         <button type="submit" data-cy="submitButton">
           Add
         </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>
   );
 };

src/components/TodoInfo/TodoInfo.tsx

@@ -1 +1,22 @@
-export const TodoInfo = () => {};
+import { Todo } from '../../type/todo';
+import { UserInfo } from '../UserInfo';
+import classNames from 'classnames';
+
+interface Props {
+  todo: Todo;
+}
+
+export const TodoInfo: React.FC<Props> = ({ todo }) => {
+  const { id, title, completed, user } = todo;
+
+  return (
+    <article
+      data-id={id}
+      key={id}
+      className={classNames('TodoInfo', { 'TodoInfo--completed': completed })}
+    >
+      <h2 className="TodoInfo__title">{title}</h2>
+      {user && <UserInfo user={user} />}
+    </article>
+  );
+};

src/components/TodoList/TodoList.tsx

@@ -1 +1,16 @@
-export const TodoList = () => {};
+import { Todo } from '../../type/todo';
+import { TodoInfo } from '../TodoInfo';
+
+interface Props {
+  todos: Todo[];
+}
+
+export const TodoList: React.FC<Props> = ({ todos }) => {
+  return (
+    <section className="TodoList">
+      {todos.map(todo => {
+        return <TodoInfo todo={todo} key={todo.id} />;
+      })}
+    </section>
+  );
+};

src/components/UserInfo/UserInfo.tsx

@@ -1 +1,13 @@
-export const UserInfo = () => {};
+import { User } from '../../type/user';
+
+interface Props {
+  user: User;
+}
+
+export const UserInfo: React.FC<Props> = ({ user }) => {
+  return (
+    <a className="UserInfo" href={`mailto:${user.email}`}>
+      {user.name}
+    </a>
+  );
+};

src/type/todo.ts

@@ -0,0 +1,9 @@
+import { User } from './user';
+
+export type Todo = {
+  id: number;
+  title: string;
+  completed: boolean;
+  userId: number;
+  user?: User;
+};

src/type/user.ts

@@ -0,0 +1,6 @@
+export type User = {
+  id: number;
+  name: string;
+  username: string;
+  email: string;
+};