ref: use get method for fillers

InseeFr · Aug 5, 2024 · 1b19ac8 · 1b19ac8
1 parent 09e8060
commit 1b19ac8
Show file tree

Hide file tree

Showing 7 changed files with 122 additions and 105 deletions.
diff --git a/lunatic-schema.json b/lunatic-schema.json
@@ -1476,6 +1476,9 @@
 					"properties": {
 						"url": {
 							"type": "string"
+						},
+						"type": {
+							"enum": ["VTL", "TXT"]
 						}
 					},
 					"required": ["url"]

diff --git a/src/stories/behaviour/fillers/fillers.stories.js b/src/stories/behaviour/fillers/fillers.stories.js
@@ -10,13 +10,14 @@ export const Default = {
 	args: {
 		source: source,
 		data: {},
-		mockFiller: (data) => {
+		mockFiller: (url) => {
 			return new Promise((resolve) => {
 				setTimeout(
 					() => {
-						if (data.CODE === '34000') {
+						const code = new URL(url).searchParams.get('code');
+						if (code === '34000') {
 							return resolve({ CITY: 'Montpellier' });
-						} else if (data.CODE === '31000') {
+						} else if (code === '31000') {
 							return resolve({ CITY: 'Toulouse' });
 						}
 						return resolve({});

diff --git a/src/stories/behaviour/fillers/source.json b/src/stories/behaviour/fillers/source.json
@@ -1,77 +1,78 @@
 {
-  "$schema": "../../../../lunatic-schema.json",
-  "maxPage": "2",
-  "fillers": [
-    {
-      "endpoint": {
-        "url": "https://inseefr.github.io/Lunatic/"
-      },
-      "responses": [
-        {
-          "name": "CODE"
-        }
-      ]
-    }
-  ],
-  "components": [
-    {
-      "id": "a",
-      "page": "1",
-      "componentType": "Input",
-      "label": {
-        "type": "TXT",
-        "value": "Code postal"
-      },
-      "response": {
-        "name": "CODE"
-      },
-      "declarations": [
-        {
-          "declarationType": "COMMENT",
-          "position": "DETACHABLE",
-          "id": "d_a",
-          "label": {
-            "value": "Ce code permettra de remplir la ville (34000 ou 31000)",
-            "type": "TXT"
-          }
-        }
-      ]
-    },
-    {
-      "id": "a",
-      "page": "2",
-      "componentType": "Input",
-      "label": {
-        "type": "TXT",
-        "value": "Ville"
-      },
-      "response": {
-        "name": "CITY"
-      }
-    }
-  ],
-  "variables": [
-    {
-      "variableType": "COLLECTED",
-      "values": {
-        "COLLECTED": null,
-        "EDITED": null,
-        "INPUTTED": null,
-        "FORCED": null,
-        "PREVIOUS": null
-      },
-      "name": "CODE"
-    },
-    {
-      "variableType": "COLLECTED",
-      "values": {
-        "COLLECTED": null,
-        "EDITED": null,
-        "INPUTTED": null,
-        "FORCED": null,
-        "PREVIOUS": null
-      },
-      "name": "CITY"
-    }
-  ]
+	"$schema": "../../../../lunatic-schema.json",
+	"maxPage": "2",
+	"fillers": [
+		{
+			"endpoint": {
+				"url": "\"https://inseefr.github.io/Lunatic/?code=\" || CODE",
+				"type": "VTL"
+			},
+			"responses": [
+				{
+					"name": "CODE"
+				}
+			]
+		}
+	],
+	"components": [
+		{
+			"id": "a",
+			"page": "1",
+			"componentType": "Input",
+			"label": {
+				"type": "TXT",
+				"value": "Code postal"
+			},
+			"response": {
+				"name": "CODE"
+			},
+			"declarations": [
+				{
+					"declarationType": "COMMENT",
+					"position": "DETACHABLE",
+					"id": "d_a",
+					"label": {
+						"value": "Ce code permettra de remplir la ville (34000 ou 31000)",
+						"type": "TXT"
+					}
+				}
+			]
+		},
+		{
+			"id": "a",
+			"page": "2",
+			"componentType": "Input",
+			"label": {
+				"type": "TXT",
+				"value": "Ville"
+			},
+			"response": {
+				"name": "CITY"
+			}
+		}
+	],
+	"variables": [
+		{
+			"variableType": "COLLECTED",
+			"values": {
+				"COLLECTED": null,
+				"EDITED": null,
+				"INPUTTED": null,
+				"FORCED": null,
+				"PREVIOUS": null
+			},
+			"name": "CODE"
+		},
+		{
+			"variableType": "COLLECTED",
+			"values": {
+				"COLLECTED": null,
+				"EDITED": null,
+				"INPUTTED": null,
+				"FORCED": null,
+				"PREVIOUS": null
+			},
+			"name": "CITY"
+		}
+	]
 }
diff --git a/src/type.source.ts b/src/type.source.ts
@@ -337,6 +337,7 @@ export type LunaticSource = {
 			  };
 	};
 	maxPage?: string;
+	fillers?: FillerDefinition[];
 };
 export type VTLExpression = {
 	/**
@@ -467,3 +468,12 @@ export type SuggesterDefinition = {
 				type: 'soft';
 		  };
 };
+export type FillerDefinition = {
+	endpoint: {
+		url: string;
+		type?: 'VTL' | 'TXT';
+	};
+	responses: {
+		name: string;
+	}[];
+};
diff --git a/src/use-lunatic/hooks/useFillers.ts b/src/use-lunatic/hooks/useFillers.ts
@@ -1,15 +1,15 @@
 import type { FillerDefinition } from '../../type.source';
 import type { LunaticVariablesStore } from '../commons/variables/lunatic-variables-store';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import type { LunaticChangesHandler } from '../type';
+import type { LunaticChangesHandler, LunaticReducerState } from '../type';
+import { useRefSync } from '../../hooks/useRefSync';
 
 type Args = {
 	variables: LunaticVariablesStore;
 	fillers: FillerDefinition[];
 	handleChanges: LunaticChangesHandler;
-	fetchMock:
-		| null
-		| ((data: Record<string, unknown>) => Promise<Record<string, unknown>>);
+	fetchMock: null | ((url: string) => Promise<Record<string, unknown>>);
+	executeExpression: LunaticReducerState['executeExpression'];
 };
 
 /**
@@ -21,7 +21,9 @@ export function useFillers({
 	fillers,
 	handleChanges,
 	fetchMock,
+	executeExpression,
 }: Args) {
+	const executeExpressionRef = useRefSync(executeExpression);
 	const watchedVariables = useMemo(
 		() => buildWatchedVariableMap(fillers),
 		[fillers]
@@ -54,10 +56,11 @@ export function useFillers({
 		setFilling(true);
 		Promise.all(
 			Array.from(activeFillers.current).map((filler) => {
-				const values = Object.fromEntries(
-					filler.responses.map((r) => [r.name, variables.get(r.name)])
-				);
-				return fetchFillerData(filler, values, fetchMock).then((data) => {
+				return fetchFillerData(
+					filler,
+					executeExpressionRef.current,
+					fetchMock
+				).then((data) => {
 					handleChanges(
 						Object.entries(data).map((d) => ({
 							name: d[0],
@@ -103,20 +106,20 @@ function buildWatchedVariableMap(
  */
 function fetchFillerData(
 	filler: FillerDefinition,
-	data: Record<string, unknown>,
-	mock:
-		| null
-		| ((data: Record<string, unknown>) => Promise<Record<string, unknown>>)
+	executeExpression: LunaticReducerState['executeExpression'],
+	mock: null | ((url: string) => Promise<Record<string, unknown>>)
 ): Promise<Record<string, unknown>> {
+	const endpoint =
+		filler.endpoint.type === 'VTL'
+			? executeExpression<string>({ value: filler.endpoint.url, type: 'VTL' })
+			: filler.endpoint.url;
+
 	if (mock) {
-		return mock(data);
+		return mock(endpoint);
 	}
 
-	return fetch(filler.endpoint.url, {
-		method: 'POST',
-		body: JSON.stringify(data),
+	return fetch(endpoint, {
 		headers: {
-			'Content-Type': 'application/json',
 			Accept: 'application/json',
 		},
 	}).then((res) => res.json());

diff --git a/src/use-lunatic/type.ts b/src/use-lunatic/type.ts
@@ -158,9 +158,7 @@ export type LunaticOptions = {
 	trackChanges?: boolean;
 	logger?: LunaticLogger;
 	mocks?: {
-		filler:
-			| null
-			| ((data: Record<string, unknown>) => Promise<Record<string, unknown>>);
+		filler: null | ((url: string) => Promise<Record<string, unknown>>);
 	};
 };
 

diff --git a/src/use-lunatic/use-lunatic.ts b/src/use-lunatic/use-lunatic.ts
@@ -172,6 +172,7 @@ export function useLunatic(
 		fillers: source.fillers ?? [],
 		handleChanges,
 		fetchMock: mocks?.filler ?? null,
+		executeExpression: state.executeExpression,
 	});
 
 	const goNextPage: LunaticState['goNextPage'] = useCallback(
@@ -201,13 +202,13 @@ export function useLunatic(
 	});
 
 	const getComponents: LunaticState['getComponents'] = () => {
-        if (isFilling) {
-            return [
-                {
-                    componentType: 'FillerLoader',
-                },
-            ];
-        }
+		if (isFilling) {
+			return [
+				{
+					componentType: 'FillerLoader',
+				},
+			];
+		}
 		return components;
 	};