Develop

src/App.scss

@@ -12,6 +12,8 @@ button {
 }
 
 .error {
+  margin: 0;
+  padding: 0;
   color: red;
 }
 
@@ -37,3 +39,10 @@ button {
 .UserInfo {
   font-style: italic;
 }
+.field {
+  padding-bottom: 10px;
+
+  &__title {
+    margin-right: 4px;
+  }
+}

src/App.tsx

@@ -1,61 +1,122 @@
+import { useState } from 'react';
 import './App.scss';
 
-// import usersFromServer from './api/users';
-// import todosFromServer from './api/todos';
+import usersFromServer from './api/users';
+import todosFromServer from './api/todos';
+import { TodoList } from './components/TodoList';
+import { getHigherId } from './serveses/todos';
+import { getUserById } from './serveses/user';
+
+import { User } from './serveses/types';
+
+const completedTodos = todosFromServer.map(todo => {
+  const user = getUserById(usersFromServer, todo.userId);
+
+  return {
+    ...todo,
+    user,
+  };
+});
 
 export const App = () => {
+  const [title, setTitle] = useState('');
+  const [hasTitleError, setHasTitleError] = useState('');
+
+  const [selectedUserId, setSelectedUserId] = useState(0);
+  const [hasUserError, setHasUserError] = useState('');
+
+  const [todos, setTodos] = useState(completedTodos);
+
+  const handleTitle = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setTitle(event.target.value);
+    setHasTitleError('');
+  };
+
+  const handlUser = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    setSelectedUserId(+event.target.value);
+    setHasUserError('');
+  };
+
+  const addTodo = (event: React.FormEvent) => {
+    event.preventDefault();
+
+    if (!title) {
+      setHasTitleError('Please enter a title');
+    }
+
+    if (!selectedUserId) {
+      setHasUserError('Please choose a user');
+    }
+
+    if (!title || !selectedUserId) {
+      return;
+    }
+
+    setTodos(currentTodos => {
+      const user = getUserById(usersFromServer, selectedUserId);
+
+      const todo = {
+        id: getHigherId(todos),
+        title,
+        completed: false,
+        userId: +selectedUserId,
+        user,
+      };
+
+      return [...currentTodos, todo];
+    });
+
+    setTitle('');
+    setSelectedUserId(0);
+  };
+
   return (
     <div className="App">
       <h1>Add todo form</h1>
-
-      <form action="/api/todos" method="POST">
+      <form action="/api/todos" method="POST" onSubmit={addTodo}>
         <div className="field">
-          <input type="text" data-cy="titleInput" />
-          <span className="error">Please enter a title</span>
+          <label htmlFor="title">
+            <span className="field__title">Title:</span>
+            <input
+              type="text"
+              id="title"
+              data-cy="titleInput"
+              value={title}
+              placeholder="Title"
+              onChange={handleTitle}
+            />
+          </label>
+
+          {hasTitleError && <span className="error">{hasTitleError}</span>}
         </div>
 
         <div className="field">
-          <select data-cy="userSelect">
+          <select
+            data-cy="userSelect"
+            value={selectedUserId}
+            onChange={handlUser}
+          >
             <option value="0" disabled>
               Choose a user
             </option>
+            {usersFromServer.map((user: User) => {
+              return (
+                <option key={user.id} value={user.id}>
+                  {user.name}
+                </option>
+              );
+            })}
           </select>
 
-          <span className="error">Please choose a user</span>
+          {hasUserError && <span className="error">{hasUserError}</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:[email protected]">
-            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:[email protected]">
-            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:[email protected]">
-            Patricia Lebsack
-          </a>
-        </article>
-      </section>
+      <TodoList todos={todos} />
     </div>
   );
 };

src/components/TodoInfo/TodoInfo.tsx

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

src/components/TodoList/TodoList.tsx

@@ -1 +1,16 @@
-export const TodoList = () => {};
+import React from 'react';
+import { TodoInfo } from '../TodoInfo';
+import { Todo } from '../../serveses/types';
+
+type 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,14 @@
-export const UserInfo = () => {};
+import React from 'react';
+import { User } from '../../serveses/types';
+
+type Props = {
+  user: User;
+};
+
+export const UserInfo: React.FC<Props> = ({ user }) => {
+  return (
+    <a className="UserInfo" href={`mailto:${user.email}`}>
+      {user.name}
+    </a>
+  );
+};

src/serveses/todos.ts

@@ -0,0 +1,10 @@
+type Todo = {
+  id: number;
+  title: string;
+  completed: boolean;
+  userId: number;
+};
+
+export const getHigherId = (todos: Todo[]) => {
+  return Math.max(...todos.map(todo => todo.id)) + 1;
+};

src/serveses/types.ts

@@ -0,0 +1,14 @@
+export type User = {
+  id: number;
+  name: string;
+  username: string;
+  email: string;
+};
+
+export type Todo = {
+  id: number;
+  title: string;
+  completed: boolean;
+  userId: number;
+  user: User | null;
+};

src/serveses/user.ts

@@ -0,0 +1,10 @@
+type User = {
+  id: number;
+  name: string;
+  username: string;
+  email: string;
+};
+
+export const getUserById = (users: User[], id: number) => {
+  return users.find(user => user.id === id) || null;
+};