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>
   );