pull/1991/head
LASER-Yi 2 years ago
parent 923bcb4382
commit 3a82ccf276

@ -1,10 +1,9 @@
import { uiPageSizeKey, usePageSize } from "@/utilities/storage";
import { uiPageSizeKey } from "@/utilities/storage";
import { FunctionComponent } from "react";
import { Layout, Section, Selector } from "../components";
import { pageSizeOptions } from "./options";
const SettingsUIView: FunctionComponent = () => {
const [pageSize] = usePageSize();
return (
<Layout name="Interface">
<Section header="UI">
@ -13,7 +12,7 @@ const SettingsUIView: FunctionComponent = () => {
options={pageSizeOptions}
location="storages"
settingKey={uiPageSizeKey}
settingOptions={{ onLoaded: () => pageSize }}
defaultValue={50}
></Selector>
</Section>
</Layout>

@ -39,7 +39,7 @@ const Layout: FunctionComponent<Props> = (props) => {
useOnValueChange(isRefetching, (value) => {
if (!value) {
form.reset();
form.setValues((values) => ({ ...values, settings: {} }));
}
});
@ -60,9 +60,11 @@ const Layout: FunctionComponent<Props> = (props) => {
const storagesToSubmit = { ...storages };
LOG("info", "submitting storages", storagesToSubmit);
updateStorage(storagesToSubmit);
form.setValues((values) => ({ ...values, storages: {} }));
}
},
[mutate, submitHooks, updateStorage]
[form, mutate, submitHooks, updateStorage]
);
const totalStagedCount = useMemo(() => {

@ -1,4 +1,4 @@
import { LOG } from "@/utilities/console";
import { ASSERT, LOG } from "@/utilities/console";
import { get, isNull, isUndefined, uniqBy } from "lodash";
import { useCallback, useMemo, useRef } from "react";
import {
@ -19,7 +19,7 @@ export interface BaseInput<T> {
export type SettingValueOptions<T> = {
original?: boolean;
defaultValue?: T;
onLoaded?: (settings: Settings) => T;
onLoaded?: (settings: Settings, storage: Storage) => T;
onSaved?: (value: T) => unknown;
onSubmit?: (value: T) => unknown;
};
@ -49,6 +49,11 @@ export function useSettingValue<T>(
options?: SettingValueOptions<T>
): Readonly<Nullable<T>> {
const settings = useSettings();
const storage = window.localStorage;
const isSettingsKey = useMemo(() => key.startsWith("settings"), [key]);
ASSERT(isSettingsKey === false && key.startsWith("storage"));
const optionsRef = useRef(options);
optionsRef.current = options;
@ -61,12 +66,20 @@ export function useSettingValue<T>(
if (onLoaded) {
LOG("info", `${key} is using custom loader`);
return onLoaded(settings);
return onLoaded(settings, storage);
}
const path = key.replaceAll("-", ".");
let value: Nullable<T> = null;
if (isSettingsKey) {
const path = key.replaceAll("-", ".");
const value = get({ settings }, path, null) as Nullable<T>;
value = get({ settings }, path, null) as Nullable<T>;
} else {
const storageValue = storage.getItem(key);
if (storageValue !== null) {
value = JSON.parse(storageValue);
}
}
if (defaultValue && (isNull(value) || isUndefined(value))) {
LOG("info", `${key} is falling back to`, defaultValue);
@ -75,7 +88,7 @@ export function useSettingValue<T>(
}
return value;
}, [key, settings]);
}, [isSettingsKey, key, settings, storage]);
const stagedValue = useStagedValues();

@ -34,4 +34,5 @@ export function GROUP(
}
}
export const ASSERT = console.assert;
// eslint-disable-next-line @typescript-eslint/no-empty-function
export const ASSERT = isProdEnv ? () => {} : console.assert;

@ -12,6 +12,18 @@ export function useUpdateLocalStorage() {
}, []);
}
export function getPageSize(storage: Storage): number {
const defaultValue = 50;
const value = storage.getItem(uiPageSizeKey);
if (value === null) {
return defaultValue;
}
return JSON.parse(value);
}
export function usePageSize() {
return useLocalStorage({ key: uiPageSizeKey, defaultValue: 50 });
}

Loading…
Cancel
Save