starred/yaak-mountain-loop
1
0
Fork 0
mirror of https://github.com/mountain-loop/yaak.git synced 2026-03-30 06:02:00 +02:00
Code Issues 8 Packages Projects Releases 10 Wiki Activity

Optimize sidebar collapsing

Browse Source
This commit is contained in:
Gregory Schier
2024-12-23 05:05:04 -08:00
parent 61d094d9fd
commit 31f2bff0f6
35 changed files with 402 additions and 238 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
src-web/hooks/useKeyValue.ts
View File

@@ -1,9 +1,15 @@
import { useMutation, useQuery } from '@tanstack/react-query';
import { useMutation } from '@tanstack/react-query';
import type { KeyValue } from '@yaakapp-internal/models';
import { useAtomValue } from 'jotai';
import { atom } from 'jotai/index';
import { useCallback, useMemo } from 'react';
import { buildKeyValueKey, getKeyValue, setKeyValue } from '../lib/keyValueStore';
import { jotaiStore } from '../lib/jotai';
import { buildKeyValueKey, extractKeyValueOrFallback, setKeyValue } from '../lib/keyValueStore';
const DEFAULT_NAMESPACE = 'global';
export const keyValuesAtom = atom<KeyValue[]>([]);
export function keyValueQueryKey({
namespace = DEFAULT_NAMESPACE,
key,
@@ -23,44 +29,60 @@ export function useKeyValue<T extends object | boolean | number | string | null>
key: string | string[];
fallback: T;
}) {
const query = useQuery<T>({
queryKey: keyValueQueryKey({ namespace, key }),
queryFn: async () => getKeyValue({ namespace, key, fallback }),
refetchOnWindowFocus: false,
});
const keyValues = useAtomValue(keyValuesAtom);
const keyValue =
keyValues?.find((kv) => buildKeyValueKey(kv.key) === buildKeyValueKey(key)) ?? null;
const value = extractKeyValueOrFallback(keyValue, fallback);
const isLoading = keyValues == null;
const mutate = useMutation<void, unknown, T>({
const { mutateAsync } = useMutation<void, unknown, T>({
mutationKey: ['set_key_value', namespace, key],
mutationFn: (value) => setKeyValue<T>({ namespace, key, value }),
});
const set = useCallback(
async (value: ((v: T) => T) | T) => {
if (typeof value === 'function') {
await getKeyValue({ namespace, key, fallback }).then((kv) => {
const newV = value(kv);
if (newV === kv) return;
return mutate.mutateAsync(newV);
});
async (valueOrUpdate: ((v: T) => T) | T) => {
if (typeof valueOrUpdate === 'function') {
const newV = valueOrUpdate(value);
if (newV === value) return;
await mutateAsync(newV);
} else {
// TODO: Make this only update if the value is different. I tried this but it seems query.data
// is stale.
await mutate.mutateAsync(value);
await mutateAsync(valueOrUpdate);
}
},
// eslint-disable-next-line react-hooks/exhaustive-deps
[typeof key === 'string' ? key : key.join('::'), namespace],
[typeof key === 'string' ? key : key.join('::'), namespace, value],
);
const reset = useCallback(async () => mutate.mutateAsync(fallback), [mutate, fallback]);
const reset = useCallback(async () => mutateAsync(fallback), [fallback, mutateAsync]);
return useMemo(
() => ({
value: query.data,
isLoading: query.isLoading,
value,
isLoading,
set,
reset,
}),
[query.data, query.isLoading, reset, set],
[isLoading, reset, set, value],
);
}
export function getKeyValue<T extends object | boolean | number | string | null>({
namespace,
key,
fallback,
}: {
namespace?: 'global' | 'no_sync' | 'license';
key: string | string[];
fallback: T;
}) {
const keyValues = jotaiStore.get(keyValuesAtom);
const keyValue =
keyValues?.find(
(kv) => kv.namespace === namespace && buildKeyValueKey(kv.key) === buildKeyValueKey(key),
) ?? null;
const value = extractKeyValueOrFallback(keyValue, fallback);
return value;
}