anki/ts/sveltelib/asyncReactive.ts
Henrik Giesel 4cd60da7b8 Fix asyncReactive detection of loading
- Removed `success` store as it wouldn't work
- We should check for a value in error instead
2021-03-22 15:23:48 +01:00

50 lines
1.2 KiB
TypeScript

import { Readable, derived } from "svelte/store";
interface AsyncReativeData<T, E> {
value: Readable<T | null>;
error: Readable<E | null>;
loading: Readable<boolean>;
}
function useAsyncReactive<T, E>(
asyncFunction: () => Promise<T>,
dependencies: [Readable<unknown>, ...Readable<unknown>[]]
): AsyncReativeData<T, E> {
const promise = derived(
dependencies,
(_, set: (value: Promise<T> | null) => void) => set(asyncFunction()),
// initialize with null to avoid duplicate fetch on init
null
);
const value = derived(
promise,
($promise, set: (value: T) => void) => {
$promise?.then((value: T) => set(value));
},
null
);
const error = derived(
promise,
($promise, set: (error: E | null) => void) => {
$promise?.catch((error: E) => set(error));
return () => set(null);
},
null
);
const loading = derived(
promise,
($promise, set: (value: boolean) => void) => {
$promise?.finally(() => set(false));
return () => set(true);
},
true
);
return { value, error, loading };
}
export default useAsyncReactive;