Update react-scripts to 4

This change pulls in latest react-scripts and its dependencies. This
also brought a new linter and a full customizable service worker which
makes lots of the previous hacks no longer required. Yay! Also the new
linter showed some errors which needed fixes.

.eslintignore

@@ -4,4 +4,3 @@ dist/*
 es/*
 tests/*
 coverage/*
-public/sw.js

.eslintrc.json

@@ -9,7 +9,7 @@
 		}
 	},
 	"plugins": ["@calm/react-intl", "i18n-text"],
-	"extends": ["eslint:recommended", "plugin:react/recommended", "plugin:jest/recommended"],
+	"extends": ["react-app", "react-app/jest", "plugin:jest/recommended"],
 	"settings": {
 		"react": {
 			"version": "detect"

.gitignore

@@ -8,7 +8,6 @@
 /test
 /coverage
 /.eslintcache
-/public/sw.js
 
 # production
 /build

Caddyfile.dev

@@ -15,14 +15,12 @@
         header_downstream Referrer-Policy origin
         header_downstream Content-Security-Policy "object-src 'none'; script-src 'self' 'unsafe-inline'; base-uri 'none'; frame-ancestors 'self';"
     }
-    # Noop service-worker via webpack-dev-server.
-    proxy /service-worker.js 127.0.0.1:3004
-    header /service-worker.js {
+    status 404 /meet/service-worker.js
+    header /meet/service-worker.js {
         Cache-Control "no-cache, no-store, must-revalidate"
         Pragma "no-cache"
         Expires "0"
     }
-    rewrite /meet/service-worker.js /service-worker.js
     proxy /sockjs-node 127.0.0.1:3004 {
         websocket
     }

Makefile

@@ -32,12 +32,12 @@ i18n: vendor
 
 .PHONY: lint
 lint: vendor ; $(info running eslint ...)	@
-	$(YARN) eslint . --cache && echo "eslint: no lint errors"
+	@$(YARN) eslint . --cache && echo "eslint: no lint errors"
 
 .PHONY: lint-checkstyle
 lint-checkstyle: vendor ; $(info running eslint checkstyle ...)	@
 	@mkdir -p ../test
-	$(YARN) eslint -f checkstyle -o ./test/tests.eslint.xml . || true
+	@$(YARN) eslint -f checkstyle -o ./test/tests.eslint.xml . || true
 
 # Tests
 

package.json

@@ -4,6 +4,9 @@
   "private": true,
   "homepage": "/meet",
   "dependencies": {
+    "@testing-library/jest-dom": "^5.11.4",
+    "@testing-library/react": "^11.1.0",
+    "@testing-library/user-event": "^12.1.10",
     "@gluejs/glue": "^0.3.0",
     "@material-ui/core": "^4.11.0",
     "@material-ui/icons": "^4.9.1",
@@ -37,38 +40,48 @@
     "react-redux": "^7.1.3",
     "react-router": "^5.1.2",
     "react-router-dom": "^5.1.2",
-    "react-scripts": "3.4.1",
+    "react-scripts": "4.0.0",
     "redux": "^3.7.2",
     "redux-logger": "^3.0.6",
     "redux-persist": "^5.10.0",
     "redux-thunk": "^2.2.0",
     "render-if": "^0.1.1",
     "reselect": "^4.0.0",
     "typeface-roboto": "^0.0.54",
-    "webrtc-adapter": "^7.6.1"
+    "web-vitals": "^0.2.4",
+    "webrtc-adapter": "^7.6.1",
+    "workbox-background-sync": "^5.1.3",
+    "workbox-broadcast-update": "^5.1.3",
+    "workbox-cacheable-response": "^5.1.3",
+    "workbox-core": "^5.1.3",
+    "workbox-expiration": "^5.1.3",
+    "workbox-navigation-preload": "^5.1.3",
+    "workbox-precaching": "^5.1.3",
+    "workbox-range-requests": "^5.1.3",
+    "workbox-routing": "^5.1.3",
+    "workbox-strategies": "^5.1.3",
+    "workbox-streams": "^5.1.3"
   },
   "scripts": {
-    "start": "cra-append-sw --mode dev ./src/sw/sw.js && react-scripts start",
-    "build": "react-scripts build && cra-append-sw ./src/sw/sw.js && node ./scripts/local-workbox.js && rm -f build/sw.js",
+    "start": "react-scripts start",
+    "build": "react-scripts build",
     "test": "react-scripts test --env=./scripts/jestMeetEnvironment.js",
     "eject": "react-scripts eject",
     "licenses": "node ./scripts/js-license-ranger.js",
     "deduplicate": "yarn-deduplicate -s fewer yarn.lock",
     "analyze": "source-map-explorer 'build/static/js/*.js'"
   },
   "devDependencies": {
-    "@babel/core": "^7.0.0",
-    "@babel/runtime": "7.0.0-beta.55",
+    "@babel/core": "^7.12.0",
     "@calm/eslint-plugin-react-intl": "^1.3.1",
-    "cra-append-sw": "^2.6.0",
-    "eslint": ">=5",
+    "eslint": ">=7.11",
     "eslint-plugin-i18n-text": "^1.0.0",
-    "eslint-plugin-jest": "^22.0.0",
-    "eslint-plugin-react": "^7.17.0",
+    "eslint-plugin-jest": "^24.1.0",
+    "eslint-plugin-react": "^7.21.5",
     "react-intl-cra": "^0.3.3",
     "react-intl-po": "^2.2.1",
     "source-map-explorer": "^1.5.0",
-    "webpack": ">=2",
+    "webpack": ">=4",
     "yarn-deduplicate": "^1.1.1"
   },
   "resolutions": {
@@ -79,7 +92,7 @@
     "**/@material-ui/icons": "4.9.1",
     "**/react-intl": "2.9.0",
     "**/oidc-client": "1.9.1",
