v2 cleanup (#427)

* refactor: remove useless template

* refactor: handle promise

* refactor: associate labels to fields

* refactor: simplify checking if element exists

* refactor: prevent reassigning

* refactor: avoid wildcard imports

* refactor: simplify imports

* refactor: simplify boolean comparison

* chore: version bump

apps/client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ontime-ui",
-  "version": "2.0.0-beta",
+  "version": "2.0.0",
   "private": true,
   "dependencies": {
     "@chakra-ui/react": "^2.5.5",

apps/client/src/common/components/buttons/TooltipActionBtn.tsx

@@ -2,7 +2,7 @@ import { MouseEvent } from 'react';
 import { IconButton, IconButtonProps, Tooltip } from '@chakra-ui/react';
 
 interface TooltipActionBtnProps extends IconButtonProps {
-  clickHandler: (event?: MouseEvent) => void;
+  clickHandler: (event?: MouseEvent) => void | Promise<void>;
   tooltip: string;
   openDelay?: number;
 }

apps/client/src/common/components/edit-form-drawer/EditFormInput.tsx

@@ -1,7 +1,7 @@
 import { useSearchParams } from 'react-router-dom';
 import { Input, Select, Switch } from '@chakra-ui/react';
 
-import { isStringBoolean } from '../../../common/utils/viewUtils';
+import { isStringBoolean } from '../../utils/viewUtils';
 
 import { ParamField } from './types';
 

apps/client/src/common/components/error-boundary/ErrorBoundary.jsx

@@ -1,5 +1,6 @@
 /* eslint-disable react/destructuring-assignment */
 import React from 'react';
+// skipcq: JS-C1003 - sentry does not expose itself as an ES Module.
 import * as Sentry from '@sentry/react';
 
 import style from './ErrorBoundary.module.scss';

apps/client/src/common/components/input/time-input/TimeInput.tsx

@@ -11,6 +11,7 @@ import { TimeEntryField } from '../../../utils/timesManager';
 import style from './TimeInput.module.scss';
 
 interface TimeInputProps {
+  id?: TimeEntryField;
   name: TimeEntryField;
   submitHandler: (field: TimeEntryField, value: number) => void;
   time?: number;
@@ -36,7 +37,7 @@ function ButtonTooltip(name: TimeEntryField, warning?: string) {
 }
 
 export default function TimeInput(props: TimeInputProps) {
-  const { name, submitHandler, time = 0, delay = 0, placeholder, validationHandler, previousEnd = 0, warning } = props;
+  const { id, name, submitHandler, time = 0, delay = 0, placeholder, validationHandler, previousEnd = 0, warning } = props;
   const { emitError } = useEmitLog();
   const inputRef = useRef<HTMLInputElement | null>(null);
   const [value, setValue] = useState<string>('');
@@ -189,6 +190,7 @@ export default function TimeInput(props: TimeInputProps) {
       </InputLeftElement>
       <Input
         ref={inputRef}
+        id={id}
         data-testid='time-input'
         className={style.inputField}
         type='text'

apps/client/src/common/hooks/useKeyDown.ts

@@ -8,7 +8,7 @@ export const useKeyDown: UseKeyDown = (callback, targetKey, options = {}) => {
   const onKeyDown = useCallback(
     (event: KeyboardEvent) => {
       const targetKeyPressed = event.key === targetKey && !event.repeat;
-      if (targetKeyPressed && isDisabled === false) {
+      if (targetKeyPressed && !isDisabled) {
         event.preventDefault();
         callback();
       }

apps/client/src/features/editors/Editor.tsx

@@ -9,11 +9,11 @@ import UploadModal from '../modals/upload-modal/UploadModal';
 
 import styles from './Editor.module.scss';
 
-const Rundown = lazy(() => import('../../features/rundown/RundownExport'));
-const TimerControl = lazy(() => import('../../features/control/playback/TimerControlExport'));
-const MessageControl = lazy(() => import('../../features/control/message/MessageControlExport'));
-const Info = lazy(() => import('../../features/info/InfoExport'));
-const EventEditor = lazy(() => import('../../features/event-editor/EventEditorExport'));
+const Rundown = lazy(() => import('../rundown/RundownExport'));
+const TimerControl = lazy(() => import('../control/playback/TimerControlExport'));
+const MessageControl = lazy(() => import('../control/message/MessageControlExport'));
+const Info = lazy(() => import('../info/InfoExport'));
+const EventEditor = lazy(() => import('../event-editor/EventEditorExport'));
 
 const IntegrationModal = lazy(() => import('../modals/integration-modal/IntegrationModal'));
 const SettingsModal = lazy(() => import('../modals/settings-modal/SettingsModal'));

apps/client/src/features/event-editor/composite/CountedTextArea.tsx

@@ -24,10 +24,11 @@ export default function CountedTextArea(props: CountedTextAreaProps) {
   return (
     <div className={`${style.column} ${style.fullHeight}`}>
       <div className={style.countedInput}>
-        <label className={style.inputLabel}>{label}</label>
+        <label className={style.inputLabel} htmlFor={field}>{label}</label>
         <span className={style.charCount}>{`${value.length} characters`}</span>
       </div>
       <Textarea
+        id={field}
         size='sm'
         resize='none'
         variant='ontime-filled'

apps/client/src/features/event-editor/composite/CountedTextInput.tsx

@@ -26,10 +26,11 @@ export default function CountedTextInput(props: CountedTextInputProps) {
   return (
     <div className={style.column}>
       <div className={style.countedInput}>
-        <label className={style.inputLabel}>{label}</label>
+        <label className={style.inputLabel} htmlFor={field}>{label}</label>
         <span className={style.charCount}>{`${value.length} characters`}</span>
       </div>
       <Input
+        id={field}
         size='sm'
         variant='ontime-filled'
         data-testid='input-textfield'

apps/client/src/features/event-editor/composite/EventEditorTimes.tsx

@@ -80,8 +80,11 @@ const EventEditorTimes = (props: EventEditorTimesProps) => {
   return (
     <div className={style.timeOptions}>
       <div className={style.timers}>
-        <label className={inputTimeLabels}>{startLabel}</label>
+        <label className={inputTimeLabels} htmlFor='timeStart'>
+          {startLabel}
+        </label>
         <TimeInput
+          id='timeStart'
           name='timeStart'
           submitHandler={handleSubmit}
           validationHandler={timerValidationHandler}
@@ -90,8 +93,11 @@ const EventEditorTimes = (props: EventEditorTimesProps) => {
           placeholder='Start'
           warning={warning.start}
         />
-        <label className={inputTimeLabels}>{endLabel}</label>
+        <label className={inputTimeLabels} htmlFor='timeEnd'>
+          {endLabel}
+        </label>
         <TimeInput
+          id='timeEnd'
           name='timeEnd'
           submitHandler={handleSubmit}
           validationHandler={timerValidationHandler}
@@ -100,8 +106,11 @@ const EventEditorTimes = (props: EventEditorTimesProps) => {
           placeholder='End'
           warning={warning.end}
         />
-        <label className={style.inputLabel}>Duration</label>
+        <label className={style.inputLabel} htmlFor='durationOverride'>
+          Duration
+        </label>
         <TimeInput
+          id='durationOverride'
           name='durationOverride'
           submitHandler={handleSubmit}
           validationHandler={timerValidationHandler}

apps/client/src/features/rundown/RundownWrapper.tsx

@@ -1,6 +1,6 @@
 import Empty from '../../common/components/state/Empty';
 import useRundown from '../../common/hooks-query/useRundown';
-import RundownMenu from '../../features/menu/RundownMenu';
+import RundownMenu from '../menu/RundownMenu';
 
 import Rundown from './Rundown';
 

apps/client/src/index.tsx

@@ -1,5 +1,6 @@
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
+// skipcq: JS-C1003 - sentry does not expose itself as an ES Module.
 import * as Sentry from '@sentry/react';
 import { BrowserTracing } from '@sentry/tracing';
 

apps/client/src/theme/ontimeSwitch.ts

@@ -3,7 +3,7 @@ export const ontimeSwitch = {
     background: '#2d2d2d', // $gray-1100
     border: '1px solid transparent',
     _checked: {
-      background: `#2B5ABC`, // $blue-700
+      background: '#2B5ABC', // $blue-700
     },
     _focus: {
       border: '1px solid #578AF4', // $blue-500
@@ -16,7 +16,7 @@ export const lightSwitch = {
     border: '1px solid transparent',
     background: '#cfcfcf', // $gray-300
     _checked: {
-      background: `#578AF4`, // $blue-500
+      background: '#578AF4', // $blue-500
     },
     _focus: {
       border: '1px solid #D2DDFF', // $blue-200

apps/electron/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ontime",
-  "version": "2.0.0-beta6",
+  "version": "2.0.0",
   "author": "Carlos Valente",
   "description": "Time keeping for live events",
   "repository": "https://github.com/cpvalente/ontime",

apps/server/package.json

@@ -2,7 +2,7 @@
   "name": "ontime-server",
   "type": "module",
   "main": "src/index.ts",
-  "version": "2.0.0-beta6",
+  "version": "2.0.0",
   "exports": "./src/index.js",
   "dependencies": {
     "body-parser": "^1.20.0",

apps/server/src/adapters/OscAdapter.ts

@@ -6,7 +6,7 @@ import { dispatchFromAdapter } from '../controllers/integrationController.js';
 import { logger } from '../classes/Logger.js';
 
 export class OscServer implements IAdapter {
-  private osc: Server;
+  private readonly osc: Server;
 
   constructor(config: OSCSettings) {
     this.osc = new Server(config.portIn, '0.0.0.0');

apps/server/src/adapters/WebsocketAdapter.ts

@@ -28,7 +28,7 @@ export class SocketServer implements IAdapter {
   private readonly MAX_PAYLOAD = 1024 * 256; // 256Kb
 
   private wss: WebSocketServer | null;
-  private clientIds: Set<string>;
+  private readonly clientIds: Set<string>;
 
   constructor() {
     if (instance) {

apps/server/src/services/integration-service/OscIntegration.ts

@@ -37,7 +37,7 @@ export class OscIntegration implements IIntegration {
     if (validateType || validateNull) {
       return {
         success: false,
-        message: `Config options incorrect`,
+        message: 'Config options incorrect',
       };
     }
     try {

apps/server/src/utils/parserFunctions.ts

@@ -39,7 +39,7 @@ export const parseRundown = (data): OntimeRundown => {
         }
 
         // double check unique ids
-        if (ids.indexOf(e?.id) !== -1) {
+        if (ids.includes(e?.id)) {
           console.log('ERROR: ID collision on import, skipping');
           continue;
         }

apps/server/src/utils/upload.js

@@ -1,5 +1,5 @@
 import multer from 'multer';
-import * as path from 'path';
+import path from 'path';
 
 import { EXCEL_MIME, JSON_MIME } from './parser.js';
 import { ensureDirectory } from './fileManagement.js';

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ontime",
-  "version": "2.0.0-beta6",
+  "version": "2.0.0",
   "description": "Time keeping for live events",
   "keywords": [
     "lighdev",