Implemented solution (with optional task)

README.md

@@ -25,4 +25,4 @@ Implement the ability to add TODOs to the `TodoList` implemented in the **Static
 - Implement a solution following the [React task guideline](https://github.com/mate-academy/react_task-guideline#react-tasks-guideline).
 - Use the [React TypeScript cheat sheet](https://mate-academy.github.io/fe-program/js/extra/react-typescript).
 - Open one more terminal and run tests with `npm test` to ensure your solution is correct.
-- Replace `<your_account>` with your Github username in the [DEMO LINK](https://<your_account>.github.io/react_add-todo-form/) and add it to the PR description.
+- Replace `<your_account>` with your Github username in the [DEMO LINK](https://kovachhh.github.io/react_add-todo-form/) and add it to the PR description.

src/App.tsx

@@ -1,61 +1,39 @@
+import { useState } from 'react';
+
 import './App.scss';
+import { TodoList } from './components/TodoList';
+
+import usersFromServer from './api/users';
+import todosFromServer from './api/todos';
+import { TodoForm } from './components/TodoForm/TodoForm';
+import { Todo } from './types/Todo';
+import { getNewTodoId } from './helpers/GetNewTodoId';
+import { getUserById } from './helpers/GetUserById';
 
-// import usersFromServer from './api/users';
-// import todosFromServer from './api/todos';
+export const initialTodos: Todo[] = todosFromServer.map((todo) => ({
+  ...todo,
+  user: getUserById(todo.userId),
+}));
 
 export const App = () => {
+  const [users] = useState(usersFromServer);
+  const [todos, setTodos] = useState(initialTodos);
+
+  const todoAdd = (newTodo: Todo) => setTodos(
+    currentTodos => [...currentTodos, newTodo],
+  );
+
   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>
-
-          <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>
+      <TodoForm
+        users={users}
+        todoAdd={todoAdd}
+        newTodoId={getNewTodoId(todos)}
+      />
+
+      <TodoList todos={todos} />
     </div>
   );
 };

src/components/TodoForm/TodoForm.tsx

@@ -0,0 +1,111 @@
+import { useState } from 'react';
+
+import { Todo } from '../../types/Todo';
+import { User } from '../../types/User';
+import { getUserById } from '../../helpers/GetUserById';
+
+type Props = {
+  users: User[],
+  todoAdd: (newTodo: Todo) => void,
+  newTodoId: number,
+};
+
+export const TodoForm: React.FC<Props> = ({ users, todoAdd, newTodoId }) => {
+  const [title, setTitle] = useState('');
+  const [titleError, setTitleError] = useState(false);
+
+  const [userId, setUserId] = useState(0);
+  const [userIdError, setUserIdError] = useState(false);
+
+  const titleRegex = /^[a-zA-Zа-яА-Я0-9\s]*$/;
+
+  const resetForm = () => {
+    setTitle('');
+    setUserId(0);
+  };
+
+  const handleTitleChange = (
+    { target: { value } }: React.ChangeEvent<HTMLInputElement>,
+  ) => {
+    if (titleRegex.test(value)) {
+      setTitle(value);
+    }
+
+    setTitleError(false);
+  };
+
+  const handleUserChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    setUserId(+(event.target.value));
+    setUserIdError(false);
+  };
+
+  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+
+    if (!title.trim()) {
+      setTitleError(true);
+    }
+
+    if (userId <= 0) {
+      setUserIdError(true);
+    }
+
+    if (!title.trim() || userId <= 0) {
+      return;
+    }
+
+    todoAdd({
+      id: newTodoId,
+      title,
+      completed: false,
+      userId,
+      user: getUserById(userId),
+    });
+
+    resetForm();
+  };
+
+  return (
+    <form action="/api/todos" method="POST" onSubmit={handleSubmit}>
+      <div className="field">
+        <label>
+          {'Title: '}
+          <input
+            type="text"
+            data-cy="titleInput"
+            value={title}
+            onChange={handleTitleChange}
+            placeholder="Enter a title"
+          />
+        </label>
+        {titleError && (
+          <span className="error">Please enter a title</span>
+        )}
+      </div>
+
+      <div className="field">
+        <label>
+          {'User: '}
+          <select
+            data-cy="userSelect"
+            value={userId}
+            onChange={handleUserChange}
+          >
+            <option value="0" disabled>Choose a user</option>
+            {users.map(user => (
+              <option key={user.id} value={user.id}>{user.name}</option>
+            ))}
+          </select>
+        </label>
+
+        {userIdError && (
+          <span className="error">Please choose a user</span>
+        )}
+      </div>
+
+      <button type="submit" data-cy="submitButton">
+        Add
+      </button>
+    </form>
+  );
+};

src/components/TodoInfo/TodoInfo.tsx

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

src/components/TodoList/TodoList.tsx

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

src/components/UserInfo/UserInfo.tsx

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

src/helpers/GetNewTodoId.tsx

@@ -0,0 +1,7 @@
+import { Todo } from '../types/Todo';
+
+export const getNewTodoId = (array: Todo[]) => {
+  const maxId = Math.max(...array.map(item => item.id));
+
+  return maxId + 1;
+};

src/helpers/GetUserById.tsx

@@ -0,0 +1,8 @@
+import users from '../api/users';
+import { User } from '../types/User';
+
+export const getUserById = (userId: number): User | null => {
+  const result = users.find(user => user.id === userId);
+
+  return result || null;
+};

src/types/Todo.tsx

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

src/types/User.tsx

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