Get rid of useModule in Appearence settings (#5143)

* Get rid of use modules

* fix eslint

Author: holiber

Diff for: app/components-react/shared/inputs/inputs.ts

@@ -329,6 +329,7 @@ export function useTextInput<
 }
 
 /**
+ * @deprecated use bindFormState instead
  * 2-way binding util for inputs
  *
  * @example
@@ -355,6 +356,37 @@ export function createBinding<TState extends object, TExtraProps extends object
   return createFormBinding(stateGetter, stateSetter, extraPropsGenerator).proxy;
 }
 
+type TFormBindings<TState, TExtraProps = {}> = {
+  [K in keyof TState]: {
+    name: K;
+    value: TState[K];
+    onChange: (newVal: TState[K]) => unknown;
+  };
+} &
+  TExtraProps;
+
+export function bindFormState<TFormState, TExtraProps = {}>(
+  getFormState: () => TFormState,
+  updateFormState: (statePatch: Partial<TFormState>) => unknown,
+  extraProps?: TExtraProps,
+) {
+  const formState = getFormState();
+  const result = {} as any;
+  for (const fieldName in formState) {
+    result[fieldName] = {
+      name: fieldName,
+      value: formState[fieldName],
+      onChange: (value: any) => {
+        updateFormState({ [fieldName]: value } as Partial<TFormState>);
+      },
+    };
+  }
+
+  extraProps ?? Object.assign(result, extraProps);
+
+  return result as TFormBindings<TFormState, TExtraProps>;
+}
+
 function createValidationRules(type: TInputType, inputProps: IInputCommonProps<unknown>) {
   const rules = inputProps.rules ? [...inputProps.rules] : [];
   if (inputProps.required) {

Diff for: app/components-react/windows/settings/Appearance.tsx

@@ -5,8 +5,6 @@ import { Row, Col, Select } from 'antd';
 import { CheckboxInput, ListInput, SliderInput, SwitchInput } from '../../shared/inputs';
 import { getDefined } from '../../../util/properties-type-guards';
 import { ObsSettingsSection } from './ObsSettings';
-import * as remote from '@electron/remote';
-import { injectFormBinding, useModule } from 'slap';
 import { ENavName, EMenuItemKey, IAppMenuItem, menuTitles } from 'services/side-nav';
 import { useVuex } from 'components-react/hooks';
 import styles from './Appearance.m.less';
@@ -16,6 +14,7 @@ import Scrollable from 'components-react/shared/Scrollable';
 import UltraIcon from 'components-react/shared/UltraIcon';
 import { CustomizationState } from 'services/customization';
 import { useRealmObject } from 'components-react/hooks/realm';
+import { bindFormState } from 'components-react/shared/inputs';
 
 const { Option } = Select;
 
@@ -33,17 +32,10 @@ export function AppearanceSettings() {
   // Hooks up reactivity for Customization state
   useRealmObject(CustomizationService.state);
 
-  const { bind } = useModule(() => {
-    function getSettings() {
-      return CustomizationService.state.toObject() as CustomizationState;
-    }
-
-    function setSettings(newSettings: CustomizationState) {
-      CustomizationService.actions.setSettings(newSettings as any);
-    }
-
-    return { bind: injectFormBinding(getSettings, setSettings) };
-  });
+  const bind = bindFormState(
+    () => CustomizationService.state.toObject() as CustomizationState,
+    (newSettings: CustomizationState) => CustomizationService.setSettings(newSettings as any),
+  );
 
   const {
     compactView,