Merge pull request #5910 from tchak/update-react

Update react

app/javascript/components/ComboAdresseSearch.jsx

@@ -1,9 +1,9 @@
 import React, { useCallback } from 'react';
-import { ReactQueryCacheProvider } from 'react-query';
+import { QueryClientProvider } from 'react-query';
 import PropTypes from 'prop-types';
 
 import ComboSearch from './ComboSearch';
-import { queryCache } from './shared/queryCache';
+import { queryClient } from './shared/queryClient';
 
 function ComboAdresseSearch({
   mandatory,
@@ -16,7 +16,7 @@ function ComboAdresseSearch({
   const transformResults = useCallback((_, { features }) => features);
 
   return (
-    <ReactQueryCacheProvider queryCache={queryCache}>
+    <QueryClientProvider client={queryClient}>
       <ComboSearch
         placeholder={placeholder}
         required={mandatory}
@@ -28,7 +28,7 @@ function ComboAdresseSearch({
         transformResult={transformResult}
         transformResults={transformResults}
       />
-    </ReactQueryCacheProvider>
+    </QueryClientProvider>
   );
 }
 

app/javascript/components/ComboAnnuaireEducationSearch.jsx

@@ -1,12 +1,12 @@
 import React from 'react';
-import { ReactQueryCacheProvider } from 'react-query';
+import { QueryClientProvider } from 'react-query';
 
 import ComboSearch from './ComboSearch';
-import { queryCache } from './shared/queryCache';
+import { queryClient } from './shared/queryClient';
 
 function ComboAnnuaireEducationSearch(params) {
   return (
-    <ReactQueryCacheProvider queryCache={queryCache}>
+    <QueryClientProvider client={queryClient}>
       <ComboSearch
         required={params.mandatory}
         hiddenFieldId={params.hiddenFieldId}
@@ -21,7 +21,7 @@ function ComboAnnuaireEducationSearch(params) {
           }
         }) => [id, `${nom_etablissement}, ${nom_commune} (${id})`]}
       />
-    </ReactQueryCacheProvider>
+    </QueryClientProvider>
   );
 }
 

app/javascript/components/ComboCommunesSearch.jsx

@@ -1,12 +1,12 @@
 import React from 'react';
-import { ReactQueryCacheProvider } from 'react-query';
+import { QueryClientProvider } from 'react-query';
 
 import ComboSearch from './ComboSearch';
-import { queryCache } from './shared/queryCache';
+import { queryClient } from './shared/queryClient';
 
 function ComboCommunesSearch(params) {
   return (
-    <ReactQueryCacheProvider queryCache={queryCache}>
+    <QueryClientProvider client={queryClient}>
       <ComboSearch
         required={params.mandatory}
         hiddenFieldId={params.hiddenFieldId}
@@ -17,7 +17,7 @@ function ComboCommunesSearch(params) {
           `${nom} (${codesPostaux[0]})`
         ]}
       />
-    </ReactQueryCacheProvider>
+    </QueryClientProvider>
   );
 }
 

app/javascript/components/ComboDepartementsSearch.jsx

@@ -1,9 +1,9 @@
 import React, { useCallback } from 'react';
-import { ReactQueryCacheProvider } from 'react-query';
-import matchSorter from 'match-sorter';
+import { QueryClientProvider } from 'react-query';
+import { matchSorter } from 'match-sorter';
 
 import ComboSearch from './ComboSearch';
-import { queryCache } from './shared/queryCache';
+import { queryClient } from './shared/queryClient';
 
 const extraTerms = [{ code: '99', nom: 'Etranger' }];
 
@@ -16,7 +16,7 @@ function ComboDepartementsSearch(params) {
   ]);
 
   return (
-    <ReactQueryCacheProvider queryCache={queryCache}>
+    <QueryClientProvider client={queryClient}>
       <ComboSearch
         required={params.mandatory}
         hiddenFieldId={params.hiddenFieldId}
@@ -25,7 +25,7 @@ function ComboDepartementsSearch(params) {
         transformResult={({ code, nom }) => [code, `${code} - ${nom}`]}
         transformResults={transformResults}
       />
-    </ReactQueryCacheProvider>
+    </QueryClientProvider>
   );
 }
 

app/javascript/components/ComboMultipleDropdownList.jsx

