screen info context

src/App.js

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

src/app/context/eventContext.js

@@ -1,6 +1,6 @@
 import { createContext, useState } from 'react';
 
-export const EventContext = createContext();
+export const EventContext = createContext([[], () => {}]);
 
 export function EventProvider(props) {
   const [event, setEvent] = useState(null);

src/app/context/eventListContext.js

@@ -1,7 +1,7 @@
 import { createContext, useState } from 'react';
 import { sampleData } from '../sampleData';
 
-export const EventListContext = createContext();
+export const EventListContext = createContext([[], () => {}]);
 
 export function EventListProvider(props) {
   const [events, setEvents] = useState(sampleData.events);

src/app/context/presenterMessageContext.js

@@ -0,0 +1,16 @@
+import { createContext, useState } from 'react';
+
+export const PresenterMessagesContext = createContext([[], () => {}]);
+
+export function PresenterMessageProvider(props) {
+  const [presMessage, setPresMessage] = useState({
+    text: '',
+    show: '',
+  });
+
+  return (
+    <PresenterMessagesContext.Provider value={[presMessage, setPresMessage]}>
+      {props.children}
+    </PresenterMessagesContext.Provider>
+  );
+}

src/features/form/EventForm.jsx

@@ -9,6 +9,9 @@ import ChakraInput from '../../common/input/ChakraInput';
 import ChakraNumberInput from '../../common/input/ChakraNumberInput';
 import TimeInput from '../../common/input/TimeInput';
 import styles from './EventForm.module.css';
+import 'react-datepicker/dist/react-datepicker-cssmodules.css';
+import ReactDatePicker from 'react-datepicker';
+import 'react-datepicker/dist/react-datepicker.css';
 
 const sampleInitialValues = {
   title: '',
@@ -80,7 +83,7 @@ export default function EventForm(props) {
   return (
     <div>
       <Formik
-        enableReinitialize={true}
+        // enableReinitialize={true}
         initialValues={initialValues}
         validationSchema={validationSchema}
         onSubmit={(values, actions) => {
@@ -120,6 +123,7 @@ export default function EventForm(props) {
               maxW={24}
             />
 
+            <DatePicker />
             <div className={styles.buttons}>
               <Button
                 variant='outline'

src/features/form/MessageForm.jsx

@@ -2,26 +2,39 @@ import { IconButton } from '@chakra-ui/button';
 import { FormControl, FormLabel } from '@chakra-ui/form-control';
 import { ViewIcon, ViewOffIcon } from '@chakra-ui/icons';
 import { Input } from '@chakra-ui/input';
+import { useContext } from 'react';
 import { useState } from 'react';
+import { PresenterMessagesContext } from '../../app/context/presenterMessageContext';
 
 export default function MessageForm(props) {
   const [presenterShow, setPresenterShow] = useState(false);
   const [publicShow, setPublicShow] = useState(false);
+  const [presMessage, setPresMessage] = useContext(PresenterMessagesContext);
 
   const handleSetPresenter = () => {
     setPresenterShow(!presenterShow);
-  }
+    setPresMessage((prev) => ({ ...prev, show: !presMessage.show }));
+  };
+
+  const handlePresenterChange = (val) => {
+    setPresMessage((prev) => ({ ...prev, text: val }));
+  };
 
   const handleSetPublic = () => {
     setPublicShow(!publicShow);
-  }
+  };
+
+  const handlePublicChange = () => {};
 
   return (
     <>
       <form style={{ display: 'flex', gap: '1em' }}>
         <FormControl id='presenterMessage'>
           <FormLabel>Presenter screen message</FormLabel>
-          <Input placeholder='only the presenter screens see this' />
+          <Input
+            placeholder='only the presenter screens see this'
+            onChange={(event) => handlePresenterChange(event.target.value)}
+          />
         </FormControl>
         <IconButton
           style={{ alignSelf: 'flex-end' }}
@@ -31,6 +44,7 @@ export default function MessageForm(props) {
           icon={presenterShow ? <ViewOffIcon /> : <ViewIcon />}
         />
       </form>
+
       <form style={{ display: 'flex', gap: '1em', paddingTop: '1em' }}>
         <FormControl id='generalMessage'>
           <FormLabel>Public screen message</FormLabel>

src/features/viewers/DefaultPresenter.jsx

@@ -1,15 +1,21 @@
 import { differenceInSeconds, format, subMinutes } from 'date-fns';
 import addMinutes from 'date-fns/addMinutes';
+import { useContext, useEffect, useState } from 'react';
+import { EventContext } from '../../app/context/eventContext';
+import { PresenterMessagesContext } from '../../app/context/presenterMessageContext';
 import { sampleData } from '../../app/sampleData';
 import Countdown from '../../common/components/countdown/Countdown';
 import MyProgressBar from '../../common/components/myProgressBar/MyProgressBar';
 import SmallTimer from '../../common/components/smallTimer/SmallTimer';
 import './viewers.css';
 
-export default function DefaultPresenter(props) {
+export default function DefaultPresenter() {
-  const data = sampleData;
+  const [event, setEvent] = useContext(EventContext);
+  const [presMessage] = useContext(PresenterMessagesContext);
+  const [initialValues, setInitialValues] = useState(null);
+
   const now = new Date();
-  const values = props.data ?? {
+  let values = event ?? {
     title: 'Presentation Title',
     subtitle: 'Presentation Subtitle',
     presenter: 'Presenter Name',
@@ -18,6 +24,18 @@ export default function DefaultPresenter(props) {
     timeEnd: now,
   };
 
+  useEffect(() => {
+    values = event;
+  }, [event]);
+
+  useEffect(() => {
+    setInitialValues(event);
+  }, [event]);
+
+  console.log('local event event', event);
+  console.log('local event values', values);
+  console.log('local event initialv', initialValues);
+
   // NITE: test only
   const clockStarted = addMinutes(now, 6);
 
@@ -33,18 +51,14 @@ export default function DefaultPresenter(props) {
 
   console.log('timers', timer, timeStart, currentTime, timeEnd, elapsed);
 
-  if (props?.preview) return <div>Preview</div>;
-
   return (
     <div className='presenter'>
       <div className='presentationTitle'>{values.title}</div>
       <div className='presentationSub'>{values.subtitle}</div>
       <Countdown time={timer} />
-      {!data.message.active && <MyProgressBar normalisedComplete={elapsed} />}
+      {!presMessage.show && <MyProgressBar normalisedComplete={elapsed} />}
-      <div
+      <div className={presMessage.show ? 'userMessage' : 'userMessage hidden'}>
-        className={data.message.active ? 'userMessage' : 'userMessage hidden'}
+        {presMessage.text}
-      >
-        {data.message.text}
       </div>
       <div className='extra'>
         <SmallTimer label='Scheduled Start' time={timeStart} />