chore: type improvements (#598)

* chore: type improvements * ci: typechecking in pipeline
2026-08-18 05:34:09 +00:00 · 2023-11-18 08:35:54 +01:00
parent 884ab0b67b
commit 2316bbebac
17 changed files with 84 additions and 34 deletions
@@ -19,9 +19,11 @@ interface TextInputProps extends BaseProps {
  isTextArea?: false;
 }

+type ResizeOptions = 'horizontal' | 'vertical' | 'none';
+
 interface TextAreaProps extends BaseProps {
  isTextArea: true;
-  resize?: 'horizontal' | 'vertical' | 'none';
+  resize?: ResizeOptions;
 }

 type InputProps = TextInputProps | TextAreaProps;
@@ -35,7 +37,7 @@ export default function TextInput(props: InputProps) {
  const textInputProps = useReactiveTextInput(initialText, submitCallback, { submitOnEnter: true });
  const textAreaProps = useReactiveTextInput(initialText, submitCallback);

-  let resize = 'none';
+  let resize: ResizeOptions = 'none';
  if (isTextArea) {
    resize = (props as TextAreaProps)?.resize ?? 'none';
  }
@@ -1,3 +1,5 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+//@ts-nocheck -- working on it
 import { useMutation, useQuery } from '@tanstack/react-query';
 import { OSCSettings } from 'ontime-types';

@@ -9,21 +9,21 @@ const cachedRundownPlaceholder = { rundown: [], revision: -1 };

 // TODO: can we leverage structural sharing to see if data has changed?
 export default function useRundown() {
-  return useQuery<GetRundownCached>({
+  const { data, status, isError, refetch, isFetching } = useQuery<GetRundownCached>({
    queryKey: RUNDOWN,
    queryFn: fetchCachedRundown,
    placeholderData: cachedRundownPlaceholder,
    retry: 5,
-    select: (data) => data.rundown,
    retryDelay: (attempt) => attempt * 2500,
    refetchInterval: queryRefetchInterval,
    networkMode: 'always',
    // structuralSharing: (oldData: GetRundownCached | undefined, newData: GetRundownCached) => {
    //   if (oldData === undefined) {
-    //     cachedRundownPlaceholder;
+    //     return cachedRundownPlaceholder;
    //   }
    //   const hasDataChanged = oldData?.revision === newData.revision;
    //   return hasDataChanged ? oldData : newData;
    // },
  });
+  return { data: data?.rundown ?? [], status, isError, refetch, isFetching };
 }
@@ -1,3 +1,5 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+//@ts-nocheck -- working on it
 import { useCallback, useEffect, useState } from 'react';

 interface WebkitDocument extends Document {
@@ -1,4 +1,4 @@
-import { memo } from 'react';
+import { memo, ReactNode } from 'react';
 import { Button, Checkbox, Switch } from '@chakra-ui/react';
 import { Column } from '@tanstack/react-table';
 import { OntimeRundownEntry } from 'ontime-types';
@@ -44,7 +44,7 @@ function CuesheetTableSettings(props: CuesheetTableSettingsProps) {
                  defaultChecked={visible}
                  onChange={column.getToggleVisibilityHandler()}
                />
-                {columnHeader}
+                {columnHeader as ReactNode}
              </label>
            );
          })}
@@ -9,7 +9,7 @@ import { millisToString } from 'ontime-utils';
 * @return {string}
 */

-export const parseField = (field: keyof OntimeRundown, data: unknown): string => {
+export const parseField = <T extends OntimeEntryCommonKeys>(field: T, data: unknown): string => {
  let val;
  switch (field) {
    case 'timeStart':
@@ -96,6 +96,7 @@ export const makeTable = (headerData: ProjectData, rundown: OntimeRundown, userF

  rundown.forEach((entry) => {
    const row: string[] = [];
+    // @ts-expect-error -- not sure how to type this
    fieldOrder.forEach((field) => row.push(parseField(field, entry[field])));
    data.push(row);
  });
@@ -1,3 +1,5 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+//@ts-nocheck -- working on it
 import { useEffect } from 'react';
 import { useForm } from 'react-hook-form';
 import { FormControl, Input, Switch } from '@chakra-ui/react';
@@ -48,7 +48,7 @@ export default function AliasesForm() {

  useEffect(() => {
    if (data) {
-      reset(data);
+      reset({ aliases: data });
    }
  }, [data, reset]);

@@ -50,7 +50,7 @@ export default function AppSettingsModal() {
    reset(data);
  };

-  const disableInputs = status === 'loading';
+  const disableInputs = status === 'pending';

  if (isFetching) {
    return <ModalLoader />;
@@ -87,7 +87,7 @@ export default function AppSettingsModal() {
        description='Protect the editor with a pin code'
        error={errors.editorKey?.message}
      >
-        <ModalPinInput register={register} formName='editorKey' isDisabled={disableInputs} />
+        <ModalPinInput register={register as any} formName='editorKey' isDisabled={disableInputs} />
      </ModalSplitInput>
      <ModalSplitInput
        field='operatorKey'
@@ -95,7 +95,7 @@ export default function AppSettingsModal() {
        description='Protect the cuesheet with a pin code'
        error={errors.operatorKey?.message}
      >
-        <ModalPinInput register={register} formName='operatorKey' isDisabled={disableInputs} />
+        <ModalPinInput register={register as any} formName='operatorKey' isDisabled={disableInputs} />
      </ModalSplitInput>
      <div style={{ height: '16px' }} />
      <ModalSplitInput
@@ -48,7 +48,7 @@ export default function ProjectDataForm() {
    reset(data);
  };

-  const disableInputs = status === 'loading';
+  const disableInputs = status === 'pending';

  if (isFetching) {
    return <ModalLoader />;
@@ -94,7 +94,7 @@ export default function ViewSettingsForm() {
          <AlertTitle>CSS Override</AlertTitle>
          <AlertDescription>
            Ontime will use the CSS file at its install location. <br />
-            <span className={style.url}>{info.cssOverride}</span>
+            <span className={style.url}>{info?.cssOverride}</span>
            <ModalLink href={cssOverrideDocsUrl}>For more information, see the docs</ModalLink>
          </AlertDescription>
        </div>
@@ -13,7 +13,7 @@ import { EventItemActions } from '../../RundownEntry';
 interface BlockActionMenuProps {
  enableDelete?: boolean;
  showClone?: boolean;
-  actionHandler: (action: EventItemActions, payload?: unknown) => void;
+  actionHandler: (action: EventItemActions, payload?: any) => void;
  className?: string;
 }

@@ -1,6 +1,6 @@
-/* eslint-disable react/display-name */
 import { ComponentType, useMemo } from 'react';
-import { SupportedEvent } from 'ontime-types';
+import { TimeManagerType } from 'common/models/TimeManager.type';
+import { Message, OntimeEvent, ProjectData, SupportedEvent, TimerMessage, ViewSettings } from 'ontime-types';
 import { useStore } from 'zustand';

 import useProjectData from '../../common/hooks-query/useProjectData';
@@ -9,8 +9,32 @@ import useViewSettings from '../../common/hooks-query/useViewSettings';
 import { runtime } from '../../common/stores/runtime';
 import { useViewOptionsStore } from '../../common/stores/viewOptions';

-const withData = <P extends object>(Component: ComponentType<P>) => {
-  return (props: Partial<P>) => {
+type WithDataProps = {
+  isMirrored: boolean;
+  pres: TimerMessage;
+  publ: Message;
+  lower: Message;
+  eventNow: OntimeEvent | null;
+  publicEventNow: OntimeEvent | null;
+  eventNext: OntimeEvent | null;
+  publicEventNext: OntimeEvent | null;
+  time: TimeManagerType;
+  events: OntimeEvent[];
+  backstageEvents: OntimeEvent[];
+  selectedId: string | null;
+  publicSelectedId: string | null;
+  nextId: string | null;
+  general: ProjectData;
+  viewSettings: ViewSettings;
+  onAir: boolean;
+};
+
+function getDisplayName(Component: React.ComponentType<any>): string {
+  return Component.displayName || Component.name || 'Component';
+}
+
+const withData = <P extends WithDataProps>(Component: ComponentType<P>) => {
+  const WithDataComponent = (props: P) => {
    // persisted app state
    const isMirrored = useViewOptionsStore((state) => state.mirror);

@@ -84,6 +108,9 @@ const withData = <P extends object>(Component: ComponentType<P>) => {
      />
    );
  };
+
+  WithDataComponent.displayName = `WithData(${getDisplayName(Component)})`;
+  return WithDataComponent;
 };

 export default withData;
@@ -121,7 +121,9 @@ export default function Countdown(props: CountdownProps) {
            <div className='time'>{clock}</div>
          </div>

-          <div className='status'>{getLocalizedString(`countdown.${runningMessage}`)}</div>
+          {runningMessage !== TimerMessage.unhandled && (
+            <div className='status'>{getLocalizedString(`countdown.${runningMessage}`)}</div>
+          )}

          <span className={`timer ${standby ? 'timer--paused' : ''} ${isRunningFinished ? 'timer--finished' : ''}`}>
            {formattedTimer}