-    "**/eslint-plugin-react": "7.19.0",
+    "**/eslint-plugin-react": "7.21.5",
     "**/browserslist": "4.14.7"
   },
   "jest": {
@@ -90,12 +103,19 @@
       "node_modules/?!(kpop)"
     ]
   },
-  "browserslist": [
-    "> 0.5%",
-    "last 2 versions",
-    "Firefox ESR",
-    "not dead",
-    "not ie <= 11",
-    "not op_mini all"
-  ]
+  "browserslist": {
+    "production": [
+      "> 0.5%",
+      "last 2 versions",
+      "Firefox ESR",
+      "not dead",
+      "not ie <= 11",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
 }

scripts/jestMeetEnvironment.js

@@ -1,5 +1,3 @@
-/* global module */
-
 const JSDOMEnvironment = require('jest-environment-jsdom');
 
 // Mocks.

src/actions/meet.js

@@ -675,7 +675,7 @@ export function muteStream({mute, video, audio}) {
       actions.push(mediaMuteAudioStream);
     }
     const promises = [];
-    actions.map(action => {
+    actions.forEach(action => {
       promises.push(dispatch(action(stream, mute, LOCAL_STREAM_ID, settings)).then(info => {
         const videoTracks = info.stream.getVideoTracks();
         const audioTracks = info.stream.getAudioTracks();

src/api/kvs.js

@@ -79,8 +79,9 @@ function del(key, realm = 'user') {
   };
 }
 
-export default {
+const exports = {
   get,
   createOrUpdate,
   del,
 };
+export default exports;

src/base.js

@@ -17,7 +17,8 @@ export function getCurrentAppPath() {
   return window.location.href.substr(appBaseURL.length).split('?', 2)[0].split('#', 2)[0];
 }
 
-export default {
+const exports = {
   basePath,
   appBaseURL,
 };
+export default exports;

src/configureStore.js

@@ -15,7 +15,7 @@ import { basePath } from './base';
 
 const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
 
-export default () => {
+const configureStore = () => {
   const loggerMiddleware = createLogger();
   const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
 
@@ -75,3 +75,5 @@ export default () => {
 
   return { store, storage, persistor, history };
 };
+
+export default configureStore;

src/containers/Join/Joinscreen.js

@@ -304,7 +304,7 @@ class Joinscreen extends React.PureComponent {
                   </IconButton>
                 </React.Fragment>}
                 <div className={classes.title}></div>
-                {activeStep == 2 && <SettingsButton color="inherit" size="small" className={classes.backButton}/>}
+                {activeStep === 2 && <SettingsButton color="inherit" size="small" className={classes.backButton}/>}
               </Toolbar>
               <View entry={entry} navigate={this.navigate} className={classes.view}/>
               <MobileStepper

src/containers/Meet/CallView.js

@@ -1354,7 +1354,7 @@ const mapDispatchToProps = dispatch => bindActionCreators({
 }, dispatch);
 
 const withMobile = Component => {
-  return function withMobile(props) {
+  return function useWithMobile(props) {
     const theme = useTheme();
     const isDesktop = useMediaQuery(theme.breakpoints.up('md'));
 

src/service-worker.js

@@ -0,0 +1,53 @@
+/* eslint-disable no-restricted-globals */
+
+// This service worker can be customized!
+// See https://developers.google.com/web/tools/workbox/modules
+// for the list of available Workbox modules, or add any other
+// code you'd like.
+
+import { clientsClaim } from 'workbox-core';
+import { precacheAndRoute, createHandlerBoundToURL } from 'workbox-precaching';
+import { registerRoute } from 'workbox-routing';
+
+clientsClaim();
+
+// Precache all of the assets generated by your build process.
+// Their URLs are injected into the manifest variable below.
+// This variable must be present somewhere in your service worker file,
+// even if you decide not to use precaching. See https://cra.link/PWA
+precacheAndRoute(self.__WB_MANIFEST);
+
+// Set up App Shell-style routing, so that all navigation requests
+// are fulfilled with your index.html shell. Learn more at
+// https://developers.google.com/web/fundamentals/architecture/app-shell
+const fileExtensionRegexp = new RegExp('/[^/?]+\\.[^/]+$');
+registerRoute(
+  // Return false to exempt requests from being fulfilled by index.html.
+  ({ request, url }) => {
+    // If this isn't a navigation, skip.
+    if (request.mode !== 'navigate') {
+      return false;
+    } // If this is a URL that starts with /_, skip.
+
+    if (url.pathname.startsWith('/_')) {
+      return false;
+    } // If this looks like a URL for a resource, because it contains // a file extension, skip.
+
+    if (url.pathname.match(fileExtensionRegexp)) {
+      return false;
+    } // Return true to signal that we want to use the handler.
+
+    return true;
+  },
+  createHandlerBoundToURL(process.env.PUBLIC_URL + '/index.html')
+);
+
+// This allows the web app to trigger skipWaiting via
+// registration.waiting.postMessage({type: 'SKIP_WAITING'})
+self.addEventListener('message', (event) => {
+  if (event.data && event.data.type === 'SKIP_WAITING') {
+    self.skipWaiting();
+  }
+});
+
+// Any other custom service worker logic can go here.

src/version.js

@@ -1,5 +1,3 @@
-/*global process: true*/
-
 const build = process.env.REACT_APP_KOPANO_BUILD || '0.0.0-no-proper-build';
 
 export {