add task solution

src/App.tsx

@@ -13,20 +13,20 @@ export const App = () => {
   const [hasTitleError, setHasTitleError] = useState(false);
   const [hasNameError, setHasNameError] = useState(false);
 
-  const handleSubmit: FormEventHandler<HTMLButtonElement> = (event) => {
+  const handleSubmit: FormEventHandler<HTMLFormElement> = (event) => {
     event.preventDefault();
 
-    if (!typedTitle) {
+    if (!typedTitle.trim()) {
       setHasTitleError(true);
     }
 
-    if (selectedUserId === 0) {
+    if (!selectedUserId) {
       setHasNameError(true);
     }
 
     const maxId = Math.max(...todosList.map(todo => todo.id));
 
-    if (typedTitle !== '' && selectedUserId) {
+    if (!!typedTitle && selectedUserId) {
       const newTodo: Todo = {
         id: maxId + 1,
         title: typedTitle,
@@ -59,7 +59,7 @@ export const App = () => {
     <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">
           <label htmlFor="text" title="title">Title: </label>
           <input
@@ -82,26 +82,23 @@ export const App = () => {
             title="User"
             defaultValue={0}
           >
-
             <option disabled value={0}>
               Choose a user
             </option>
-            {usersFromServer.map(user => {
-              return (
-                <option
-                  key={user.id}
-                  value={user.id}
-                >
-                  {user.name}
-                </option>
-              );
-            })}
+            {usersFromServer.map(user => (
+              <option
+                key={user.id}
+                value={user.id}
+              >
+                {user.name}
+              </option>
+            ))}
           </select>
           {hasNameError
             && <span className="error">Please choose a user</span>}
         </div>
 
-        <button type="submit" data-cy="submitButton" onClick={handleSubmit}>
+        <button type="submit" data-cy="submitButton">
           Add
         </button>
       </form>

src/api/users.ts

@@ -59,4 +59,4 @@ export default [
     username: 'Moriah.Stanton',
     email: 'Rey.Padberg@karina.biz',
   },
-];
+];

src/components/TodoList/TodoList.tsx

@@ -5,7 +5,7 @@ type TodoListProps = {
   todos: Todo[];
 };
 
-export const TodoList = ({ todos }: TodoListProps) => (
+export const TodoList: React.FC<TodoListProps> = ({ todos }) => (
   <section className="TodoList">
     {todos.map(todo => (
       <TodoInfo

src/components/UserInfo/UserInfo.tsx

@@ -1,14 +1,10 @@
 import { User } from '../../types';
 
 type UserInfoProps = {
-  user?: User,
+  user: User;
 };
 
 export const UserInfo = ({ user }: UserInfoProps) => {
-  if (!user) {
-    return null;
-  }
-
   return (
     <a className="UserInfo" href={`mailto:${user.email}`}>
       {user.name}