Fix #1872, refactor the settings builder
LASER-Yi
3 years ago
parent
d2b40bd781
commit
d9c334d43a
@ -1,86 +0,0 @@
|
|||||||
import { get, uniqBy } from "lodash";
|
|
||||||
import { useCallback, useMemo, useRef } from "react";
|
|
||||||
import { useFormActions, useStagedValues } from "../utilities/FormValues";
|
|
||||||
import { useSettings } from "../utilities/SettingsProvider";
|
|
||||||
|
|
||||||
export type OverrideFuncType<T> = (settings: Settings) => T;
|
|
||||||
|
|
||||||
export function useExtract<T>(
|
|
||||||
key: string,
|
|
||||||
override?: OverrideFuncType<T>
|
|
||||||
): Readonly<Nullable<T>> {
|
|
||||||
const settings = useSettings();
|
|
||||||
|
|
||||||
const overrideRef = useRef(override);
|
|
||||||
overrideRef.current = override;
|
|
||||||
|
|
||||||
const extractValue = useMemo(() => {
|
|
||||||
if (overrideRef.current) {
|
|
||||||
return overrideRef.current(settings);
|
|
||||||
}
|
|
||||||
|
|
||||||
const path = key.replaceAll("-", ".");
|
|
||||||
|
|
||||||
const value = get({ settings }, path, null) as Nullable<T>;
|
|
||||||
|
|
||||||
return value;
|
|
||||||
}, [key, settings]);
|
|
||||||
|
|
||||||
return extractValue;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function useSettingValue<T>(
|
|
||||||
key: string,
|
|
||||||
override?: OverrideFuncType<T>
|
|
||||||
): Readonly<Nullable<T>> {
|
|
||||||
const extractValue = useExtract<T>(key, override);
|
|
||||||
const stagedValue = useStagedValues();
|
|
||||||
if (key in stagedValue) {
|
|
||||||
return stagedValue[key] as T;
|
|
||||||
} else {
|
|
||||||
return extractValue;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export function useLatestArray<T>(
|
|
||||||
key: string,
|
|
||||||
compare: keyof T,
|
|
||||||
override?: OverrideFuncType<T[]>
|
|
||||||
): Readonly<Nullable<T[]>> {
|
|
||||||
const extractValue = useExtract<T[]>(key, override);
|
|
||||||
const stagedValue = useStagedValues();
|
|
||||||
|
|
||||||
let staged: T[] | undefined = undefined;
|
|
||||||
if (key in stagedValue) {
|
|
||||||
staged = stagedValue[key];
|
|
||||||
}
|
|
||||||
|
|
||||||
return useMemo(() => {
|
|
||||||
if (staged !== undefined && extractValue) {
|
|
||||||
return uniqBy([...staged, ...extractValue], compare);
|
|
||||||
} else {
|
|
||||||
return extractValue;
|
|
||||||
}
|
|
||||||
}, [extractValue, staged, compare]);
|
|
||||||
}
|
|
||||||
|
|
||||||
export function useUpdateArray<T>(key: string, compare: keyof T) {
|
|
||||||
const { setValue } = useFormActions();
|
|
||||||
const stagedValue = useStagedValues();
|
|
||||||
|
|
||||||
const staged: T[] = useMemo(() => {
|
|
||||||
if (key in stagedValue) {
|
|
||||||
return stagedValue[key];
|
|
||||||
} else {
|
|
||||||
return [];
|
|
||||||
}
|
|
||||||
}, [key, stagedValue]);
|
|
||||||
|
|
||||||
return useCallback(
|
|
||||||
(v: T) => {
|
|
||||||
const newArray = uniqBy([v, ...staged], compare);
|
|
||||||
setValue(newArray, key);
|
|
||||||
},
|
|
||||||
[staged, compare, setValue, key]
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -0,0 +1,123 @@
|
|||||||
|
import { LOG } from "@/utilities/console";
|
||||||
|
import { get, isNull, isUndefined, uniqBy } from "lodash";
|
||||||
|
import { useCallback, useEffect, useMemo, useRef } from "react";
|
||||||
|
import { submitHooks } from "../components";
|
||||||
|
import {
|
||||||
|
FormKey,
|
||||||
|
useFormActions,
|
||||||
|
useStagedValues,
|
||||||
|
} from "../utilities/FormValues";
|
||||||
|
import { useSettings } from "../utilities/SettingsProvider";
|
||||||
|
|
||||||
|
export interface BaseInput<T> {
|
||||||
|
disabled?: boolean;
|
||||||
|
settingKey: string;
|
||||||
|
location?: FormKey;
|
||||||
|
settingOptions?: SettingValueOptions<T>;
|
||||||
|
}
|
||||||
|
|
||||||
|
export type SettingValueOptions<T> = {
|
||||||
|
original?: boolean;
|
||||||
|
defaultValue?: T;
|
||||||
|
onLoaded?: (settings: Settings) => T;
|
||||||
|
onSaved?: (value: T) => unknown;
|
||||||
|
onSubmit?: (value: T) => unknown;
|
||||||
|
};
|
||||||
|
|
||||||
|
export function useBaseInput<T, V>(props: T & BaseInput<V>) {
|
||||||
|
const { settingKey, settingOptions, location, ...rest } = props;
|
||||||
|
// TODO: Opti options
|
||||||
|
const value = useSettingValue<V>(settingKey, settingOptions);
|
||||||
|
|
||||||
|
const { setValue } = useFormActions();
|
||||||
|
|
||||||
|
const update = useCallback(
|
||||||
|
(newValue: V | null) => {
|
||||||
|
const moddedValue =
|
||||||
|
(newValue && settingOptions?.onSaved?.(newValue)) ?? newValue;
|
||||||
|
|
||||||
|
setValue(moddedValue, settingKey, location);
|
||||||
|
},
|
||||||
|
[settingOptions, setValue, settingKey, location]
|
||||||
|
);
|
||||||
|
|
||||||
|
return { value, update, rest };
|
||||||
|
}
|
||||||
|
|
||||||
|
export function useSettingValue<T>(
|
||||||
|
key: string,
|
||||||
|
options?: SettingValueOptions<T>
|
||||||
|
): Readonly<Nullable<T>> {
|
||||||
|
const settings = useSettings();
|
||||||
|
|
||||||
|
const optionsRef = useRef(options);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const onSubmit = optionsRef.current?.onSubmit;
|
||||||
|
if (onSubmit) {
|
||||||
|
LOG("info", "Adding submit hook for", key);
|
||||||
|
submitHooks[key] = onSubmit;
|
||||||
|
}
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
if (key in submitHooks) {
|
||||||
|
LOG("info", "Removing submit hook for", key);
|
||||||
|
delete submitHooks[key];
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}, [key]);
|
||||||
|
|
||||||
|
const originalValue = useMemo(() => {
|
||||||
|
const onLoaded = optionsRef.current?.onLoaded;
|
||||||
|
const defaultValue = optionsRef.current?.defaultValue;
|
||||||
|
if (onLoaded) {
|
||||||
|
LOG("info", `${key} is using custom loader`);
|
||||||
|
|
||||||
|
return onLoaded(settings);
|
||||||
|
}
|
||||||
|
|
||||||
|
const path = key.replaceAll("-", ".");
|
||||||
|
|
||||||
|
const value = get({ settings }, path, null) as Nullable<T>;
|
||||||
|
|
||||||
|
if (defaultValue && (isNull(value) || isUndefined(value))) {
|
||||||
|
LOG("info", `${key} is falling back to`, defaultValue);
|
||||||
|
|
||||||
|
return defaultValue;
|
||||||
|
}
|
||||||
|
|
||||||
|
return value;
|
||||||
|
}, [key, settings]);
|
||||||
|
|
||||||
|
const stagedValue = useStagedValues();
|
||||||
|
|
||||||
|
if (key in stagedValue && optionsRef.current?.original !== true) {
|
||||||
|
return stagedValue[key] as T;
|
||||||
|
} else {
|
||||||
|
return originalValue;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export function useUpdateArray<T>(key: string, compare: keyof T) {
|
||||||
|
const { setValue } = useFormActions();
|
||||||
|
const stagedValue = useStagedValues();
|
||||||
|
|
||||||
|
const compareRef = useRef(compare);
|
||||||
|
compareRef.current = compare;
|
||||||
|
|
||||||
|
const staged: T[] = useMemo(() => {
|
||||||
|
if (key in stagedValue) {
|
||||||
|
return stagedValue[key];
|
||||||
|
} else {
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
}, [key, stagedValue]);
|
||||||
|
|
||||||
|
return useCallback(
|
||||||
|
(v: T) => {
|
||||||
|
const newArray = uniqBy([v, ...staged], compareRef.current);
|
||||||
|
setValue(newArray, key);
|
||||||
|
},
|
||||||
|
[staged, setValue, key]
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -0,0 +1,8 @@
|
|||||||
|
export const BaseUrlModification = (settings: Settings) =>
|
||||||
|
settings.general.base_url?.slice(1) ?? "";
|
||||||
|
|
||||||
|
export const SubzeroModification = (key: string) => (settings: Settings) =>
|
||||||
|
settings.general.subzero_mods?.includes(key) ?? false;
|
||||||
|
|
||||||
|
export const SubzeroColorModification = (settings: Settings) =>
|
||||||
|
settings.general.subzero_mods?.find((v) => v.startsWith("color")) ?? "";
|
||||||
Loading…
Reference in new issue