Task solution

src/App.tsx

@@ -1,61 +1,147 @@
 import './App.scss';
 
-// import usersFromServer from './api/users';
-// import todosFromServer from './api/todos';
+import usersFromServer from './api/users';
+import todosFromServer from './api/todos';
+import { useState } from 'react';
+import { TodoList } from './components/TodoList';
+
+export type User = {
+  id: number;
+  name: string;
+  username: string;
+  email: string;
+};
+
+export type Todos = {
+  id: number;
+  title: string;
+  completed: boolean;
+  userId: number;
+};
+
+export interface Todo {
+  id: number;
+  title: string;
+  completed: boolean;
+  userId: number;
+  user: User | null;
+}
 
 export const App = () => {
+  const [newUser, setNewUser] = useState(0);
+  const [newTitle, setNewTitle] = useState('');
+  const [userValidation, setUserValidation] = useState(false);
+  const [titleValidation, setTitleValidation] = useState(false);
+  const [highestId, setHighestId] = useState(
+    Math.max(...todosFromServer.map(todo => todo.id), 0) + 1,
+  );
+  const [visibleTodos, setVisibleTodos] = useState([...todosFromServer]);
+
+  function addUserTodo(todos: Todos[]) {
+    return todos.map(todo => ({
+      ...todo,
+      user: usersFromServer.find(user => user.id === todo.userId) || null,
+    }));
+  }
+
+  const isUserInvalid = newUser === 0;
+  const isTitleInvalid = newTitle.trim().replace(/[^a-zA-Zа0-9 ]/g, '') === '';
+
+  function handleSubmit(
+    inputUser: number,
+    inputTitle: string,
+    event: React.FormEvent,
+  ) {
+    event.preventDefault();
+
+    setTitleValidation(isTitleInvalid);
+    setUserValidation(isUserInvalid);
+
+    if (isUserInvalid || isTitleInvalid) {
+      return;
+    }
+
+    const newTodo = {
+      id: highestId,
+      completed: false,
+      title: inputTitle.trim().replace(/[^a-zA-Zа0-9 ]/g, ''),
+      userId: inputUser,
+    };
+
+    setVisibleTodos([...visibleTodos, newTodo]);
+
+    setHighestId(highestId + 1);
+
+    setNewTitle('');
+    setNewUser(0);
+  }
+
   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>
+          <label htmlFor="title">Title: </label>
+          <input
+            type="text"
+            data-cy="titleInput"
+            id="title"
+            placeholder="Enter your title"
+            value={newTitle}
+            onChange={event => {
+              const value = event.target.value;
+
+              setNewTitle(value);
+              setTitleValidation(value.trim() === '');
+            }}
+          />
+
+          {titleValidation && (
+            <span className="error">Please enter a title</span>
+          )}
         </div>
 
         <div className="field">
-          <select data-cy="userSelect">
+          <label htmlFor="user">User: </label>
+          <select
+            data-cy="userSelect"
+            id="user"
+            value={newUser}
+            onChange={event => {
+              const value = +event.target.value;
+
+              setNewUser(value);
+              setUserValidation(value === 0);
+            }}
+          >
             <option value="0" disabled>
               Choose a user
             </option>
+            {usersFromServer.map(user => {
+              return (
+                <option value={user.id} key={user.id}>
+                  {user.name}
+                </option>
+              );
+            })}
           </select>
 
-          <span className="error">Please choose a user</span>
+          {userValidation && (
+            <span className="error">Please choose a user</span>
+          )}
         </div>
 
-        <button type="submit" data-cy="submitButton">
+        <button
+          type="submit"
+          data-cy="submitButton"
+          onClick={event => handleSubmit(newUser, newTitle, event)}
+        >
           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={addUserTodo(visibleTodos)} />
     </div>
   );
 };

src/components/TodoInfo/TodoInfo.tsx

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

src/components/TodoList/TodoList.tsx

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

src/components/UserInfo/UserInfo.tsx

@@ -1 +1,17 @@
-export const UserInfo = () => {};
+import { User } from '../../App';
+
+interface UserInfoProps {
+  user: User | null;
+}
+
+export const UserInfo: React.FC<UserInfoProps> = ({ user }) => {
+  if (!user) {
+    return <span>No user available</span>;
+  }
+
+  return (
+    <a className="UserInfo" href={`mailto:${user?.email}`}>
+      {user?.name}
+    </a>
+  );
+};