cleanup + lint

src/app/sampleData.js

@@ -1,31 +1,47 @@
 const dummy = new Date();
 
 export const sampleData = {
-  message: {
+  presenterMessage: {
-    text: 'Hurry Up!',
+    text: 'Only the presenter sees this',
-    color: '#F00',
+    active: false,
+  },
+  publicMessage: {
+    text: 'Everyone sees this',
     active: false,
   },
   events: [
     {
       id: '1',
+      order: 1,
       title: 'Is the internet a fad?',
       subtitle: 'It is',
       presenter: 'Carlos Valente',
       timeStart: new Date('March 24, 2021 03:25:00'),
       timeEnd: new Date('March 24, 2021 04:24:00'),
       clockStarted: dummy,
-      timerDuration: 10,
+      timerDuration: 60,
     },
     {
       id: '2',
+      order: 2,
       title: 'Is reddit a dictatorship?',
       subtitle: 'It is',
       presenter: 'Carlos Valente',
       timeStart: new Date('March 24, 2021 04:25:00'),
       timeEnd: new Date('March 24, 2021 05:24:00'),
       clockStarted: dummy,
-      timerDuration: 10,
+      timerDuration: 60,
+    },
+    {
+      id: '3',
+      order: 3,
+      title: 'Out of words',
+      subtitle: '',
+      presenter: 'Carlos Valente',
+      timeStart: new Date('March 24, 2021 05:25:00'),
+      timeEnd: new Date('March 24, 2021 05:55:00'),
+      clockStarted: dummy,
+      timerDuration: 60,
     },
   ],
 };

src/common/input/SingleTimeInput.jsx

@@ -1,3 +1,4 @@
+import { FormLabel } from '@chakra-ui/form-control';
 import { Text } from '@chakra-ui/layout';
 import {
   NumberDecrementStepper,
@@ -11,7 +12,7 @@ import styles from './TimeInput.module.css';
 export default function SingleTimeInput(props) {
   return (
     <div className={styles.container}>
-      <Text className={styles.label}>{props.label}</Text>
+      <FormLabel>{props.label}</FormLabel>
       <Text className={styles.label}>min</Text>
       <div className={styles.timeInput}>
         <NumberInput min={0} max={60} maxW={20} allowMouseWheel>

src/features/editors/Editor.jsx

@@ -39,18 +39,6 @@ export default function Editor() {
             number={1}
             text={'Manage and select event to run'}
           />
-          <div className={styles.cornerButtonContainer}>
-            <Button
-              colorScheme='teal'
-              variant={formMode === 'add' ? 'solid' : 'outline'}
-              rightIcon={<ArrowForwardIcon />}
-              disabled={formMode !== null}
-              onClick={() => setFormMode('add')}
-            >
-              Add Event
-            </Button>
-          </div>
-
           <div className={styles.content}>
             <EventList formMode={formMode} setFormMode={setFormMode} />
           </div>

src/features/viewers/DefaultPresenter.jsx

@@ -3,14 +3,13 @@ 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() {
-  const [event, setEvent] = useContext(EventContext);
+  const [event] = useContext(EventContext);
   const [presMessage] = useContext(PresenterMessagesContext);
   const [initialValues, setInitialValues] = useState(null);
 

src/features/viewers/PreviewContainer.jsx

@@ -1,4 +1,3 @@
-import DefaultPresenter from './DefaultPresenter';
 import styles from './PreviewContainer.module.css';
 import { AspectRatio } from '@chakra-ui/react';
 
@@ -7,25 +6,28 @@ export default function PreviewContainer() {
     <div className={styles.previewContainer}>
       <div className={styles.previewItem}>
         <AspectRatio maxW='300' ratio={16 / 9} className={styles.preview}>
-          <iframe src='http://localhost:3000/'></iframe>
+          <iframe
+            title='Default Presenter'
+            src='http://localhost:3000/'
+          ></iframe>
         </AspectRatio>
         <div className={styles.label}>Default Presenter</div>
       </div>
       <div className={styles.previewItem}>
         <AspectRatio maxW='300' ratio={16 / 9} className={styles.preview}>
-          <iframe src='http://localhost:3000/'></iframe>
+          <iframe title='Audience' src='http://localhost:3000/'></iframe>
         </AspectRatio>
         <div className={styles.label}>Audience</div>
       </div>
       <div className={styles.previewItem}>
         <AspectRatio maxW='300' ratio={16 / 9} className={styles.preview}>
-          <iframe src='http://localhost:3000/'></iframe>
+          <iframe title='Stage Manager' src='http://localhost:3000/'></iframe>
         </AspectRatio>
         <div className={styles.label}>Stage Manager</div>
       </div>
       <div className={styles.previewItem}>
         <AspectRatio maxW='300' ratio={16 / 9} className={styles.preview}>
-          <iframe src='http://localhost:3000/'></iframe>
+          <iframe title='Lower Third' src='http://localhost:3000/'></iframe>
         </AspectRatio>
         <div className={styles.label}>Lower third</div>
       </div>