From ea455e757281f0bd2b8ee389311542acbc6367de Mon Sep 17 00:00:00 2001
From: Lukasz Warda <lukaszwarda1989@gmail.com>
Date: Tue, 12 Sep 2023 12:03:03 +0200
Subject: [PATCH] add task solution

---
 src/App.tsx                 |  2 +-
 src/components/Footer.tsx   |  4 +--
 src/components/TempTodo.tsx | 61 ++++++++++++++++++-------------------
 src/hooks.ts                |  4 +--
 src/types/Errors.ts         |  2 +-
 5 files changed, 35 insertions(+), 38 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 816d836ec..71feb3240 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -151,7 +151,7 @@ export const App: React.FC = () => {
         <button
           type="button"
           className="delete"
-          onClick={() => handleError(Errors.noEroor)}
+          onClick={() => handleError(Errors.noError)}
         />
 
         {errorMessage}
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index 5b7cf00c6..b97b1e73a 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -56,7 +56,7 @@ export const Footer: React.FC<Props> = ({
 
         <a
           href="#/active"
-          className={sortBy === 'active'
+          className={sortBy === SortBy.active
             ? 'filter__link selected'
             : 'filter__link'}
           onClick={() => handleSetSortBy(SortBy.active)}
@@ -66,7 +66,7 @@ export const Footer: React.FC<Props> = ({
 
         <a
           href="#/completed"
-          className={sortBy === 'completed'
+          className={sortBy === SortBy.completed
             ? 'filter__link selected'
             : 'filter__link'}
           onClick={() => handleSetSortBy(SortBy.completed)}
diff --git a/src/components/TempTodo.tsx b/src/components/TempTodo.tsx
index 252fe951b..53535b156 100644
--- a/src/components/TempTodo.tsx
+++ b/src/components/TempTodo.tsx
@@ -5,38 +5,35 @@ type Props = {
   handleDeleteTodo: (value: number) => void,
 };
 
-export const TempTodo: React.FC<Props> = ({ tempTodo, handleDeleteTodo }) => {
-  return (
-    <li
-      className="todo"
-      key={tempTodo.id}
-    >
-      <label className="todo__status-label">
-        <input
-          type="checkbox"
-          className="todo__status"
-          checked={false}
-        />
-      </label>
+export const TempTodo: React.FC<Props> = ({ tempTodo, handleDeleteTodo }) => (
+  <li
+    className="todo"
+  >
+    <label className="todo__status-label">
+      <input
+        type="checkbox"
+        className="todo__status"
+        checked={tempTodo.completed}
+      />
+    </label>
 
-      <span className="todo__title">
-        {tempTodo.title}
-      </span>
+    <span className="todo__title">
+      {tempTodo.title}
+    </span>
 
-      <button
-        type="button"
-        className="todo__remove"
-        onClick={() => handleDeleteTodo(tempTodo.id)}
-      >
-        ×
-      </button>
+    <button
+      type="button"
+      className="todo__remove"
+      onClick={() => handleDeleteTodo(tempTodo.id)}
+    >
+      ×
+    </button>
 
-      <div
-        className="modal overlay is-active"
-      >
-        <div className="modal-background has-background-white-ter" />
-        <div className="loader" />
-      </div>
-    </li>
-  );
-};
+    <div
+      className="modal overlay is-active"
+    >
+      <div className="modal-background has-background-white-ter" />
+      <div className="loader" />
+    </div>
+  </li>
+);
diff --git a/src/hooks.ts b/src/hooks.ts
index cd705c23e..7063081e8 100644
--- a/src/hooks.ts
+++ b/src/hooks.ts
@@ -5,7 +5,7 @@ import { Errors, Todo } from './types';
 export const useGetTodos = (USER_ID: number, makeAnyChange: boolean) => {
   const [isLoading, setIsLoading] = useState(true);
   const [todos, setTodos] = useState<Todo[]>([]);
-  const [errorMessage, setErrorMessage] = useState<Errors>(Errors.noEroor);
+  const [errorMessage, setErrorMessage] = useState<Errors>(Errors.noError);
 
   useEffect(() => {
     async function fetchTodos() {
@@ -26,7 +26,7 @@ export const useGetTodos = (USER_ID: number, makeAnyChange: boolean) => {
   useEffect(() => {
     if (errorMessage) {
       setTimeout(() => {
-        setErrorMessage(Errors.noEroor);
+        setErrorMessage(Errors.noError);
       }, 3000);
     }
   }, [errorMessage]);
diff --git a/src/types/Errors.ts b/src/types/Errors.ts
index cca323f38..596af2361 100644
--- a/src/types/Errors.ts
+++ b/src/types/Errors.ts
@@ -1,5 +1,5 @@
 export enum Errors {
-  noEroor = '',
+  noError = '',
   emptyTitle = "Title can't be empty",
   delete = 'Unable to delete a todo',
   add = 'Unable to add a todo',