@inseefr/lunatic 0.1.0-hackathon → 0.1.0-prisme

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

@@ -1,21 +1,32 @@
 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 { 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,
+	data = defaultData,
 	{
 		savingType = COLLECTED,
-		preferences = [COLLECTED],
-		features = ['VTL'],
+		preferences = defaultPreferences,
+		features = defaultFeatures,
 		management = false,
 		pagination = false,
+		modalForControls = false,
 		initialPage = '1',
 		logFunction = null,
 		autoSuggesterLoading = false,
@@ -23,26 +34,48 @@ const useLunatic = (
 		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 = getBindings(questionnaire);
+	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 = useFilterComponents({
+	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: { ...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(() => {
@@ -54,6 +87,7 @@ const useLunatic = (
 			) {
 				const s = suggestersToLoad.reduce(function (current, storeInfo) {
 					const { name } = storeInfo;
+					if (!suggesters[name]) return current;
 					return {
 						...current,
 						[name]: {
@@ -92,7 +126,17 @@ const useLunatic = (
 				flow: FLOW_NEXT,
 				management,
 			});
-			setPage(nextPage);
+			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);
 		}
 	};
 
@@ -109,7 +153,18 @@ const useLunatic = (
 				flow: FLOW_PREVIOUS,
 				management,
 			});
-			setPage(previousPage);
+			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);
 		}
 	};
 
@@ -143,6 +198,10 @@ const useLunatic = (
 		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));
@@ -155,6 +214,7 @@ const useLunatic = (
 				preferences,
 				logFunction
 			)(todo);
+			setBindings(getBindings(newQ));
 			setQuestionnaire(newQ);
 			setTodo({});
 		}
@@ -168,10 +228,46 @@ const useLunatic = (
 		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,
-		components,
+		handleExternals,
+		components: componentsToDiplay,
 		bindings,
 		pagination: {
 			page,

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;
+	};

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

@@ -1,65 +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 })} />;
+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/state.js

@@ -1,4 +1,5 @@
 import * as C from '../../constants';
+import { isDev } from '../lib';
 
 export const getState = (questionnaire) => {
 	const { variables } = questionnaire;
@@ -33,26 +34,33 @@ const getCalculatedFromVariables = (variables) =>
 const getExternalFromVariables = (variables) =>
 	(variables && variables[C.EXTERNAL]) || {};
 
-export const getCollectedStateByValueType = (questionnaire) => (
-	valueType,
-	displayNull
-) =>
-	['PREVIOUS', 'COLLECTED', 'FORCED', 'EDITED', 'INPUTED'].includes(valueType)
-		? Object.entries(getCollectedState(questionnaire)).reduce((_, v) => {
-				if (displayNull || v[1][valueType] !== null)
-					return {
-						..._,
-						[v[0]]: v[1][valueType],
-					};
-				return _;
-		  }, {})
-		: {};
+export const getCollectedStateByValueType =
+	(questionnaire, collectedState) => (valueType, displayNull) =>
+		['PREVIOUS', 'COLLECTED', 'FORCED', 'EDITED', 'INPUTED'].includes(valueType)
+			? Object.entries(
+					collectedState || getCollectedState(questionnaire)
+			  ).reduce((_, v) => {
+					if (displayNull || v[1][valueType] !== null)
+						return {
+							..._,
+							[v[0]]: v[1][valueType],
+						};
+					return _;
+			  }, {})
+			: {};
 
 export const getBindings = (questionnaire) => {
+	if (isDev) {
+		console.log('Get bindings');
+		var start = new Date().getTime();
+	}
 	const { variables } = questionnaire;
-	return {
+	const bindings = {
 		...getCollectedStateByValueType(questionnaire)('COLLECTED', true),
 		...getCalculatedFromVariables(variables),
 		...getExternalFromVariables(variables),
 	};
+	if (isDev)
+		console.log(`End get bindings: ${new Date().getTime() - start} ms`);
+	return bindings;
 };

package/src/components/missing-wrapper/component.js

@@ -1,120 +0,0 @@
-import React, { useEffect } from 'react';
-import KeyboardEventHandler from 'react-keyboard-event-handler';
-import Button from '../button';
-import * as U from '../../utils/lib';
-import './missing.scss';
-
-const Missing = ({ Component, props }) => {
-	const {
-		dontKnowButton = "Don't know",
-		refusedButton = 'Refused',
-		missingResponse,
-		handleChange,
-		preferences,
-		missingStrategy,
-		missingShortcut = { dontKnow: '', refused: '' },
-		response,
-		responses,
-		cells,
-		components,
-		savingType,
-		bindings,
-		shortcut,
-	} = props;
-
-	const buttonState = U.getResponseByPreference(preferences)(missingResponse);
-
-	useEffect(() => {
-		if (
-			buttonState !== null &&
-			U.hasToCleanMissing(savingType)({
-				response,
-				responses,
-				cells,
-				components,
-			})
-		) {
-			handleChange({ [U.getResponseName(missingResponse)]: null });
-		}
-	}, [
-		buttonState,
-		handleChange,
-		savingType,
-		response,
-		responses,
-		cells,
-		components,
-		missingResponse,
-	]);
-
-	const getVarsToClean = () =>
-		U.getToClean(savingType)({
-			response,
-			responses,
-			cells,
-			components,
-		});
-
-	const onClick = (value) => () => {
-		const isSameValue = buttonState === value;
-		const newValue = isSameValue ? null : value;
-		const toClean = getVarsToClean();
-		if (Object.keys(toClean)) {
-			handleChange(toClean);
-			if (U.isFunction(missingStrategy) && !isSameValue)
-				missingStrategy({ ...bindings, ...toClean });
-		} else {
-			if (U.isFunction(missingStrategy) && !isSameValue)
-				missingStrategy(bindings);
-		}
-		handleChange({ [U.getResponseName(missingResponse)]: newValue });
-	};
-
-	return (
-		<div className="missing-wrapper">
-			<div className="missing-component">
-				<Component {...props} />
-			</div>
-			<div className="missing-buttons">
-				<span
-					className={`missing-button${
-						buttonState === U.DK ? '-active' : ''
-					} missing-button-dk${buttonState === U.DK ? '-active' : ''}`}
-				>
-					<Button
-						label="dont-know-button"
-						value={dontKnowButton}
-						onClick={onClick(U.DK)}
-					/>
-				</span>
-				<span
-					className={`missing-button${
-						buttonState === U.RF ? '-active' : ''
-					} missing-button-rf${buttonState === U.RF ? '-active' : ''}`}
-				>
-					<Button
-						label="refused-button"
-						value={refusedButton}
-						onClick={onClick(U.RF)}
-					/>
-				</span>
-			</div>
-			{shortcut &&
-				missingShortcut &&
-				missingShortcut.dontKnow &&
-				missingShortcut.refused && (
-					<KeyboardEventHandler
-						handleKeys={Object.values(missingShortcut)}
-						onKeyEvent={(key, e) => {
-							e.preventDefault();
-							if (key === missingShortcut.dontKnow) onClick(U.DK)();
-							if (key === missingShortcut.refused) onClick(U.RF)();
-						}}
-						handleFocusableElements
-					/>
-				)}
-		</div>
-	);
-};
-
-export default Missing;