chore: work on linter warnings

.eslintrc.json

@@ -23,7 +23,20 @@
     "RTCAudioSource": true
   },
   "plugins": ["sort-keys-fix", "import", "react-hooks", "eslint-plugin-testing-library", "@typescript-eslint"],
-  "ignorePatterns": [".git/", "docs/", "bin/", "node_modules/", "resource/", "server/bin/", "server/dist/", "server/node_modules/", "src/ext/", "src/script/localization/**/webapp*.js", "src/worker/"],
+  "ignorePatterns": [
+    ".git/",
+    "docs/",
+    "bin/",
+    "node_modules/",
+    "resource/",
+    "server/bin/",
+    "server/dist/",
+    "server/node_modules/",
+    "src/ext/",
+    "src/script/localization/**/webapp*.js",
+    "src/worker/",
+    "*.js"
+  ],
   "overrides": [
     {
       "files": ["*.ts", "*.tsx"],
@@ -44,8 +57,8 @@
     }
   ],
   "rules": {
-    "id-length": "warn",
-    "no-magic-numbers": "warn",
+    "id-length": "off",
+    "no-magic-numbers": ["off", {"ignoreArrayIndexes": true}],
     "jest/no-jasmine-globals": "off",
     "jest/no-identical-title": "warn",
     "jest/no-done-callback": "warn",
@@ -59,8 +72,8 @@
     "react-hooks/rules-of-hooks": "error",
     "react-hooks/exhaustive-deps": "warn",
     "import/no-unresolved": "error",
-    "import/no-default-export": "warn",
-    "@typescript-eslint/explicit-module-boundary-types": "warn",
+    "import/no-default-export": "error",
+    "@typescript-eslint/explicit-module-boundary-types": "off",
     "@typescript-eslint/no-empty-interface": "warn",
     "@typescript-eslint/ban-ts-comment": "off",
     "@typescript-eslint/no-var-requires": "warn",

package.json

@@ -62,7 +62,7 @@
     "@babel/preset-typescript": "7.18.6",
     "@faker-js/faker": "7.5.0",
     "@formatjs/cli": "5.1.1",
-    "@koush/wrtc": "0.5.3",
+    "@koush/wrtc": "^0.5.3",
     "@testing-library/react": "13.4.0",
     "@types/adm-zip": "0.5.0",
     "@types/caniuse-lite": "^1.0.1",

src/script/auth/component/AcceptNewsModal.tsx

@@ -74,4 +74,4 @@ const AcceptNewsModal = ({onConfirm, onDecline}: Props) => {
   );
 };
 
-export default AcceptNewsModal;
+export {AcceptNewsModal};

src/script/auth/component/AccountForm.test.tsx

@@ -19,7 +19,7 @@
 
 import {fireEvent, RenderResult} from '@testing-library/react';
 
-import AccountForm from './AccountForm';
+import {AccountForm} from './AccountForm';
 
 import {initialRootState} from '../module/reducer';
 import {mockStoreFactory} from '../util/test/mockStoreFactory';

src/script/auth/component/AccountForm.tsx

@@ -27,7 +27,7 @@ import {AnyAction, Dispatch} from 'redux';
 
 import {KEY} from 'Util/KeyboardUtil';
 
-import Exception from './Exception';
+import {Exception} from './Exception';
 
 import {Config} from '../../Config';
 import {accountFormStrings} from '../../strings';
@@ -44,7 +44,7 @@ interface Props extends React.HTMLProps<HTMLFormElement> {
   submitText?: string;
 }
 
