feat: action button in menu

client/src/features/editors/list/EventListWrapper.jsx

@@ -1,5 +1,5 @@
 import { useMutation, useQueryClient } from 'react-query';
-import { useEffect } from 'react';
+import { useCallback, useEffect } from 'react';
 import {
   eventsNamespace,
   fetchAllEvents,
@@ -14,7 +14,7 @@ import EventList from './EventList';
 import EventListMenu from '../../menu/EventListMenu.jsx';
 import { showErrorToast } from '../../../common/helpers/toastManager';
 import { useFetch } from '../../../app/hooks/useFetch.js';
-import EventListSkeleton from '../skeletons/EventListSkeleton.jsx';
+import Empty from '../../../common/state/Empty';
 
 export default function EventListWrapper() {
   const queryClient = useQueryClient();
@@ -164,7 +164,7 @@ export default function EventListWrapper() {
     },
   });
 
-    const reorderEvent = useMutation(requestReorder, {
+  const reorderEvent = useMutation(requestReorder, {
     // we optimistically update here
     onMutate: async (data) => {
       // cancel ongoing queries
@@ -203,7 +203,7 @@ export default function EventListWrapper() {
   }, [isError]);
 
   // Events API
-  const eventsHandler = async (action, payload) => {
+  const eventsHandler = useCallback(async (action, payload) => {
     switch (action) {
       case 'add':
         try {
@@ -289,7 +289,7 @@ export default function EventListWrapper() {
         showErrorToast('Unrecognised request', action);
         break;
     }
-  };
+  }, []);
 
   return (
     <>
@@ -297,7 +297,7 @@ export default function EventListWrapper() {
       {status === 'success' ? (
         <EventList events={data} eventsHandler={eventsHandler} />
       ) : (
-        <EventListSkeleton />
+        <Empty text='Connecting to server' />
       )}
     </>
   );

client/src/features/editors/list/MenuActionButtons.jsx

@@ -1,18 +1,21 @@
 import { Menu, MenuButton, MenuItem, MenuList } from '@chakra-ui/menu';
 import { IconButton } from '@chakra-ui/button';
-import {
-  FiZap,
-  FiTrash2,
-} from 'react-icons/fi';
+import { FiZap, FiPlus, FiClock, FiMinusCircle } from 'react-icons/fi';
+import { useEffect } from 'react';
 
 export default function MenuActionButtons(props) {
+  const { actionHandler } = props;
   const menuStyle = {
     color: '#000000',
     backgroundColor: 'rgba(255,255,255,1)',
   };
 
+  useEffect(() =>{
+    console.log('debug action button render')
+  })
+
   return (
-    <Menu>
+    <Menu isLazy lazyBehavior='unmount'>
       <MenuButton
         as={IconButton}
         aria-label='Options'
@@ -24,8 +27,20 @@ export default function MenuActionButtons(props) {
         color={'orange.500'}
       />
       <MenuList style={menuStyle}>
-        <MenuItem icon={<FiTrash2 />} onClick={props.deleteAllHandler}>
+        {/* <MenuItem icon={<FiTrash2 />} onClick={props.deleteAllHandler}>
           Delete All
+        </MenuItem> */}
+        <MenuItem icon={<FiPlus />} onClick={() => actionHandler('event')}>
+          Event first
+        </MenuItem>
+        <MenuItem icon={<FiClock />} onClick={() => actionHandler('delay')}>
+          Delay first
+        </MenuItem>
+        <MenuItem
+          icon={<FiMinusCircle />}
+          onClick={() => actionHandler('block')}
+        >
+          Block first
         </MenuItem>
       </MenuList>
     </Menu>

client/src/features/menu/EventListMenu.jsx

@@ -28,9 +28,22 @@ const EventListMenu = ({ eventsHandler }) => {
     backgroundColor: 'rgba(255,255,255,0.67)',
   };
 
-  const addHandler = useCallback(() => {
-    eventsHandler('add', { type: 'event', order: 0 });
-  }, [eventsHandler]);
+  const actionHandler = (action) => {
+    console.log('debug action called', action);
+    switch (action) {
+      case 'event':
+        eventsHandler('add', { type: action, order: 0 });
+        break;
+      case 'delay':
+        eventsHandler('add', { type: action, order: 0 });
+        break;
+      case 'block':
+        eventsHandler('add', { type: action, order: 0 });
+        break;
+      default:
+        break;
+    }
+  };
 
   return (
     <div className={style.headerButtons}>
@@ -58,8 +71,7 @@ const EventListMenu = ({ eventsHandler }) => {
           <MenuItem>Download CSV</MenuItem>
         </MenuList>
       </Menu>
-      <AddIconBtn clickhandler={addHandler} size='sm' />
-      {/* <MenuActionButtons size='sm' /> */}
+      <MenuActionButtons actionHandler={actionHandler} size='sm' />
     </div>
   );
 };