eventList context

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 = () => {