selected event is context + some cleanup

src/App.js

@@ -1,17 +1,20 @@
 import { Route } from 'react-router';
 import './App.css';
+import { EventProvider } from './app/context/eventContext';
 import { EventListProvider } from './app/context/eventListContext';
 import Editor from './features/editors/Editor';
 import DefaultPresenter from './features/viewers/DefaultPresenter';
 
 function App() {
   return (
-    <div className='App'>
-      <Route path='/' exact component={DefaultPresenter} />
-      <EventListProvider>
-        <Route path='/editor' exact component={Editor} />
-      </EventListProvider>
-    </div>
+    <EventProvider>
+      <div className='App'>
+        {/* <Route path='/' exact component={DefaultPresenter} /> */}
+        <EventListProvider>
+          <Route path='/editor' exact component={Editor} />
+        </EventListProvider>
+      </div>
+    </EventProvider>
   );
 }
 

src/app/context/eventContext.js

@@ -0,0 +1,13 @@
+import { createContext, useState } from 'react';
+
+export const EventContext = createContext();
+
+export function EventProvider(props) {
+  const [event, setEvent] = useState(null);
+
+  return (
+    <EventContext.Provider value={[event, setEvent]}>
+      {props.children}
+    </EventContext.Provider>
+  );
+}

src/features/editors/Editor.jsx

@@ -1,53 +1,45 @@
 import { Button } from '@chakra-ui/button';
 import { ArrowForwardIcon } from '@chakra-ui/icons';
-import { Flex, Heading } from '@chakra-ui/layout';
-import { SimpleGrid } from '@chakra-ui/layout';
+import { Grid, GridItem, Heading } from '@chakra-ui/layout';
 import { Box } from '@chakra-ui/layout';
+import { useContext } from 'react';
 import { useEffect, useState } from 'react';
-import { sampleData } from '../../app/sampleData';
+import { EventContext } from '../../app/context/eventContext';
 import NumberedText from '../../common/components/text/NumberedText';
+import PlaybackControl from '../control/PlaybackControl';
 import EventForm from '../form/EventForm';
+import MessageForm from '../form/MessageForm';
 import PreviewContainer from '../viewers/PreviewContainer';
 import styles from './Editor.module.css';
 import EventList from './list/EventList';
 
 export default function Editor() {
-  const [data, setData] = useState(sampleData);
-  const [selectedData, setSelectedData] = useState(null);
-  const [selectedEvent, setSelectedEvent] = useState(null);
   const [formMode, setFormMode] = useState(null);
+  const [event] = useContext(EventContext);
 
   useEffect(() => {
-    if (selectedEvent === null) {
-      setSelectedData(null);
+    if (event === null) {
       setFormMode(null);
     } else {
-      const se = data.events.filter((d) => d.id === selectedEvent);
-      if (se.length > 0) setSelectedData(se[0]);
       setFormMode('edit');
     }
-  }, [data, selectedEvent]);
+  }, [event]);
 
   return (
-    <SimpleGrid
-      minChildWidth='120px'
-      spacing='40px'
+    <Grid
+      templateRows='60% 40%'
+      templateColumns='repeat(3, 1fr)'
+      gap={5}
       className={styles.mainContainer}
     >
-      <Box className={styles.editor} borderRadius='0.5em'>
-        <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}
-            setSelectedEvent={setSelectedEvent}
-            formMode={formMode}
+      <GridItem rowSpan={2} colSpan={1}>
+        <Box className={styles.editor} borderRadius='0.5em'>
+          <Heading style={{ paddingBottom: '0.25em' }}>List Events</Heading>
+          <NumberedText
+            number={1}
+            text={'Select event or click Add Event to create new'}
           />
-          <div className={styles.buttonContainer}>
+          <div className={styles.cornerButtonContainer}>
             <Button
               colorScheme='teal'
               variant={formMode === 'add' ? 'solid' : 'outline'}
