Upgrade packages and fix linter

.circleci/config.yml

@@ -35,6 +35,10 @@ jobs:
       - store_artifacts:
           path: coverage
 
+      - run: 
+          name: "Eslint"
+          command: npm run lint -- --max-warnings 0
+
       - run: 
           name: "Build app with Firebase auth disabled"
           command: npm run build

package.json

@@ -28,10 +28,10 @@
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
     "react-router-dom": "^5.1.2",
-    "react-scripts": "4.0.2",
+    "react-scripts": "4.0.3",
     "strip-color": "^0.1.0",
     "twilio": "^3.39.3",
-    "twilio-video": "^2.11.0",
+    "twilio-video": "^2.12.0",
     "typescript": "^3.8.3"
   },
   "devDependencies": {
@@ -53,7 +53,7 @@
     "puppeteer": "^5.3.1",
     "react-test-renderer": "^16.12.0",
     "start-server-and-test": "^1.10.8",
-    "ts-jest": "^24.3.0"
+    "ts-jest": "^26.5.1"
   },
   "lint-staged": {
     "src/**/*.{js,jsx,ts,tsx,json,css,scss,md}": [
@@ -67,7 +67,7 @@
     "build": "node ./scripts/build.js",
     "test": "jest",
     "eject": "react-scripts eject",
-    "lint": "eslint src/**/*.{ts,tsx}",
+    "lint": "eslint src",
     "server": "node server.js",
     "test:ci": "jest --ci --runInBand --reporters=default --reporters=jest-junit --coverage",
     "cypress:open": "cypress open",
@@ -78,7 +78,10 @@
   "eslintConfig": {
     "extends": "react-app",
     "rules": {
-      "no-shadow": "warn"
+      "no-shadow": "off",
+      "@typescript-eslint/no-shadow": [
+        "warn"
+      ]
     }
   },
   "browserslist": {

src/components/IntroContainer/swoosh.ts

@@ -1 +1,2 @@
-export default `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='296' height='378' viewBox='0 0 296 378'%3E%3Cdefs%3E%3ClinearGradient id='utbttnlrpc' x1='78.976%25' x2='63.882%25' y1='60.873%25' y2='45.554%25'%3E%3Cstop offset='0%25' stop-opacity='0'/%3E%3Cstop offset='100%25'/%3E%3C/linearGradient%3E%3ClinearGradient id='aim8r3oczd' x1='78.976%25' x2='63.882%25' y1='56.106%25' y2='47.503%25'%3E%3Cstop offset='0%25' stop-opacity='0'/%3E%3Cstop offset='100%25'/%3E%3C/linearGradient%3E%3Cpath id='5tk4i6f80a' d='M0 0H296V378H0z'/%3E%3C/defs%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cmask id='m1ihwluuxb' fill='%23fff'%3E%3Cuse xlink:href='%235tk4i6f80a'/%3E%3C/mask%3E%3Cuse fill='%23DE5858' xlink:href='%235tk4i6f80a'/%3E%3Cg mask='url(%23m1ihwluuxb)'%3E%3Cg%3E%3Cpath fill='url(%23utbttnlrpc)' d='M0 286.83c87.695-83.937 175.802-132.682 264.323-146.233 132.78-20.328 183.24 4.255 225.143-23.414 73.409-48.471 93.039-15.154 148.326-20.892 44.84-4.654 98.48-77.401 135.81-91.717C795.596-3.86 821.469.801 851.22 18.56L891 476.5H0V286.83z' opacity='.06' transform='translate(-457 -22.5)'/%3E%3Cpath fill='url(%23aim8r3oczd)' d='M137 604.5c63.759-109.686 155.8-165.124 276.126-166.315 180.488-1.786 157.888-146.686 387.11-146.33 229.223.356 170.665-151.786 341.36-166.888 113.797-10.068 180.265 10.685 199.404 62.26V604.5H137z' opacity='.08' transform='translate(-457 -22.5)'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");`;
+const Swoosh = `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='296' height='378' viewBox='0 0 296 378'%3E%3Cdefs%3E%3ClinearGradient id='utbttnlrpc' x1='78.976%25' x2='63.882%25' y1='60.873%25' y2='45.554%25'%3E%3Cstop offset='0%25' stop-opacity='0'/%3E%3Cstop offset='100%25'/%3E%3C/linearGradient%3E%3ClinearGradient id='aim8r3oczd' x1='78.976%25' x2='63.882%25' y1='56.106%25' y2='47.503%25'%3E%3Cstop offset='0%25' stop-opacity='0'/%3E%3Cstop offset='100%25'/%3E%3C/linearGradient%3E%3Cpath id='5tk4i6f80a' d='M0 0H296V378H0z'/%3E%3C/defs%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cmask id='m1ihwluuxb' fill='%23fff'%3E%3Cuse xlink:href='%235tk4i6f80a'/%3E%3C/mask%3E%3Cuse fill='%23DE5858' xlink:href='%235tk4i6f80a'/%3E%3Cg mask='url(%23m1ihwluuxb)'%3E%3Cg%3E%3Cpath fill='url(%23utbttnlrpc)' d='M0 286.83c87.695-83.937 175.802-132.682 264.323-146.233 132.78-20.328 183.24 4.255 225.143-23.414 73.409-48.471 93.039-15.154 148.326-20.892 44.84-4.654 98.48-77.401 135.81-91.717C795.596-3.86 821.469.801 851.22 18.56L891 476.5H0V286.83z' opacity='.06' transform='translate(-457 -22.5)'/%3E%3Cpath fill='url(%23aim8r3oczd)' d='M137 604.5c63.759-109.686 155.8-165.124 276.126-166.315 180.488-1.786 157.888-146.686 387.11-146.33 229.223.356 170.665-151.786 341.36-166.888 113.797-10.068 180.265 10.685 199.404 62.26V604.5H137z' opacity='.08' transform='translate(-457 -22.5)'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");`;
+export default Swoosh;

src/components/PreJoinScreens/PreflightTest/useGetPreflightTokens/useGetPreflightTokens.test.ts

@@ -23,8 +23,8 @@ describe('the useGetPreflightTokens hook', () => {
   });
 
   it('should return the tokenError property when there is an error', async () => {
-    const mockGetToken = jest.fn(() => Promise.reject('mockError'));
-    mockUseAppState.mockImplementationOnce(() => ({ getToken: mockGetToken }));
+    const mockGetTokenFn = jest.fn(() => Promise.reject('mockError'));
+    mockUseAppState.mockImplementationOnce(() => ({ getToken: mockGetTokenFn }));
     const { result, waitForNextUpdate } = renderHook(useGetPreflightTokens);
     await waitForNextUpdate();
     expect(result.current).toEqual({ tokens: undefined, tokenError: 'mockError' });

src/components/PreJoinScreens/PreflightTest/useGetPreflightTokens/useGetPreflightTokens.ts

@@ -18,8 +18,8 @@ export default function useGetPreflightTokens() {
       const subscriberIdentity = 'participant-' + nanoid();
 
       Promise.all([getToken(publisherIdentity, roomName), getToken(subscriberIdentity, roomName)])
-        .then(tokens => {
-          setTokens(tokens);
+        .then(newTokens => {
+          setTokens(newTokens);
           setIsFetching(false);
         })
         .catch(error => setTokenError(error));

src/components/Snackbar/Snackbar.test.tsx

@@ -1,5 +1,4 @@
 import { shallow } from 'enzyme';
-import CloseIcon from '@material-ui/icons/Close';
 import React from 'react';
 import Snackbar from './Snackbar';
 

src/components/UnsupportedBrowserWarning/UnsupportedBrowserWarning.tsx

@@ -15,7 +15,7 @@ const useStyles = makeStyles({
   },
 });
 
-export default function({ children }: { children: React.ReactElement }) {
+export default function UnsupportedBrowserWarning({ children }: { children: React.ReactElement }) {
   const classes = useStyles();
 
   if (!Video.isSupported) {

src/components/VideoProvider/useHandleRoomDisconnectionErrors/useHandleRoomDisconnectionErrors.test.tsx

@@ -2,7 +2,7 @@ import { act, renderHook } from '@testing-library/react-hooks';
 import EventEmitter from 'events';
 
 import useHandleRoomDisconnectionErrors from './useHandleRoomDisconnectionErrors';
-import { Room, TwilioError } from 'twilio-video';
+import { Room } from 'twilio-video';
 
 describe('the useHandleRoomDisconnectionErrors hook', () => {
   let mockRoom: any = new EventEmitter();

src/components/VideoProvider/useHandleRoomDisconnectionErrors/useHandleRoomDisconnectionErrors.ts

@@ -5,7 +5,7 @@ import { Callback } from '../../../types';
 
 export default function useHandleRoomDisconnectionErrors(room: Room, onError: Callback) {
   useEffect(() => {
-    const onDisconnected = (room: Room, error: TwilioError) => {
+    const onDisconnected = (_: Room, error: TwilioError) => {
       if (error) {
         onError(error);
       }

src/components/VideoProvider/useLocalTracks/useLocalTracks.ts

@@ -82,13 +82,13 @@ export default function useLocalTracks() {
 
     return Video.createLocalTracks(localTrackConstraints)
       .then(tracks => {
-        const videoTrack = tracks.find(track => track.kind === 'video');
-        const audioTrack = tracks.find(track => track.kind === 'audio');
-        if (videoTrack) {
-          setVideoTrack(videoTrack as LocalVideoTrack);
+        const newVideoTrack = tracks.find(track => track.kind === 'video');
+        const newAudioTrack = tracks.find(track => track.kind === 'audio');
+        if (newVideoTrack) {
+          setVideoTrack(newVideoTrack as LocalVideoTrack);
         }
-        if (audioTrack) {
-          setAudioTrack(audioTrack as LocalAudioTrack);
+        if (newAudioTrack) {
+          setAudioTrack(newAudioTrack as LocalAudioTrack);
         }
       })
       .finally(() => setIsAcquiringLocalTracks(false));

src/components/VideoProvider/useSelectedParticipant/useSelectedParticipant.test.tsx

@@ -1,4 +1,4 @@
-import { act, HookResult, renderHook, RenderHookResult } from '@testing-library/react-hooks';
+import { act, HookResult, renderHook } from '@testing-library/react-hooks';
 import { EventEmitter } from 'events';
 import React from 'react';
 import { Participant, Room } from 'twilio-video';

src/hooks/useDevices/useDevices.tsx

@@ -4,7 +4,7 @@ export default function useDevices() {
   const [devices, setDevices] = useState<MediaDeviceInfo[]>([]);
 
   useEffect(() => {
-    const getDevices = () => navigator.mediaDevices.enumerateDevices().then(devices => setDevices(devices));
+    const getDevices = () => navigator.mediaDevices.enumerateDevices().then(newDevices => setDevices(newDevices));
     navigator.mediaDevices.addEventListener('devicechange', getDevices);
     getDevices();
 

src/hooks/useMediaStreamTrack/__mocks__/useMediaStreamTrack.ts

@@ -1 +1,2 @@
-export default (track: any) => track?.mediaStreamTrack;
+const useMediaStreamTrack = (track: any) => track?.mediaStreamTrack;
+export default useMediaStreamTrack;

src/hooks/useVideoTrackDimensions/useVideoTrackDimensions.tsx

@@ -10,10 +10,11 @@ export default function useVideoTrackDimensions(track?: TrackType) {
     setDimensions(track?.dimensions);
 
     if (track) {
-      const handleDimensionsChanged = (track: TrackType) => setDimensions({
-        width: track.dimensions.width,
-        height: track.dimensions.height
-      });
+      const handleDimensionsChanged = (newTrack: TrackType) =>
+        setDimensions({
+          width: newTrack.dimensions.width,
+          height: newTrack.dimensions.height,
+        });
       track.on('dimensionsChanged', handleDimensionsChanged);
       return () => {
         track.off('dimensionsChanged', handleDimensionsChanged);

src/state/settings/settingsReducer.test.ts

@@ -32,15 +32,15 @@ describe('the settingsReducer', () => {
 
   it('should set the maxTracks property to 10 when not using a mobile browser', () => {
     jest.resetModules();
-    const { initialSettings } = require('./settingsReducer');
-    expect(initialSettings.maxTracks).toBe('10');
+    const reducer = require('./settingsReducer');
+    expect(reducer.initialSettings.maxTracks).toBe('10');
   });
 
   it('should set the maxTracks property to 5 when using a mobile browser', () => {
     Object.defineProperty(navigator, 'userAgent', { value: 'Mobile' });
     jest.resetModules();
-    const { initialSettings } = jest.requireActual('./settingsReducer');
-    expect(initialSettings.maxTracks).toBe('5');
+    const reducer = jest.requireActual('./settingsReducer');
+    expect(reducer.initialSettings.maxTracks).toBe('5');
   });
 });
 

src/state/useFirebaseAuth/useFirebaseAuth.ts

@@ -31,8 +31,8 @@ export default function useFirebaseAuth() {
 
   useEffect(() => {
     firebase.initializeApp(firebaseConfig);
-    firebase.auth().onAuthStateChanged(user => {
-      setUser(user);
+    firebase.auth().onAuthStateChanged(newUser => {
+      setUser(newUser);
       setIsAuthReady(true);
     });
   }, []);
@@ -44,8 +44,8 @@ export default function useFirebaseAuth() {
     return firebase
       .auth()
       .signInWithPopup(provider)
-      .then(user => {
-        setUser(user.user);
+      .then(newUser => {
+        setUser(newUser.user);
       });
   }, []);