Feat/table (#105)

* feat/table add react-table
* feat/table add protected table route
* feat/table upgrade dependencies
* feat/table support parsing of new properties

Co-authored-by: DeepSource Bot <bot@deepsource.io>

client/src/features/info/Info.jsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import React, { useState, useEffect } from 'react';
 import { useSocket } from 'app/context/socketContext';
 import style from './Info.module.scss';
 import InfoTitle from './InfoTitle';
@@ -45,10 +45,10 @@ export default function Info() {
       if (data.total === 0 || data.total == null) {
         setSelected('No events');
       } else {
-        const formatedCurrent = `Event ${
+        const formattedCurrent = `Event ${
           data.index != null ? data.index + 1 : '-'
-        }/${data.total != null ? data.total : '-'}`;
-        setSelected(formatedCurrent);
+        }/${data.total ? data.total : '-'}`;
+        setSelected(formattedCurrent);
       }
     });
 
@@ -78,12 +78,12 @@ export default function Info() {
   return (
     <>
       <div className={style.main}>
-        <span>{`Running on port 4001`}</span>
+        <span>Running on port 4001</span>
         <span>{selected}</span>
       </div>
       <InfoNif />
-      <InfoTitle title={'Now'} data={titlesNow} roll={playback === 'roll'} />
-      <InfoTitle title={'Next'} data={titlesNext} roll={playback === 'roll'} />
+      <InfoTitle title='Now' data={titlesNow} roll={playback === 'roll'} />
+      <InfoTitle title='Next' data={titlesNext} roll={playback === 'roll'} />
       <InfoLogger />
     </>
   );

client/src/features/info/InfoLogger.jsx

@@ -1,4 +1,4 @@
-import { useContext, useEffect, useState } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 import style from './InfoLogger.module.scss';
 import CollapseBar from "../../common/components/collapseBar/CollapseBar";
 import { LoggingContext } from '../../app/context/LoggingContext';
@@ -54,7 +54,7 @@ export default function InfoLogger() {
 
   return (
     <div className={collapsed ? style.container : style.container__expanded}>
-      <CollapseBar title={'Log'} isCollapsed={collapsed} onClick={() => setCollapsed((c) => !c)}/>
+      <CollapseBar title='Log' isCollapsed={collapsed} onClick={() => setCollapsed((c) => !c)} />
       {!collapsed && (
         <>
           <div className={style.toggleBar}>

client/src/features/info/InfoNif.jsx

@@ -1,10 +1,10 @@
-import { useState } from 'react';
+import React, { useState } from 'react';
 import { APP_TABLE } from 'app/api/apiConstants';
 import { getInfo, ontimePlaceholderInfo } from 'app/api/ontimeApi';
 import { useFetch } from 'app/hooks/useFetch';
-import style from './Info.module.scss';
 import CollapseBar from '../../common/components/collapseBar/CollapseBar';
-import handleLink from '../../common/utils/handleLink';
+import { openLink } from '../../common/utils/linkUtils';
+import style from './Info.module.scss';
 
 export default function InfoNif() {
   const { data, status } = useFetch(APP_TABLE, getInfo, {
@@ -14,26 +14,25 @@ export default function InfoNif() {
   const baseURL = 'http://__IP__:4001';
 
   return (
-  <div className={style.container}>
-    <CollapseBar title={'Network Info'} isCollapsed={collapsed} onClick={() => setCollapsed((c) => !c)}/>
+    <div className={style.container}>
+      <CollapseBar
+        title='Network Info'
+        isCollapsed={collapsed}
+        onClick={() => setCollapsed((c) => !c)}
+      />
       {!collapsed && (
         <div>
-          {status === 'success' && (
-            <>
-              {data?.networkInterfaces.map((e) => {
-                return (
-                  <a
-                    key={e.address}
-                    href='#!'
-                    onClick={() =>
-                      handleLink(baseURL.replace('__IP__', e.address))
-                    }
-                    className={style.if}
-                  >{`${e.name} - ${e.address}`}</a>
-                );
-              })}
-            </>
-          )}
+          {status === 'success' &&
+          data?.networkInterfaces.map((e) => (
+            <a
+              key={e.address}
+              href='#!'
+              onClick={() => openLink(baseURL.replace('__IP__', e.address))}
+              className={style.if}
+            >
+              {`${e.name} - ${e.address}`}
+            </a>
+          ))}
         </div>
       )}
     </div>

client/src/features/info/InfoTitle.jsx

@@ -1,5 +1,5 @@
+import React, { useState } from 'react';
 import { Icon } from '@chakra-ui/react';
-import { useState } from 'react';
 import { FiChevronUp } from '@react-icons/all-files/fi/FiChevronUp';
 import style from './Info.module.scss';