all tests passed

README.md

@@ -30,4 +30,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://antonnimachuk.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": "^2.1.3",
     "@mate-academy/students-ts-config": "*",
     "@mate-academy/stylelint-config": "*",
     "@types/node": "^20.14.10",

src/App.tsx

@@ -1,61 +1,30 @@
+import { useState } from 'react';
 import './App.scss';
-
-// import usersFromServer from './api/users';
-// import todosFromServer from './api/todos';
+import { TodoList } from './components/TodoList';
+import { TodoForm } from './components/TodoForm';
+import todosFromServer from './api/todos';
+import usersFromServer from './api/users';
+import { Todo } from './types/Todo';
 
 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 users = usersFromServer;
 
-        <button type="submit" data-cy="submitButton">
-          Add
-        </button>
-      </form>
+  const todosWithUsers = todosFromServer.map(todo => ({
+    ...todo,
+    user: usersFromServer.find(user => user.id === todo.userId),
+  }));
 
-      <section className="TodoList">
-        <article data-id="1" className="TodoInfo TodoInfo--completed">
-          <h2 className="TodoInfo__title">delectus aut autem</h2>
+  const [todos, setTodos] = useState(todosWithUsers);
 
-          <a className="UserInfo" href="mailto:Sincere@april.biz">
-            Leanne Graham
-          </a>
-        </article>
+  const handleTodos = (newTodo: Todo) => {
+    setTodos([...todos, newTodo]);
+  };
 
-        <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>
+  return (
+    <div className="App">
+      <h1>Add todo form</h1>
+      <TodoForm onAdd={handleTodos} users={users} todos={todos} />
+      <TodoList todos={todos} />
     </div>
   );
 };

src/components/TodoForm/TodoForm.tsx

@@ -0,0 +1,93 @@
+/* eslint-disable */
+import React, {useState} from 'react';
+import { User } from '../../types/User';
+import { Todo } from '../../types/Todo';
+
+type Props = {
+  onAdd: (newTodo: Todo) => void;
+  users: User[];
+  todos: Todo[];
+};
+
+export const TodoForm: React.FC<Props> = ({ onAdd, users, todos }) => {
+  const [title, setTitle] = useState('');
+  const [userId, setUserId] = useState(0);
+
+  const [titleError, setTitleError] = useState(false);
+  const [userIdError, setUserIdError] = useState(false);
+
+  const maxId = todos.length ? Math.max(...todos.map(todo => todo.id)) + 1 : 1;
+
+  const handleUserIdChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    setUserId(+event.target.value);
+    setUserIdError(false);
+  };
+
+  const handleTitleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setTitle(event.target.value);
+    setTitleError(false);
+  };
+
+  const handleSubmit = (event: React.FormEvent) => {
+    event.preventDefault();
+
+    if (!title) setTitleError(true);
+    if (!userId) setUserIdError(true);
+
+    const user = users.find(user => user.id === userId);
+
+    if (!title || !userId || !user) return;
+
+    const newTodo : Todo = {
+      id: maxId,
+      title:title,
+      completed:false,
+      userId:userId,
+      user:user!
+    };
+
+    onAdd(newTodo);
+
+    setTitle('');
+    setUserId(0);
+  }
+
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <div className="field">
+        <input type="text"
+          data-cy="titleInput"
+          placeholder="Enter a title"
+          value={title}
+          onChange={handleTitleChange}
+        />
+        {titleError && <span className="error">Please enter a title</span>}
+      </div>
+
+      <div className="field">
+        <select
+          data-cy="userSelect"
+          value={userId}
+          onChange={handleUserIdChange}
+        >
+          <option value="0" disabled>Choose a user</option>
+          {users.map(user => (
+            <option key={user.id} value={user.id}>
+              {user.name}
+            </option>
+          ))}
+        </select>
+
+        {userIdError && <span className="error">Please choose a user</span>}
+      </div>
+
+      <button
+        type="submit"
+        data-cy="submitButton"
+      >
+        Add
+      </button>
+    </form>
+  );
+};

src/components/TodoForm/index.ts

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

src/components/TodoInfo/TodoInfo.tsx

@@ -1 +1,18 @@
-export const TodoInfo = () => {};
+/* eslint-disable */
+import React from 'react';
+import {Todo} from '../../types/Todo';
+import { UserInfo } from '../UserInfo';
+
+interface Props {
+  todo: Todo;
+}
+
+export const TodoInfo : React.FC<Props> = ({ todo }) => (
+  <article
+    data-id={todo.id}
+    className={`TodoInfo ${todo.completed ?'TodoInfo--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 = () => {};
+/* eslint-disable */
+
+import {Todo} from '../../types/Todo';
+import { TodoInfo } from '../TodoInfo';
+
+interface Props {
+  todos: Todo[];
+}
+
+export const TodoList: React.FC<Props> = ({todos}) => (
+  <section className="TodoList">
+    {todos.map(todo => (
+      <TodoInfo key={todo.id} todo={todo}/>
+    ))}
+  </section>
+);

src/components/UserInfo/UserInfo.tsx

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

src/cypress.config.ts

@@ -0,0 +1,26 @@
+const { defineConfig } = require('cypress');
+
+module.exports = defineConfig({
+  e2e: {
+    baseUrl: 'http://localhost:3000',
+    specPattern: 'cypress/integration/**/*.spec.{js,ts,jsx,tsx}',
+  },
+  video: true,
+  viewportHeight: 1920,
+  viewportWidth: 1080,
+  screenshotOnRunFailure: true,
+  reporter: 'mochawesome',
+  reporterOptions: {
+    reportDir: 'raw_reports',
+    overwrite: false,
+    html: false,
+    json: true,
+  },
+  component: {
+    specPattern: 'src/**/*.spec.{js,ts,jsx,tsx}',
+    devServer: {
+      framework: 'react',
+      bundler: 'vite',
+    },
+  },
+});

src/types/Todo.ts

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

src/types/User.ts

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