From 5bb39b8f893eb33576dd31a02e8345fb16a86d61 Mon Sep 17 00:00:00 2001
From: cv <34649812+cpvalente@users.noreply.github.com>
Date: Sat, 10 Apr 2021 23:12:00 +0200
Subject: [PATCH] bugfix: event handler

---
 .../src/common/components/buttons/AddIconBtn.jsx   |  4 ++--
 .../src/common/components/buttons/BlockIconBtn.jsx |  2 +-
 .../src/common/components/buttons/DelayIconBtn.jsx |  2 +-
 .../common/components/buttons/DeleteIconBtn.jsx    |  2 +-
 client/src/common/input/DelayValue.jsx             |  2 +-
 client/src/common/input/EditableTimer.jsx          |  2 --
 client/src/features/editors/list/Block.module.css  | 10 +++++++++-
 client/src/features/editors/list/BlockBlock.jsx    |  4 +---
 client/src/features/editors/list/DelayBlock.jsx    | 14 --------------
 client/src/features/editors/list/EventBlock.jsx    |  2 +-
 client/src/features/menu/EventListMenu.jsx         |  7 +++----
 11 files changed, 20 insertions(+), 31 deletions(-)

diff --git a/client/src/common/components/buttons/AddIconBtn.jsx b/client/src/common/components/buttons/AddIconBtn.jsx
index f9bf88287..98113488b 100644
--- a/client/src/common/components/buttons/AddIconBtn.jsx
+++ b/client/src/common/components/buttons/AddIconBtn.jsx
@@ -1,5 +1,5 @@
 import { IconButton } from '@chakra-ui/button';
-import { FiPlus } from "react-icons/fi";
+import { FiPlus } from 'react-icons/fi';
 
 export default function AddIconBtn(props) {
   return (
@@ -7,7 +7,7 @@ export default function AddIconBtn(props) {
       size={props.size || 'xs'}
       icon={<FiPlus />}
       colorScheme='blue'
-      onClick={() => props.clickHandler}
+      onClick={props.clickHandler}
     />
   );
 }
diff --git a/client/src/common/components/buttons/BlockIconBtn.jsx b/client/src/common/components/buttons/BlockIconBtn.jsx
index a77364947..2bf54c2b7 100644
--- a/client/src/common/components/buttons/BlockIconBtn.jsx
+++ b/client/src/common/components/buttons/BlockIconBtn.jsx
@@ -7,7 +7,7 @@ export default function BlockIconBtn(props) {
       size={props.size || 'xs'}
       icon={<FiMinusCircle />}
       colorScheme='purple'
-      onClick={() => props.clickHandler}
+      onClick={props.clickHandler}
     />
   );
 }
diff --git a/client/src/common/components/buttons/DelayIconBtn.jsx b/client/src/common/components/buttons/DelayIconBtn.jsx
index d2c64c8ba..1a50b4a5b 100644
--- a/client/src/common/components/buttons/DelayIconBtn.jsx
+++ b/client/src/common/components/buttons/DelayIconBtn.jsx
@@ -7,7 +7,7 @@ export default function DelayIconBtn(props) {
       size={props.size || 'xs'}
       icon={<FiClock />}
       colorScheme='yellow'
-      onClick={() => props.clickHandler}
+      onClick={props.clickHandler}
     />
   );
 }
diff --git a/client/src/common/components/buttons/DeleteIconBtn.jsx b/client/src/common/components/buttons/DeleteIconBtn.jsx
index 32fb320c2..bc4d48ea2 100644
--- a/client/src/common/components/buttons/DeleteIconBtn.jsx
+++ b/client/src/common/components/buttons/DeleteIconBtn.jsx
@@ -7,7 +7,7 @@ export default function DeleteIconBtn(props) {
       size={props.size || 'xs'}
       icon={<FiMinus />}
       colorScheme='red'
-      onClick={() => props.clickHandler}
+      onClick={props.clickHandler}
     />
   );
 }
