form state

src/features/editors/Editor.jsx

@@ -1,5 +1,6 @@
 import { Button } from '@chakra-ui/button';
-import { Heading } from '@chakra-ui/layout';
+import { ArrowForwardIcon } from '@chakra-ui/icons';
+import { Flex, Heading } from '@chakra-ui/layout';
 import { SimpleGrid } from '@chakra-ui/layout';
 import { Box } from '@chakra-ui/layout';
 import { useEffect, useState } from 'react';
@@ -14,11 +15,17 @@ export default function Editor() {
   const [data, setData] = useState(sampleData);
   const [selectedData, setSelectedData] = useState(null);
   const [selectedEvent, setSelectedEvent] = useState(null);
+  const [formMode, setFormMode] = useState(null);
 
   useEffect(() => {
-    const se = data.events.filter((d) => d.id === selectedEvent);
-
-    if (se.length > 0) setSelectedData(se[0]);
+    if (selectedEvent === null) {
+      setSelectedData(null);
+      setFormMode(null);
+    } else {
+      const se = data.events.filter((d) => d.id === selectedEvent);
+      if (se.length > 0) setSelectedData(se[0]);
+      setFormMode('edit');
+    }
   }, [data, selectedEvent]);
 
   return (
@@ -28,31 +35,48 @@ export default function Editor() {
       className={styles.mainContainer}
     >
       <Box className={styles.editor} borderRadius='0.5em'>
-        <Heading>List Events</Heading>
-        <NumberedText number={1} text={'Select Event'} />
+        <Heading style={{ paddingBottom: '0.25em' }}>List Events</Heading>
+        <NumberedText
+          number={1}
+          text={'Select event or click Add Event to create new'}
+        />
         <div className={styles.content}>
           <EventList
             data={data}
             selected={selectedEvent}
-            setSelected={setSelectedEvent}
+            setSelectedEvent={setSelectedEvent}
+            formMode={formMode}
           />
-          <div className={styles.buttons}>
-            <Button colorScheme='teal'>Add Event</Button>
+          <div className={styles.buttonContainer}>
+            <Button
+              colorScheme='teal'
+              variant={formMode === 'add' ? 'solid' : 'outline'}
+              rightIcon={<ArrowForwardIcon />}
+              disabled={formMode !== null}
+              onClick={() => setFormMode('add')}
+            >
+              Add Event
+            </Button>
           </div>
         </div>
       </Box>
 
       <Box className={styles.editor} borderRadius='0.5em'>
-        <Heading>Event Details</Heading>
-        <NumberedText number={2} text={'Click Save to send to screens'} />
+        <Heading style={{ paddingBottom: '0.25em' }}>Event Details</Heading>
+        <NumberedText number={2} text={'Edit event info'} />
         <div className={styles.content}>
-          <EventForm data={selectedData} />
+          <EventForm
+            data={selectedData}
+            formMode={formMode}
+            setFormMode={setFormMode}
+            setSelectedEvent={setSelectedEvent}
+          />
         </div>
       </Box>
 
       <Box className={styles.editor} borderRadius='0.5em'>
-        <Heading>List Events</Heading>
-        <NumberedText number={3} text={'Preview changes in screens'} />
+        <Heading style={{ paddingBottom: '0.25em' }}>List Events</Heading>
+        <NumberedText number={3} text={'Preview layout'} />
         <div className={styles.content}>
           <PreviewContainer />
         </div>

src/features/editors/Editor.module.css

@@ -16,4 +16,10 @@
 
 .content {
   padding-top: 2em;
-}
+}
+
+.buttonContainer {
+  padding-top: 2em;
+  display: flex;
+  justify-content: flex-end;
+}

src/features/editors/list/EventList.jsx

@@ -1,11 +1,7 @@
 import { Table, Thead, Tbody, Tr, Th } from '@chakra-ui/react';
-import { useState } from 'react';
-import { sampleData } from '../../../app/sampleData';
 import EventListItem from './EventListItem';
 
 export default function EventList(props) {
-  const [data, setData] = useState(sampleData);
-
   return (
     <Table variant='simple' size='sm'>
       <Thead>
@@ -18,12 +14,13 @@ export default function EventList(props) {
         </Tr>
       </Thead>
       <Tbody>
-        {data.events.map((e) => (
+        {props.data.events.map((e) => (
           <EventListItem
             key={e.id}
             data={e}
-            isSelected={props.selected === e.id}
-            setSelected={props.setSelected}
+            selected={props.selected}
+            setSelectedEvent={props.setSelectedEvent}
+            formMode={props.formMode}
           />
         ))}
       </Tbody>

src/features/editors/list/EventListItem.jsx

@@ -1,26 +1,33 @@
-import { Button } from '@chakra-ui/button';
+import { IconButton } from '@chakra-ui/button';
 import { Td, Tr } from '@chakra-ui/table';
+import { format } from 'date-fns';
+import { timeFormat } from '../../../common/dateConfig';
+import { ChevronRightIcon } from '@chakra-ui/icons';
 
 export default function EventListItem(props) {
+  const selected = props.selected === props.data.id
   return (
     <Tr
       style={
-        props.isSelected
+        selected
           ? { backgroundColor: '#b2f5ea' }
           : { backgroundColor: 'white' }
       }
     >
       <Td>{props.data.title}</Td>
       <Td>{props.data.presenter}</Td>
-      <Td>{props.data.timeStart}</Td>
-      <Td>{props.data.timeEnd}</Td>
+      <Td>{format(props.data.timeStart, timeFormat)}</Td>
+      <Td>{format(props.data.timeEnd, timeFormat)}</Td>
       <Td>
-        <Button
+        <IconButton
           colorScheme='teal'
-          onClick={() => props.setSelected(props.data.id)}
-        >
-          ❯
-        </Button>
+          variant={selected ? 'solid' : 'outline'}
+          onClick={() => props.setSelectedEvent(props.data.id)}
+          disabled={props.formMode !== null}
+          size='sm'
+          aria-label='Select Item'
+          icon={<ChevronRightIcon />}
+        />
       </Td>
     </Tr>
   );