need to add UserInfo class

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://Dorosh90.github.io/react_add-todo-form/) and add it to the PR 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,28 @@
 import './App.scss';
+import { Todo, TodoList, User } from './components/TodoList';
+import todosFromServer from './api/todos';
 
-// import usersFromServer from './api/users';
-// import todosFromServer from './api/todos';
+import usersFromServer from './api/users';
+import { Form } from './components/Form';
+import { useState } from 'react';
 
 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>
+  const [usersList] = useState<User[]>(usersFromServer);
+  const [todoList, setuTodoList] = useState<Todo[]>(todosFromServer);
 
-        <button type="submit" data-cy="submitButton">
-          Add
-        </button>
-      </form>
+  const addNewTodo = (newTodo: Todo) => {
+    setuTodoList((currentTodo: Todo[]) => [...currentTodo, newTodo]);
+  };
 
-      <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>
+  return (
+    <>
+      <div className="App">
+        <h1>Add todo form</h1>
 
-        <article data-id="2" className="TodoInfo">
-          <h2 className="TodoInfo__title">
-            quis ut nam facilis et officia qui
-          </h2>
+        <Form users={usersList} todos={todoList} addFunc={addNewTodo} />
 
-          <a className="UserInfo" href="mailto:[email protected]">
-            Patricia Lebsack
-          </a>
-        </article>
-      </section>
-    </div>
+        <TodoList todos={todoList} users={usersList} />
+      </div>
+    </>
   );
 };

src/api/todos.ts

@@ -8,7 +8,7 @@ export default [
   {
     id: 15,
     title: 'some other todo',
-    completed: false,
+    completed: true,
     userId: 1,
   },
   {

src/components/Form/Form.tsx

@@ -0,0 +1,104 @@
+import { User } from '../TodoList';
+import { Todo } from '../TodoList';
+import React, { useState } from 'react';
+
+interface Props {
+  users: User[];
+  todos: Todo[];
+  addFunc: (newTodo: Todo) => void;
+}
+
+export const Form: React.FC<Props> = ({ users, todos, addFunc }) => {
+  const [title, setTitle] = useState('');
+
+  const [userId, setUserId] = useState(0);
+
+  const [titleError, setTitleError] = useState(false);
+  const [userError, setUserError] = useState(false);
+
+  function onSubmitChacge(event: React.FormEvent) {
+    event.preventDefault();
+
+    if (!title) {
+      setTitleError(true);
+    } else {
+      setTitleError(false);
+    }
+
+    if (!userId) {
+      setUserError(true);
+    } else {
+      setUserError(false);
+    }
+
+    if (title && userId) {
+      addFunc({
+        id: Math.max(...todos.map(todo => todo.id)) + 1,
+        title: title,
+        completed: false,
+        userId: userId,
+      });
+
+      setTitle('');
+      setUserId(0);
+    }
+
+    return;
+  }
+
+  return (
+    <form action="/api/todos" method="POST" onSubmit={onSubmitChacge}>
+      <div className="field">
+        <label htmlFor="title">
+          Title: {''}
+          <input
+            name="title"
+            value={title}
+            type="text"
+            data-cy="titleInput"
+            placeholder="Enter ad title"
+            onChange={event => setTitle(event.target.value)}
+          />
+          {titleError && !title && (
+            <span className="error">Please enter a title</span>
+          )}
+        </label>
+      </div>
+
+      <div className="field">
+        <label htmlFor="">
+          User: {''}
+          <select
+            data-cy="userSelect"
+            value={userId}
+            onChange={event => {
+              const selectedId = Number(event.target.value);
+              const selectedUser = users.find(user => user.id === selectedId);
+
+              if (selectedUser) {
+                setUserId(selectedUser.id);
+              }
+            }}
+          >
+            <option value="0" disabled>
+              Choose a user
+            </option>
+            {users.map(user => {
+              return (
+                <option key={user.id} value={user.id}>
+                  {user.name}
+                </option>
+              );
+            })}
+          </select>
+        </label>
+        {userError && userId === 0 && (
+          <span className="error">Please choose a user</span>
+        )}
+      </div>
+      <button type="submit" data-cy="submitButton">
+        Add
+      </button>
+    </form>
+  );
+};

src/components/Form/index.tsx

@@ -0,0 +1 @@
+export * from './Form';

src/components/TodoInfo/TodoInfo.tsx

@@ -1 +1,23 @@
-export const TodoInfo = () => {};
+import React from 'react';
+import { Todo } from '../TodoList';
+import { User } from '../TodoList';
+import { UserInfo } from '../UserInfo';
+import classNames from 'classnames';
+
+export const TodoInfo: React.FC<{ todo: Todo; user: User | undefined }> = ({
+  todo,
+  user,
+}) => {
+  return (
+    <article
+      data-id={todo.id}
+      className={classNames('TodoInfo', {
+        'TodoInfo--completed': todo.completed,
+      })}
+    >
+      <h2 className="TodoInfo__title">{todo.title}</h2>
+
+      {user && <UserInfo user={user} />}
+    </article>
+  );
+};

src/components/TodoList/TodoList.tsx

@@ -1 +1,33 @@
-export const TodoList = () => {};
+import React from 'react';
+import { TodoInfo } from '../TodoInfo';
+
+export interface Todo {
+  id: number;
+  title: string;
+  completed: boolean;
+  userId: number;
+}
+
+export interface User {
+  id: number;
+  name: string;
+  username: string;
+  email: string;
+}
+
+interface Props {
+  todos: Todo[];
+  users: User[];
+}
+
+export const TodoList: React.FC<Props> = ({ todos, users }) => {
+  return (
+    <section>
+      {todos.map(todo => {
+        const user = users.find(u => u.id === todo.userId);
+
+        return <TodoInfo key={todo.id} todo={todo} user={user} />;
+      })}
+    </section>
+  );
+};

src/components/UserInfo/UserInfo.tsx

@@ -1 +1,10 @@
-export const UserInfo = () => {};
+import { User } from '../TodoList';
+import React from 'react';
+
+export const UserInfo: React.FC<{ user: User }> = ({ user }) => {
+  return (
+    <a className="UserInfo" href={'mailto:' + user.email}>
+      {user.name}
+    </a>
+  );
+};