@inseefr/lunatic 0.2.0-experimental → 0.2.0-prisme

package/src/utils/to-expose/hooks/lunatic.js

@@ -1,191 +1,284 @@
-import { useState, useEffect, useCallback } from 'react';
-import { mergeQuestionnaireAndData } from '../init-questionnaire';
-import { getBindings } from '../state';
-import { updateQuestionnaire } from '../handler';
-import { getPage, FLOW_NEXT, FLOW_PREVIOUS } from '../../lib';
-import { COLLECTED } from '../../../constants';
-import { useFilterComponents } from './filter-components';
-import { loadSuggesters } from '../../store-tools/auto-load';
-
-const useLunatic = (
-	source,
-	data,
-	{
-		savingType = COLLECTED,
-		preferences = [COLLECTED],
-		features = ['VTL'],
-		management = false,
-		pagination = false,
-		initialPage = '1',
-		logFunction = null,
-		autoSuggesterLoading = false,
-		suggesterFetcher,
-		suggesters,
-	}
-) => {
-	const [initPage, setInitPage] = useState(false);
-	const featuresWithoutMD = features.filter((f) => f !== 'MD');
-	const [questionnaire, setQuestionnaire] = useState(() =>
-		mergeQuestionnaireAndData(source)(data || {})
-	);
-	const bindings = getBindings(questionnaire);
-	const [page, setPage] = useState(initialPage);
-
-	const [todo, setTodo] = useState({});
-
-	const components = useFilterComponents({
-		questionnaire,
-		management,
-		bindings,
-		features: featuresWithoutMD,
-		page,
-		pagination,
-		todo,
-	});
-
-	const { suggesters: suggesterStrategy } = source;
-
-	useEffect(() => {
-		const init = async () => {
-			if (
-				autoSuggesterLoading &&
-				typeof suggesters === 'object' &&
-				Object.values(suggesters).length > 0
-			) {
-				// Merge suggester urls & suggester fields contained into lunatic json
-				const s = Object.entries(suggesterStrategy).reduce((acc, [name, d]) => {
-					if (suggesters[name]?.url)
-						return {
-							...acc,
-							[name]: {
-								...d,
-								url: suggesters[name].url,
-								stopWords: suggesters[name].stopWords,
-							},
-						};
-					return acc;
-				}, {});
-				loadSuggesters(suggesterFetcher)(s);
-			}
-		};
-		init();
-	}, [autoSuggesterLoading, suggesterFetcher, suggesters, suggesterStrategy]);
-
-	const [flow, setFlow] = useState(FLOW_NEXT);
-
-	// TODO: dynamic because of filters (kind of last accessible page)
-	const { maxPage } = source;
-
-	const isFirstPage = page === '1';
-	const isLastPage = page === maxPage;
-
-	// First param is the onClick event, useless for us but we have to keep it safe into
-	// function signature to avoid confusing with customBindings
-	const goNext = (_, customBindings) => {
-		if (!isLastPage) {
-			if (flow !== FLOW_NEXT) {
-				setFlow(FLOW_NEXT);
-			}
-			const nextPage = getPage({
-				components: questionnaire.components,
-				bindings: customBindings || bindings,
-				currentPage: page,
-				features: featuresWithoutMD,
-				flow: FLOW_NEXT,
-				management,
-			});
-			setPage(nextPage);
-		}
-	};
-
-	const goPrevious = () => {
-		if (!isFirstPage) {
-			if (flow !== FLOW_PREVIOUS) {
-				setFlow(FLOW_PREVIOUS);
-			}
-			const previousPage = getPage({
-				components: questionnaire.components,
-				bindings,
-				currentPage: page,
-				features: featuresWithoutMD,
-				flow: FLOW_PREVIOUS,
-				management,
-			});
-			setPage(previousPage);
-		}
-	};
-
-	useEffect(() => {
-		if (!initPage && components && components.length === 0)
-			// no component for initialPage, get next page
-			setPage(
-				getPage({
-					components: questionnaire.components,
-					bindings: bindings,
-					currentPage: page,
-					features: featuresWithoutMD,
-					flow: FLOW_NEXT,
-					management,
-				})
-			);
-		else if (!initPage && components && components.length > 0)
-			// initialPage is correct, end of initPage
-			setInitPage(true);
-	}, [
-		initPage,
-		components,
-		questionnaire.components,
-		bindings,
-		page,
-		featuresWithoutMD,
-		management,
-	]);
-
-	const handleChange = useCallback((updatedValue) => {
-		setTodo((t) => ({ ...t, ...updatedValue }));
-	}, []);
-
-	// Assume we only want to handle source update
-	useEffect(() => {
-		setQuestionnaire(mergeQuestionnaireAndData(source)(data));
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [source]);
-
-	useEffect(() => {
-		if (Object.keys(todo).length !== 0) {
-			const newQ = updateQuestionnaire(savingType)(questionnaire)(
-				preferences,
-				logFunction
-			)(todo);
-			setQuestionnaire(newQ);
-			setTodo({});
-		}
-	}, [
-		todo,
-		preferences,
-		logFunction,
-		questionnaire,
-		savingType,
-		features,
-		management,
-	]);
-
-	return {
-		questionnaire,
-		handleChange,
-		components,
-		bindings,
-		pagination: {
-			page,
-			setPage,
-			maxPage,
-			goNext,
-			goPrevious,
-			isFirstPage,
-			isLastPage,
-			flow,
-		},
-	};
-};
-
-export default useLunatic;
+import { useState, useEffect, useCallback } from 'react';
+import { mergeQuestionnaireAndData } from '../init-questionnaire';
+import { getBindings } from '../state';
+import { updateQuestionnaire, updateExternals } from '../handler';
+import {
+	getPage,
+	FLOW_NEXT,
+	FLOW_PREVIOUS,
+	getControls,
+	isDev,
+} from '../../lib';
+import { COLLECTED } from '../../../constants';
+import { useFilterComponents } from './filter-components';
+import { loadSuggesters } from '../../store-tools/auto-load';
+
+const defaultData = {};
+const defaultPreferences = [COLLECTED];
+const defaultFeatures = ['VTL'];
+
+const useLunatic = (
+	source,
+	data = defaultData,
+	{
+		savingType = COLLECTED,
+		preferences = defaultPreferences,
+		features = defaultFeatures,
+		management = false,
+		pagination = false,
+		modalForControls = false,
+		initialPage = '1',
+		logFunction = null,
+		autoSuggesterLoading = false,
+		suggesterFetcher,
+		suggesters,
+	}
+) => {
+	if (isDev) {
+		console.log('useLunatic');
+		var start = new Date().getTime();
+	}
+	const [initPage, setInitPage] = useState(false);
+	const featuresWithoutMD = features.filter((f) => f !== 'MD');
+	const [questionnaire, setQuestionnaire] = useState(() =>
+		mergeQuestionnaireAndData(source)(data || {})
+	);
+	const [bindings, setBindings] = useState(() => getBindings(questionnaire));
+
+	const [page, setPage] = useState(initialPage);
+
+	const [todo, setTodo] = useState({});
+	const [todoExternals, setTodoExternals] = useState({});
+
+	const [modalContent, setModalContent] = useState(null);
+
+	const [components, setComponents] = useState([]);
+
+	const [cache, setCache] = useState({});
+	const [memoryTodo, setMemoryTodo] = useState({});
+
+	const { components: newComponents, todo: newTodo } = useFilterComponents({
+		questionnaire,
+		management,
+		bindings,
+		features: featuresWithoutMD,
+		page,
+		pagination,
+		todo: { ...todo, ...todoExternals },
+		cache,
+		setCache,
+		memoryTodo,
+	});
+
+	useEffect(() => {
+		if (newComponents) setComponents(newComponents);
+		if (newTodo) setMemoryTodo(newTodo);
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [questionnaire, bindings, todo, todoExternals]);
+
+	const { suggesters: suggestersToLoad } = source;
+
+	useEffect(() => {
+		const init = async () => {
+			if (
+				autoSuggesterLoading &&
+				typeof suggesters === 'object' &&
+				Object.values(suggesters).length > 0
+			) {
+				const s = suggestersToLoad.reduce(function (current, storeInfo) {
+					const { name } = storeInfo;
+					if (!suggesters[name]) return current;
+					return {
+						...current,
+						[name]: {
+							...storeInfo,
+							url: suggesters[name].url,
+							stopWords: suggesters[name].stopWords,
+						},
+					};
+				}, {});
+				loadSuggesters(suggesterFetcher)(s);
+			}
+		};
+		init();
+	}, [autoSuggesterLoading, suggesterFetcher, suggesters, suggestersToLoad]);
+
+	const [flow, setFlow] = useState(FLOW_NEXT);
+
+	// TODO: dynamic because of filters (kind of last accessible page)
+	const { maxPage } = source;
+
+	const isFirstPage = page === '1';
+	const isLastPage = page === maxPage;
+
+	// First param is the onClick event, useless for us but we have to keep it safe into
+	// function signature to avoid confusing with customBindings
+	const goNext = (_, customBindings) => {
+		if (!isLastPage) {
+			if (flow !== FLOW_NEXT) {
+				setFlow(FLOW_NEXT);
+			}
+			const nextPage = getPage({
+				components: questionnaire.components,
+				bindings: customBindings || bindings,
+				currentPage: page,
+				featuresWithoutMD,
+				flow: FLOW_NEXT,
+				management,
+			});
+			if (modalForControls) {
+				const controls = getControls({
+					page,
+					features: featuresWithoutMD,
+					components,
+					bindings,
+					preferences,
+				});
+				if (controls.length > 0) setModalContent({ page: nextPage, controls });
+				else setPage(nextPage);
+			} else setPage(nextPage);
+		}
+	};
+
+	const goPrevious = () => {
+		if (!isFirstPage) {
+			if (flow !== FLOW_PREVIOUS) {
+				setFlow(FLOW_PREVIOUS);
+			}
+			const previousPage = getPage({
+				components: questionnaire.components,
+				bindings,
+				currentPage: page,
+				featuresWithoutMD,
+				flow: FLOW_PREVIOUS,
+				management,
+			});
+			if (modalForControls) {
+				const controls = getControls({
+					page,
+					features: featuresWithoutMD,
+					components,
+					bindings,
+					preferences,
+				});
+				if (controls.length > 0)
+					setModalContent({ page: previousPage, controls });
+				else setPage(previousPage);
+			} else setPage(previousPage);
+		}
+	};
+
+	useEffect(() => {
+		if (!initPage && components && components.length === 0)
+			// no component for initialPage, get next page
+			setPage(
+				getPage({
+					components: questionnaire.components,
+					bindings: bindings,
+					currentPage: page,
+					features: featuresWithoutMD,
+					flow: FLOW_NEXT,
+					management,
+				})
+			);
+		else if (!initPage && components && components.length > 0)
+			// initialPage is correct, end of initPage
+			setInitPage(true);
+	}, [
+		initPage,
+		components,
+		questionnaire.components,
+		bindings,
+		page,
+		featuresWithoutMD,
+		management,
+	]);
+
+	const handleChange = useCallback((updatedValue) => {
+		setTodo((t) => ({ ...t, ...updatedValue }));
+	}, []);
+
+	const handleExternals = useCallback((externals) => {
+		setTodoExternals((t) => ({ ...t, ...externals }));
+	}, []);
+
+	// Assume we only want to handle source update
+	useEffect(() => {
+		setQuestionnaire(mergeQuestionnaireAndData(source)(data));
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [source]);
+
+	useEffect(() => {
+		if (Object.keys(todo).length !== 0) {
+			const newQ = updateQuestionnaire(savingType)(questionnaire)(
+				preferences,
+				logFunction
+			)(todo);
+			setBindings(getBindings(newQ));
+			setQuestionnaire(newQ);
+			setTodo({});
+		}
+	}, [
+		todo,
+		preferences,
+		logFunction,
+		questionnaire,
+		savingType,
+		features,
+		management,
+	]);
+
+	useEffect(() => {
+		if (Object.keys(todoExternals).length !== 0) {
+			const newQ = updateExternals(questionnaire)(logFunction, preferences)(
+				todoExternals
+			);
+			setBindings(getBindings(newQ));
+			setQuestionnaire(newQ);
+			setTodoExternals({});
+		}
+	}, [todoExternals, logFunction, questionnaire, preferences]);
+
+	const cancelModal = () => {
+		setModalContent(null);
+	};
+
+	const validateModal = () => {
+		setPage(modalContent.page);
+		setModalContent(null);
+	};
+
+	const componentsToDiplay =
+		pagination && modalContent
+			? [
+					{
+						componentType: 'Modal',
+						controls: modalContent.controls,
+						validateModal,
+						cancelModal,
+					},
+					...components,
+			  ]
+			: components;
+
+	if (isDev) console.log(`End useLunatic: ${new Date().getTime() - start} ms`);
+
+	return {
+		questionnaire,
+		handleChange,
+		handleExternals,
+		components: componentsToDiplay,
+		bindings,
+		pagination: {
+			page,
+			maxPage,
+			goNext,
+			goPrevious,
+			isFirstPage,
+			isLastPage,
+			setPage,
+		},
+	};
+};
+
+export default useLunatic;

package/src/utils/to-expose/hooks/use-document-add-event-listener.js

@@ -1,63 +1,63 @@
-import { useEffect } from 'react';
-
-const CALLBACKS = {};
-
-function getSignature(event, options = {}) {
-	return Object.entries(options).reduce(function (a, [k, v]) {
-		return `${a}-${k}-${v}`;
-	}, event);
-}
-
-function createListener(event, options) {
-	const signature = getSignature(event, options);
-	const listener = function (e) {
-		if (signature in CALLBACKS) {
-			const { callbacks } = CALLBACKS[signature];
-			callbacks.forEach(function (c) {
-				c(e);
-			});
-		}
-	};
-	document.addEventListener(event, listener, options);
-	return listener;
-}
-
-function unmount(event, callback, options) {
-	const signature = getSignature(event, options);
-	if (signature in CALLBACKS) {
-		const { listener, callbacks } = CALLBACKS[signature];
-		const index = callbacks.indexOf(callback);
-		CALLBACKS[signature].callbacks.splice(index, 1);
-		if (CALLBACKS[signature].callbacks.length === 0) {
-			delete CALLBACKS[signature];
-			document.removeEventListener(event, listener);
-		}
-	}
-}
-
-function mount(event, callback, options) {
-	const signature = getSignature(event, options);
-	if (!(signature in CALLBACKS)) {
-		const listener = createListener(event, options);
-		CALLBACKS[signature] = { listener, callbacks: [callback] };
-	} else {
-		CALLBACKS[signature] = {
-			...CALLBACKS[signature],
-			callbacks: [...CALLBACKS[signature].callbacks, callback],
-		};
-	}
-}
-
-function useDocumentAddEventListener(event, callback, options) {
-	useEffect(
-		function () {
-			mount(event, callback, options);
-			return function () {
-				unmount(event, callback, options);
-			};
-		},
-		[event, callback, options]
-	);
-}
-
-export default useDocumentAddEventListener;
+import { useEffect } from 'react';
+
+const CALLBACKS = {};
+
+function getSignature(event, options = {}) {
+	return Object.entries(options).reduce(function (a, [k, v]) {
+		return `${a}-${k}-${v}`;
+	}, event);
+}
+
+function createListener(event, options) {
+	const signature = getSignature(event, options);
+	const listener = function (e) {
+		if (signature in CALLBACKS) {
+			const { callbacks } = CALLBACKS[signature];
+			callbacks.forEach(function (c) {
+				c(e);
+			});
+		}
+	};
+	document.addEventListener(event, listener, options);
+	return listener;
+}
+
+function unmount(event, callback, options) {
+	const signature = getSignature(event, options);
+	if (signature in CALLBACKS) {
+		const { listener, callbacks } = CALLBACKS[signature];
+		const index = callbacks.indexOf(callback);
+		CALLBACKS[signature].callbacks.splice(index, 1);
+		if (CALLBACKS[signature].callbacks.length === 0) {
+			delete CALLBACKS[signature];
+			document.removeEventListener(event, listener);
+		}
+	}
+}
+
+function mount(event, callback, options) {
+	const signature = getSignature(event, options);
+	if (!(signature in CALLBACKS)) {
+		const listener = createListener(event, options);
+		CALLBACKS[signature] = { listener, callbacks: [callback] };
+	} else {
+		CALLBACKS[signature] = {
+			...CALLBACKS[signature],
+			callbacks: [...CALLBACKS[signature].callbacks, callback],
+		};
+	}
+}
+
+function useDocumentAddEventListener(event, callback, options) {
+	useEffect(
+		function () {
+			mount(event, callback, options);
+			return function () {
+				unmount(event, callback, options);
+			};
+		},
+		[event, callback, options]
+	);
+}
+
+export default useDocumentAddEventListener;

package/src/utils/to-expose/index.js

@@ -1,11 +1,11 @@
-// updateQuestionnaire is useless since 2.0 optimization efforts
-// export { updateQuestionnaire } from './handler';
-export { mergeQuestionnaireAndData } from './init-questionnaire';
-export {
-	getState,
-	getCollectedState,
-	getCollectedStateByValueType,
-	getBindings,
-} from './state';
-export { interpret } from './interpret';
-export { default as useLunatic } from './hooks';
+// updateQuestionnaire is useless since 2.0 optimization efforts
+// export { updateQuestionnaire } from './handler';
+export { mergeQuestionnaireAndData } from './init-questionnaire';
+export {
+	getState,
+	getCollectedState,
+	getCollectedStateByValueType,
+	getBindings,
+} from './state';
+export { interpret } from './interpret';
+export { useLunatic, useLunaticSplit } from './hooks';

package/src/utils/to-expose/interpret/index.js

@@ -1 +1 @@
-export * from './main';
+export * from './main';

package/src/utils/to-expose/interpret/main.js

@@ -1,16 +1,16 @@
-import { interpretVTL } from './vtl';
-import { interpretMD } from './md';
-
-export const interpret =
-	(features, logFunction) => (bindings) => (expression) => {
-		if (!expression) return '';
-		if (!Array.isArray(features)) return expression;
-		if (features.includes('VTL')) {
-			const vtl = interpretVTL(bindings)(expression);
-			if (features.includes('MD')) {
-				return interpretMD(vtl)(logFunction);
-			}
-			return vtl;
-		}
-		return expression;
-	};
+import { interpretVTL } from './vtl';
+import { interpretMD } from './md';
+
+export const interpret =
+	(features, logFunction) => (bindings) => (expression) => {
+		if (!expression) return '';
+		if (!Array.isArray(features)) return expression;
+		if (features.includes('VTL')) {
+			const vtl = interpretVTL(bindings)(expression);
+			if (features.includes('MD')) {
+				return interpretMD(vtl)(logFunction);
+			}
+			return vtl;
+		}
+		return expression;
+	};