CRUD basics

src/features/editors/list/EventList.jsx

@@ -22,7 +22,7 @@ export default function EventList(props) {
     // TODO: Replace this with global def somewhere
     // TODO: handle random ids better
     let newEvent = {
-      id: Math.floor(Math.random()*10000000),
+      id: Math.floor(Math.random() * 10000000),
       order: startPosition + 1,
       title: '',
       subtitle: '',
@@ -47,7 +47,7 @@ export default function EventList(props) {
   };
 
   const deleteEvent = (position) => {
-    // ?? SHould i reorder after?
+    // ?? Should i reorder after?
 
     // remove event from array
     let filtered = events.filter((e) => e.id !== position);
@@ -56,6 +56,17 @@ export default function EventList(props) {
     setEvents(filtered);
   };
 
+  const replaceAt = (array, index, value) => {
+    const ret = array.slice(0);
+    ret[index] = value;
+    return ret;
+  };
+
+  const updateData = (itemIndex, data) => {
+    const newEvents = replaceAt(events, itemIndex, data);
+    setEvents(newEvents);
+  };
+
   return (
     <>
       <div className={style.headerButtons}>
@@ -73,13 +84,15 @@ export default function EventList(props) {
         />
       </div>
       <div className={style.eventContainer}>
-        {sortByOrderVal(events).map((e) => (
+        {sortByOrderVal(events).map((e, index) => (
           <EventListItem
             key={e.id}
+            index={index}
             data={e}
             selected={e.id === selected}
             createEvent={createEvent}
             deleteEvent={deleteEvent}
+            updateData={updateData}
           />
         ))}
       </div>

src/features/editors/list/EventListItem.jsx

@@ -12,7 +12,7 @@ import {
   EditablePreview,
   EditableInput,
 } from '@chakra-ui/react';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import style from './List.module.css';
 
 export default function EventListItem(props) {
@@ -21,104 +21,130 @@ export default function EventListItem(props) {
 
   const { data, selected, ...rest } = props;
 
+  const updateValues = (field, value) => {
+    // validate field
+    if (field in data) {
+      // create object with new field
+      const newData = { ...data, [field]: value };
+
+      // request update in parent
+      props.updateData(props.index, newData);
+    } else {
+      console.log('field error', field);
+    }
+  };
+
   return (
-    <div className={selected ? style.eventRowActive : style.eventRow}>
-      <div
-        className={armed ? style.armActive : style.arm}
-        onClick={() => setArmed(!armed)}
-      />
-      <div className={style.time}>
-        <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>
-      </div>
-      <div className={style.rowDetailed}>
-        {more ? (
-          <div className={style.detailedContainer}>
-            <div style={{ display: 'block' }}>
-              <span className={style.detailedTitleUnderlined}>Title</span>
-              <Editable
-                defaultValue={data.title}
-                placeholder='Add title'
-                style={{ display: 'inline' }}
-              >
-                <EditablePreview />
-                <EditableInput style={{ width: '13em' }} />
-              </Editable>
+    <form>
+      <div className={selected ? style.eventRowActive : style.eventRow}>
+        <div
+          className={armed ? style.armActive : style.arm}
+          onClick={() => setArmed(!armed)}
+        />
+        <div className={style.time}>
+          <Editable
+            onSubmit={(v) => updateValues('timerStart', v)}
+            defaultValue={data.timerStart}
+            placeholder='--:--'
+            style={{ textAlign: 'center' }}
+          >
+            <EditablePreview />
+            <EditableInput type='time' min='00:00' max='23:59' />
+          </Editable>
+        </div>
+        <div className={style.time}>
+          <Editable
+            onSubmit={(v) => updateValues('timerEnd', v)}
+            defaultValue={data.timerEnd}
+            placeholder='--:--'
+            style={{ textAlign: 'center' }}
+          >
+            <EditablePreview />
+            <EditableInput type='time' min='00:00' max='23:59' />
+          </Editable>
+        </div>
+        <div className={style.rowDetailed}>
+          {more ? (
+            <div className={style.detailedContainer}>
+              <div style={{ display: 'block' }}>
+                <span className={style.detailedTitleUnderlined}>Title</span>
+                <Editable
+                  onSubmit={(v) => updateValues('title', v)}
+                  defaultValue={data.title}
+                  placeholder='Add title'
+                  style={{ display: 'inline' }}
+                >
+                  <EditablePreview />
+                  <EditableInput style={{ width: '13em' }} />
+                </Editable>
+              </div>
+              <div style={{ display: 'block' }}>
+                <span className={style.detailedTitleUnderlined}>Subtitle</span>
+                <Editable
+                  onSubmit={(v) => updateValues('subtitle', v)}
+                  defaultValue={data.subtitle}
+                  placeholder='Add subtitle'
+                  style={{ display: 'inline' }}
+                >
+                  <EditablePreview />
+                  <EditableInput style={{ width: '13em', minWidth: '13em' }} />
+                </Editable>
+              </div>
+              <div style={{ display: 'block' }}>
+                <span className={style.detailedTitleUnderlined}>Presenter</span>
+                <Editable
+                  onSubmit={(v) => updateValues('presenter', v)}
+                  defaultValue={data.presenter}
+                  placeholder='Add presenter name'
+                  style={{ display: 'inline' }}
+                >
+                  <EditablePreview style={{}} />
+                  <EditableInput style={{ width: '13em' }} />
+                </Editable>
+              </div>
             </div>
-            <div style={{ display: 'block' }}>
-              <span className={style.detailedTitleUnderlined}>Subtitle</span>
-              <Editable
-                defaultValue={data.subtitle}
-                placeholder='Add subtitle'
-                style={{ display: 'inline' }}
-              >
-                <EditablePreview />
-                <EditableInput style={{ width: '13em', minWidth: '13em' }} />
-              </Editable>
-            </div>
-            <div style={{ display: 'block' }}>
-              <span className={style.detailedTitleUnderlined}>Presenter</span>
-              <Editable
-                defaultValue={data.presenter}
-                placeholder='Add presenter name'
-                style={{ display: 'inline' }}
-              >
-                <EditablePreview style={{}} />
-                <EditableInput style={{ width: '13em' }} />
-              </Editable>
+          ) : (
+            <div className={style.titleContainer}>
+              <div>
+                <span className={style.detailedTitle}>Title</span>
+                <Editable
+                  onSubmit={(v) => updateValues('title', v)}
+                  defaultValue={data.title}
+                  placeholder='Add title'
+                  style={{ display: 'inline' }}
+                  id='title'
+                >
+                  <EditablePreview />
+                  <EditableInput style={{ width: '13em' }} />
+                </Editable>
+              </div>
             </div>
+          )}
+          <div className={style.more} onClick={() => setMore(!more)}>
+            {more ? <ChevronUpIcon /> : <ChevronDownIcon />}
           </div>
-        ) : (
-          <div className={style.titleContainer}>
-            <div>
-              <span className={style.detailedTitle}>Title</span>
-              <Editable
-                defaultValue={data.title}
-                placeholder='Add title'
-                style={{ display: 'inline' }}
-              >
-                <EditablePreview />
-                <EditableInput style={{ width: '13em' }} />
-              </Editable>
-            </div>
-          </div>
-        )}
-        <div className={style.more} onClick={() => setMore(!more)}>
-          {more ? <ChevronUpIcon /> : <ChevronDownIcon />}
+        </div>
+        <div className={style.actionOverlay}>
+          <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>
       </div>
-      <div className={style.actionOverlay}>
-        <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>
-    </div>
+    </form>
   );
 }

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

@@ -24,8 +24,9 @@
   gap: 0.5em;
   justify-content: center;
   align-content: center;
-  align-items: center;
+  align-items: baseline;
   border-radius: 8px;
+  font-size: 15px;
 }
 
 .eventRow {
@@ -69,7 +70,7 @@
 }
 
 .time {
-  width: 4em;
+  width: 5em;
   height: fit-content;
 }