@inseefr/lunatic 0.2.61 → 0.3.1-experimental

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

@@ -0,0 +1,249 @@
+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 } 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,
+		modalForControls = 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 [todoExternals, setTodoExternals] = useState({});
+
+	const [modalContent, setModalContent] = useState(null);
+
+	const components = useFilterComponents({
+		questionnaire,
+		management,
+		bindings,
+		features: featuresWithoutMD,
+		page,
+		pagination,
+		todo: { ...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);
+			setQuestionnaire(newQ);
+			setTodo({});
+		}
+	}, [
+		todo,
+		preferences,
+		logFunction,
+		questionnaire,
+		savingType,
+		features,
+		management,
+	]);
+
+	useEffect(() => {
+		if (Object.keys(todoExternals).length !== 0) {
+			const newQ = updateExternals(questionnaire)(logFunction)(todoExternals);
+			setQuestionnaire(newQ);
+			setTodoExternals({});
+		}
+	}, [todoExternals, logFunction, questionnaire]);
+
+	const cancelModal = () => {
+		setModalContent(null);
+	};
+
+	const validateModal = () => {
+		setPage(modalContent.page);
+		setModalContent(null);
+	};
+
+	const componentsToDiplay =
+		pagination && modalContent
+			? [
+					{
+						componentType: 'Modal',
+						controls: modalContent.controls,
+						validateModal,
+						cancelModal,
+					},
+					...components,
+			  ]
+			: components;
+
+	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

@@ -0,0 +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;

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

@@ -1,3 +1,11 @@
-export { updateQuestionnaire } from './handler';
-export { mergeQuestionnaireAndData } from './init-questionnaire';
-export { getState } from './state';
+// 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';

package/src/utils/to-expose/init-questionnaire.js

