Merge pull request #14 from InseeFrLab/develop

Develop

.env

@@ -1,3 +1,4 @@
 REACT_APP_LOCAL=
 REACT_APP_PEARL_API_URL=
-REACT_APP_GOOGLE_API_KEY=
+REACT_APP_GOOGLE_API_KEY=
+REACT_APP_STROMAE_API_URL=

.kubernetes/deployment.yml

@@ -15,7 +15,6 @@ spec:
       containers:
         - name: mapex
           image: ddecrulle/mapex:latest
-
           env:
             - name: PEARL_API_URL
               value: 'url'

.kubernetes/ingress.yml

@@ -13,6 +13,9 @@ spec:
       http:
         paths:
           - path: /
+            pathType: Prefix
             backend:
-              serviceName: mapex
-              servicePort: http
+              service:
+                name: mapex
+                port:
+                  number: 80

README.md

@@ -75,3 +75,8 @@ To run the storybook locally
 ```bash
 yarn storybook
 ```
+
+### Things to follow for future integration
+
+[Error Boundary](https://reactjs.org/docs/error-boundaries.html)
+[Suspense for Data Fetching](https://reactjs.org/docs/concurrent-mode-suspense.html)

package.json

@@ -3,6 +3,7 @@
 	"version": "0.1.0",
 	"license": "MIT",
 	"dependencies": {
+		"@inseefr/lunatic": "^0.2.1-experimental",
 		"@material-ui/core": "^4.11.4",
 		"@material-ui/icons": "^4.11.2",
 		"@material-ui/lab": "^4.0.0-alpha.60",
@@ -20,6 +21,7 @@
 		"react-leaflet": "^3.2.0",
 		"react-router-dom": "^5.2.0",
 		"react-scripts": "4.0.3",
+		"recoil": "^0.4.1",
 		"storybook-addon-material-ui": "^0.9.0-alpha.24",
 		"web-vitals": "^0.2.4",
 		"workbox-background-sync": "^5.1.3",

public/favicon_package/site.webmanifest

@@ -13,7 +13,7 @@
 			"type": "image/png"
 		}
 	],
-	"start_url": ".",
+	"start_url": "./",
 	"theme_color": "#ffffff",
 	"background_color": "#ffffff",
 	"display": "standalone"

src/api/index.js

@@ -4,4 +4,4 @@ import * as remote from './remote';
 
 const API = getEnvVar('LOCAL') ? local : remote;
 
-export default API;
+export default API;

src/api/local/index.js

@@ -1,3 +1,4 @@
-export const getDataFromAPI = () => Promise.resolve([]);
+export const getDataFromAPI = ({ setError, setData = () => {}, setLoading }) =>
+	Promise.resolve([setLoading(false)]);
 
-export const getLatLng = (address, setError) => Promise.resolve([]);
+export const postData = () => Promise.resolve(true);

src/api/remote/call.js

@@ -1,18 +1,34 @@
-import { SURVEY_UNITS, UNITS } from './paths';
+import { SURVEY_UNITS, UNITS, PARADATA } from './paths';
 
-const get = (url) =>
-	fetch(url)
+const fetcher = (url, method, body) => {
+	const headers = {
+		Accept: 'application/json, text/plain, */*',
+		'Content-Type': 'application/json',
+	};
+	return fetch(url, {
+		headers: headers,
+		method,
+		body: body ? JSON.stringify(body) : null,
+	})
 		.then((r) => {
+			console.log(r);
 			if (r.ok) return r.json();
 			throw new Error('API failed');
 		})
-		.catch(() => {
+		.catch((e) => {
+			console.log(e);
 			throw new Error(`Fetch error for ${url}`);
 		});
+};
 
-export const getSurveyUnitsAPI = () => get(SURVEY_UNITS);
+const postRequest = (url) => (body) => fetcher(url, 'POST', body);
+const getRequest = (url) => fetcher(url, 'GET', null);
+
+export const getSurveyUnitsAPI = () => getRequest(SURVEY_UNITS);
 
 export const getSurveyUnitsExtended = () =>
-	get(`${SURVEY_UNITS}?extended=true`);
+	getRequest(`${SURVEY_UNITS}?extended=true`);
+
+export const getUnit = (id) => getRequest(`${UNITS}/${id}`);
 
-export const getUnit = (id) => get(`${UNITS}/${id}`);
+export const postParadata = (body) => postRequest(PARADATA)(body);

src/api/remote/db/data-function.js

@@ -1,8 +1,15 @@
 import { setDataIntoDB } from 'indexedDB/service/db-action';
-import { getSurveyUnitsAPI, getUnit, getSurveyUnitsExtended } from '../call';
-import D from 'dictionary/db';
+import {
+	getSurveyUnitsAPI,
+	getUnit,
+	getSurveyUnitsExtended,
+	postParadata,
+} from '../call';
+import { dicDb } from 'dictionary';
 
-export const getDataFromApiOld = ({ setError, setData = () => {} }) =>
+export const postData = (data) => postParadata(data);
+
+export const getDataFromApi = ({ setError, setData = () => {}, setLoading }) =>
 	getSurveyUnitsAPI()
 		.then(async (surveyUnits) => {
 			const result = await Promise.all(
@@ -13,17 +20,19 @@ export const getDataFromApiOld = ({ setError, setData = () => {} }) =>
 			return result;
 		})
 		.then((units) => {
-			setDataIntoDB(D.surveyUnitDB, units);
+			setDataIntoDB(dicDb.surveyUnitDB, units);
 			setData && setData(units);
 		})
+		.then(setLoading(false))
 		.catch((e) => {
+			setLoading(false);
 			setError(`Errror : ${e}`);
 		});
 
-export const getDataFromAPI = ({ setError }) =>
+export const getDataFromAPIExtended = ({ setError }) =>
 	getSurveyUnitsExtended()
 		.then((surveyUnits) => {
-			setDataIntoDB(D.surveyUnitDB, surveyUnits);
+			setDataIntoDB(dicDb.surveyUnitDB, surveyUnits);
 		})
 		.catch((e) => {
 			setError(`Errror : ${e}`);

src/api/remote/paths.js

@@ -1,6 +1,8 @@
 import { getEnvVar } from 'utils/env';
 
 const BASE_URL = getEnvVar('PEARL_API_URL');
-
+const STROMAE_URL = getEnvVar('STROMAE_API_URL')
 export const SURVEY_UNITS = `${BASE_URL}/api/survey-units`;
 export const UNITS = `${BASE_URL}/api/survey-unit`;
+
+export const PARADATA = `${STROMAE_URL}/api/paradata`;

src/components/common/list-ue/component.js

@@ -7,7 +7,7 @@ import Divider from '@material-ui/core/Divider';
 import {
 	getFavoriteNumber,
 	getPrivilegedPerson,
-} from '../../../utils/survey-unit/surveyUnit';
+} from 'utils/survey-unit/';
 
 // https://codesandbox.io/s/5wqo7z2np4 for loading data
 // TODO :

src/components/common/loader/component.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import LinearProgress from '@material-ui/core/LinearProgress';
+import logoMapex from './logoMapex.svg';
+
+const useStyles = makeStyles((theme) => ({
+	root: {
+		textAlign: 'center',
+	},
+	colorPrimary: {
+		backgroundColor: '#FF780A',
+	},
+	barColorPrimary: {
+		backgroundColor: '#B2DFDB',
+	},
+	imgBlock: {
+		display: 'flex',
+		justifyContent: 'center',
+		alignItems: 'center',
+	},
+	img: {
+		maxWidth: '500px',
+		display: 'block',
+	},
+}));
+
+const Loader = () => {
+	const classes = useStyles();
+	return (
+		<div className={classes.root}>
+			<LinearProgress
+				classes={{
+					colorPrimary: classes.colorPrimary,
+					barColorPrimary: classes.barColorPrimary,
+				}}
+			/>
+			<div className={classes.imgBlock}>
+				<img src={logoMapex} className={classes.img} alt="logo" />
+			</div>
+		</div>
+	);
+};
+
+export default Loader;

src/components/common/map/component.js

@@ -5,10 +5,7 @@ import { MapContainer, Marker, TileLayer, Popup } from 'react-leaflet';
 import { Link } from 'react-router-dom';
 
 import L from 'leaflet';
-import {
-	getPrivilegedPerson,
-	getFavoriteNumber,
-} from 'utils/survey-unit/surveyUnit';
+import { getPrivilegedPerson, getFavoriteNumber } from 'utils/survey-unit';
 import icon from 'leaflet/dist/images/marker-icon.png';
 import iconShadow from 'leaflet/dist/images/marker-shadow.png';
 import UE from '../ue';

src/components/common/modal/component.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import Button from '@material-ui/core/Button';
+import Dialog from '@material-ui/core/Dialog';
+import DialogActions from '@material-ui/core/DialogActions';
+import DialogContent from '@material-ui/core/DialogContent';
+import DialogContentText from '@material-ui/core/DialogContentText';
+import DialogTitle from '@material-ui/core/DialogTitle';
+
+const ModalReperage = ({ open, setOpen, handleSend }) => {
+	const handleClose = () => {
+		setOpen(false);
+	};
+
+	return (
+		<div>
+			<Dialog
+				open={open}
+				onClose={handleClose}
+				aria-labelledby="alert-dialog-title"
+				aria-describedby="alert-dialog-description"
+			>
+				<DialogTitle id="alert-dialog-title">{'Validation'}</DialogTitle>
+				<DialogContent>
+					<DialogContentText id="alert-dialog-description">
+						Êtes vous sûr de vouloir envoyer vos réponses aux questions ?
+					</DialogContentText>
+				</DialogContent>
+				<DialogActions>
+					<Button onClick={handleSend}>Oui</Button>
+					<Button onClick={handleClose} autoFocus>
+						Non
+					</Button>
+				</DialogActions>
+			</Dialog>
+		</div>
+	);
+};
+
+export default ModalReperage;