Revert "refactor(views): share the hook which reads view options"

This reverts commit b4e3e0e553.

apps/client/src/common/components/view-params-editor/useViewOptions.ts

@@ -1,28 +0,0 @@
-import { use, useMemo } from 'react';
-import { useSearchParams } from 'react-router';
-
-import { PresetContext } from '../../context/PresetContext';
-
-/**
- * Reads a view's options from the URL.
- *
- * Every view configures itself from the query, and every view is also reachable
- * through a URL preset. A preset pins the values it names: they take precedence
- * over the query rather than seeding it, which is what makes a preset a fixed
- * setup rather than a starting point. Views which let the operator change
- * settings live have to know that, since a value the preset pins cannot be
- * written back.
- *
- * @param parse the view's own parser. Called with the query, and with the
- * preset's search string when one is in scope. Expected to be a module level
- * function, so that identity does not change between renders.
- */
-export function useViewOptions<T>(parse: (searchParams: URLSearchParams, presetParams?: URLSearchParams) => T): T {
-  const [searchParams] = useSearchParams();
-  const maybePreset = use(PresetContext);
-
-  return useMemo(() => {
-    const presetParams = maybePreset ? new URLSearchParams(maybePreset.search) : undefined;
-    return parse(searchParams, presetParams);
-  }, [maybePreset, searchParams, parse]);
-}

apps/client/src/views/backstage/backstage.options.ts

@@ -1,4 +1,6 @@
 import { CustomFields, OntimeEvent, ProjectData } from 'ontime-types';
