Merge pull request #47 from SimonDmz/fix/upgrade-react-version-and-se…

…rvice-worker

upgrade to react-script 4, react 17, service-worker management, remov…

package.json

@@ -1,8 +1,11 @@
 {
   "name": "pearl",
-  "version": "0.1.3",
+  "version": "0.2.0",
   "private": true,
   "dependencies": {
+    "@testing-library/jest-dom": "^5.11.9",
+    "@testing-library/react": "^11.2.5",
+    "@testing-library/user-event": "^11.2.5",
     "@date-io/date-fns": "1.x",
     "@material-ui/core": "^4.11.2",
     "@material-ui/icons": "^4.11.2",
@@ -14,22 +17,70 @@
     "dexie": "^2.0.4",
     "font-awesome": "^4.7.0",
     "keycloak-js": "^10.0.2",
-    "node-sass": "^4.14.1",
     "prop-types": "^15.7.2",
-    "react": "^16.12.0",
-    "react-dom": "^16.12.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "react-modal": "^3.11.1",
-    "react-router-dom": "^5.1.2",
-    "react-scripts": "3.4.0"
+    "react-router-dom": "^5.2.0",
+    "react-scripts": "4.0.3",
+    "workbox-cacheable-response": "^5.1.3",
+    "workbox-core": "^5.1.3",
+    "workbox-precaching": "^5.1.3",
+    "workbox-routing": "^5.1.3",
+    "workbox-strategies": "^5.1.3"
   },
   "scripts": {
     "start": "react-scripts start",
-    "build": "react-scripts build && copy-and-watch src/service-worker-custom.js build && copy-and-watch configuration/configuration.json build",
+    "build": "react-scripts build && copy-and-watch configuration/configuration.json build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"
   },
   "eslintConfig": {
-    "extends": "react-app"
+    "extends": [
+      "react-app",
+      "react-app/jest",
+      "prettier",
+      "plugin:react-hooks/recommended",
+      "plugin:jsx-a11y/recommended",
+      "plugin:import/warnings"
+    ],
+    "plugins": [
+      "prettier",
+      "jsx-a11y"
+    ],
+    "rules": {
+      "react/prop-types": [
+        "off"
+      ],
+      "prettier/prettier": [
+        1,
+        {
+          "arrowParens": "avoid"
+        }
+      ]
+    },
+    "globals": {
+      "fetch": true,
+      "window": true,
+      "document": true,
+      "navigator": true
+    },
+    "settings": {
+      "import/resolver": {
+        "node": {
+          "paths": [
+            "src"
+          ]
+        }
+      }
+    }
+  },
+  "prettier": {
+    "printWidth": 100,
+    "singleQuote": true,
+    "trailingComma": "es5",
+    "endOfLine": "auto",
+    "arrowParens": "avoid"
   },
   "browserslist": {
     "production": [
@@ -44,21 +95,20 @@
     ]
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "^5.11.9",
-    "@testing-library/react": "^11.2.5",
+
     "@types/react": "^16.9.23",
     "@types/react-router-dom": "^5.1.3",
     "copy-and-watch": "^0.1.4",
     "enzyme": "^3.10.0",
     "enzyme-adapter-react-16": "^1.15.1",
-    "eslint": "^6.6.0",
     "eslint-config-airbnb": "^18.0.1",
-    "eslint-config-prettier": "^6.5.0",
-    "eslint-plugin-import": "^2.18.2",
-    "eslint-plugin-jsx-a11y": "^6.2.3",
-    "eslint-plugin-prettier": "^3.1.1",
+    "eslint-config-prettier": "^8.1.0",
+    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-jsx-a11y": "^6.4.1",
+    "eslint-plugin-prettier": "^3.3.1",
     "eslint-plugin-react": "^7.16.0",
     "jest-sonar-reporter": "^2.0.0",
+    "eslint-plugin-react-hooks": "^4.2.0",
     "prettier": "^1.19.1"
   }
 }

public/index.html

@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="description" content="Web site created using create-react-app" />
-    <link rel="apple-touch-icon" href="/static/images/icons/icon-192x192.png" />
+    <link rel="apple-touch-icon" href="/static/images/logo-insee-header.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/

public/manifest.json

