major: event block redesign

client/src/common/components/buttons/DeleteIconBtn.jsx

@@ -2,13 +2,13 @@ import { IconButton } from '@chakra-ui/button';
 import { FiMinus } from 'react-icons/fi';
 
 export default function DeleteIconBtn(props) {
-  const { clickhandler, ...rest } = props;
+  const { actionHandler, ...rest } = props;
   return (
     <IconButton
       size={props.size || 'xs'}
       icon={<FiMinus />}
       colorScheme='red'
-      onClick={clickhandler}
+      onClick={() => actionHandler('delete')}
       _focus={{ boxShadow: 'none' }}
       {...rest}
     />

client/src/common/components/buttons/TrashIconBtn.jsx

@@ -0,0 +1,16 @@
+import { IconButton } from '@chakra-ui/button';
+import { FiTrash2 } from 'react-icons/fi';
+
+export default function TrashIconBtn(props) {
+  const { clickhandler, ...rest } = props;
+  return (
+    <IconButton
+      size={props.size || 'xs'}
+      icon={<FiTrash2 />}
+      colorScheme='red'
+      onClick={clickhandler}
+      _focus={{ boxShadow: 'none' }}
+      {...rest}
+    />
+  );
+}

client/src/common/components/buttons/VisibleIconBtn.jsx

@@ -2,14 +2,16 @@ import { IconButton } from '@chakra-ui/button';
 import { FiSun } from 'react-icons/fi';
 
 export default function VisibleIconBtn(props) {
-  const { clickhandler, active, ...rest } = props;
+  const { actionHandler, active, ...rest } = props;
   return (
     <IconButton
       size={props.size || 'xs'}
       icon={<FiSun />}
       colorScheme='blue'
       variant={active ? 'solid' : 'outline'}
-      onClick={clickhandler}
+      onClick={() =>
+        actionHandler('update', { field: 'isPublic', value: !active })
+      }
       _focus={{ boxShadow: 'none' }}
       {...rest}
     />