add solution

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,112 @@
+import React, { useState } from 'react';
 import './App.scss';
+import { UserInfo } from './components/UserInfo';
+import usersFromServer from './api/users';
+import todosFromServer from './api/todos';
+import { TodoList } from './components/TodoList';
 
-// import usersFromServer from './api/users';
-// import todosFromServer from './api/todos';
+type TodoProps = {
+  id: number;
+  title: string;
+  userId: number;
+  completed: boolean;
+  name: string;
+};
+
+export const App: React.FC<TodoProps> = () => {
+  const [errorTitle, setErrorTitle] = useState(false);
+  const [errorSelect, setErrorSelect] = useState(false);
+  const [title, setTitle] = useState('');
+  const [selectUser, setSelectUser] = useState(0);
+  const [todos, setTodos] = useState(todosFromServer);
+
+  function cleanForm() {
+    setTitle('');
+    setSelectUser(0);
+    setErrorTitle(false);
+    setErrorSelect(false);
+  }
+
+  function handleTitleChange(event: React.ChangeEvent<HTMLInputElement>) {
+    setTitle(event.target.value);
+    setErrorTitle(false);
+  }
+
+  function handleSelectChange(event: React.ChangeEvent<HTMLSelectElement>) {
+    setSelectUser(+event.target.value);
+    setErrorSelect(false);
+  }
+
+  function handleSubmit(event: React.FormEvent) {
+    event.preventDefault();
+
+    setErrorTitle(!title);
+    setErrorSelect(selectUser === 0);
+
+    if (!title || selectUser === 0) {
+      return;
+    }
+
+    const selectedUser = usersFromServer.find(user => user.id === selectUser);
+    const userName = selectedUser ? selectedUser.name : 'Unknown';
+
+    const newTodo: TodoProps = {
+      id: Math.max(...todos.map(todo => todo.id)) + 1,
+      title,
+      userId: selectUser,
+      completed: false,
+      name: userName,
+    };
+
+    setTodos([...todos, newTodo]);
+    cleanForm();
+  }
 
-export const App = () => {
   return (
     <div className="App">
       <h1>Add todo form</h1>
 
-      <form action="/api/todos" method="POST">
+      <form action="/api/todos" method="POST" onSubmit={handleSubmit}>
         <div className="field">
-          <input type="text" data-cy="titleInput" />
-          <span className="error">Please enter a title</span>
+          <label className="label" htmlFor="post-title">
+            Title:&nbsp;&nbsp;
+          </label>
+          <input
+            id="post-title"
+            type="text"
+            data-cy="titleInput"
+            placeholder="Enter a title"
+            value={title}
+            onChange={handleTitleChange}
+          />
+          {errorTitle && <span className="error">Please enter a title</span>}
         </div>
 
         <div className="field">
-          <select data-cy="userSelect">
+          <label className="label" htmlFor="post-user">
+            User:&nbsp;&nbsp;
+          </label>
+          <select
+            id="post-user"
+            data-cy="userSelect"
+            required
+            value={selectUser}
+            onChange={handleSelectChange}
+          >
             <option value="0" disabled>
               Choose a user
             </option>
+            <UserInfo users={usersFromServer} />
           </select>
-
-          <span className="error">Please choose a user</span>
+          {errorSelect && <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>
+      <TodoList users={usersFromServer} todos={todos} />
     </div>
   );
 };

src/components/TodoInfo/TodoInfo.tsx

@@ -1 +1,32 @@
-export const TodoInfo = () => {};
+import React from 'react';
+import classNames from 'classnames';
+
+type TodoProps = {
+  todo: {
+    id: number;
+    title: string;
+    completed: boolean;
+  };
+  user: {
+    id: number;
+    name: string;
+    email: string;
+  };
+};
+
+export const TodoInfo: React.FC<TodoProps> = ({ todo, user }) => {
+  return (
+    <article
+      data-id={todo.id}
+      className={classNames('TodoInfo', {
+        'TodoInfo--completed': todo.completed,
+        'TodoInfo--active': !todo.completed,
+      })}
+    >
+      <h2 className="TodoInfo__title">{todo.title}</h2>
+      <a className="UserInfo" href={`mailto:${user.email}`}>
+        {user.name}
+      </a>
+    </article>
+  );
+};

src/components/TodoList/TodoList.tsx

@@ -1 +1,40 @@
-export const TodoList = () => {};
+import React from 'react';
+import { TodoInfo } from '../TodoInfo';
+
+type User = {
+  id: number;
+  name: string;
+  username: string;
+  email: string;
+};
+
+type Todo = {
+  id: number;
+  title: string;
+  completed: boolean;
+  userId: number;
+};
+
+type Props = {
+  users: User[];
+  todos: Todo[];
+};
+
+export const TodoList: React.FC<Props> = ({ users, todos }) => {
+  return (
+    <section className="TodoList">
+      {todos.map(todo => {
+        // eslint-disable-next-line @typescript-eslint/no-shadow
+        const user = users.find(user => user.id === todo.userId);
+
+        return (
+          <TodoInfo
+            key={todo.id}
+            todo={todo}
+            user={user || { id: 0, name: 'Unknown', username: '', email: '' }}
+          />
+        );
+      })}
+    </section>
+  );
+};

src/components/UserInfo/UserInfo.tsx

@@ -1 +1,22 @@
-export const UserInfo = () => {};
+import React from 'react';
+
+type User = {
+  id: number;
+  name: string;
+};
+
+type Props = {
+  users: User[];
+};
+
+export const UserInfo: React.FC<Props> = ({ users }) => {
+  return (
+    <>
+      {users.map(user => (
+        <option key={user.id} value={user.id}>
+          {user.name}
+        </option>
+      ))}
+    </>
+  );
+};

tsconfig.json

@@ -4,6 +4,7 @@
     "src"
   ],
   "compilerOptions": {
+    "jsx": "react",
     "sourceMap": false,
     "types": ["node", "cypress"]
   }