Files
directus/app/src/hydrate.ts
Azri Kahar 1c93cc661e Reduce translate function calls in the App (#16038)
* translate fields during hydration

* patch untranslated raw values on field edit

* simplify/remove existing translate usages

* minor codestyle

* translate field note and validation_message

* stub api call in fleld-detail store test

* skip fields translation before user locale sets in

* optimize hydration calls

* use translateLiteral for note & validation_message

* cherry pick field meta properties to patch

* reduce setLanguage calls & settings requests

* settings store test & type update

* tweak variable casing

* test server store & fix existing type/ref issues

* update fields store test for skipTranslation

* fix render-display merge

* await field update before opening drawer

* fetch meta at the end to load relationships first

* add loading state to prevent editing some fields

Co-authored-by: Rijk van Zanten <rijkvanzanten@me.com>
Co-authored-by: Brainslug <br41nslug@users.noreply.github.com>
2022-11-30 13:33:31 +01:00

111 lines
3.2 KiB
TypeScript

import { setLanguage } from '@/lang/set-language';
import { getBasemapSources } from '@/utils/geometry/basemap';
import { useAppStore } from '@/stores/app';
import { useCollectionsStore } from '@/stores/collections';
import { useFieldsStore } from '@/stores/fields';
import { useLatencyStore } from '@/stores/latency';
import { useInsightsStore } from '@/stores/insights';
import { useFlowsStore } from '@/stores/flows';
import { usePermissionsStore } from '@/stores/permissions';
import { usePresetsStore } from '@/stores/presets';
import { useRelationsStore } from '@/stores/relations';
import { useRequestsStore } from '@/stores/requests';
import { useServerStore } from '@/stores/server';
import { useSettingsStore } from '@/stores/settings';
import { useUserStore } from '@/stores/user';
import { useNotificationsStore } from '@/stores/notifications';
import { useTranslationStrings } from '@/composables/use-translation-strings';
import { onDehydrateExtensions, onHydrateExtensions } from './extensions';
type GenericStore = {
$id: string;
hydrate?: () => Promise<void>;
dehydrate?: () => Promise<void>;
[key: string]: any;
};
export function useStores(
stores = [
useCollectionsStore,
useFieldsStore,
useUserStore,
useRequestsStore,
usePresetsStore,
useSettingsStore,
useServerStore,
useLatencyStore,
useRelationsStore,
usePermissionsStore,
useInsightsStore,
useFlowsStore,
useNotificationsStore,
]
): GenericStore[] {
return stores.map((useStore) => useStore()) as GenericStore[];
}
export async function hydrate(): Promise<void> {
const stores = useStores();
const appStore = useAppStore();
const userStore = useUserStore();
const serverStore = useServerStore();
const permissionsStore = usePermissionsStore();
const fieldsStore = useFieldsStore();
const { loadParsedTranslationStrings } = useTranslationStrings();
if (appStore.hydrated) return;
if (appStore.hydrating) return;
appStore.hydrating = true;
try {
/**
* @NOTE
* Multiple stores rely on the userStore to be set, so they can fetch user specific data. The
* following makes sure that the user store is always fetched first, before we hydrate anything
* else.
*/
await userStore.hydrate();
let lang = 'en-US';
if (serverStore.info?.project?.default_language) lang = serverStore.info.project.default_language;
if (userStore.currentUser?.language) lang = userStore.currentUser?.language;
if (userStore.currentUser?.role) {
await Promise.all([permissionsStore.hydrate(), fieldsStore.hydrate({ skipTranslation: true })]);
const hydratedStores = ['userStore', 'permissionsStore', 'fieldsStore'];
await Promise.all(stores.filter(({ $id }) => !hydratedStores.includes($id)).map((store) => store.hydrate?.()));
await onHydrateExtensions();
}
loadParsedTranslationStrings();
await setLanguage(lang);
appStore.basemap = getBasemapSources()[0].name;
} catch (error: any) {
appStore.error = error;
} finally {
appStore.hydrating = false;
}
appStore.hydrated = true;
}
export async function dehydrate(stores = useStores()): Promise<void> {
const appStore = useAppStore();
if (appStore.hydrated === false) return;
for (const store of stores) {
await store.dehydrate?.();
}
await onDehydrateExtensions();
appStore.hydrated = false;
}