Solution

.eslintrc.cjs

@@ -105,4 +105,4 @@ module.exports = {
       version: 'detect',
     },
   },
-};
+};

.stylelintrc.js

@@ -1,4 +1,4 @@
 module.exports = {
   extends: "@mate-academy/stylelint-config",
   rules: {}
-};
+};

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

src/App.scss

@@ -14,26 +14,3 @@ button {
 .error {
   color: red;
 }
-
-.TodoInfo {
-  width: max-content;
-  padding: 8px;
-  margin: 12px 0;
-  border: 1px solid #000;
-  border-radius: 8px;
-  background-color: antiquewhite;
-
-  &__title {
-    margin: 4px 0;
-    font-size: inherit;
-    color: #f00;
-  }
-
-  &--completed &__title {
-    color: #080;
-  }
-}
-
-.UserInfo {
-  font-style: italic;
-}

src/App.tsx

@@ -1,61 +1,125 @@
-import './App.scss';
+import { useState, ChangeEvent, useEffect } from "react";
+import "./App.scss";
+import { TodoList } from "./components/TodoList";
+import { getUser, tasks } from "./helpers.tsx/helpers";
+import usersFromServer from "./api/users";
 
-// import usersFromServer from './api/users';
-// import todosFromServer from './api/todos';
+interface Todo {
+  id: number;
+  title: string;
+  completed: boolean;
+  userId: number;
+  user: {
+    id: number;
+    name: string;
+    username: string;
+    email: string;
+  } | null;
+}
 
 export const App = () => {
+  const [userId, setUserId] = useState("0");
+  const [taskDescription, setTaskDescription] = useState("");
+  const [errorTitle, setErrorTitle] = useState(false);
+  const [errorUser, setErrorUser] = useState(false);
+  const [todos, setTodos] = useState<Todo[] | []>([]);
+
+  useEffect(() => {
+    setTodos(tasks);
+  }, []);
+
+  let maxId = Math.max(...todos.map((o) => o.id)) + 1;
+
+  const users = usersFromServer;
+
+  const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {
+    setTaskDescription(event.target.value);
+    setErrorTitle(false); // Reset error when user starts typing again
+  };
+
+  const handleUserChange = (event: ChangeEvent<HTMLSelectElement>) => {
+    setUserId(event.target.value);
+    setErrorUser(false); // Reset error when user starts typing again
+  };
+
+  const handleSubmit = (event: { preventDefault: () => void }) => {
+    event.preventDefault();
+    if (taskDescription === "") {
+      if (userId === "0") {
+        setErrorUser(true);
+        setErrorTitle(true);
+      } else {
+        setErrorTitle(true);
+      }
+
+      return;
+    }
+
+    if (userId === "0") {
+      setErrorUser(true);
+
+      return;
+    }
+
+    const newTask = {
+      id: maxId,
+      title: taskDescription,
+      completed: false,
+      userId: +userId,
+      user: getUser(+userId),
+    };
+
+    setTodos([...todos, newTask]);
+    setTaskDescription("");
+    setUserId("0");
+    maxId += 1;
+  };
+
   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: "}
+            <input
+              id="titleInput"
+              value={taskDescription}
+              onChange={handleInputChange}
+              type="text"
+              data-cy="titleInput"
+              placeholder="Enter a title"
+            />
+            {errorTitle && <span className="error"> Please enter a title</span>}
+          </label>
         </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 htmlFor="userSelect">
+            {"User: "}
+            <select
+              id="userSelect"
+              data-cy="userSelect"
+              value={userId}
+              onChange={handleUserChange}
+            >
+              <option value="0" disabled>
+                Choose a user
+              </option>
+              {users.map((user) => {
+                return <option value={user.id}>{user.name}</option>;
+              })}
+            </select>
+          </label>
+          {errorUser && <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: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>
   );
 };

src/Types/Todo.tsx

@@ -0,0 +1,9 @@
+import { User } from "./User";
+
+export interface Todo {
+  id: number;
+  userId: number;
+  title: string;
+  completed: boolean;
+  user: User | null;
+}

src/Types/User.tsx

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

src/components/TodoInfo/TodoInfo.scss

@@ -0,0 +1,18 @@
+.TodoInfo {
+  width: max-content;
+  padding: 8px;
+  margin: 12px 0;
+  border: 1px solid #000;
+  border-radius: 8px;
+  background-color: antiquewhite;
+
+  &__title {
+    margin: 4px 0;
+    font-size: inherit;
+    color: #f00;
+  }
+
+  &--completed &__title {
+    color: #080;
+  }
+}