Solution

src/App.tsx

@@ -1,61 +1,39 @@
+import React, { 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 { FormPost } from './components/formPost/formPost';
+import { ToDo, User } from './types/types';
 
-export const App = () => {
-  return (
-    <div className="App">
-      <h1>Add todo form</h1>
-
-      <form action="/api/todos" method="POST">
-        <div className="field">
-          <input type="text" data-cy="titleInput" />
-          <span className="error">Please enter a title</span>
-        </div>
-
-        <div className="field">
-          <select data-cy="userSelect">
-            <option value="0" disabled>
-              Choose a user
-            </option>
-          </select>
-
-          <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>
+const getUser = (userId: number): User | null => {
+  return usersFromServer.find(user => user.id === userId) || null;
+};
 
-          <a className="UserInfo" href="mailto:[email protected]">
-            Leanne Graham
-          </a>
-        </article>
+const initiaTodos: ToDo[] = todosFromServer.map(todo => ({
+  ...todo,
+  user: getUser(todo.userId),
+}));
 
-        <article data-id="15" className="TodoInfo TodoInfo--completed">
-          <h2 className="TodoInfo__title">delectus aut autem</h2>
+export const App: React.FC = () => {
+  const [todos, setTodos] = useState<ToDo[]>(initiaTodos);
 
-          <a className="UserInfo" href="mailto:[email protected]">
-            Leanne Graham
-          </a>
-        </article>
+  const highestId = Math.max(...todos.map(todo => todo.id));
 
-        <article data-id="2" className="TodoInfo">
-          <h2 className="TodoInfo__title">
-            quis ut nam facilis et officia qui
-          </h2>
+  const addPosts = (newToDo: ToDo) => {
+    setTodos(prev => [...prev, newToDo]);
+  };
 
-          <a className="UserInfo" href="mailto:[email protected]">
-            Patricia Lebsack
-          </a>
-        </article>
-      </section>
+  return (
+    <div className="App">
+      <h1>Add todo form</h1>
+      <FormPost
+        onSubmit={addPosts}
+        users={usersFromServer}
+        highestId={highestId}
+      />
+      <TodoList todos={todos} />
     </div>
   );
 };

src/components/TodoInfo/TodoInfo.tsx

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

src/components/TodoList/TodoList.tsx

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

src/components/UserInfo/UserInfo.tsx

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

src/components/formPost/formPost.tsx

@@ -0,0 +1,115 @@
+import React, { useState } from 'react';
+
+type User = {
+  id: number;
+  name: string;
+  username: string;
+  email: string;
+};
+
+type ToDo = {
+  id: number;
+  title: string;
+  completed: boolean;
+  userId: number | null;
+  user: User | null;
+};
+
+type Props = {
+  onSubmit: (newAdd: ToDo) => void;
+  users: User[];
+  highestId: number;
+};
+
+export const FormPost: React.FC<Props> = ({ onSubmit, users, highestId }) => {
+  const [value, setValue] = useState<string>('');
+  const [touch, setTouch] = useState<boolean>(false);
+  const [touchSelect, setTouchSelect] = useState<boolean>(false);
+  const [select, setSelect] = useState<string>('');
+  const reset = (): void => {
+    setValue('');
+    setSelect('');
+  };
+
+  const handleChangeSelect = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    setSelect(e.currentTarget.value);
+    setTouchSelect(false);
+  };
+
+  const handleChangeInput = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setValue(e.currentTarget.value);
+    if (e.currentTarget.value) {
+      setTouch(false);
+    }
+  };
+
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+
+    setTouch(!value);
+    setTouchSelect(!select);
+
+    if (select && value) {
+      const foundUser: User | null =
+        users.find(user => user.name === select) || null;
+
+      onSubmit({
+        id: highestId + 1,
+        title: value,
+        completed: false,
+        userId: foundUser && foundUser.id,
+        user: foundUser,
+      });
+
+      reset();
+    }
+  };
+
+  return (
+    <form
+      action="/api/todos"
+      method="POST"
+      onSubmit={event => handleSubmit(event)}
+    >
+      <div className="field">
+        <label htmlFor="input">Title:</label>
+        <input
+          type="text"
+          data-cy="titleInput"
+          id="input"
+          value={value}
+          onChange={event => handleChangeInput(event)}
+          placeholder="Enter todo"
+        />
+
+        {touch && <span className="error">Please enter a title</span>}
+      </div>
+
+      <div className="field">
+        <label htmlFor="select">User:</label>
+        <select
+          data-cy="userSelect"
+          id="select"
+          value={select}
+          onChange={event => handleChangeSelect(event)}
+        >
+          <option value="" disabled>
+            Choose a user
+          </option>
+          {users.map(user => {
+            return (
+              <option value={user.name} key={user.id}>
+                {user.name}
+              </option>
+            );
+          })}
+        </select>
+        {touchSelect && <span className="error">Please choose a user</span>}
+      </div>
+
+      <button type="submit" data-cy="submitButton">
+        Add
+      </button>
+    </form>
+  );
+};

src/types/types.tsx

@@ -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 | null;
+  user: User | null;
+};