add solution

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://A1eeex.github.io/react_add-todo-form/) and add it to the PR description.

src/App.tsx

@@ -1,25 +1,117 @@
 import './App.scss';
 
-// import usersFromServer from './api/users';
-// import todosFromServer from './api/todos';
+import { useState } from 'react';
+import usersFromServer from './api/users';
+import todosFromServer from './api/todos';
+import { TodoList } from './components/TodoList';
+import { TodoWithUser } from './types/TodoType';
+
+function findUsers(userId: number) {
+  return usersFromServer.find((user) => user.id === userId) || null;
+}
+
+const dataList = todosFromServer.map((todo) => {
+  return {
+    ...todo,
+    user: findUsers(todo.userId),
+  };
+});
 
 export const App = () => {
+  const [currentData, setCurrentData] = useState<TodoWithUser[]>(dataList);
+  const [title, setTitle] = useState('');
+  const [currennUserId, setCurrentUserId] = useState(0);
+
+  const [titleValid, setTitleValid] = useState(false);
+  const [selectValid, setSelectValid] = useState(false);
+
+  const getTodoIds = currentData.map((todo) => todo.id);
+  const getNewId = Math.max(...getTodoIds) + 1;
+
+  function clear() {
+    setTitle('');
+    setCurrentUserId(0);
+    setTitleValid(false);
+    setSelectValid(false);
+  }
+
+  const handlerSubmit = (event: React.ChangeEvent<HTMLFormElement>) => {
+    event.preventDefault();
+
+    const newTodo: TodoWithUser = {
+      id: getNewId,
+      completed: false,
+      title,
+      userId: currennUserId,
+      user: findUsers(currennUserId),
+    };
+
+    if (!title) {
+      setTitleValid(true);
+    }
+
+    if (!currennUserId) {
+      setSelectValid(true);
+    }
+
+    if (title && currennUserId) {
+      setCurrentData((prevData) => [...prevData, newTodo]);
+      clear();
+    }
+  };
+
+  const handlerSelectUser = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    if (selectValid) {
+      setSelectValid(false);
+    }
+
+    setCurrentUserId(+event.target.value);
+  };
+
   return (
     <div className="App">
       <h1>Add todo form</h1>
 
-      <form action="/api/todos" method="POST">
+      <form onSubmit={handlerSubmit} action="/api/todos" method="POST">
         <div className="field">
-          <input type="text" data-cy="titleInput" />
-          <span className="error">Please enter a title</span>
+          <label>
+            {'Title: '}
+            <input
+              placeholder="Enter a title"
+              value={title}
+              onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
+                setTitle(event.target.value);
+
+                if (titleValid) {
+                  setTitleValid(false);
+                }
+              }}
+              type="text"
+              data-cy="titleInput"
+            />
+          </label>
+          {titleValid && <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>
+          <label>
+            {'User: '}
+            <select
+              value={currennUserId}
+              onChange={handlerSelectUser}
+              data-cy="userSelect"
+            >
+              <option value="0" disabled>
+                Choose a user
+              </option>
+              {usersFromServer.map((user) => (
+                <option key={user.id} value={user.id}>
+                  {user.name}
+                </option>
+              ))}
+            </select>
+          </label>
+          {selectValid && <span className="error">Please choose a user</span>}
         </div>
 
         <button type="submit" data-cy="submitButton">
@@ -28,33 +120,7 @@ export const App = () => {
       </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>
+        <TodoList todos={currentData} />
       </section>
     </div>
   );

src/components/TodoInfo/TodoInfo.tsx

@@ -1 +1,19 @@
-export const TodoInfo = () => {};
+import { TodoWithUser } from '../../types/TodoType';
+import { UserInfo } from '../UserInfo';
+
+type Props = {
+  todo: TodoWithUser;
+};
+export const TodoInfo: React.FC<Props> = ({ todo }) => {
+  return (
+    <article
+      key={todo.id}
+      data-id={todo.id.toString()}
+      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 = () => {};
+import { TodoWithUser } from '../../types/TodoType';
+import { TodoInfo } from '../TodoInfo';
+
+type Props = {
+  todos: TodoWithUser[];
+};
+
+export const TodoList: React.FC<Props> = ({ todos }) => {
+  return (
+    <>
+      {todos.map((todo: TodoWithUser) => (
+        <TodoInfo key={todo.id} todo={todo} />
+      ))}
+    </>
+  );
+};

src/components/UserInfo/UserInfo.tsx

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

src/types/TodoType.ts

@@ -0,0 +1,12 @@
+import { User } from './UsersType';
+
+export interface Todo {
+  id: number;
+  title: string;
+  completed: boolean;
+  userId: number;
+}
+
+export interface TodoWithUser extends Todo {
+  user?: User | null;
+}

src/types/UsersType.ts

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