eventList context

src/App.js

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

src/app/context/eventListContext.js

@@ -0,0 +1,14 @@
+import { createContext, useState } from 'react';
+import { sampleData } from '../sampleData';
+
+export const EventListContext = createContext();
+
+export function EventListProvider(props) {
+  const [events, setEvents] = useState(sampleData.events);
+
+  return (
+    <EventListContext.Provider value={[events, setEvents]}>
+      {props.children}
+    </EventListContext.Provider>
+  );
+}

src/app/sampleData.js

@@ -12,8 +12,8 @@ export const sampleData = {
       title: 'Is the internet a fad?',
       subtitle: 'It is',
       presenter: 'Carlos Valente',
-      timeStart: dummy,
+      timeStart: new Date('March 24, 2021 03:25:00'),
-      timeEnd: dummy,
+      timeEnd: new Date('March 24, 2021 04:24:00'),
       clockStarted: dummy,
       timerDuration: 10,
     },
@@ -22,8 +22,8 @@ export const sampleData = {
       title: 'Is reddit a dictatorship?',
       subtitle: 'It is',
       presenter: 'Carlos Valente',
-      timeStart: dummy,
+      timeStart: new Date('March 24, 2021 04:25:00'),
-      timeEnd: dummy,
+      timeEnd: new Date('March 24, 2021 05:24:00'),
       clockStarted: dummy,
       timerDuration: 10,
     },

src/features/editors/list/EventList.jsx

@@ -1,7 +1,15 @@
 import { Table, Thead, Tbody, Tr, Th } from '@chakra-ui/react';
+import { useContext } from 'react';
+import { EventListContext } from '../../../app/context/eventListContext';
 import EventListItem from './EventListItem';
+import { sortByDate } from './listUtils';
 
 export default function EventList(props) {
+  const [events, setEvents] = useContext(EventListContext);
+
+  console.log('e', events);
+  console.log('sort', sortByDate(events));
+
   return (
     <Table variant='simple' size='sm'>
       <Thead>
@@ -14,7 +22,7 @@ export default function EventList(props) {
         </Tr>
       </Thead>
       <Tbody>
-        {props.data.events.map((e) => (
+        {sortByDate(events).map((e) => (
           <EventListItem
             key={e.id}
             data={e}

src/features/editors/list/listUtils.js

@@ -0,0 +1,6 @@
+export const sortByDate = (arr) => {
+  const sorter = (a, b) => {
+    return new Date(a.timeStart).getTime() - new Date(b.timeStart).getTime();
+  };
+  return arr.sort(sorter);
+};

src/features/form/EventForm.jsx

@@ -1,9 +1,10 @@
 import { Button } from '@chakra-ui/button';
 import { Form, Formik } from 'formik';
-import { useState } from 'react';
+import { useContext, useState } from 'react';
 import ReactDatePicker from 'react-datepicker';
 import DatePicker from 'react-datepicker';
 import * as Yup from 'yup';
+import { EventListContext } from '../../app/context/eventListContext';
 import ChakraInput from '../../common/input/ChakraInput';
 import ChakraNumberInput from '../../common/input/ChakraNumberInput';
 import TimeInput from '../../common/input/TimeInput';
@@ -11,6 +12,7 @@ import TimeInput from '../../common/input/TimeInput';
 import styles from './EventForm.module.css';
 
 export default function EventForm(props) {
+  const [events, setEvents] = useContext(EventListContext);
   const today = new Date();
   const initialValues = props.data ?? {
     title: '',
@@ -33,9 +35,25 @@ export default function EventForm(props) {
   });
 
   const submitForm = (values) => {
+    // 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?
+
+    // add new event to data context
+    if (props.formMode === 'add')
+      setEvents((prevEvents) => [...prevEvents, { ...values }]);
+
+    // edit event data from  context
+    if (props.formMode === 'edit')
+      setEvents((prevEvents) => [
+        ...prevEvents.filter((pe) => pe.id !== values.id),
+        { ...values },
+      ]);
   };
 
   const cancelForm = () => {