@@ -58,29 +50,50 @@ export default function Editor() {
               Add Event
             </Button>
           </div>
-        </div>
-      </Box>
 
-      <Box className={styles.editor} borderRadius='0.5em'>
-        <Heading style={{ paddingBottom: '0.25em' }}>Event Details</Heading>
-        <NumberedText number={2} text={'Edit event info'} />
-        <div className={styles.content}>
-          <EventForm
-            data={selectedData}
-            formMode={formMode}
-            setFormMode={setFormMode}
-            setSelectedEvent={setSelectedEvent}
-          />
-        </div>
-      </Box>
+          <div className={styles.content}>
+            <EventList formMode={formMode} setFormMode={setFormMode} />
+          </div>
+        </Box>
+      </GridItem>
 
-      <Box className={styles.editor} borderRadius='0.5em' overflowX='auto'>
-        <Heading style={{ paddingBottom: '0.25em' }}>List Events</Heading>
-        <NumberedText number={3} text={'Preview layout'} />
-        <div className={styles.content}>
-          <PreviewContainer data={selectedData} />
-        </div>
-      </Box>
-    </SimpleGrid>
+      <GridItem colStart={2} rowSpan={1} colSpan={1}>
+        <Box className={styles.editor} borderRadius='0.5em'>
+          <Heading style={{ paddingBottom: '0.25em' }}>Event Details</Heading>
+          <NumberedText number={2} text={'Edit event info'} />
+          <div className={styles.content}>
+            <EventForm formMode={formMode} setFormMode={setFormMode} />
+          </div>
+        </Box>
+      </GridItem>
+
+      <GridItem colStart={3} rowStart={1} rowSpan={1} colSpan={1}>
+        <Box className={styles.editor} borderRadius='0.5em' overflowX='auto'>
+          <Heading style={{ paddingBottom: '0.25em' }}>Screens</Heading>
+          <NumberedText number={3} text={'Preview layout'} />
+          <div className={styles.content}>
+            {/* <PreviewContainer data={selectedData} /> */}
+          </div>
+        </Box>
+      </GridItem>
+
+      <GridItem colStart={2} rowStart={2} rowSpan={1} colSpan={1}>
+        <Box className={styles.editor} borderRadius='0.5em'>
+          <Heading style={{ paddingBottom: '0.25em' }}>Screen Messages</Heading>
+          <NumberedText number={3} text={'Show / Hide messages on screens'} />
+          <div className={styles.content}></div>
+          <MessageForm />
+        </Box>
+      </GridItem>
+
+      <GridItem colStart={3} rowStart={2} rowSpan={1} colSpan={1}>
+        <Box className={styles.editor} borderRadius='0.5em'>
+          <Heading style={{ paddingBottom: '0.25em' }}>Time Control</Heading>
+          <NumberedText number={0} text={'Control Timer'} />
+          <div className={styles.content}></div>
+          <PlaybackControl />
+        </Box>
+      </GridItem>
+    </Grid>
   );
 }

src/features/editors/list/EventList.jsx

@@ -1,14 +1,20 @@
 import { Table, Thead, Tbody, Tr, Th } from '@chakra-ui/react';
 import { useContext } from 'react';
+import { EventContext } from '../../../app/context/eventContext';
 import { EventListContext } from '../../../app/context/eventListContext';
 import EventListItem from './EventListItem';
 import { sortByDate } from './listUtils';
 
 export default function EventList(props) {
-  const [events, setEvents] = useContext(EventListContext);
+  const [events, ] = useContext(EventListContext);
+  const [event, setEvent] = useContext(EventContext);
 
-  console.log('e', events);
-  console.log('sort', sortByDate(events));
+  const handleSetSelected = (id) => {
+    setEvent(events.filter((e) => e.id === id)[0]);
+    props.setFormMode('edit');
+  };
+
+  const disabled = props.formMode !== null;
 
   return (
     <Table variant='simple' size='sm'>
@@ -26,9 +32,9 @@ export default function EventList(props) {
           <EventListItem
             key={e.id}
             data={e}
-            selected={props.selected}
-            setSelectedEvent={props.setSelectedEvent}
-            formMode={props.formMode}
+            disabled={disabled}
+            selectedId={event?.id}
+            setSelected={handleSetSelected}
           />
         ))}
       </Tbody>

src/features/editors/list/EventListItem.jsx

