Feat/table part1 (#197)

* feat(csv): export data as csv file
* feat(table): toggle fullscreen
* ux: coordinate tooltip open delay
* feat(excelDates): update tests
* refactor: folder structure

client/src/features/table/TableHeader.jsx

@@ -1,25 +1,32 @@
 import React, { useContext, useEffect, useState } from 'react';
+import { Divider } from '@chakra-ui/layout';
 import { Tooltip } from '@chakra-ui/tooltip';
 import { FiSettings } from '@react-icons/all-files/fi/FiSettings';
 import { FiTarget } from '@react-icons/all-files/fi/FiTarget';
+import { IoContract } from '@react-icons/all-files/io5/IoContract';
+import { IoExpand } from '@react-icons/all-files/io5/IoExpand';
 import { IoMoon } from '@react-icons/all-files/io5/IoMoon';
+import PropTypes from 'prop-types';
 
 import { EVENT_TABLE } from '../../common/api/apiConstants';
 import { fetchEvent } from '../../common/api/eventApi';
 import { useSocket } from '../../common/context/socketContext';
 import { TableSettingsContext } from '../../common/context/TableSettingsContext';
 import { useFetch } from '../../common/hooks/useFetch';
+import useFullscreen from '../../common/hooks/useFullscreen';
 import { formatDisplay } from '../../common/utils/dateConfig';
 import { formatTime } from '../../common/utils/time';
+import { tooltipDelayFast } from '../../ontimeConfig';
 
 import PlaybackIcon from './tableElements/PlaybackIcon';
 
 import style from './Table.module.scss';
 
-export default function TableHeader() {
+export default function TableHeader({ handleCSVExport }) {
   const { followSelected, showSettings, toggleTheme, toggleSettings, toggleFollow } =
     useContext(TableSettingsContext);
   const { data } = useFetch(EVENT_TABLE, fetchEvent);
+  const { isFullScreen, toggleFullScreen } = useFullscreen();
 
   const socket = useSocket();
   const [timer, setTimer] = useState({
@@ -101,6 +108,7 @@ export default function TableHeader() {
     showSeconds: true,
     format: 'hh:mm:ss a',
   });
+
   return (
     <div className={style.header}>
       <div className={style.headerName}>{data?.title || ''}</div>
@@ -121,22 +129,41 @@ export default function TableHeader() {
         <span className={style.timer}>{timeNow}</span>
       </div>
       <div className={style.headerActions}>
-        <Tooltip openDelay={300} label='Follow selected'>
+        <Tooltip openDelay={tooltipDelayFast} label='Follow selected'>
           <span className={followSelected ? style.actionIcon : style.actionDisabled}>
             <FiTarget onClick={() => toggleFollow()} />
           </span>
         </Tooltip>
-        <Tooltip openDelay={300} label='Show settings'>
+        <Tooltip openDelay={tooltipDelayFast} label='Show settings'>
           <span className={showSettings ? style.actionIcon : style.actionDisabled}>
             <FiSettings onClick={() => toggleSettings()} />
           </span>
         </Tooltip>
-        <Tooltip openDelay={300} label='Toggle dark mode'>
+        <Tooltip openDelay={tooltipDelayFast} label='Toggle dark mode'>
           <span className={style.actionIcon}>
             <IoMoon onClick={() => toggleTheme()} />
           </span>
         </Tooltip>
+        <Tooltip openDelay={tooltipDelayFast} label='Toggle Fullscreen'>
+          <span className={style.actionIcon}>
+            {isFullScreen ? (
+              <IoContract onClick={() => toggleFullScreen()} />
+            ) : (
+              <IoExpand onClick={() => toggleFullScreen()} />
+            )}
+          </span>
+        </Tooltip>
+        <Divider />
+        <Tooltip openDelay={tooltipDelayFast} label='Export to CSV'>
+          <span className={style.actionText} onClick={() => handleCSVExport(data)}>
+            CSV
+          </span>
+        </Tooltip>
       </div>
     </div>
   );
 }
+
+TableHeader.propTypes = {
+  handleCSVExport: PropTypes.func.isRequired,
+};