send data to component

- title data
- added note to title data
- add total events info into socket

client/src/features/info/Info.jsx

@@ -1,15 +1,76 @@
+import { useEffect } from 'react';
+import { useSocket } from 'app/context/socketContext';
 import style from './Info.module.css';
 import InfoTitle from './InfoTitle';
 import InfoLogger from './InfoLogger';
+import { useState } from 'react';
 
 export default function Info() {
-  const data = {};
+  const socket = useSocket();
+  const [titles, setTitles] = useState({
+    titleNow: '',
+    subtitleNow: '',
+    presenterNow: '',
+    noteNow: '',
+    titleNext: '',
+    subtitleNext: '',
+    presenterNext: '',
+    noteNext: '',
+  });
+  const [selected, setSelected] = useState('-/-');
   const logData = [];
+
+  // handle incoming messages
+  useEffect(() => {
+    if (socket == null) return;
+
+    // Ask for titles
+    socket.emit('get-titles');
+
+    // Handle titles
+    socket.on('titles', (data) => {
+      setTitles(data);
+    });
+
+    // Ask for selection data
+    socket.emit('get-selected');
+
+    // Handle selection data
+    socket.on('selected', (data) => {
+      const formatedCurrent = `${data.index != null ? data.index + 1 : '-'}/${
+        data.total != null ? data.total : '-'
+      }`;
+
+      setSelected(formatedCurrent);
+    });
+
+    // Clear listener
+    return () => {
+      socket.off('titles');
+      socket.off('selected');
+    };
+  }, [socket]);
+
+  // prepare data
+  const titlesNow = {
+    title: titles.titleNow,
+    subtitle: titles.subtitleNow,
+    presenter: titles.presenterNow,
+    note: titles.noteNow,
+  };
+
+  const titlesNext = {
+    title: titles.titleNext,
+    subtitle: titles.subtitleNext,
+    presenter: titles.presenterNext,
+    note: titles.noteNext,
+  };
+
   return (
     <>
-      <div className={style.main}>Event 1/31</div>
-      <InfoTitle title={'Now'} data={data} />
-      <InfoTitle title={'Next'} data={data} />
+      <div className={style.main}>{`Event ${selected}`}</div>
+      <InfoTitle title={'Now'} data={titlesNow} />
+      <InfoTitle title={'Next'} data={titlesNext} />
       <InfoLogger logData={logData} />
     </>
   );

client/src/features/info/InfoTitle.jsx

@@ -17,16 +17,20 @@ export default function InfoTitle(props) {
       </div>
 
       <div>
-        <span className={style.label}>Title: </span>Demo title
+        <span className={style.label}>Title: </span>
+        {data.title}
       </div>
       <div>
-        <span className={style.label}>Subtitle: </span>Demo Subtitle
+        <span className={style.label}>Subtitle: </span>
+        {data.subtitle}
       </div>
       <div>
-        <span className={style.label}>Presenter: </span>Demo Presenter Name
+        <span className={style.label}>Presenter: </span>
+        {data.presenter}
       </div>
       <div>
-        <span className={style.label}>Notes: </span>Demo Notes
+        <span className={style.label}>Notes: </span>
+        {data.note}
       </div>
     </div>
   );

server/src/classes/EventTimer.js

@@ -44,9 +44,11 @@ export class EventTimer extends Timer {
     titleNow: null,
     subtitleNow: null,
     presenterNow: null,
+    noteNow: null,
     titleNext: null,
     subtitleNext: null,
     presenterNext: null,
+    noteNext: null,
   };
 
   selectedEventIndex = null;
@@ -93,6 +95,7 @@ export class EventTimer extends Timer {
     this.io.emit('selected', {
       id: this.selectedEventId,
       index: this.selectedEventIndex,
+      total: this.numEvents,
     });
     this.io.emit('selected-id', this.selectedEventId);
     this.io.emit('next-id', this.nextEventId);
@@ -289,6 +292,7 @@ export class EventTimer extends Timer {
         socket.emit('selected', {
           id: this.selectedEventId,
           index: this.selectedEventIndex,
+          total: this.numEvents,
         });
       });
 
@@ -588,6 +592,7 @@ export class EventTimer extends Timer {
         this.titles.titleNow = e.title;
         this.titles.subtitleNow = e.subtitle;
         this.titles.presenterNow = e.presenter;
+        this.titles.noteNow = e.note;
         this.selectedEventId = e.id;
 
         break;
@@ -601,6 +606,7 @@ export class EventTimer extends Timer {
         this.titles.titleNow = e.title;
         this.titles.subtitleNow = e.subtitle;
         this.titles.presenterNow = e.presenter;
+        this.titles.noteNow = e.note;
         this.selectedEventId = e.id;
         break;
 
@@ -616,6 +622,7 @@ export class EventTimer extends Timer {
         this.titles.titleNext = e.title;
         this.titles.subtitleNext = e.subtitle;
         this.titles.presenterNext = e.presenter;
+        this.titles.noteNext = e.note;
         this.nextEventId = e.id;
         break;
       case 'next-public':
@@ -628,6 +635,7 @@ export class EventTimer extends Timer {
         this.titles.titleNext = e.title;
         this.titles.subtitleNext = e.subtitle;
         this.titles.presenterNext = e.presenter;
+        this.titles.noteNext = e.note;
         this.nextEventId = e.id;
         break;
 
@@ -644,6 +652,7 @@ export class EventTimer extends Timer {
     this.titles.titleNext = null;
     this.titles.subtitleNext = null;
     this.titles.presenterNext = null;
+    this.titles.noteNext = null;
     this.nextEventId = null;
 
     this.titlesPublic.titleNext = null;
@@ -682,9 +691,11 @@ export class EventTimer extends Timer {
       titleNow: null,
       subtitleNow: null,
       presenterNow: null,
+      noteNow: null,
       titleNext: null,
       subtitleNext: null,
       presenterNext: null,
+      noteNext: null,
     };
 
     this.publicTitles = {
@@ -731,9 +742,11 @@ export class EventTimer extends Timer {
       Title Now       = ${this.titles.titleNow}
       Subtitle Now    = ${this.titles.subtitleNow}
       Presenter Now   = ${this.titles.presenterNow}
+      Note Now        = ${this.titles.noteNow}
       Title Next      = ${this.titles.titleNext}
       Subtitle Next   = ${this.titles.subtitleNext}
       Presenter Next  = ${this.titles.presenterNext}
+      Note Next       = ${this.titles.noteNext}
 
       Public Titles
       ------------------------------