@@ -4,49 +4,19 @@
   "icons": [
     {
       "src": "favicon.ico",
-      "sizes": "64x64 32x32 24x24 16x16",
+      "sizes": "32x32",
       "type": "image/x-icon"
     },
     {
-      "src": "static/images/icons/icon-72x72.png",
-      "sizes": "72x72",
+      "src": "static/images/insee.png",
+      "sizes": "326x378",
       "type": "image/png"
     },
     {
-      "src": "static/images/icons/icon-96x96.png",
-      "sizes": "96x96",
+      "src": "static/images/logo-insee-header.png",
+      "sizes": "270x274",
       "type": "image/png"
-    },
-    {
-      "src": "static/images/icons/icon-128x128.png",
-      "sizes": "128x128",
-      "type": "image/png"
-    },
-    {
-      "src": "static/images/icons/icon-144x144.png",
-      "sizes": "144x144",
-      "type": "image/png"
-    },
-    {
-      "src": "static/images/icons/icon-152x152.png",
-      "sizes": "152x152",
-      "type": "image/png"
-    },
-    {
-      "src": "static/images/icons/icon-192x192.png",
-      "sizes": "192x192",
-      "type": "image/png"
-    },
-    {
-      "src": "static/images/icons/icon-384x384.png",
-      "sizes": "384x384",
-      "type": "image/png"
-    },
-    {
-      "src": "static/images/icons/icon-512x512.png",
-      "sizes": "512x512",
-      "type": "image/png"
-    }
+    } 
   ],
   "start_url": ".",
   "display": "standalone",

src/common-tools/api/surveyUnitAPI.js

@@ -1,8 +1,8 @@
 import Axios from 'axios';
-import { getHeader, authentication } from './utils';
+import { authentication, getHeader } from './utils';
 