@@ -1,47 +1,164 @@
-export const mergeQuestionnaireAndData = questionnaire => data => {
-	if (!questionnaire || !questionnaire.components || !data)
-		return questionnaire || {};
-	const { components, ...props } = questionnaire;
-	const filledComponents = components.reduce((_, component) => {
-		const { response, componentType } = component;
-		if (response) return [..._, mergeSimpleComponentAndData(component)(data)];
-		else if (componentType === 'CheckboxGroup')
-			return [..._, mergeCheckboxGroupAndData(component)(data)];
-		else if (componentType === 'Table')
-			return [..._, mergeTableAndData(component)(data)];
-		else return [..._, component];
-	}, []);
-	return { ...props, components: filledComponents };
+import * as C from '../../constants';
+import { getCalculatedVariables } from './calculated-variables';
+import { isDev } from '../lib';
+
+const INITIAL_DEPTH = 1;
+
+export const mergeQuestionnaireAndData = (questionnaire) => (data) => {
+	if (!questionnaire || !questionnaire.components) return {};
+	if (questionnaire.components.length === 0) return questionnaire;
+	const { components, variables, ...props } = questionnaire;
+
+	const vars = buildVars(data || {})(variables);
+	const filledComponents = buildFilledComponents(vars[C.COLLECTED])(components)(
+		INITIAL_DEPTH
+	);
+
+	return { ...props, components: filledComponents, variables: vars };
+};
+
+const buildVars = (data) => (variables) => {
+	if (!Array.isArray(variables)) return {};
+
+	if (isDev) {
+		console.log('Start init vars');
+		var start = new Date().getTime();
+	}
+
+	const { COLLECTED: collectedData } = data;
+	const collected = variables
+		.filter(({ variableType }) => variableType === C.COLLECTED)
+		.reduce((acc, { values, name, componentRef }) => {
+			const d = (collectedData && collectedData[name]) || {};
+			return {
+				...acc,
+				[name]: {
+					componentRef,
+					values: { ...values, ...d },
+				},
+			};
+		}, {});
+	const EXTERNAL = variables
+		.filter(({ variableType }) => variableType === C.EXTERNAL)
+		.reduce((_, v) => ({ ..._, ...initExternalVariable(v)(data) }), {});
+	const bindings = Object.entries({ ...collected, ...EXTERNAL }).reduce(
+		(acc, [k, v]) => {
+			if (!v?.values)
+				return {
+					...acc,
+					[k]: v,
+				};
+			return {
+				...acc,
+				[k]: v.values[C.COLLECTED],
+			};
+		},
+		{}
+	);
+
+	const calcVarsAsObj = variables
+		.filter(({ variableType }) => variableType === C.CALCULATED)
+		.reduce((accV, { name, ...rest }) => ({ ...accV, [name]: rest }), {});
+
+	const CALCULATED = getCalculatedVariables(calcVarsAsObj)({
+		bindings,
+		init: true,
+	});
+
+	if (isDev) console.log(`End init vars: ${new Date().getTime() - start} ms`);
+
+	return {
+		EXTERNAL,
+		COLLECTED: collected,
+		CALCULATED,
+	};
 };
 
-const mergeSimpleComponentAndData = component => data => {
-	const { response, ...other } = component;
-	const { name, valueState } = response;
-	const newValueState = valueState.map(({ valueType, value }) => {
-		const newValue =
-			data[name] !== undefined && data[name][valueType] !== undefined
-				? data[name][valueType]
-				: value;
-		return { valueType, value: newValue };
+const buildFilledComponents = (vars) => (components) => (depth) =>
+	components.map((c) => {
+		const component = { depth, ...c };
+		return buildFilledComponent(vars)(component);
 	});
-	return { ...other, response: { name, valueState: newValueState } };
+
+export const buildFilledComponent = (vars) => (component) => {
+	if (component.response) return buildResponseComponent(vars)(component);
+	else if (component.responses) return buildResponsesComponent(vars)(component);
+	else if (component.cells) return buildCellsComponent(vars)(component);
+	else if (component.components)
+		return buildComponentsComponent(vars)(component);
+	return component;
+};
+
+export const buildResponseComponent = (vars) => (c) => {
+	const { missingResponse } = c;
+	const response = {
+		name: c.response.name,
+		values: vars[c.response.name].values,
+	};
+	if (missingResponse)
+		return {
+			...c,
+			response,
+			missingResponse: {
+				name: missingResponse.name,
+				values: vars[missingResponse.name].values,
+			},
+		};
+	return {
+		...c,
+		response,
+	};
+};
+
+export const buildResponsesComponent = (vars) => (c) => {
+	const { responses, missingResponse, ...rest } = c;
+	const filledResponses = responses.map((r) => buildResponseComponent(vars)(r));
+	if (missingResponse)
+		return {
+			...rest,
+			responses: filledResponses,
+			missingResponse: {
+				name: missingResponse.name,
+				values: vars[missingResponse.name].values,
+			},
+		};
+	return { ...rest, responses: filledResponses };
 };
 
-const mergeCheckboxGroupAndData = component => data => {
-	const { responses, ...other } = component;
-	const newResponses = responses.map(c => mergeSimpleComponentAndData(c)(data));
-	return { ...other, responses: newResponses };
+export const buildCellsComponent = (vars) => (c) => {
+	const { cells, depth, missingResponse, ...rest } = c;
+	const filledCells = cells.map((row) =>
+		buildFilledComponents(vars)(row)(depth)
+	);
+	if (missingResponse)
+		return {
+			...rest,
+			cells: filledCells,
+			missingResponse: {
+				name: missingResponse.name,
+				values: vars[missingResponse.name].values,
+			},
+		};
+	return { ...rest, depth, cells: filledCells };
 };
 
-const mergeTableAndData = component => data => {
-	const { cells, ...other } = component;
-	const newCells = cells.reduce((_, line) => {
-		const newLine = line.map(component =>
-			component.response
-				? mergeSimpleComponentAndData(component)(data)
-				: component
-		);
-		return [..._, newLine];
-	}, []);
-	return { ...other, cells: newCells };
+export const buildComponentsComponent = (vars) => (component) => {
+	const { components, depth, missingResponse, ...rest } = component;
+	const filledComponents = buildFilledComponents(vars)(components)(depth + 1);
+	if (missingResponse)
+		return {
+			...rest,
+			components: filledComponents,
+			missingResponse: {
+				name: missingResponse.name,
+				values: vars[missingResponse.name].values,
+			},
+		};
+	return { ...rest, depth, components: filledComponents };
 };
+
+const initExternalVariable =
+	({ name }) =>
+	(data) => ({
+		[name]: (data && data.EXTERNAL && data.EXTERNAL[name]) || null,
+	});

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

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

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

@@ -0,0 +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;
+	};

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

@@ -0,0 +1,65 @@
+import React from 'react';
+import ReactMarkdown from 'react-markdown';
+import ReactTooltip from 'react-tooltip';
+import {
+	EVENT_CLICK,
+	LINK_CATEGORY,
+	TOOLTIP_CATEGORY,
+} from '../../../constants';
+import { createObjectEvent, isFunction } from '../../lib';
+
+const Link = (props) => {
+	const { href, children, title, logFunction } = props;
+	const listener =
+		(link = true) =>
+		() => {
+			if (isFunction(logFunction))
+				logFunction(
+					createObjectEvent(
+						link ? `link-${href}` : `tooltip-${title}`,
+						link ? LINK_CATEGORY : TOOLTIP_CATEGORY,
+						EVENT_CLICK
+					)
+				);
+		};
+	if (href.trim().startsWith('http'))
+		return (
+			<a
+				href={href}
+				target="_blank"
+				rel="noreferrer noopener"
+				onClick={listener()}
+			>
+				{children}
+			</a>
+		);
+	return (
+		<span className="link-md" onPointerUp={listener(false)}>
+			<span
+				data-for={`${title}-tooltip`}
+				data-tip={title}
+				data-multiline
+				className="field-md"
+			>
+				{children}
+			</span>
+			<ReactTooltip
+				id={`${title}-tooltip`}
+				className="tooltip-content"
+				place="bottom"
+				effect="solid"
+				globalEventOff="click"
+			/>
+		</span>
+	);
+};
+
+const renderers = (otherProps) => {
+	return {
+		paragraph: (props) => <p style={{ margin: '0' }}>{props.children}</p>,
+		link: (props) => Link({ ...otherProps, ...props }),
+	};
+};
+
+export const interpretMD = (expression) => (logFunction) =>
+	<ReactMarkdown source={expression} renderers={renderers({ logFunction })} />;

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

@@ -0,0 +1,18 @@
+import { interpret } from '@inseefr/trevas';
+
+const extractDSValue = (v) => {
+	if (v !== null && typeof v === 'object') {
+		const { dataPoints } = v;
+		return Object.values(dataPoints)[0];
+	}
+	return v;
+};
+
+export const interpretVTL = (bindings) => (expression) => {
+	try {
+		const res = interpret(expression, bindings);
+		return extractDSValue(res);
+	} catch (e) {
+		return expression;
+	}
+};