list basics

- populate list from events
- add
- remove

src/features/editors/list/EventList.jsx

@@ -4,36 +4,84 @@ import { useContext } from 'react';
 import { EventContext } from '../../../app/context/eventContext';
 import { EventListContext } from '../../../app/context/eventListContext';
 import EventListItem from './EventListItem';
-import { sortByNumber } from './listUtils';
+import { sortByOrderVal } from './listUtils';
 import style from './List.module.css';
 import DelayBlock from './DelayBlock';
 import BlockBlock from './BlockBlock';
+import { createEvent } from '@testing-library/dom';
 
 export default function EventList(props) {
-  const [events] = useContext(EventListContext);
-  const [, setEvent] = useContext(EventContext);
+  const [events, setEvents] = useContext(EventListContext);
+  const [event, setEvent] = useContext(EventContext);
+  console.log('in el', events);
+
+  const selected = event?.id || -1;
+
+  const createEvent = (startPosition = 0) => {
+    // make an event
+    // TODO: Replace this with global def somewhere
+    // TODO: handle random ids better
+    let newEvent = {
+      id: Math.floor(Math.random()*10000000),
+      order: startPosition + 1,
+      title: '',
+      subtitle: '',
+      presenter: '',
+      timerStart: '',
+      timerEnd: '',
+      clockStarted: null,
+      timerDuration: 0,
+    };
+
+    // move all items one element down, starting from new position
+    let newEvents = events.map((e) => {
+      if (e.order > startPosition) e.order = e.order + 1;
+      return e;
+    });
+
+    // add an event at the beggining
+    newEvents = [newEvent, ...events];
+
+    // set to state
+    setEvents(newEvents);
+  };
+
+  const deleteEvent = (position) => {
+    // ?? SHould i reorder after?
+
+    // remove event from array
+    let filtered = events.filter((e) => e.id !== position);
+
+    // set to state
+    setEvents(filtered);
+  };
 
   return (
     <>
       <div className={style.headerButtons}>
-        <Button size='sm' rightIcon={<AttachmentIcon />}>
+        <Button size='sm' rightIcon={<AttachmentIcon />} disabled>
           Upload
         </Button>
-        <Button size='sm' rightIcon={<DownloadIcon />}>
+        <Button size='sm' rightIcon={<DownloadIcon />} disabled>
           Download
         </Button>
-        <IconButton size='sm' icon={<AddIcon />} colorScheme='blue' />
+        <IconButton
+          size='sm'
+          icon={<AddIcon />}
+          colorScheme='blue'
+          onClick={() => createEvent()}
+        />
       </div>
       <div className={style.eventContainer}>
-        <EventListItem />
-
-        <EventListItem />
-        <DelayBlock />
-
-        <EventListItem />
-        <BlockBlock />
-
-        <EventListItem />
+        {sortByOrderVal(events).map((e) => (
+          <EventListItem
+            key={e.id}
+            data={e}
+            selected={e.id === selected}
+            createEvent={createEvent}
+            deleteEvent={deleteEvent}
+          />
+        ))}
       </div>
     </>
   );

src/features/editors/list/EventListItem.jsx

@@ -19,14 +19,30 @@ export default function EventListItem(props) {
   const [more, setMore] = useState(false);
   const [armed, setArmed] = useState(false);
 
+  const { data, selected, ...rest } = props;
+
   return (
-    <div className={armed ? style.eventRowActive : style.eventRow}>
+    <div className={selected ? style.eventRowActive : style.eventRow}>
       <div
         className={armed ? style.armActive : style.arm}
         onClick={() => setArmed(!armed)}
       />
       <div className={style.time}>
-        <Editable defaultValue='11:20' style={{ textAlign: 'center' }}>
+        <Editable
+          defaultValue={data.timerStart}
+          placeholder='--:--'
+          style={{ textAlign: 'center' }}
+        >
+          <EditablePreview />
+          <EditableInput />
+        </Editable>
+      </div>
+      <div className={style.time}>
+        <Editable
+          defaultValue={data.timerEnd}
+          placeholder='--:--'
+          style={{ textAlign: 'center' }}
+        >
           <EditablePreview />
           <EditableInput />
         </Editable>
@@ -37,31 +53,34 @@ export default function EventListItem(props) {
             <div style={{ display: 'block' }}>
               <span className={style.detailedTitleUnderlined}>Title</span>
               <Editable
-                defaultValue='Event Title'
+                defaultValue={data.title}
+                placeholder='Add title'
                 style={{ display: 'inline' }}
               >
                 <EditablePreview />
-                <EditableInput style={{width:'15em'}} />
+                <EditableInput style={{ width: '13em' }} />
               </Editable>
             </div>
             <div style={{ display: 'block' }}>
               <span className={style.detailedTitleUnderlined}>Subtitle</span>
               <Editable
-                defaultValue='Event Subtitle'
+                defaultValue={data.subtitle}
+                placeholder='Add subtitle'
                 style={{ display: 'inline' }}
               >
                 <EditablePreview />
-                <EditableInput style={{width:'15em'}} />
+                <EditableInput style={{ width: '13em', minWidth: '13em' }} />
               </Editable>
             </div>
             <div style={{ display: 'block' }}>
               <span className={style.detailedTitleUnderlined}>Presenter</span>
               <Editable
-                defaultValue='Presenter Name'
+                defaultValue={data.presenter}
+                placeholder='Add presenter name'
                 style={{ display: 'inline' }}
               >
                 <EditablePreview style={{}} />
-                <EditableInput style={{width:'15em'}} />
+                <EditableInput style={{ width: '13em' }} />
               </Editable>
             </div>
           </div>
@@ -70,11 +89,12 @@ export default function EventListItem(props) {
             <div>
               <span className={style.detailedTitle}>Title</span>
               <Editable
-                defaultValue='Event Title'
+                defaultValue={data.title}
+                placeholder='Add title'
                 style={{ display: 'inline' }}
               >
                 <EditablePreview />
-                <EditableInput style={{width:'15em'}} />
+                <EditableInput style={{ width: '13em' }} />
               </Editable>
             </div>
           </div>
@@ -84,8 +104,18 @@ export default function EventListItem(props) {
         </div>
       </div>
       <div className={style.actionOverlay}>
-        <IconButton size='xs' icon={<MinusIcon />} colorScheme='red' />
-        <IconButton size='xs' icon={<AddIcon />} colorScheme='blue' />
+        <IconButton
+          size='xs'
+          icon={<MinusIcon />}
+          colorScheme='red'
+          onClick={() => props.deleteEvent(data.id)}
+        />
+        <IconButton
+          size='xs'
+          icon={<AddIcon />}
+          colorScheme='blue'
+          onClick={() => props.createEvent(data.order)}
+        />
         <IconButton size='xs' icon={<TimeIcon />} colorScheme='yellow' />
         <IconButton size='xs' icon={<NotAllowedIcon />} colorScheme='purple' />
       </div>

src/features/editors/list/List.module.css

@@ -20,7 +20,7 @@
   left: 0;
   width: 100%;
   display: grid;
-  grid-template-columns: 2em 5em 1fr auto;
+  grid-template-columns: auto auto 5em 1fr auto;
   gap: 0.5em;
   justify-content: center;
   align-content: center;
@@ -38,8 +38,8 @@
 
 .arm,
 .armActive {
-  width: 20px;
-  height: 20px;
+  width: 18px;
+  height: 18px;
   border-radius: 10px;
   cursor: pointer;
 }
@@ -96,6 +96,7 @@
   color: #888;
   display: inline-block;
   width: 6em;
+  cursor: default;
 }
 
 .detailedTitleUnderlined {

src/features/editors/list/listUtils.js

@@ -5,7 +5,7 @@ export const sortByDate = (arr) => {
   return arr.sort(sorter);
 };
 
-export const sortByNumber = (arr) => {
+export const sortByOrderVal = (arr) => {
   const sorter = (a, b) => {
     return a.order - b.order;
   };