@inseefr/lunatic 3.8.0 → 3.8.1-rc.0

package/src/components/Suggester/Suggester.tsx

@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react';
 import type { LunaticComponentProps } from '../type';
 import { CustomSuggester } from './CustomSuggester';
 import { getComponentErrors } from '../shared/ComponentErrors/ComponentErrors';
-import { OTHER_VALUE, useSuggestions } from './useSuggestions';
+import { OTHER_VALUE, useStore, useSuggestions } from './useSuggestions';
 import D from '../../i18n';
 import type { SuggesterOptionType } from './SuggesterType';
 
@@ -36,6 +36,10 @@ export function WrappedSuggester({
 	arbitrary,
 	arbitraryValue,
 }: LunaticComponentProps<'Suggester'>) {
+	const { store, storeState, setStoreState, getLabelById } = useStore({
+		storeName,
+	});
+
 	// Default options should not change between render
 	// so we can break the rule of hooks here
 	const computeSelectedOptions = (): [SuggesterOptionType] | [] => {
@@ -47,7 +51,7 @@ export function WrappedSuggester({
 		}
 		const labelResponse = optionResponses?.find((o) => o.attribute === 'label');
 		if (!labelResponse) {
-			return [{ id: value, label: value, value: value }];
+			return [{ id: value, label: getLabelById(value), value: value }];
 		}
 		const label = executeExpression(
 			{ value: labelResponse.name, type: 'VTL' },
@@ -73,7 +77,9 @@ export function WrappedSuggester({
 
 	const { state, options, search, setSearch, onFocus, onBlur } = useSuggestions(
 		{
-			storeName: storeName,
+			store,
+			storeState,
+			setStoreState,
 			allowArbitrary: !!arbitrary,
 			selectedOptions: selectedOptions,
 		}
@@ -110,7 +116,7 @@ export function WrappedSuggester({
 			{ name: response.name, value: null },
 		];
 		// User chose an arbitrary option or clear the value
-		if (arbitrary && arbitrary.response) {
+		if (arbitrary?.response) {
 			newResponses.push({
 				name: arbitrary.response.name,
 				value: v?.id === OTHER_VALUE ? search : null,
@@ -145,11 +151,18 @@ export function WrappedSuggester({
 		setSearch('');
 	};
 
-	// Fix display issue (when handleChanges is called outside this component (in management mode, return to FORCED value by example) )
-	// We have to re-compute actual selection
 	useEffect(() => {
-		if (value) {
-			setSelectedOptions(computeSelectedOptions());
+		// Fix display issue (when handleChanges is called outside this component (in management mode, return to FORCED value by example)
+		// "value" does'nt match selectedOption's "id"
+		if (value && selectedOptions[0]?.id !== value) {
+			const actualSelection = computeSelectedOptions();
+			const selectedOptionsWithLabel = [
+				{
+					...actualSelection[0],
+					label: getLabelById(actualSelection[0]?.id),
+				},
+			] as [SuggesterOptionType];
+			setSelectedOptions(selectedOptionsWithLabel);
 		}
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [value]);

package/src/components/Suggester/useSuggestions.ts

@@ -1,11 +1,16 @@
 import { useEffect, useState } from 'react';
 import type { SuggesterOptionType } from './SuggesterType';
 import { useEffectDebounced } from '../../hooks/useDebounce';
-import { getSearchForStore } from '../../utils/search/SuggestersDatabase';
+import {
+	getSearchForStore,
+	SearchStore,
+} from '../../utils/search/SuggestersDatabase';
 import { useRefSync } from '../../hooks/useRefSync';
 
 type Props = {
-	storeName: string;
+	store: SearchStore;
+	storeState: State;
+	setStoreState: (s: State) => any;
 	selectedOptions: SuggesterOptionType[];
 	allowArbitrary: boolean;
 };
@@ -14,20 +19,13 @@ export const OTHER_VALUE = 'OTHER';
 
 type State = 'success' | 'loading' | 'error';
 
-export function useSuggestions({
-	storeName,
-	selectedOptions,
-	allowArbitrary,
-}: Props) {
-	const [searchQuery, setSearchQuery] = useState('');
+export function useStore({ storeName }: { storeName: string }) {
 	const store = getSearchForStore(storeName);
 	const searchIndexRef = useRefSync(store.index);
-	// eslint-disable-next-line prefer-const
-	let [options, setOptions] = useState(selectedOptions);
 	const [state, setState] = useState<State>(
 		store.error !== null
 			? 'error'
-			: store.search.isIndexed()
+			: store?.search.isIndexed()
 				? 'success'
 				: 'loading'
 	);
@@ -47,19 +45,42 @@ export function useSuggestions({
 			});
 	}, [searchIndexRef]);
 
+	return {
+		store,
+		storeState: state,
+		setStoreState: setState,
+		getLabelById: (id: any) => {
+			if (!id) return '';
+			return store.search?.getFieldsById(id).label ?? '';
+		},
+	};
+}
+
+export function useSuggestions({
+	store,
+	storeState: state,
+	setStoreState: setState,
+	selectedOptions,
+	allowArbitrary,
+}: Props) {
+	const [searchQuery, setSearchQuery] = useState('');
+	// eslint-disable-next-line prefer-const
+	let [options, setOptions] = useState(selectedOptions);
+
 	useEffectDebounced(
 		() => {
 			// Do not reset search for empty search
 			if (!searchQuery) {
 				return;
 			}
-			store.search
-				?.search(searchQuery)
-				.then((r) => {
-					setOptions(r);
-					setState('success');
-				})
-				.catch(() => setState('error'));
+			if (store.error === null)
+				store.search
+					?.search(searchQuery)
+					.then((r) => {
+						setOptions(r);
+						setState('success');
+					})
+					.catch(() => setState('error'));
 		},
 		[searchQuery],
 		300

package/src/utils/search/SearchInterface.ts

@@ -14,4 +14,6 @@ export interface SearchInterface<T extends IndexEntry> {
 	index(data: T[]): Promise<void>;
 
 	search(q: string): Promise<T[]>;
+
+	getFieldsById(id: any): T;
 }

package/src/utils/search/SearchMinisearch.ts

@@ -51,4 +51,11 @@ export class SearchMinisearch<T extends IndexEntry>
 
 		return data;
 	}
+
+	getFieldsById(id: any) {
+		if (!this.db) {
+			return {} as T;
+		}
+		return this.db.getStoredFields(id) as T;
+	}
 }

package/src/utils/search/SuggestersDatabase.ts

@@ -23,6 +23,16 @@ export function registerSuggesters(
 	}
 }
 
+export type SearchStore =
+	| {
+			error: string;
+	  }
+	| {
+			error?: null;
+			search: SearchInterface<IndexEntry>;
+			index: () => Promise<void>;
+	  };
+
 export function getSearchForStore(storeName: string) {
 	const search = suggesters.get(storeName);
 	if (!search) {