diff --git a/client/src/common/input/DelayValue.jsx b/client/src/common/input/DelayValue.jsx
index 3ecd5acc3..a19cd0e7f 100644
--- a/client/src/common/input/DelayValue.jsx
+++ b/client/src/common/input/DelayValue.jsx
@@ -4,7 +4,7 @@ export default function DelayValue(props) {
   const { delay } = props;
   const delayed = delay > 0;
   return (
-    <div className={delayed && style.delayValue}>
+    <div className={delayed ? style.delayValue : undefined}>
       {delayed && <span>{`+ ${delay}`}</span>}
     </div>
   );
diff --git a/client/src/common/input/EditableTimer.jsx b/client/src/common/input/EditableTimer.jsx
index 7d44ee8bb..3e182472f 100644
--- a/client/src/common/input/EditableTimer.jsx
+++ b/client/src/common/input/EditableTimer.jsx
@@ -37,8 +37,6 @@ export default function EditableTimer(props) {
     setValue(addAndFormat(time, delay));
   };
 
-  console.log('hh', value, time);
-
   return (
     <div className={style.time}>
       <Editable
diff --git a/client/src/features/editors/list/Block.module.css b/client/src/features/editors/list/Block.module.css
index cc0019bf8..1936564fa 100644
--- a/client/src/features/editors/list/Block.module.css
+++ b/client/src/features/editors/list/Block.module.css
@@ -33,10 +33,18 @@
   transition: linear 0.1s;
 }
 
+.eventRow:hover > .actionOverlay,
+.eventRowActive:hover > .actionOverlay,
+.block:hover > .actionOverlay,
+.delay:hover > .actionOverlay {
+  opacity: 0.85;
+  transition: linear 0.1s;
+}
+
+/* NA */
 .actionOverlay:hover {
   opacity: 1;
 }
-
 /* ============= EVENT ITEM ============= */
 
 .eventRow,
diff --git a/client/src/features/editors/list/BlockBlock.jsx b/client/src/features/editors/list/BlockBlock.jsx
index 21502a1f3..18367c27f 100644
--- a/client/src/features/editors/list/BlockBlock.jsx
+++ b/client/src/features/editors/list/BlockBlock.jsx
@@ -1,5 +1,3 @@
-import { IconButton } from '@chakra-ui/button';
-import { AddIcon, MinusIcon } from '@chakra-ui/icons';
 import AddIconBtn from '../../../common/components/buttons/AddIconBtn';
 import DeleteIconBtn from '../../../common/components/buttons/DeleteIconBtn';
 import style from './Block.module.css';
@@ -8,7 +6,7 @@ export default function BlockBlock(props) {
   const { eventsHandler, index, data } = props;
 
   const addHandler = () => {
-    eventsHandler('add', { type: 'block', order: index + 1 });
+    eventsHandler('add', { type: 'event', order: index + 1 });
   };
   const deleteHandler = () => {
     eventsHandler('delete', data.id);
diff --git a/client/src/features/editors/list/DelayBlock.jsx b/client/src/features/editors/list/DelayBlock.jsx
index fc1b712c3..0bd4a591f 100644
--- a/client/src/features/editors/list/DelayBlock.jsx
+++ b/client/src/features/editors/list/DelayBlock.jsx
@@ -1,5 +1,3 @@
-import { IconButton } from '@chakra-ui/button';
-import { AddIcon, MinusIcon } from '@chakra-ui/icons';
 import { Box } from '@chakra-ui/layout';
 import {
   Slider,
@@ -8,7 +6,6 @@ import {
   SliderTrack,
 } from '@chakra-ui/slider';
 import { useEffect, useState } from 'react';
-import style from './List.module.css';
 import AddIconBtn from '../../../common/components/buttons/AddIconBtn';
 import DeleteIconBtn from '../../../common/components/buttons/DeleteIconBtn';
 import style from './Block.module.css';
@@ -34,14 +31,12 @@ export default function DelayBlock(props) {
     setDelay(data.timerDuration);
   }, [data]);
   const addHandler = () => {
-    eventsHandler('add', { type: 'block', order: index + 1 });
   };
   const deleteHandler = () => {
     eventsHandler('delete', data.id);
   };
 
   return (
-    <div className={style.delayContainer}>
     <div className={style.delay}>
       <div className={style.delayValue}>{`${delay} min`}</div>
       <Slider
@@ -59,15 +54,6 @@ export default function DelayBlock(props) {
         <SliderThumb boxSize={4} />
       </Slider>
       <div className={style.actionOverlay}>
-        />
-        <IconButton
-          size='xs'
-          icon={<AddIcon />}
-          colorScheme='blue'
-          onClick={() =>
-            eventsHandler('add', { type: 'event', order: index + 1 })
-          }
-        />
         <DeleteIconBtn clickHandler={deleteHandler} />
         <AddIconBtn clickHandler={addHandler} />
       </div>
diff --git a/client/src/features/editors/list/EventBlock.jsx b/client/src/features/editors/list/EventBlock.jsx
index b46350e61..92412ffcc 100644
--- a/client/src/features/editors/list/EventBlock.jsx
+++ b/client/src/features/editors/list/EventBlock.jsx
@@ -28,7 +28,7 @@ export default function EventBlock(props) {
   };
 
   const addHandler = () => {
-    eventsHandler('add', { type: 'block', order: index + 1 });
+    eventsHandler('add', { type: 'event', order: index + 1 });
   };
   const delayHandler = () => {
     eventsHandler('add', { type: 'delay', order: index + 1 });
diff --git a/client/src/features/menu/EventListMenu.jsx b/client/src/features/menu/EventListMenu.jsx
index 287eefa50..2f4073a48 100644
--- a/client/src/features/menu/EventListMenu.jsx
+++ b/client/src/features/menu/EventListMenu.jsx
@@ -1,8 +1,7 @@
-import { AddIcon, ChevronDownIcon } from '@chakra-ui/icons';
+import { FiChevronDown } from 'react-icons/fi';
 import {
   Button,
   ButtonGroup,
-  IconButton,
   Menu,
   MenuButton,
   MenuItem,
@@ -30,7 +29,7 @@ export default function EventListMenu(props) {
             Upload
           </Button>
           <MenuButton as={Button} {...buttonProps}>
-            <ChevronDownIcon />
+            <FiChevronDown />
           </MenuButton>
         </ButtonGroup>
         <MenuList>
@@ -42,7 +41,7 @@ export default function EventListMenu(props) {
         <ButtonGroup isAttached>
           <Button {...buttonProps}>Save</Button>
           <MenuButton as={Button} {...buttonProps}>
-            <ChevronDownIcon />
+            <FiChevronDown />
           </MenuButton>
         </ButtonGroup>
         <MenuList>