add task solution

mate-academy · Sep 12, 2023 · ea455e7 · ea455e7
1 parent d8429a7
commit ea455e7
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 38 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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',