performed destructuring and added using a class library

mate-academy · Oct 30, 2024 · ca2dcc9 · ca2dcc9
1 parent a27bfdb
commit ca2dcc9
Show file tree

Hide file tree

Showing 7 changed files with 35 additions and 17 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -54,7 +54,7 @@ export const App: React.FC = () => {
         </div>
       </div>
 
-      {currentTodo && (
+      {currentTodo?.id && (
         <TodoModal currentTodo={currentTodo} setCurrentTodo={setCurrentTodo} />
       )}
     </>

diff --git a/src/api.ts b/src/api.ts
@@ -32,7 +32,7 @@ export const getActive = () =>
 export const getCompleted = () =>
   getTodos().then(response => response.filter(todo => todo.completed));
 
-export const getFinded = (text: string) =>
+export const getFounded = (text: string) =>
   getTodos().then(response =>
     response.filter(todo =>
       todo.title.toLowerCase().includes(text.toLowerCase()),

diff --git a/src/components/Option/Option.tsx b/src/components/Option/Option.tsx
@@ -0,0 +1,7 @@
+interface Props {
+  optionValue: string;
+}
+
+export const Option: React.FC<Props> = ({ optionValue }) => {
+  return <option value={optionValue.toLowerCase()}>{optionValue}</option>;
+};
diff --git a/src/components/Option/index.ts b/src/components/Option/index.ts
@@ -0,0 +1 @@
+export * from './Option';
diff --git a/src/components/TodoFilter/TodoFilter.tsx b/src/components/TodoFilter/TodoFilter.tsx
@@ -1,6 +1,7 @@
 import { Todo } from '../../types/Todo';
-import { getAll, getActive, getCompleted, getFinded } from '../../api';
+import { getAll, getActive, getCompleted, getFounded } from '../../api';
 import { useState, useEffect } from 'react';
+import { Option } from '../Option';
 
 interface Props {
   setTodos: (value: Todo[]) => void;
@@ -26,7 +27,7 @@ export const TodoFilter: React.FC<Props> = ({ setTodos }) => {
       let filteredTodos = await loadTodosByFilter();
 
       if (inputSearch.trim()) {
-        filteredTodos = await getFinded(inputSearch);
+        filteredTodos = await getFounded(inputSearch);
 
         if (filter === 'active') {
           filteredTodos = filteredTodos.filter(todo => !todo.completed);
@@ -64,9 +65,9 @@ export const TodoFilter: React.FC<Props> = ({ setTodos }) => {
             onChange={handleSelectChange}
             value={filter}
           >
-            <option value="all">All</option>
-            <option value="active">Active</option>
-            <option value="completed">Completed</option>
+            {['All', 'Active', 'Completed'].map(item => (
+              <Option optionValue={item} key={item} />
+            ))}
           </select>
         </span>
       </p>

diff --git a/src/components/TodoItem/TodoItem.tsx b/src/components/TodoItem/TodoItem.tsx
@@ -1,3 +1,4 @@
+import classNames from 'classnames';
 import { Todo } from '../../types/Todo';
 
 interface Props {
@@ -20,7 +21,7 @@ export const TodoItem: React.FC<Props> = ({
   return (
     <tr data-cy="todo" className="">
       <td className="is-vcentered">{id}</td>
-      {todo.completed ? (
+      {completed ? (
         <td className="is-vcentered">
           <span className="icon" data-cy="iconCompleted">
             <i className="fas fa-check" />
@@ -30,7 +31,12 @@ export const TodoItem: React.FC<Props> = ({
         <td className="is-vcentered" />
       )}
       <td className="is-vcentered is-expanded">
-        <p className={completed ? 'has-text-success' : 'has-text-danger'}>
+        <p
+          className={classNames({
+            'has-text-danger': !completed,
+            'has-text-success': completed,
+          })}
+        >
           {title}
         </p>
       </td>
@@ -43,7 +49,10 @@ export const TodoItem: React.FC<Props> = ({
         >
           <span className="icon">
             <i
-              className={`far ${currentTodo?.id === id ? 'fa-eye-slash' : 'fa-eye'} `}
+              className={classNames('far', {
+                'fa-eye': currentTodo?.id !== id,
+                'fa-eye-slash': currentTodo?.id === id,
+              })}
             />
           </span>
         </button>

diff --git a/src/components/TodoModal/TodoModal.tsx b/src/components/TodoModal/TodoModal.tsx
@@ -3,6 +3,7 @@ import { Loader } from '../Loader';
 import { getUser } from '../../api';
 import { User } from '../../types/User';
 import { Todo } from '../../types/Todo';
+import classNames from 'classnames';
 
 interface Props {
   currentTodo: Todo;
@@ -13,7 +14,7 @@ export const TodoModal: React.FC<Props> = ({ currentTodo, setCurrentTodo }) => {
   const [loader, setLoader] = useState(true);
   const [user, setUser] = useState<User | null>(null);
 
-  const { userId, completed, id } = currentTodo;
+  const { userId, completed, id, title } = currentTodo;
 
   useEffect(() => {
     (async () => {
@@ -56,16 +57,15 @@ export const TodoModal: React.FC<Props> = ({ currentTodo, setCurrentTodo }) => {
 
           <div className="modal-card-body">
             <p className="block" data-cy="modal-title">
-              {currentTodo?.title}
+              {title}
             </p>
 
             <p className="block" data-cy="modal-user">
               <strong
-                className={
-                  currentTodo?.completed
-                    ? 'has-text-success'
-                    : 'has-text-danger'
-                }
+                className={classNames({
+                  'has-text-danger': !completed,
+                  'has-text-success': completed,
+                })}
               >
                 {completed ? 'Done' : 'Planned'}
               </strong>