-export const getSurveyUnits = (urlPearApi, authenticationMode) => {
-  return new Promise((resolve, reject) => {
+export const getSurveyUnits = (urlPearApi, authenticationMode) =>
+  new Promise((resolve, reject) => {
     authentication(authenticationMode)
       .then(() => {
         Axios.get(`${urlPearApi}/api/survey-units`, {
@@ -17,10 +17,9 @@ export const getSurveyUnits = (urlPearApi, authenticationMode) => {
         reject(new Error(`Error during refreshToken : ${e.response.data.error.message}`));
       });
   });
-};
 
-export const getSurveyUnitById = (urlPearApi, authenticationMode) => id => {
-  return new Promise((resolve, reject) => {
+export const getSurveyUnitById = (urlPearApi, authenticationMode) => id =>
+  new Promise((resolve, reject) => {
     authentication(authenticationMode)
       .then(() => {
         Axios.get(`${urlPearApi}/api/survey-unit/${id}`, {
@@ -31,10 +30,9 @@ export const getSurveyUnitById = (urlPearApi, authenticationMode) => id => {
       })
       .catch(e => reject(new Error(`Error during refreshToken : ${e.message}`)));
   });
-};
 
-export const putDataSurveyUnitById = (urlPearApi, authenticationMode) => (id, su) => {
-  return new Promise((resolve, reject) => {
+export const putDataSurveyUnitById = (urlPearApi, authenticationMode) => (id, su) =>
+  new Promise((resolve, reject) => {
     authentication(authenticationMode)
       .then(() => {
         Axios.put(`${urlPearApi}/api/survey-unit/${id}`, su, {
@@ -45,4 +43,3 @@ export const putDataSurveyUnitById = (urlPearApi, authenticationMode) => (id, su
       })
       .catch(e => reject(new Error(`Error during refreshToken : ${e.message}`)));
   });
-};

src/common-tools/api/utils.js

@@ -1,13 +1,12 @@
-import { KEYCLOAK, ANONYMOUS, JSON_UTF8_HEADER, PEARL_USER_KEY } from 'common-tools/constants';
-import { refreshToken, kc, keycloakAuthentication } from 'common-tools/keycloak';
+import { ANONYMOUS, JSON_UTF8_HEADER, KEYCLOAK, PEARL_USER_KEY } from 'common-tools/constants';
+import { kc, keycloakAuthentication, refreshToken } from 'common-tools/keycloak';
 
-export const getSecureHeader = token => {
-  return token
+export const getSecureHeader = token =>
+  token
     ? {
         Authorization: `Bearer ${token}`,
       }
     : {};
-};
 
 export const authentication = mode => {
   switch (mode) {

src/common-tools/auth/initAuth.js

@@ -1,6 +1,6 @@
-import { useState, useEffect } from 'react';
 import { GUEST_PEARL_USER, PEARL_USER_KEY } from 'common-tools/constants';
-import { keycloakAuthentication, getTokenInfo } from 'common-tools/keycloak';
+import { getTokenInfo, keycloakAuthentication } from 'common-tools/keycloak';
+import { useEffect, useState } from 'react';
 
 export const useAuth = () => {
   const [authenticated, setAuthenticated] = useState(false);
@@ -62,9 +62,7 @@ export const useAuth = () => {
                     accessDenied();
                   }
                 })
-                .catch(() => {
-                  return isLocalStorageTokenValid() ? accessAuthorized() : accessDenied();
-                });
+                .catch(() => (isLocalStorageTokenValid() ? accessAuthorized() : accessDenied()));
             }
             break;
           default:

src/common-tools/functions/sortOnColumn.js

@@ -4,25 +4,15 @@ export const sortOnColumnCompareFunction = criteria => {
   let compareFunction;
 
   // eslint-disable-next-line no-unused-vars
-  const noSortFunction = (a, b) => {
-    return 0;
-  };
+  const noSortFunction = (a, b) => 0;
 
-  const ssechSortFunction = (a, b) => {
-    return a.sampleIdentifiers.ssech - b.sampleIdentifiers.ssech;
-  };
+  const ssechSortFunction = (a, b) => a.sampleIdentifiers.ssech - b.sampleIdentifiers.ssech;
 
-  const prioritySortFunction = (a, b) => {
-    return b.priority - a.priority;
-  };
+  const prioritySortFunction = (a, b) => b.priority - a.priority;
 
-  const campaignSortFunction = (a, b) => {
-    return a.campaign.localeCompare(b.campaign);
-  };
+  const campaignSortFunction = (a, b) => a.campaign.localeCompare(b.campaign);
 
-  const remainingDaysSortFunction = (a, b) => {
-    return intervalInDays(a) - intervalInDays(b);
-  };
+  const remainingDaysSortFunction = (a, b) => intervalInDays(a) - intervalInDays(b);
 
   switch (criteria) {
     case 'sampleIdentifiers':

src/common-tools/functions/surveyUnitFunctions.js

@@ -32,11 +32,10 @@ export const intervalInDays = su => {
   return remainingDays.split(' ')[0];
 };
 
-export const isValidForTransmission = ue => {
+export const isValidForTransmission = ue =>
   /* const { contactOutcome } = ue;
   return contactOutcome !== null; */
-  return ue !== undefined;
-};
+  ue !== undefined;
 
 const getContactAttempts = async surveyUnit => {
   const { contactAttempts } = surveyUnit;
@@ -52,11 +51,9 @@ export const deleteContactAttempt = (surveyUnit, contactAttemptId) => {
   contactAttemptDBService.delete(contactAttemptId);
 };
 
-export const getContactAttemptNumber = surveyUnit => {
-  return surveyUnit.states.filter(
-    state => state.type === surveyUnitStateEnum.AT_LEAST_ONE_CONTACT.type
-  ).length;
-};
+export const getContactAttemptNumber = surveyUnit =>
+  surveyUnit.states.filter(state => state.type === surveyUnitStateEnum.AT_LEAST_ONE_CONTACT.type)
+    .length;
 
 const lastContactAttemptIsSuccessfull = async surveyUnit => {
   const contactAttempts = await getContactAttempts(surveyUnit);
@@ -69,9 +66,7 @@ const lastContactAttemptIsSuccessfull = async surveyUnit => {
   return CONTACT_SUCCESS_LIST.includes(lastContactAttempt.status);
 };
 
-const isContactAttemptOk = async surveyUnit => {
-  return lastContactAttemptIsSuccessfull(surveyUnit);
-};
+const isContactAttemptOk = async surveyUnit => lastContactAttemptIsSuccessfull(surveyUnit);
 
 const addContactState = async (surveyUnit, newState) => {
   switch (newState.type) {
@@ -193,9 +188,7 @@ export const updateStateWithDates = surveyUnit => {
   return result;
 };
 
-export const isQuestionnaireAvailable = su => {
-  return getLastState(su).type !== 'QNA';
-};
+export const isQuestionnaireAvailable = su => getLastState(su).type !== 'QNA';
 
 export const applyFilters = (surveyUnits, filters) => {
   const {