@@ -5,11 +5,11 @@ import { timeFormat } from '../../../common/dateConfig';
 import { ChevronRightIcon } from '@chakra-ui/icons';
 
 export default function EventListItem(props) {
-  const selected = props.selected === props.data.id
+  const isSelected = props.selectedId === props.data.id;
   return (
     <Tr
       style={
-        selected
+        isSelected
           ? { backgroundColor: '#b2f5ea' }
           : { backgroundColor: 'white' }
       }
@@ -21,9 +21,9 @@ export default function EventListItem(props) {
       <Td>
         <IconButton
           colorScheme='teal'
-          variant={selected ? 'solid' : 'outline'}
-          onClick={() => props.setSelectedEvent(props.data.id)}
-          disabled={props.formMode !== null}
+          variant={isSelected ? 'solid' : 'outline'}
+          onClick={() => props.setSelected(props.data.id)}
+          disabled={props.disabled}
           size='sm'
           aria-label='Select Item'
           icon={<ChevronRightIcon />}

src/features/form/EventForm.jsx

@@ -1,33 +1,48 @@
 import { Button } from '@chakra-ui/button';
 import { Form, Formik } from 'formik';
-import { useContext, useState } from 'react';
-import ReactDatePicker from 'react-datepicker';
+import { useContext, useEffect, useState } from 'react';
 import DatePicker from 'react-datepicker';
 import * as Yup from 'yup';
+import { EventContext } from '../../app/context/eventContext';
 import { EventListContext } from '../../app/context/eventListContext';
 import ChakraInput from '../../common/input/ChakraInput';
 import ChakraNumberInput from '../../common/input/ChakraNumberInput';
 import TimeInput from '../../common/input/TimeInput';
-
 import styles from './EventForm.module.css';
 
+const sampleInitialValues = {
+  title: '',
+  subtitle: '',
+  presenter: '',
+  timeStart: new Date(),
+  timeEnd: new Date(),
+  timerDuration: 5,
+};
+
 export default function EventForm(props) {
-  const [events, setEvents] = useContext(EventListContext);
-  const today = new Date();
-  const initialValues = props.data ?? {
-    title: '',
-    subtitle: '',
-    presenter: '',
-    timeStart: today,
-    timeEnd: today,
-    timerDuration: 30,
-  };
+  const [event, setEvent] = useContext(EventContext);
+  const [, setEvents] = useContext(EventListContext);
+  const [initialValues, setInitialValues] = useState(null);
+
+  useEffect(() => {
+    if (props.formMode === 'edit') setInitialValues(event);
+    else if (props.formMode === 'add') setInitialValues(sampleInitialValues);
+    else if (props.formMode === null) setInitialValues(null);
+  }, [event, props.formMode]);
+
+  // TODO: Cleanup
+  if (props.formMode === null || initialValues === null)
+    return <div>Replace with nice empty illustration</div>;
+  else if (props.formMode === 'edit' && event === null) {
+    return <div>Replace with nice empty illustration also</div>;
+  }
 
   const validationSchema = Yup.object({
     title: Yup.string().required('An event requires a title'),
     subtitle: Yup.string(),
     presenter: Yup.string(),
-    timeStart: Yup.date().nullable(),
+    timeStart: Yup.date(),
+    timeEnd: Yup.date(),
     timerDuration: Yup.number()
       .min(1)
       .max(60)
@@ -35,12 +50,12 @@ export default function EventForm(props) {
   });
 
   const submitForm = (values) => {
+    console.log('called submit');
+
     // prevent default stops page from refreshing, necessary?
-    console.log('form', values);
 
     // update form state
     props.setFormMode(null);
-    props.setSelectedEvent(null);
 
     // are we updating or creating new?
 
@@ -58,17 +73,14 @@ export default function EventForm(props) {
 
   const cancelForm = () => {
     props.setFormMode(null);
-    props.setSelectedEvent(null);
+    setEvent(null);
+    setInitialValues(null);
   };
 
-  if (props.data === null || props.data === undefined) {
-    if (props.formMode === null)
-      return <div>Replace with nice empty illustration</div>;
-  }
-
   return (
     <div>
       <Formik
+        enableReinitialize={true}
         initialValues={initialValues}
         validationSchema={validationSchema}
         onSubmit={(values, actions) => {
@@ -76,7 +88,10 @@ export default function EventForm(props) {
             submitForm(values);
           }, 100);
         }}
-        onReset={(values) => cancelForm()}
+        // FIX: This kept being called on render
+        // onReset={() => {
+        //   cancelForm();
+        // }}
       >
         {(props) => (
           <Form onSubmit={props.handleSubmit}>
@@ -109,9 +124,10 @@ export default function EventForm(props) {
               <Button
                 variant='outline'
                 disabled={props.isSubmitting}
-                type='reset'
+                // type='reset'
+                onClick={() => cancelForm()}
               >
-                Cancel
+                Back
               </Button>
               <Button
                 colorScheme='teal'