From f0f36744634424dfcfba949854bd69ce9a987304 Mon Sep 17 00:00:00 2001
From: Yurii Mosin <m.yuriy@icloud.com>
Date: Wed, 8 Jan 2025 15:10:50 +0100
Subject: [PATCH] add solution

---
 src/App.tsx                          | 133 ++++++++++++++++++++-------
 src/components/TodoInfo/TodoInfo.tsx |  24 ++++-
 src/components/TodoList/TodoList.tsx |  18 +++-
 src/components/UserInfo/UserInfo.tsx |  15 ++-
 src/types/Todo.ts                    |   8 ++
 src/types/User.ts                    |   6 ++
 6 files changed, 167 insertions(+), 37 deletions(-)
 create mode 100644 src/types/Todo.ts
 create mode 100644 src/types/User.ts

diff --git a/src/App.tsx b/src/App.tsx
index a9a9bb4c53..1de116f25c 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,27 +1,118 @@
+import { useState } from 'react';
 import './App.scss';
+import usersFromServer from './api/users';
+import todosFromServer from './api/todos';
+import { TodoList } from './components/TodoList';
+import { Todo } from './types/Todo';
 
-// import usersFromServer from './api/users';
-// import todosFromServer from './api/todos';
+const findUserById = (userId: number) => {
+  return usersFromServer.find(user => user.id === userId);
+};
+
+const getPreparedTodos = () => {
+  return todosFromServer.map(todo => {
+    return {
+      ...todo,
+      user: findUserById(todo.userId) || null,
+    };
+  });
+};
 
 export const App = () => {
+  const [todos, setTodos] = useState<Todo[]>(getPreparedTodos());
+  const [selectedUserId, setSelectedUserId] = useState(0);
+  const [title, setTitle] = useState('');
+  const [titleInputError, setTitleInputError] = useState(false);
+  const [userSelectError, setUserSelectError] = useState(false);
+
+  const reset = () => {
+    setTitle('');
+    setSelectedUserId(0);
+    setTitleInputError(false);
+    setUserSelectError(false);
+  };
+
+  function handleSubmit(event: React.FormEvent<HTMLFormElement>): void {
+    event.preventDefault();
+
+    setTitleInputError(!title);
+    setUserSelectError(!selectedUserId);
+
+    if (!title || !selectedUserId) {
+      return;
+    }
+
+    setTodos(currentTodos => {
+      const newId = Math.max(...currentTodos.map(todo => todo.id)) + 1;
+
+      const user = findUserById(selectedUserId);
+
+      const newTodo: Todo = {
+        id: newId,
+        title: title,
+        userId: selectedUserId,
+        completed: false,
+        user: user || null,
+      };
+
+      return [...currentTodos, newTodo];
+    });
+
+    reset();
+  }
+
+  function handleTitleInput(event: React.ChangeEvent<HTMLInputElement>): void {
+    setTitle(event.target.value.trimStart());
+    setTitleInputError(false);
+  }
+
+  function handleUserSelect(event: React.ChangeEvent<HTMLSelectElement>): void {
+    setSelectedUserId(Number(event.target.value));
+    setUserSelectError(false);
+  }
+
   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 htmlFor="titleInput">Title: </label>
+          <input
+            type="text"
+            id="titleInput"
+            data-cy="titleInput"
+            value={title}
+            onChange={handleTitleInput}
+            placeholder="title"
+          />
+          {titleInputError && (
+            <span className="error">Please enter a title</span>
+          )}
         </div>
 
         <div className="field">
-          <select data-cy="userSelect">
+          <label htmlFor="userSelect">User: </label>
+          <select
+            id="userSelect"
+            data-cy="userSelect"
+            onChange={handleUserSelect}
+            value={selectedUserId}
+          >
             <option value="0" disabled>
               Choose a user
             </option>
+
+            {usersFromServer.map(user => (
+              <option key={user.id} value={user.id}>
+                {user.name}
+              </option>
+            ))}
           </select>
 
-          <span className="error">Please choose a user</span>
+          {userSelectError && (
+            <span className="error">Please choose a user</span>
+          )}
         </div>
 
         <button type="submit" data-cy="submitButton">
@@ -29,33 +120,7 @@ export const App = () => {
         </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>
+      <TodoList todos={todos} />
     </div>
   );
 };
diff --git a/src/components/TodoInfo/TodoInfo.tsx b/src/components/TodoInfo/TodoInfo.tsx
index d164511fa8..8b636b4a39 100644
--- a/src/components/TodoInfo/TodoInfo.tsx
+++ b/src/components/TodoInfo/TodoInfo.tsx
@@ -1 +1,23 @@
-export const TodoInfo = () => {};
+import React from 'react';
+import { Todo } from '../../types/Todo';
+import { UserInfo } from '../UserInfo';
+import classNames from 'classnames';
+
+interface 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>
+  );
+};
diff --git a/src/components/TodoList/TodoList.tsx b/src/components/TodoList/TodoList.tsx
index c12fae07c0..09f6b500bd 100644
--- a/src/components/TodoList/TodoList.tsx
+++ b/src/components/TodoList/TodoList.tsx
@@ -1 +1,17 @@
-export const TodoList = () => {};
+import React from 'react';
+import { Todo } from '../../types/Todo';
+import { TodoInfo } from '../TodoInfo';
+
+interface Props {
+  todos: Todo[];
+}
+
+export const TodoList: React.FC<Props> = ({ todos }) => {
+  return (
+    <section className="TodoList">
+      {todos.map(todo => (
+        <TodoInfo key={todo.id} todo={todo} />
+      ))}
+    </section>
+  );
+};
diff --git a/src/components/UserInfo/UserInfo.tsx b/src/components/UserInfo/UserInfo.tsx
index f7bf0410ec..71ee85e690 100644
--- a/src/components/UserInfo/UserInfo.tsx
+++ b/src/components/UserInfo/UserInfo.tsx
@@ -1 +1,14 @@
-export const UserInfo = () => {};
+import React from 'react';
+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>
+  );
+};
diff --git a/src/types/Todo.ts b/src/types/Todo.ts
new file mode 100644
index 0000000000..2a52e192f6
--- /dev/null
+++ b/src/types/Todo.ts
@@ -0,0 +1,8 @@
+import { User } from './User';
+export interface Todo {
+  id: number;
+  title: string;
+  completed: boolean;
+  userId: number;
+  user: User | null;
+}
diff --git a/src/types/User.ts b/src/types/User.ts
new file mode 100644
index 0000000000..1f6908b55a
--- /dev/null
+++ b/src/types/User.ts
@@ -0,0 +1,6 @@
+export interface User {
+  id: number;
+  name: string;
+  username: string;
+  email: string;
+}