CRUD basics

src/features/editors/list/EventList.jsx

@@ -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,7 +21,21 @@ 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 (
+    <form>
       <div className={selected ? style.eventRowActive : style.eventRow}>
         <div
           className={armed ? style.armActive : style.arm}
@@ -29,22 +43,24 @@ export default function EventListItem(props) {
         />
         <div className={style.time}>
           <Editable
+            onSubmit={(v) => updateValues('timerStart', v)}
             defaultValue={data.timerStart}
             placeholder='--:--'
             style={{ textAlign: 'center' }}
           >
             <EditablePreview />
-          <EditableInput />
+            <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 />
+            <EditableInput type='time' min='00:00' max='23:59' />
           </Editable>
         </div>
         <div className={style.rowDetailed}>
@@ -53,6 +69,7 @@ export default function EventListItem(props) {
               <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' }}
@@ -64,6 +81,7 @@ export default function EventListItem(props) {
               <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' }}
@@ -75,6 +93,7 @@ export default function EventListItem(props) {
               <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' }}
@@ -89,9 +108,11 @@ export default function EventListItem(props) {
               <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' }} />
@@ -117,8 +138,13 @@ export default function EventListItem(props) {
             onClick={() => props.createEvent(data.order)}
           />
           <IconButton size='xs' icon={<TimeIcon />} colorScheme='yellow' />
-        <IconButton size='xs' icon={<NotAllowedIcon />} colorScheme='purple' />
+          <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;
 }