V1 (#118)

* chore: upgrade minor versions
* chore: upgrade cypress
* chore: upgrade fe dependencies
* update readme
* update osx images
* update readme
* upgrade dependencies
* upgrade test dependency
* feat: add option to input autofill
* feat: autofill to the left
* chore: update docs
* chore: cleanup ci
* version bump
* style: prevent zero height bar
* fix: prevent loosing menu
* ux: improve input, no spellcheck or autocomplete
* small ux improvements in cuesheets
* feat 111/increase maximum number of events
* fix: optimistic delete issue with filter
* refact: pincode workflow
* chore: add versioning to packages

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

@@ -17,6 +17,7 @@ import EventList from './EventList';
 import EventListMenu from 'features/menu/EventListMenu.jsx';
 import Empty from 'common/state/Empty';
 import { CollapseContext } from '../../../app/context/CollapseContext';
+import styles from '../Editor.module.scss';
 
 export default function EventListWrapper() {
   const { expandAll, collapseMultiple } = useContext(CollapseContext);
@@ -40,7 +41,17 @@ export default function EventListWrapper() {
 
       // optimistically update object, temp ID until refetch
       const optimistic = [...previousEvents];
-      optimistic.splice(newEvent.order, 0, {
+      let insertAfterIndex = 0;
+      if (newEvent.after) {
+        const index = optimistic.findIndex((event) => event.id === newEvent?.after);
+        if (index > -1) {
+          insertAfterIndex = index + 1;
+        }
+      } else if (newEvent.order) {
+        insertAfterIndex = newEvent.order;
+      }
+
+      optimistic.splice(insertAfterIndex, 0, {
         ...newEvent,
         id: new Date().toISOString(),
       });
@@ -50,7 +61,7 @@ export default function EventListWrapper() {
       return { previousEvents };
     },
 
-    // Mutation fails, rollback undos optimist update
+    // Mutation fails, rollback undoes optimist update
     onError: (error, newEvent, context) => {
       queryClient.setQueryData(EVENTS_TABLE, context.previousEvents);
     },
@@ -128,7 +139,7 @@ export default function EventListWrapper() {
       // Snapshot the previous value
       const previousEvents = queryClient.getQueryData(EVENTS_TABLE);
 
-      const filtered = [...previousEvents].filter((e) => e.id === 'eventId')
+      const filtered = [...previousEvents].filter((e) => e.id !== eventId);
 
       // optimistically update object
       queryClient.setQueryData(EVENTS_TABLE, filtered);
@@ -231,12 +242,16 @@ export default function EventListWrapper() {
             const newEvent = { ...payload };
             // there is an option to pass an index of an array to use as start time
             if (typeof options?.startIsLastEnd !== 'undefined') {
-              newEvent.timeStart = data[options.startIsLastEnd].timeEnd || 0;
+              const previousEvent = data.find((event) => event.id === options.startIsLastEnd);
+              newEvent.timeStart = previousEvent.timeEnd || 0;
             }
             // hard coding duration value to be as expected for now
             // this until timeOptions gets implemented
             // Todo: implement duration options
-            newEvent.duration = Math.max(0, newEvent.timeEnd - newEvent.timeStart) || 0;
+            if (newEvent.type === 'event') {
+              newEvent.duration = Math.max(0, newEvent.timeEnd - newEvent.timeStart) || 0;
+            }
+
             await addEvent.mutateAsync(newEvent);
           } catch (error) {
             emitError(`Error fetching data: ${error.message}`);
@@ -336,11 +351,13 @@ export default function EventListWrapper() {
   return (
     <>
       <EventListMenu eventsHandler={eventsHandler} />
-      {status === 'success' && events != null ? (
-        <EventList events={events} eventsHandler={eventsHandler} />
-      ) : (
-        <Empty text='Connecting to server' />
-      )}
+      <div className={styles.content}>
+        {status === 'success' && events != null ? (
+          <EventList events={events} eventsHandler={eventsHandler} />
+        ) : (
+          <Empty text='Connecting to server' />
+        )}
+      </div>
     </>
   );
 }