Task solution (read description)

package.json

@@ -14,7 +14,7 @@
   },
   "devDependencies": {
     "@cypress/react18": "^2.0.1",
-    "@mate-academy/scripts": "^1.8.5",
+    "@mate-academy/scripts": "^1.9.12",
     "@mate-academy/students-ts-config": "*",
     "@mate-academy/stylelint-config": "*",
     "@types/node": "^20.14.10",

src/App.tsx

@@ -1,61 +1,39 @@
 import './App.scss';
+import { Todo } from './types';
+import { TodoList } from './components/TodoList/';
+import { AddToDoForm } from './components/AddToDoForm/AddToDoForm';
 
-// import usersFromServer from './api/users';
-// import todosFromServer from './api/todos';
+import usersFromServer from './api/users';
+import todosFromServer from './api/todos';
+
+import { useState } from 'react';
+
+function getUserById(userId: number) {
+  return usersFromServer.find(user => user.id === userId);
+}
+
+const todos: Todo[] = todosFromServer.map(todo => ({
+  ...todo,
+  user: getUserById(todo.userId),
+}));
+
+export const App: React.FC = () => {
+  const [todoList, setTodoList] = useState(todos);
+
+  const addNewTodo = (title: string, userId: number): void => {
+    const id: number = Math.max(...todoList.map(todo => todo.id), 0) + 1;
+
+    setTodoList(prevTodoList => [
+      ...prevTodoList,
+      { userId, id, title, user: getUserById(userId), completed: false },
+    ]);
+  };
 
-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>
-
-          <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>
+      <AddToDoForm addTodo={addNewTodo} users={usersFromServer} />
+      <TodoList todoList={todoList} />
     </div>
   );
 };

src/components/AddToDoForm/AddToDoForm.tsx

@@ -0,0 +1,105 @@
+import { ChangeEvent, useState } from 'react';
+import { User } from '../../types';
+
+type Props = {
+  addTodo: (title: string, userId: number) => void;
+  users: User[];
+};
+
+const titleValidation = new RegExp(/[^a-zA-Z0-9 ]/g); // Regex expression for title validation
+
+export const AddToDoForm: React.FC<Props> = ({ addTodo, users }) => {
+  const [newTitle, setTitle] = useState('');
+  const [userId, setUserId] = useState(0);
+
+  const [hasTitleError, setTitleError] = useState(false);
+  const [hasUserError, setUserError] = useState(false);
+
+  const resetForm = () => {
+    setTitle('');
+    setUserId(0);
+  };
+
+  const handleSubmitForm = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+
+    if (!newTitle) {
+      setTitleError(true);
+    }
+
+    if (!userId) {
+      setUserError(true);
+    }
+
+    if (!newTitle || !userId) {
+      return;
+    }
+
+    addTodo(newTitle, userId);
+    resetForm();
+  };
+
+  const validateTitle = (title: string) => {
+    if (title) {
+      setTitle(title.replace(titleValidation, ''));
+    }
+  };
+
+  const handleTitleChange = (event: ChangeEvent<HTMLInputElement>) => {
+    setTitle(event.target.value);
+    validateTitle(event.target.value);
+    setTitleError(false);
+  };
+
+  const handleUserChange = (event: ChangeEvent<HTMLSelectElement>) => {
+    setUserId(+event.target.value);
+    setUserError(false);
+  };
+
+  return (
+    <form action="/api/todos" method="POST" onSubmit={handleSubmitForm}>
+      <div className="field">
+        <label htmlFor="title">Title: </label>
+        <input
+          type="text"
+          placeholder="Enter a title"
+          name="title"
+          data-cy="titleInput"
+          value={newTitle}
+          onChange={event => {
+            handleTitleChange(event);
+          }}
+        />
+
+        {hasTitleError && <span className="error">Please enter a title</span>}
+      </div>
+
+      <div className="field">
+        <label htmlFor="user">User: </label>
+        <select
+          name="user"
+          data-cy="userSelect"
+          value={userId}
+          onChange={event => {
+            handleUserChange(event);
+          }}
+        >
+          <option value="0" disabled>
+            Choose a user
+          </option>
+          {users.map(user => (
+            <option key={user.id} value={user.id}>
+              {user.name}
+            </option>
+          ))}
+        </select>
+
+        {hasUserError && <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,22 @@
-export const TodoInfo = () => {};
+import { UserInfo } from '../UserInfo/';
+import { Todo } from '../../types';
+import classNames from 'classnames';
+
+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>
+
+      {todo.user && <UserInfo user={todo.user} />}
+    </article>
+  );
+};

src/components/TodoList/TodoList.tsx

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

src/components/UserInfo/UserInfo.tsx

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

src/types.ts

@@ -0,0 +1,5 @@
+import todos from './api/todos';
+import users from './api/users';
+
+export type User = (typeof users)[number];
+export type Todo = (typeof todos)[number] & { user?: User };