Fix highlighing when double click

ulises-castro · Oct 7, 2021 · 695b61d · 695b61d
1 parent 5d0ca98
commit 695b61d
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 16 deletions.
diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
@@ -16,7 +16,7 @@ export const InvertedBtn = styled(Button)`
   border-color: white;
 `;
 
-export const IconButton = styled.a`
+export const IconButton = styled.button`
   display: flex;
   background: white;
   justify-content: center;

diff --git a/src/components/CheckBtn/index.tsx b/src/components/CheckBtn/index.tsx
@@ -33,10 +33,15 @@ const CheckButton = styled(IconButton)`
   }
 `;
 
-export default function CheckBtn({showIcon} : { showIcon: Boolean }): ReactElement | null {
+interface CheckBtnProps {
+  onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
+  showIcon?: Boolean;
+}
+
+export default function CheckBtn( { showIcon = false, onClick } : CheckBtnProps): ReactElement | null {
   return (
     <>
-      <CheckButton showIcon={showIcon}>
+      <CheckButton showIcon={showIcon} onClick={onClick}>
         <div className="circle"></div>
         <IoCheckmarkCircle size={"100%"} />
       </CheckButton>

diff --git a/src/components/TodoItem/index.tsx b/src/components/TodoItem/index.tsx
@@ -26,14 +26,12 @@ const Todo = styled(ShadowBox).attrs<{ position: any }>(({ position }) => ({
     left: `${position.left}px`,
     display: position.hidden ? "none" : "flex",
   },
-}))<{ position: any, completed: Boolean }>
-`
+}))<{ position: any; completed: Boolean }>`
   background: white;
   display: flex;
   justify-content: space-between;
   border-radius: 5px;
-  opacity: ${({ completed }) =>
-    completed ? ".5" : "1"};
+  opacity: ${({ completed }) => (completed ? ".5" : "1")};
 
   &:hover {
     opacity: 1;
@@ -151,15 +149,18 @@ export default function TodoItem({
 
   const isTodoCompleted = todo.status === "completed";
 
+  const onClickToggleCompleted = (event: React.MouseEvent<HTMLElement>) => {
+    handleToggleCompleted(todo.id);
+  };
+
   return (
     <div style={{ position: "relative", padding: "5px 0" }}>
-      <Todo
-        key={todo.id}
-        completed={isTodoCompleted}
-        position={todoPosition}
-      >
-        <Flex onClick={() => handleToggleCompleted(todo.id)} style={{padding: '15px'}}>
-          <CheckBtn showIcon={isTodoCompleted} />
+      <Todo key={todo.id} completed={isTodoCompleted} position={todoPosition}>
+        <Flex style={{ padding: "15px" }}>
+          <CheckBtn
+            onClick={onClickToggleCompleted}
+            showIcon={isTodoCompleted}
+          />
         </Flex>
         <TodoTitle onClick={() => false} completed={isTodoCompleted}>
           {showEdit ? (
@@ -183,10 +184,16 @@ export default function TodoItem({
 
         {todo.status !== "completed"}
         <TodoActions>
-          <Flex onClick={() => setShowEdit(true)} style={{padding: '15px 5px 15px 15px '}}>
+          <Flex
+            onClick={() => setShowEdit(true)}
+            style={{ padding: "15px 5px 15px 15px " }}
+          >
             <EditBtn />
           </Flex>
-          <Flex onClick={() => setShowDeleteAnimation(true)} style={{padding: '15px 15px'}}>
+          <Flex
+            onClick={() => setShowDeleteAnimation(true)}
+            style={{ padding: "15px 15px" }}
+          >
             <DeleteBtn />
           </Flex>
         </TodoActions>