feat: edit groups

apps/client/src/features/rundown/entry-editor/CuesheetEventEditor.tsx

@@ -0,0 +1,43 @@
+import { useEffect, useState } from 'react';
+import { isOntimeEvent, OntimeEvent } from 'ontime-types';
+
+import useRundown from '../../../common/hooks-query/useRundown';
+import { cx } from '../../../common/utils/styleUtils';
+
+import EventEditor from './EventEditor';
+
+import style from './EntryEditor.module.scss';
+
+interface CuesheetEventEditorProps {
+  eventId: string;
+}
+
+export default function CuesheetEventEditor({ eventId }: CuesheetEventEditorProps) {
+  const { data } = useRundown();
+
+  const [event, setEvent] = useState<OntimeEvent | null>(null);
+
+  useEffect(() => {
+    if (data.order.length === 0) {
+      setEvent(null);
+      return;
+    }
+
+    const event = data.entries[eventId];
+    if (event && isOntimeEvent(event)) {
+      setEvent(event);
+    } else {
+      setEvent(null);
+    }
+  }, [eventId, data.order, data.entries]);
+
+  if (!event) {
+    return null;
+  }
+
+  return (
+    <div className={cx([style.entryEditor, style.inModal])} data-testid='editor-container'>
+      <EventEditor event={event} />
+    </div>
+  );
+}