+import { use, useMemo } from 'react';
+import { useSearchParams } from 'react-router';
 
 import {
   getTimeOption,
@@ -6,12 +8,12 @@ import {
   TimeOptions,
 } from '../../common/components/view-params-editor/common.options';
 import { OptionTitle } from '../../common/components/view-params-editor/constants';
-import { useViewOptions } from '../../common/components/view-params-editor/useViewOptions';
 import { ViewOption } from '../../common/components/view-params-editor/viewParams.types';
 import {
   makeOptionsFromCustomFields,
   makeProjectDataOptions,
 } from '../../common/components/view-params-editor/viewParams.utils';
+import { PresetContext } from '../../common/context/PresetContext';
 import { getScheduleOptions } from '../common/schedule/schedule.options';
 
 export const getBackstageOptions = (
@@ -95,5 +97,13 @@ function getOptionsFromParams(searchParams: URLSearchParams, defaultValues?: URL
  * Hook exposes the backstage view options
  */
 export function useBackstageOptions(): BackstageOptions {
-  return useViewOptions(getOptionsFromParams);
+  const [searchParams] = useSearchParams();
+  const maybePreset = use(PresetContext);
+
+  const options = useMemo(() => {
+    const defaultValues = maybePreset ? new URLSearchParams(maybePreset.search) : undefined;
+    return getOptionsFromParams(searchParams, defaultValues);
+  }, [maybePreset, searchParams]);
+
+  return options;
 }

apps/client/src/views/countdown/countdown.options.ts

@@ -1,4 +1,6 @@
 import { CustomFields, EntryId, OntimeEvent } from 'ontime-types';
+import { use, useMemo } from 'react';
+import { useSearchParams } from 'react-router';
 
 import {
   getTimeOption,
@@ -6,9 +8,9 @@ import {
   TimeOptions,
 } from '../../common/components/view-params-editor/common.options';
 import { OptionTitle } from '../../common/components/view-params-editor/constants';
-import { useViewOptions } from '../../common/components/view-params-editor/useViewOptions';
 import { ViewOption } from '../../common/components/view-params-editor/viewParams.types';
 import { makeOptionsFromCustomFields } from '../../common/components/view-params-editor/viewParams.utils';
+import { PresetContext } from '../../common/context/PresetContext';
 import { isStringBoolean } from '../common/viewUtils';
 
 export const getCountdownOptions = (
@@ -125,5 +127,13 @@ function getOptionsFromParams(searchParams: URLSearchParams, defaultValues?: URL
  * Hook exposes the countdown view options
  */
 export function useCountdownOptions(): CountdownOptions {
-  return useViewOptions(getOptionsFromParams);
+  const [searchParams] = useSearchParams();
+  const maybePreset = use(PresetContext);
+
+  const options = useMemo(() => {
+    const defaultValues = maybePreset ? new URLSearchParams(maybePreset.search) : undefined;
+    return getOptionsFromParams(searchParams, defaultValues);
+  }, [maybePreset, searchParams]);
+
+  return options;
 }

apps/client/src/views/studio/studio.options.ts

@@ -1,4 +1,6 @@
 import { CustomFields, OntimeEvent } from 'ontime-types';
+import { use, useMemo } from 'react';
+import { useSearchParams } from 'react-router';
 
 import {
   getTimeOption,
@@ -6,9 +8,9 @@ import {
   TimeOptions,
 } from '../../common/components/view-params-editor/common.options';
 import { OptionTitle } from '../../common/components/view-params-editor/constants';
-import { useViewOptions } from '../../common/components/view-params-editor/useViewOptions';
 import { ViewOption } from '../../common/components/view-params-editor/viewParams.types';
 import { makeOptionsFromCustomFields } from '../../common/components/view-params-editor/viewParams.utils';
+import { PresetContext } from '../../common/context/PresetContext';
 import { isStringBoolean } from '../common/viewUtils';
 
 export const getStudioOptions = (timeFormat: string, customFields: CustomFields): ViewOption[] => {
@@ -70,5 +72,13 @@ function getOptionsFromParams(searchParams: URLSearchParams, defaultValues?: URL
  * Hook exposes the backstage view options
  */
 export function useStudioOptions(): StudioOptions {
-  return useViewOptions(getOptionsFromParams);
+  const [searchParams] = useSearchParams();
+  const maybePreset = use(PresetContext);
+
+  const options = useMemo(() => {
+    const defaultValues = maybePreset ? new URLSearchParams(maybePreset.search) : undefined;
+    return getOptionsFromParams(searchParams, defaultValues);
+  }, [maybePreset, searchParams]);
+
+  return options;
 }

apps/client/src/views/teleprompter/teleprompter.options.ts

@@ -1,9 +1,11 @@
 import type { CustomFields } from 'ontime-types';
+import { use, useMemo } from 'react';
+import { useSearchParams } from 'react-router';
 
 import { OptionTitle } from '../../common/components/view-params-editor/constants';
-import { useViewOptions } from '../../common/components/view-params-editor/useViewOptions';
 import type { ViewOption } from '../../common/components/view-params-editor/viewParams.types';
 import { makeOptionsFromCustomFields } from '../../common/components/view-params-editor/viewParams.utils';
+import { PresetContext } from '../../common/context/PresetContext';
 import { isStringBoolean } from '../common/viewUtils';
 import { DEFAULT_SPEED, MAX_FONT_SIZE, MAX_SPEED, MIN_FONT_SIZE, MIN_SPEED } from './teleprompter.scroll';
 import type { HeadingSource, TeleprompterOptions } from './teleprompter.types';
@@ -246,5 +248,11 @@ export function getOptionsFromParams(
  * Hook exposes the teleprompter view options
  */
 export function useTeleprompterOptions(): TeleprompterOptions {
-  return useViewOptions(getOptionsFromParams);
+  const [searchParams] = useSearchParams();
+  const maybePreset = use(PresetContext);
+
+  return useMemo(() => {
+    const defaultValues = maybePreset ? new URLSearchParams(maybePreset.search) : undefined;
+    return getOptionsFromParams(searchParams, defaultValues);
+  }, [maybePreset, searchParams]);
 }

apps/client/src/views/teleprompter/useMirrorLiveParams.ts

@@ -52,9 +52,9 @@ export function useMirrorLiveParams(live: Record<string, string | null>) {
 
   useEffect(() => {
     /**
-     * A preset pins the values it names, as useViewOptions describes, so a
+     * A preset's own search string wins over the query when the options are
-     * mirrored param would show a value the next load would ignore. Better to
+     * read, so a mirrored param would show a value the next load would ignore.
-     * leave the address bar alone than to write a link which lies.
+     * Better to leave the address bar alone than to write a link which lies.
      */
     if (isPreset) return;
 

apps/client/src/views/timeline/timeline.options.ts

@@ -1,4 +1,6 @@
 import { CustomFields, OntimeEvent } from 'ontime-types';
+import { use, useMemo } from 'react';
+import { useSearchParams } from 'react-router';
 
 import {
   getTimeOption,
@@ -6,9 +8,9 @@ import {
   TimeOptions,
 } from '../../common/components/view-params-editor/common.options';
 import { OptionTitle } from '../../common/components/view-params-editor/constants';
-import { useViewOptions } from '../../common/components/view-params-editor/useViewOptions';
 import { ViewOption } from '../../common/components/view-params-editor/viewParams.types';
 import { makeOptionsFromCustomFields } from '../../common/components/view-params-editor/viewParams.utils';
+import { PresetContext } from '../../common/context/PresetContext';
 import { isStringBoolean } from '../common/viewUtils';
 
 export const getTimelineOptions = (timeFormat: string, customFields: CustomFields): ViewOption[] => {
@@ -79,5 +81,13 @@ function getOptionsFromParams(searchParams: URLSearchParams, defaultValues?: URL
  * Hook exposes the timeline view options
  */
 export function useTimelineOptions(): TimelineOptions {
-  return useViewOptions(getOptionsFromParams);
+  const [searchParams] = useSearchParams();
+  const maybePreset = use(PresetContext);
+
+  const options = useMemo(() => {
+    const defaultValues = maybePreset ? new URLSearchParams(maybePreset.search) : undefined;
+    return getOptionsFromParams(searchParams, defaultValues);
+  }, [maybePreset, searchParams]);
+
+  return options;
 }

apps/client/src/views/timer/timer.options.ts

@@ -1,5 +1,7 @@
 import { CustomFields, OntimeEvent, TimerType } from 'ontime-types';
 import { validateTimerType } from 'ontime-utils';
+import { use, useMemo } from 'react';
+import { useSearchParams } from 'react-router';
 
 import type { SelectOption } from '../../common/components/select/Select';
 import {
@@ -10,9 +12,9 @@ import {
   TimeOptions,
 } from '../../common/components/view-params-editor/common.options';
 import { OptionTitle } from '../../common/components/view-params-editor/constants';
-import { useViewOptions } from '../../common/components/view-params-editor/useViewOptions';
 import { ViewOption } from '../../common/components/view-params-editor/viewParams.types';
 import { makeOptionsFromCustomFields } from '../../common/components/view-params-editor/viewParams.utils';
+import { PresetContext } from '../../common/context/PresetContext';
 import { isStringBoolean, makeColourString } from '../common/viewUtils';
 
 // manually match the properties of TimerType excluding the None
@@ -237,5 +239,13 @@ function getOptionsFromParams(searchParams: URLSearchParams, defaultValues?: URL
  * Hook exposes the timer view options
  */
 export function useTimerOptions(): TimerOptions {
-  return useViewOptions(getOptionsFromParams);
+  const [searchParams] = useSearchParams();
+  const maybePreset = use(PresetContext);
+
+  const options = useMemo(() => {
+    const defaultValues = maybePreset ? new URLSearchParams(maybePreset.search) : undefined;
+    return getOptionsFromParams(searchParams, defaultValues);
+  }, [maybePreset, searchParams]);
+
+  return options;
 }