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

src/App.tsx

@@ -1,61 +1,116 @@
 import './App.scss';
-
-// import usersFromServer from './api/users';
-// import todosFromServer from './api/todos';
+import { TodoList } from './components/TodoList';
+import usersFromServer from './api/users';
+import todosFromServer from './api/todos';
+import React, { useState } from 'react';
+import { todo } from './components/types';
 
 export const App = () => {
+  const editedTodos = todosFromServer.map(todo => ({
+    ...todo,
+    user: usersFromServer.find(user => user.id === todo.userId) || {
+      id: 0,
+      name: 'Unknown User',
+      username: 'unknown',
+      email: 'unknown@example.com',
+    },
+  }));
+
+  const [todos, setTodos] = useState<todo[]>(editedTodos)
+  const [title, setTitle] = useState('')
+  const [userId, setUserId] = useState(0)
+  const [titleError, setTitleError] = useState(false)
+  const [userError, setUserError] = useState(false)
+
+  const onSubmit = (event: React.FormEvent) => {
+    event.preventDefault();
+
+    let isError = false;
+
+    if (title.trim() === '') {
+      setTitleError(true);
+      isError = true;
+    }
+    if (userId === 0) {
+      setUserError(true);
+      isError = true;
+    }
+
+    if( isError) {
+      return;
+    }
+
+    const newTodo: todo = {
+      id: Math.max(...todos.map(todo => todo.id)) + 1,
+      title: title,
+      completed: false,
+      userId: userId,
+      user:   usersFromServer.find(user => user.id === userId) || {
+          id: 0,
+          name: 'Unknown User',
+          username: 'unknown',
+          email: 'unknown@example.com',
+        },
+    } 
+
+    setTodos(previous => [...previous, newTodo]);
+    setTitle('');
+    setUserId(0);
+    return;
+  }
   return (
     <div className="App">
       <h1>Add todo form</h1>
 
-      <form action="/api/todos" method="POST">
+      <form action="/api/todos" method="POST" onSubmit={onSubmit}>
         <div className="field">
-          <input type="text" data-cy="titleInput" />
-          <span className="error">Please enter a title</span>
+        <label htmlFor="titleInput">Todo title</label>
+          <input type="text" 
+          data-cy="titleInput"  
+          value={title}
+          onChange={(event)=> {
+            setTitle(event.target.value)
+            if (titleError) setTitleError(false)
+          }}
+          placeholder='enter title'
+          />
+          {titleError && <span className="error">Please enter a title</span>}
+
         </div>
 
         <div className="field">
-          <select data-cy="userSelect">
-            <option value="0" disabled>
+          <label htmlFor="userSelect">User</label>
+          <select data-cy="userSelect" value={userId} onChange={ 
+            (event)=>{
+              setUserId(+event.target.value)
+              if (userError) {
+                setUserError(false)
+              }
+            }
+
+            }>
+          <option value="0">
               Choose a user
             </option>
+            {usersFromServer.map(user => {
+
+                return(<option value= {user.id} key = {user.id}>
+                  {user.name}
+                </option>)
+
+            })}
+
           </select>
-
-          <span className="error">Please choose a user</span>
+            {userError && <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/components/TodoInfo/TodoInfo.tsx

@@ -1 +1,25 @@
-export const TodoInfo = () => {};
+import React from "react";
+import { todo} from "../types";
+import classNames from "classnames";
+import { UserInfo } from "../UserInfo";
+
+type 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} />
+      ) : (
+        <p className="TodoInfo__no-user">User not found</p>
+      )}
+    </article>
+  );
+};

src/components/TodoList/TodoList.tsx

@@ -1 +1,14 @@
-export const TodoList = () => {};
+import { todo } from "../types";
+import { TodoInfo } from "../TodoInfo";
+type Props = {
+    todos: todo[]
+}
+
+export const TodoList: React.FC<Props> = ({todos}) => {
+    return (<section className="TodoList">
+        {todos.map(todo => [
+            <TodoInfo todo={todo} key = {todo.id}/>
+        ])}
+
+      </section>)
+};

src/components/UserInfo/UserInfo.tsx

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

src/components/types.ts

@@ -0,0 +1,19 @@
+export type todo = {
+    id : number,
+    title: string,
+    completed: boolean,
+    userId: number
+    user?: {
+        id: number;
+        name: string;
+        username: string;
+        email: string;
+      };
+};
+
+export type user = {
+    id: number,
+    name: string,
+    username: string,
+    email: string
+};