@@ -16,7 +16,7 @@ import {
   ComboboxPopover
 } from '@reach/combobox';
 import '@reach/combobox/styles.css';
-import matchSorter from 'match-sorter';
+import { matchSorter } from 'match-sorter';
 import { fire } from '@utils';
 
 const Context = createContext();

app/javascript/components/ComboPaysSearch.jsx

@@ -1,12 +1,12 @@
 import React from 'react';
-import { ReactQueryCacheProvider } from 'react-query';
+import { QueryClientProvider } from 'react-query';
 
 import ComboSearch from './ComboSearch';
-import { queryCache } from './shared/queryCache';
+import { queryClient } from './shared/queryClient';
 
 function ComboPaysSearch(params) {
   return (
-    <ReactQueryCacheProvider queryCache={queryCache}>
+    <QueryClientProvider client={queryClient}>
       <ComboSearch
         required={params.mandatory}
         hiddenFieldId={params.hiddenFieldId}
@@ -14,7 +14,7 @@ function ComboPaysSearch(params) {
         minimumInputLength={0}
         transformResult={({ nom }) => [nom, nom]}
       />
-    </ReactQueryCacheProvider>
+    </QueryClientProvider>
   );
 }
 

app/javascript/components/ComboRegionsSearch.jsx

@@ -1,12 +1,12 @@
 import React from 'react';
-import { ReactQueryCacheProvider } from 'react-query';
+import { QueryClientProvider } from 'react-query';
 
 import ComboSearch from './ComboSearch';
-import { queryCache } from './shared/queryCache';
+import { queryClient } from './shared/queryClient';
 
 function ComboRegionsSearch(params) {
   return (
-    <ReactQueryCacheProvider queryCache={queryCache}>
+    <QueryClientProvider client={queryClient}>
       <ComboSearch
         required={params.mandatory}
         hiddenFieldId={params.hiddenFieldId}
@@ -14,7 +14,7 @@ function ComboRegionsSearch(params) {
         minimumInputLength={0}
         transformResult={({ code, nom }) => [code, nom]}
       />
-    </ReactQueryCacheProvider>
+    </QueryClientProvider>
   );
 }
 

app/javascript/components/ComboSearch.jsx

@@ -1,5 +1,5 @@
 import React, { useState, useMemo, useCallback, useRef } from 'react';
-import { useDebounce } from 'react-use';
+import { useDebounce } from 'use-debounce';
 import { useQuery } from 'react-query';
 import PropTypes from 'prop-types';
 import {
@@ -41,7 +41,7 @@ function ComboSearch({
   );
   const initialValue = hiddenValueField && hiddenValueField.value;
   const [searchTerm, setSearchTerm] = useState('');
-  const [debouncedSearchTerm, setDebouncedSearchTerm] = useState('');
+  const [debouncedSearchTerm] = useDebounce(searchTerm, 300);
   const [value, setValue] = useState(initialValue);
   const resultsMap = useRef({});
   const setExternalValue = useCallback((value) => {
@@ -64,14 +64,6 @@ function ComboSearch({
     }
   });
 
-  useDebounce(
-    () => {
-      setDebouncedSearchTerm(searchTerm);
-    },
-    300,
-    [searchTerm]
-  );
-
   const handleOnChange = useCallback(
     ({ target: { value } }) => {
       setValue(value);

app/javascript/components/TypesDeChampEditor/typeDeChampsReducer.js

@@ -1,4 +1,3 @@
-import scrollToComponent from 'react-scroll-to-component';
 import { debounce } from '@utils';
 import {
   createTypeDeChampOperation,
@@ -53,8 +52,10 @@ function addTypeDeChamp(state, typeDeChamps, insertAfter, done) {
       state.flash.success();
       done();
       if (insertAfter) {
-        scrollToComponent(insertAfter.target.nextElementSibling, {
-          duration: 300
+        insertAfter.target.nextElementSibling.scrollIntoView({
+          behavior: 'smooth',
+          block: 'start',
+          inline: 'nearest'
         });
       }
     })

app/javascript/components/shared/queryClient.js

@@ -1,12 +1,12 @@
-import { QueryCache } from 'react-query';
+import { QueryClient } from 'react-query';
 import { isNumeric } from '@utils';
-import matchSorter from 'match-sorter';
+import { matchSorter } from 'match-sorter';
 
 const { api_geo_url, api_adresse_url, api_education_url } =
   gon.autocomplete || {};
 
-export const queryCache = new QueryCache({
-  defaultConfig: {
+export const queryClient = new QueryClient({
+  defaultOptions: {
     queries: {
       queryFn: defaultQueryFn
     }
@@ -35,7 +35,7 @@ function buildOptions() {
   return [{}, null];
 }
 
-async function defaultQueryFn(scope, term) {
+async function defaultQueryFn({ queryKey: [scope, term] }) {
   if (scope == 'pays') {
     return matchSorter(await getPays(), term, { keys: ['nom'] });
   }

config/webpacker.yml

@@ -36,6 +36,7 @@ default: &default
   extensions:
     - .mjs
     - .js
+    - .jsx
     - .sass
     - .scss
     - .css

package.json

@@ -1,15 +1,15 @@
 {
   "dependencies": {
-    "@babel/preset-react": "^7.10.4",
-    "@fortawesome/fontawesome-svg-core": "^1.2.28",
-    "@fortawesome/free-solid-svg-icons": "^5.13.0",
-    "@fortawesome/react-fontawesome": "^0.1.9",
+    "@babel/preset-react": "^7.12.13",
+    "@fortawesome/fontawesome-svg-core": "^1.2.34",
+    "@fortawesome/free-solid-svg-icons": "^5.15.2",
+    "@fortawesome/react-fontawesome": "^0.1.14",
     "@mapbox/mapbox-gl-draw": "^1.2.0",
     "@rails/actiontext": "^6.0.3",
     "@rails/activestorage": "^6.0.3",
     "@rails/ujs": "^6.0.3",
     "@rails/webpacker": "5.1.1",
-    "@reach/combobox": "^0.10.2",
+    "@reach/combobox": "^0.13.0",
     "@sentry/browser": "^5.15.5",
     "@tmcw/togeojson": "^4.0.0",
     "babel-plugin-macros": "^2.8.0",
@@ -20,23 +20,22 @@
     "dom4": "^2.1.5",
     "email-butler": "^1.0.13",
     "highcharts": "^8.1.1",
-    "intersection-observer": "^0.10.0",
+    "intersection-observer": "^0.12.0",
     "jquery": "^3.5.1",
     "mapbox-gl": "^1.11.1",
-    "match-sorter": "^4.2.1",
+    "match-sorter": "^6.2.0",
     "prop-types": "^15.7.2",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
-    "react-intersection-observer": "^8.26.2",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
+    "react-intersection-observer": "^8.31.0",
     "react-mapbox-gl": "^4.8.6",
     "react-mapbox-gl-draw": "^2.0.4",
-    "react-query": "^2.23.1",
-    "react-scroll-to-component": "^1.0.2",
+    "react-query": "^3.9.7",
     "react-sortable-hoc": "^1.11.0",
-    "react-use": "^15.3.4",
     "react_ujs": "^2.6.1",
     "select2": "^4.0.13",
     "trix": "^1.2.3",
+    "use-debounce": "^5.2.0",
     "whatwg-fetch": "^3.0.0"
   },
   "devDependencies": {
@@ -45,15 +44,15 @@
     "eslint": "^7.0.0",
     "eslint-config-prettier": "^6.11.0",
     "eslint-plugin-prettier": "^3.1.3",
-    "eslint-plugin-react": "^7.20.0",
-    "eslint-plugin-react-hooks": "^4.0.2",
+    "eslint-plugin-react": "^7.22.0",
+    "eslint-plugin-react-hooks": "^4.2.0",
     "netlify-cli": "^2.61.2",
     "prettier": "^2.0.5",
     "webpack-bundle-analyzer": "^3.7.0",
     "webpack-dev-server": "^3.11.0"
   },
   "scripts": {
-    "lint:js": "eslint ./app/javascript ./config/webpack",
+    "lint:js": "eslint --ext .js,.jsx,.ts,.tsx ./app/javascript ./config/webpack",
     "webpack:build": "NODE_ENV=production bin/webpack",
     "graphql:docs:build": "graphdoc --force",
     "graphql:docs:deploy": "netlify deploy -d ./docs/graphql --prod",