bugfix: event order

+ bug caused by earlier commit making function async
+ small style changes
+ bug on prev - next

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

@@ -17,10 +17,10 @@ export default function ActionButtons(props) {
         aria-label='Options'
         size='xs'
         icon={<FiZap />}
-        _hover={{ bg: 'pink.500' }}
+        _expanded={{ bg: 'pink.300', color: 'white' }}
-        _expanded={{ bg: 'pink.300' }}
         _focus={{ boxShadow: 'none' }}
-        colorScheme='pink'
+        backgroundColor={'orange.200'}
+        color={'orange.500'}
       />
       <MenuList style={menuStyle}>
         {showDel && (

client/src/features/editors/list/Block.module.css

@@ -6,6 +6,8 @@
 .delay {
   position: relative;
   margin: 0.2em 0;
+  padding: 0.2em 0.5em;
+
   width: 100%;
   border-radius: 8px;
   font-size: 15px;
@@ -14,7 +16,6 @@
 
 .block,
 .delay {
-  padding: 0.2em 1em;
   box-sizing: border-box;
   display: flex;
   gap: 1em;
@@ -27,6 +28,7 @@
   gap: 0.5em;
   align-content: center;
   align-self: flex-start;
+
   opacity: 0.8;
   transition: linear 0.1s;
 }
@@ -47,7 +49,6 @@
 
 .eventRow,
 .eventRowActive {
-  padding: 0.2em 0.5em;
   padding-left: 1em;
 
   display: grid;

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

@@ -1,3 +1,4 @@
+import DeleteIconBtn from '../../../common/components/buttons/DeleteIconBtn';
 import ActionButtons from './ActionButtons';
 import style from './Block.module.css';
 
@@ -17,14 +18,12 @@ export default function BlockBlock(props) {
   return (
     <div className={style.block}>
       <div className={style.actionOverlay}>
+        <DeleteIconBtn clickHandler={deleteHandler} />
         <ActionButtons
-          showDel
-          deleteHandler={deleteHandler}
           showAdd
           addHandler={addHandler}
           showDelay
           delayHandler={delayHandler}
-          showBlock
         />
       </div>
     </div>

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

@@ -2,6 +2,7 @@ import { millisToMinutes } from '../../../common/dateConfig';
 import TimeInput from '../../../common/input/TimeInput';
 import style from './Block.module.css';
 import ActionButtons from './ActionButtons';
+import DeleteIconBtn from '../../../common/components/buttons/DeleteIconBtn';
 
 export default function DelayBlock(props) {
   const { data, eventsHandler, index } = props;
@@ -12,7 +13,6 @@ export default function DelayBlock(props) {
 
   const submitHandler = (value) => {
     // convert to ms and patch
-    console.log('debug adding', { id: data.id, duration: value * 1000 * 60 });
     eventsHandler('patch', { id: data.id, duration: value * 1000 * 60 });
   };
 
@@ -27,12 +27,8 @@ export default function DelayBlock(props) {
         submitHandler={submitHandler}
       />
       <div className={style.actionOverlay}>
-        <ActionButtons
+        <DeleteIconBtn clickHandler={deleteHandler} />
-          showDel
+        <ActionButtons showAdd addHandler={addHandler} />
-          deleteHandler={deleteHandler}
-          showAdd
-          addHandler={addHandler}
-        />
       </div>
     </div>
   );

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

@@ -7,6 +7,7 @@ import EditableText from '../../../common/input/EditableText';
 import DelayValue from '../../../common/input/DelayValue';
 import ActionButtons from './ActionButtons';
 import VisibleIconBtn from '../../../common/components/buttons/VisibleIconBtn';
+import DeleteIconBtn from '../../../common/components/buttons/DeleteIconBtn';
 
 export default function EventBlock(props) {
   const { data, selected, delay, index, eventsHandler } = props;
@@ -115,16 +116,14 @@ export default function EventBlock(props) {
           clickHandler={() => setVisible(!visible)}
           active={visible}
         />
+        <DeleteIconBtn clickHandler={deleteHandler} />
         <ActionButtons
-          showDel
-          deleteHandler={deleteHandler}
           showAdd
           addHandler={addHandler}
           showDelay
           delayHandler={delayHandler}
           showBlock
           blockHandler={blockHandler}
-          showPublic
         />
       </div>
     </div>

server/classes/EventTimer.js

@@ -80,20 +80,20 @@ class EventTimer extends Timer {
 
   update() {
     // if there is nothing selected, no nothing
-    if (!this.selectedEventId) return;
+    if (this.selectedEventId == null) return;
     super.update();
   }
 
   start() {
     // if there is nothing selected, no nothing
-    if (!this.selectedEventId) return;
+    if (this.selectedEventId == null) return;
-    super.start()
+    super.start();
   }
 
   pause() {
     // if there is nothing selected, no nothing
-    if (!this.selectedEventId) return;
+    if (this.selectedEventId == null) return;
-    super.pause()
+    super.pause();
   }
 
   _setterManager(action, payload) {
@@ -475,7 +475,7 @@ class EventTimer extends Timer {
     if (this.numEvents < 1) return;
 
     // if there is no event running, go to first
-    if (!this.selectedEvent) {
+    if (this.selectedEvent == null) {
       this.goto(0);
       return;
     }
@@ -490,7 +490,7 @@ class EventTimer extends Timer {
     if (this.numEvents < 1) return;
 
     // if there is no event running, go to first
-    if (!this.selectedEvent) {
+    if (this.selectedEvent == null) {
       this.goto(0);
       return;
     }

server/controllers/eventsController.js

@@ -6,31 +6,27 @@ const { nanoid } = require('nanoid');
 const eventDefs = require('../data/eventsDefinition.js');
 
 // incrementFrom
-async function incrementFrom(start, incr = 1) {
+function incrementFrom(start, incr = 1) {
-  try {
+  let entries = db.get('events').sortBy('order').value();
-    let entries = db.get('events').sortBy('order').value();
 
-    entries.map((e) => {
+  entries.map((e) => {
-      if (e.order < start) return;
+    if (e.order < start) return;
-      db.get('events')
+    db.get('events')
-        .find({ id: e.id })
+      .find({ id: e.id })
-        .assign({ order: e.order + incr })
+      .assign({ order: e.order + incr })
-        .write();
+      .write();
-    });
+  });
-  } catch (error) {
-    console.log('error on increment function', error);
-  }
 }
 
-async function _getEventsCount() {
+function _getEventsCount() {
   return db.get('events').size().value();
 }
 
-async function _pushNew(entry) {
+function _pushNew(entry) {
   return db.get('events').push(entry).write();
 }
 
-async function _removeById(eventId) {
+function _removeById(eventId) {
   return db.get('events').remove({ id: eventId }).write();
 }
 
@@ -95,12 +91,18 @@ exports.eventsPost = async (req, res) => {
 
   try {
     // increment count if necessary
-    const c = await _getEventsCount();
+    const c = _getEventsCount();
 
-    if (newEvent.order < c) await incrementFrom(newEvent.order);
+    if (newEvent.order < c) incrementFrom(newEvent.order);
 
-    // add new event, update timer, reply
+    // add new event
-    await _pushNew(newEvent).then(_updateTimers()).then(res.sendStatus(201));
+    _pushNew(newEvent);
+
+    // update timers
+    _updateTimers();
+
+    // reply OK
+    res.sendStatus(201);
   } catch (error) {
     res.status(400).send(error);
   }
@@ -185,7 +187,6 @@ exports.eventsDelete = async (req, res) => {
     _removeById(req.params.eventId);
 
     // update timer
-    // TODO: update single values when possible
     _updateTimers();
 
     res.sendStatus(201);