form state

src/app/sampleData.js

@@ -7,8 +7,8 @@ export const sampleData = {
       title: 'Is the internet a fad?',
       subtitle: 'It is',
       presenter: 'Carlos Valente',
-      timeStart: '10:00',
-      timeEnd: '11:30',
+      timeStart: dummy,
+      timeEnd: dummy,
       clockStarted: dummy,
       timerDuration: 10,
       message: {
@@ -22,8 +22,8 @@ export const sampleData = {
       title: 'Is reddit a dictatorship?',
       subtitle: 'It is',
       presenter: 'Carlos Valente',
-      timeStart: '11:40',
-      timeEnd: '13:00',
+      timeStart: dummy,
+      timeEnd: dummy,
       clockStarted: dummy,
       timerDuration: 10,
       message: {

src/common/dateConfig.js

@@ -0,0 +1 @@
+export const timeFormat = 'HH:mm';

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>
   );

src/features/form/EventForm.jsx

@@ -1,23 +1,27 @@
 import { Button } from '@chakra-ui/button';
 import { Form, Formik } from 'formik';
+import { useState } from 'react';
+import ReactDatePicker from 'react-datepicker';
+import DatePicker from 'react-datepicker';
 import * as Yup from 'yup';
 import ChakraInput from '../../common/input/ChakraInput';
 import ChakraNumberInput from '../../common/input/ChakraNumberInput';
+import TimeInput from '../../common/input/TimeInput';
 
 import styles from './EventForm.module.css';
 
 export default function EventForm(props) {
+  const today = new Date();
   const initialValues = props.data ?? {
-    id: '1',
-    title: 'Is the internet a fad?',
-    subtitle: 'It is',
-    presenter: 'Carlos Valente',
-    timeStart: '10:00',
-    timeEnd: '11:30',
-    timerDuration: 10,
+    title: '',
+    subtitle: '',
+    presenter: '',
+    timeStart: today,
+    timeEnd: today,
+    timerDuration: 30,
     message: {
-      text: 'Hurry Up!',
-      color: '#F00',
+      text: '',
+      color: '',
       active: false,
     },
   };
@@ -26,6 +30,7 @@ export default function EventForm(props) {
     title: Yup.string().required('An event requires a title'),
     subtitle: Yup.string(),
     presenter: Yup.string(),
+    timeStart: Yup.date().nullable(),
     timerDuration: Yup.number()
       .min(1)
       .max(60)
@@ -34,10 +39,18 @@ export default function EventForm(props) {
 
   const submitForm = (values) => {
     console.log('form', values);
+    props.setFormMode(null);
+    props.setSelectedEvent(null);
+  };
+
+  const cancelForm = () => {
+    props.setFormMode(null);
+    props.setSelectedEvent(null);
   };
 
   if (props.data === null || props.data === undefined) {
-    return <div>nothing selected</div>;
+    if (props.formMode === null)
+      return <div>Replace with nice empty illustration</div>;
   }
 
   return (
@@ -47,19 +60,32 @@ export default function EventForm(props) {
         validationSchema={validationSchema}
         onSubmit={(values, actions) => {
           setTimeout(() => {
-            console.log(values);
-            actions.setSubmitting(false);
+            submitForm(values);
           }, 100);
         }}
+        onReset={(values) => cancelForm()}
       >
         {(props) => (
           <Form onSubmit={props.handleSubmit}>
-            <ChakraInput name='title' label='Event Title' />
-            <ChakraInput name='subtitle' label='Event Subtitle' />
-            <ChakraInput name='presenter' label='Presenter Name' />
+            <ChakraInput
+              name='title'
+              label='Event Title'
+              placeholder='eg. Is the Internet a fad?'
+            />
+            <ChakraInput
+              name='subtitle'
+              label='Event Subtitle'
+              placeholder='eg. After tea thoughts'
+            />
+            <ChakraInput
+              name='presenter'
+              label='Presenter Name'
+              placeholder='eg. Duran Duran'
+            />
+            {/* <TimeInput name='timeStart' label='Scheduled Start' /> */}
             <ChakraNumberInput
               name='timerDuration'
-              label='Timer Duration'
+              label='Timer Duration (minutes)'
               allowMouseWheel
               min={1}
               max={60}