remote component with http get

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@inseefr/lunatic",
-	"version": "2.6.11",
+	"version": "2.6.12",
 	"workersVersion": "0.3.0-experimental",
 	"description": "Library of questionnaire components",
 	"repository": {
@@ -146,6 +146,7 @@
 		"jest": "^29.4.3",
 		"jsdom": "^21.1.0",
 		"jsdom-global": "^3.0.2",
+		"path-match": "^1.2.4",
 		"postcss": "^8.2.6",
 		"postcss-scss": "^3.0.4",
 		"prettier": "^2.0.5",

src/components/remote-component/remote-component.tsx

@@ -12,20 +12,19 @@ const RETRY = 3;
  */
 const fetchFromServer = (
 	remote: string,
-	values: unknown,
+
 	retry = RETRY,
 	latency = LATENCY
 ): Promise<Record<string, unknown>> => {
 	return new Promise((resolve) => {
 		fetch(remote, {
-			method: 'POST',
+			method: 'GET',
 			headers: {
 				'Content-Type': 'application/json',
 			},
-			body: JSON.stringify(values),
 		})
 			.then((response) => {
-				if (response.ok) {
+				if (response.status === 200) {
 					return response.json();
 				} else {
 					resolve({ RESPONSE: false });
@@ -37,7 +36,7 @@ const fetchFromServer = (
 			.catch(() => {
 				if (retry > 0) {
 					window.setTimeout(() => {
-						resolve(fetchFromServer(remote, values, retry - 1));
+						resolve(fetchFromServer(remote, retry - 1, latency));
 					}, latency);
 				} else {
 					resolve({ RESPONSE: false });
@@ -64,6 +63,7 @@ export function RemoteComponent(
 		iteration,
 		retry = RETRY,
 		latency = LATENCY,
+		pendingMessage = 'En attente...',
 	} = props;
 
 	const loading = useRef(false);
@@ -72,7 +72,7 @@ export function RemoteComponent(
 	useEffect(() => {
 		if (remote && !loading.current && !fetched.current) {
 			loading.current = true;
-			fetchFromServer(remote, value, retry, latency).then(
+			fetchFromServer(remote, retry, latency).then(
 				(response: Record<string, unknown>) => {
 					fetched.current = true;
 					if (response) {
@@ -83,11 +83,8 @@ export function RemoteComponent(
 				}
 			);
 		}
-	}, [remote, value, handleChange, retry, latency]);
+	}, [remote, handleChange, retry, latency]);
 
-	/**
-	 * // TODO Gérer les component Set
-	 */
 	if (fetched.current) {
 		if (components && components.length) {
 			return components.map((c, i) => {
@@ -106,5 +103,5 @@ export function RemoteComponent(
 		return <>Nothing to display!</>;
 	}
 
-	return <div>waiting</div>;
+	return <>{pendingMessage}</>;
 }

src/components/type.ts

@@ -238,7 +238,7 @@ type ComponentPropsByType = {
 	RemoteComponent: LunaticBaseProps<string | null> & {
 		components: LunaticComponentDefinition[];
 		remote: string;
-		responses?: Array<{ responses: { name: string } }>;
+		pendingMessage: ReactNode;
 		value: Record<string, unknown>;
 		latency?: number;
 		retry?: number;

src/stories/RemoteComponent/data.json

@@ -0,0 +1,6 @@
+{
+	"EXTERNAL": {
+		"DEP_CODE": "75",
+		"COM_CODE": "012"
+	}
+}

src/stories/RemoteComponent/mock-server.js

@@ -1,28 +1,39 @@
 const express = require('express');
 const cors = require('cors');
+const parser = require('path-match')({
+	// path-to-regexp options
+	sensitive: false,
+	strict: false,
+	end: false,
+});
 const bodyParser = require('body-parser');
 const app = express();
 const port = 4000;
 
+const router = express.Router();
+const match = parser('/api/recensement/adresse/departement/:DEP_CODE/commune/:COM_CODE')
+router.use(function timeLog(req, res, next) {
+	console.log('Time: ', Date.now());
+	next();
+});
+
 app.use(cors());
 app.use(bodyParser.json());
+app.use('/', router);
+
+
+router.get('/api/recensement/adresse/*', function (request, response) {
+	console.log(request.path)
 
-app.post('/api/recensement/adresse', (request, response) => {
-	console.log('body', request.body); // on n'en fait rien, c juste un mock !
-	const { ZC, ADR_RANG, LOG_RANG } = request.body;
-	if (ZC && ADR_RANG && LOG_RANG) {
-		response.status(201).json({
-			NUMVOI_LOC: '14',
-			BISTER_LOC: null,
-			TYPEVOI_LOC: 'Rue',
-			NOMVOI_LOC: 'de Picpus',
-			CPOST_LOC: '75012',
-			LIBELLE_COMMUNE: 'Paris',
-			RESPONSE: true,
-		});
-	} else {
-		response.status(201).json({ RESPONSE: false });
-	}
+	var params = match(request.path);
+	console.log(request.originalUrl, params)
+	response.status(200).json({
+		"NUMVOI_LOC_SUGG": "14",
+		"BISTER_LOC_SUGG": null,
+		"TYPEVOI_LOC_SUGG": "rue",
+		"NOMVOI_LOC_SUGG": "de Picpus",
+		RESPONSE: true
+	});
 });
 
 app.listen(port, () => {

src/stories/RemoteComponent/remoteComponent.stories.jsx

@@ -1,5 +1,6 @@
 import Orchestrator from '../utils/orchestrator';
 import source from './source';
+import data from "./data"
 import defaultArgTypes from '../utils/default-arg-types';
 
 const stories = {
@@ -20,4 +21,4 @@ export default stories;
 const Template = (args) => <Orchestrator {...args} />;
 export const Default = Template.bind({});
 
-Default.args = { id: 'radio', source, pagination: true };
+Default.args = { id: 'radio', source, data, pagination: true };