-const AccountForm = ({account, ...props}: Props & ConnectedProps & DispatchProps) => {
+const AccountFormComponent = ({account, ...props}: Props & ConnectedProps & DispatchProps) => {
   const {formatMessage: _} = useIntl();
   const [registrationData, setRegistrationData] = React.useState({
     accent_id: AccentColor.random().id,
@@ -337,4 +337,6 @@ const mapDispatchToProps = (dispatch: Dispatch<AnyAction>) =>
     dispatch,
   );
 
-export default connect(mapStateToProps, mapDispatchToProps)(AccountForm);
+const AccountForm = connect(mapStateToProps, mapDispatchToProps)(AccountFormComponent);
+
+export {AccountForm};

src/script/auth/component/AppAlreadyOpen.tsx

@@ -34,7 +34,7 @@ export interface Props {
 
 type AppAlreadyOpenProps = Props & ConnectedProps & DispatchProps;
 
-const AppAlreadyOpen = ({isAppAlreadyOpen, fullscreen, removeCookie}: AppAlreadyOpenProps) => {
+const AppAlreadyOpenComponent = ({isAppAlreadyOpen, fullscreen, removeCookie}: AppAlreadyOpenProps) => {
   const {formatMessage: _} = useIntl();
   if (!isAppAlreadyOpen) {
     return null;
@@ -79,4 +79,6 @@ const mapDispatchToProps = (dispatch: Dispatch<AnyAction>) =>
     dispatch,
   );
 
-export default connect(mapStateToProps, mapDispatchToProps)(AppAlreadyOpen);
+const AppAlreadyOpen = connect(mapStateToProps, mapDispatchToProps)(AppAlreadyOpenComponent);
+
+export {AppAlreadyOpen};

src/script/auth/component/ClientItem.tsx

@@ -322,4 +322,4 @@ const ClientItem = ({selected, onClientRemoval, onClick, client, clientError, re
   );
 };
 
-export default ClientItem;
+export {ClientItem};

src/script/auth/component/ClientList.tsx

@@ -27,7 +27,7 @@ import {AnyAction, Dispatch} from 'redux';
 
 import {getLogger} from 'Util/Logger';
 
-import ClientItem from './ClientItem';
+import {ClientItem} from './ClientItem';
 
 import {actionRoot as ROOT_ACTIONS} from '../module/action/';
 import * as LocalStorageAction from '../module/action/LocalStorageAction';
@@ -40,7 +40,7 @@ import {QUERY_KEY, ROUTE} from '../route';
 const logger = getLogger('ClientList');
 
 type Props = React.HTMLProps<HTMLDivElement>;
-const ClientList = ({
+const ClientListComponent = ({
   clientError,
   isFetching,
   isNoPasswordSSO,
@@ -130,4 +130,6 @@ const mapDispatchToProps = (dispatch: Dispatch<AnyAction>) =>
     dispatch,
   );
 
-export default connect(mapStateToProps, mapDispatchToProps)(ClientList);
+const ClientList = connect(mapStateToProps, mapDispatchToProps)(ClientListComponent);
+
+export {ClientList};

src/script/auth/component/EntropyCanvas.test.tsx

@@ -21,7 +21,7 @@ import React from 'react';
 
 import {fireEvent, render, screen, act} from '@testing-library/react';
 
-import EntropyCanvas from './EntropyCanvas';
+import {EntropyCanvas} from './EntropyCanvas';
 
 import {EntropyData} from '../../util/Entropy';
 import {withIntl, withTheme} from '../util/test/TestUtil';

src/script/auth/component/EntropyCanvas.tsx

@@ -130,4 +130,4 @@ const EntropyCanvas = (props: CanvasProps) => {
   );
 };
 
-export default EntropyCanvas;
+export {EntropyCanvas};

src/script/auth/component/Exception.tsx

@@ -65,4 +65,4 @@ const Exception = ({errors = []}: ExceptionProps) => {
   );
 };
 
-export default Exception;
+export {Exception};

src/script/auth/component/LinkButton.tsx

@@ -37,4 +37,4 @@ const LinkButton = (props: React.ButtonHTMLAttributes<HTMLButtonElement>) => (
   />
 );
 
-export default LinkButton;
+export {LinkButton};

src/script/auth/component/LoginForm.tsx

@@ -131,4 +131,4 @@ const LoginForm = ({isFetching, onSubmit}: LoginFormProps) => {
   );
 };
 
-export default LoginForm;
+export {LoginForm};

src/script/auth/component/PhoneLoginForm.tsx

@@ -131,4 +131,4 @@ const PhoneLoginForm = ({isFetching, onSubmit}: LoginFormProps) => {
     </div>
   );
 };
-export default PhoneLoginForm;
+export {PhoneLoginForm};

src/script/auth/component/RouterLink.tsx

@@ -26,4 +26,4 @@ const RRLink = RouterDOM.Link;
 
 const RouterLink = (props: RouterLinkProps) => <RRLink css={(theme: Theme) => linkStyle(theme, props)} {...props} />;
 
-export default RouterLink;
+export {RouterLink};

src/script/auth/component/UnsupportedBrowser.test.tsx

@@ -19,7 +19,7 @@
 
 import {TypeUtil, Runtime} from '@wireapp/commons';
 
-import UnsupportedBrowser from './UnsupportedBrowser';
+import {UnsupportedBrowser} from './UnsupportedBrowser';
 
 import {Config, Configuration} from '../../Config';
 import {initialRootState} from '../module/reducer';

src/script/auth/component/UnsupportedBrowser.tsx

@@ -24,7 +24,7 @@ import {Container, ContainerXS, H1, H2, H3, Loading, Logo, Text} from '@wireapp/
 import {MessageDescriptor, useIntl} from 'react-intl';
 import {connect} from 'react-redux';
 
-import WirelessContainer from './WirelessContainer';
+import {WirelessContainer} from './WirelessContainer';
 
 import {Config} from '../../Config';
 import {unsupportedJoinStrings, unsupportedStrings} from '../../strings';
@@ -53,7 +53,7 @@ export interface UnsupportedBrowserProps extends React.HTMLProps<HTMLDivElement>
   isTemporaryGuest?: boolean;
 }
 
-export const UnsupportedBrowser = ({
+export const UnsupportedBrowserComponent = ({
   children,
   hasCookieSupport,
   hasIndexedDbSupport,
@@ -128,4 +128,6 @@ const mapStateToProps = (state: RootState) => ({
   isSupportedBrowser: RuntimeSelector.isSupportedBrowser(state),
 });
 
-export default connect(mapStateToProps)(UnsupportedBrowser);
+const UnsupportedBrowser = connect(mapStateToProps)(UnsupportedBrowserComponent);
+
+export {UnsupportedBrowser};

src/script/auth/component/WirelessContainer.tsx

@@ -26,15 +26,15 @@ import {FormattedMessage, useIntl} from 'react-intl';
 import {Config} from '../../Config';
 import {cookiePolicyStrings, footerStrings} from '../../strings';
 import {EXTERNAL_ROUTE} from '../externalRoute';
-import SVGProvider from '../util/SVGProvider';
+import {getSVG} from '../util/SVGProvider';
 
 export interface Props extends React.HTMLAttributes<HTMLDivElement> {
   children: React.ReactNode;
   onCookiePolicyBannerClose?: (event: React.MouseEvent<HTMLElement>) => void;
   showCookiePolicyBanner?: boolean;
 }
 
-export const WirelessContainer: React.FC<Props> = ({showCookiePolicyBanner, onCookiePolicyBannerClose, children}) => {
+const WirelessContainer: React.FC<Props> = ({showCookiePolicyBanner, onCookiePolicyBannerClose, children}) => {
   const {formatMessage: _} = useIntl();
   return (
     <div
@@ -95,7 +95,7 @@ export const WirelessContainer: React.FC<Props> = ({showCookiePolicyBanner, onCo
       <Content>
         <Header style={{height: '40px', marginLeft: '8px', marginTop: '20px'}}>
           <SVGIcon aria-hidden="true" scale={0.9} realWidth={78} realHeight={25}>
-            <g dangerouslySetInnerHTML={{__html: SVGProvider['logo-full-icon']?.documentElement?.innerHTML}} />
+            <g dangerouslySetInnerHTML={{__html: getSVG('logo-full-icon')?.documentElement?.innerHTML}} />
           </SVGIcon>
         </Header>
         <Content style={{flex: '1', paddingLeft: '8px', width: '100%'}}>{children}</Content>
@@ -108,4 +108,4 @@ export const WirelessContainer: React.FC<Props> = ({showCookiePolicyBanner, onCo
   );
 };
 
-export default WirelessContainer;
+export {WirelessContainer};

src/script/auth/main.tsx

@@ -33,7 +33,7 @@ import {exposeWrapperGlobals} from 'Util/wrapper';
 import './configureEnvironment';
 import {configureStore} from './configureStore';
 import {actionRoot} from './module/action';
-import Root from './page/Root';
+import {Root} from './page/Root';
 
 import {Config} from '../Config';
 import {APIClient} from '../service/APIClientSingleton';

src/script/auth/page/CheckPassword.test.tsx

@@ -21,7 +21,7 @@ import {fireEvent, waitFor} from '@testing-library/dom';
 import {StatusCodes as HTTP_STATUS} from 'http-status-codes';
 import {act} from 'react-dom/test-utils';
 
-import CheckPassword from './CheckPassword';
+import {CheckPassword} from './CheckPassword';
 
 import {actionRoot} from '../module/action';
 import {BackendError} from '../module/action/BackendError';
@@ -30,8 +30,6 @@ import {ROUTE} from '../route';
 import {mockStoreFactory} from '../util/test/mockStoreFactory';
 import {mountComponent} from '../util/test/TestUtil';
 
-jest.mock('../util/SVGProvider');
-
 describe('CheckPassword', () => {
   it('has disabled submit button as long as there is no input', () => {
     const {getByTestId} = mountComponent(

src/script/auth/page/CheckPassword.tsx

@@ -38,22 +38,27 @@ import {connect} from 'react-redux';
 import {useNavigate} from 'react-router-dom';
 import {AnyAction, Dispatch} from 'redux';
 
-import Page from './Page';
+import {Page} from './Page';
 
 import {loginStrings, phoneLoginStrings} from '../../strings';
-import Exception from '../component/Exception';
+import {Exception} from '../component/Exception';
 import {EXTERNAL_ROUTE} from '../externalRoute';
 import {actionRoot} from '../module/action';
 import {LabeledError} from '../module/action/LabeledError';
 import {ValidationError} from '../module/action/ValidationError';
-import {RootState, bindActionCreators} from '../module/reducer';
+import {bindActionCreators, RootState} from '../module/reducer';
 import * as AuthSelector from '../module/selector/AuthSelector';
 import {ROUTE} from '../route';
 import * as UrlUtil from '../util/urlUtil';
 
 type Props = React.HTMLProps<HTMLDivElement>;
 
-const CheckPassword = ({loginData, doLogin, resetAuthError, isFetching}: Props & ConnectedProps & DispatchProps) => {
+const CheckPasswordComponent = ({
+  loginData,
+  doLogin,
+  resetAuthError,
+  isFetching,
+}: Props & ConnectedProps & DispatchProps) => {
   const {formatMessage: _} = useIntl();
   const navigate = useNavigate();
 
@@ -185,4 +190,6 @@ const mapDispatchToProps = (dispatch: Dispatch<AnyAction>) =>
     dispatch,
   );
 
-export default connect(mapStateToProps, mapDispatchToProps)(CheckPassword);
+const CheckPassword = connect(mapStateToProps, mapDispatchToProps)(CheckPasswordComponent);
+
+export {CheckPassword};

src/script/auth/page/ClientManager.tsx

@@ -24,18 +24,18 @@ import {useIntl} from 'react-intl';
 import {connect} from 'react-redux';
 import {AnyAction, Dispatch} from 'redux';
 
-import Page from './Page';
+import {Page} from './Page';
 
 import {Config} from '../../Config';
 import {clientManagerStrings} from '../../strings';
-import ClientList from '../component/ClientList';
+import {ClientList} from '../component/ClientList';
 import {actionRoot as ROOT_ACTIONS} from '../module/action/';
 import {RootState, bindActionCreators} from '../module/reducer';
 import {QUERY_KEY} from '../route';
 
 type Props = React.HTMLProps<HTMLDivElement>;
 
-const ClientManager = ({doGetAllClients, doLogout}: Props & ConnectedProps & DispatchProps) => {
+const ClientManagerComponent = ({doGetAllClients, doLogout}: Props & ConnectedProps & DispatchProps) => {
   const {formatMessage: _} = useIntl();
   const SFAcode = localStorage.getItem(QUERY_KEY.CONVERSATION_CODE);
   const timeRemaining = JSON.parse(localStorage.getItem(QUERY_KEY.JOIN_EXPIRES))?.data ?? Date.now();
@@ -103,4 +103,6 @@ const mapDispatchToProps = (dispatch: Dispatch<AnyAction>) =>
     dispatch,
   );
 
-export default connect(mapStateToProps, mapDispatchToProps)(ClientManager);
+const ClientManager = connect(mapStateToProps, mapDispatchToProps)(ClientManagerComponent);
+
+export {ClientManager};

src/script/auth/page/ConversationJoin.tsx

@@ -42,19 +42,19 @@ import {AnyAction, Dispatch} from 'redux';
 
 import {noop} from 'Util/util';
 
-import EntropyContainer from './EntropyContainer';
+import {EntropyContainer} from './EntropyContainer';
 
 import {Config} from '../../Config';
 import {conversationJoinStrings} from '../../strings';
-import AppAlreadyOpen from '../component/AppAlreadyOpen';
-import RouterLink from '../component/RouterLink';
-import UnsupportedBrowser from '../component/UnsupportedBrowser';
-import WirelessContainer from '../component/WirelessContainer';
+import {AppAlreadyOpen} from '../component/AppAlreadyOpen';
+import {RouterLink} from '../component/RouterLink';
+import {UnsupportedBrowser} from '../component/UnsupportedBrowser';
+import {WirelessContainer} from '../component/WirelessContainer';
 import {EXTERNAL_ROUTE} from '../externalRoute';
 import {actionRoot as ROOT_ACTIONS} from '../module/action/';
 import {BackendError} from '../module/action/BackendError';
 import {ValidationError} from '../module/action/ValidationError';
-import {RootState, bindActionCreators} from '../module/reducer';
+import {bindActionCreators, RootState} from '../module/reducer';
 import * as AuthSelector from '../module/selector/AuthSelector';
 import * as ConversationSelector from '../module/selector/ConversationSelector';
 import * as SelfSelector from '../module/selector/SelfSelector';
@@ -65,7 +65,7 @@ import * as StringUtil from '../util/stringUtil';
 
 type Props = React.HTMLProps<HTMLDivElement>;
 
-const ConversationJoin = ({
+const ConversationJoinComponent = ({
   doCheckConversationCode,
   doJoinConversationByCode,
   doInit,
@@ -366,4 +366,6 @@ const mapDispatchToProps = (dispatch: Dispatch<AnyAction>) =>
     dispatch,
   );
 
-export default connect(mapStateToProps, mapDispatchToProps)(ConversationJoin);
+const ConversationJoin = connect(mapStateToProps, mapDispatchToProps)(ConversationJoinComponent);
+
+export {ConversationJoin};