Some more minor fixes

packages/app/components/auth/AuthTitle.tsx

@@ -8,7 +8,7 @@ export default function AuthTitle({ title }: { title: MessageDescriptor }) {
       {msg => (
         <span>
           {msg}
-          <Helmet title={msg} />
+          <Helmet title={msg as string} />
         </span>
       )}
     </Message>

packages/app/components/profile/changeEmail/ChangeEmail.tsx

@@ -86,7 +86,7 @@ export default class ChangeEmail extends React.Component<Props, State> {
               <Message {...messages.changeEmailTitle}>
                 {pageTitle => (
                   <h3 className={styles.violetTitle}>
-                    <Helmet title={pageTitle} />
+                    <Helmet title={pageTitle as string} />
                     {pageTitle}
                   </h3>
                 )}

packages/app/components/profile/changePassword/ChangePassword.test.js

@@ -8,7 +8,7 @@ import ChangePassword from 'app/components/profile/changePassword/ChangePassword
 
 describe('<ChangePassword />', () => {
   it('renders two <Input /> components', () => {
-    const component = shallow(<ChangePassword onSubmit={() => {}} />);
+    const component = shallow(<ChangePassword onSubmit={async () => {}} />);
 
     expect(component.find('Input'), 'to satisfy', { length: 2 });
   });

packages/app/components/profile/changePassword/ChangePassword.tsx

@@ -1,5 +1,4 @@
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
+import React from 'react';
 import { FormattedMessage as Message } from 'react-intl';
 import { Helmet } from 'react-helmet-async';
 import {
@@ -9,20 +8,18 @@ import {
   Form,
   FormModel,
 } from 'app/components/ui/form';
-import { BackButton } from 'app/components/profile/ProfileForm';
 
-import styles from 'app/components/profile/profileForm.scss';
+import { BackButton } from '../ProfileForm';
+import styles from '../profileForm.scss';
 import messages from './ChangePassword.intl.json';
 
-export default class ChangePassword extends Component {
-  static displayName = 'ChangePassword';
+interface Props {
+  form: FormModel;
+  onSubmit: (form: FormModel) => Promise<void>;
+}
 
-  static propTypes = {
-    form: PropTypes.instanceOf(FormModel),
-    onSubmit: PropTypes.func.isRequired,
-  };
-
-  static get defaultProps() {
+export default class ChangePassword extends React.Component<Props> {
+  static get defaultProps(): Partial<Props> {
     return {
       form: new FormModel(),
     };
@@ -41,7 +38,7 @@ export default class ChangePassword extends Component {
               <Message {...messages.changePasswordTitle}>
                 {pageTitle => (
                   <h3 className={styles.title}>
-                    <Helmet title={pageTitle} />
+                    <Helmet title={pageTitle as string} />
                     {pageTitle}
                   </h3>
                 )}

packages/app/components/profile/changeUsername/ChangeUsername.tsx

@@ -1,26 +1,21 @@
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-
+import React from 'react';
 import { FormattedMessage as Message } from 'react-intl';
 import { Helmet } from 'react-helmet-async';
-
 import { Input, Button, Form, FormModel } from 'app/components/ui/form';
 import { BackButton } from 'app/components/profile/ProfileForm';
-import styles from 'app/components/profile/profileForm.scss';
 
+import styles from '../profileForm.scss';
 import messages from './ChangeUsername.intl.json';
 
-export default class ChangeUsername extends Component {
-  static displayName = 'ChangeUsername';
+interface Props {
+  username: string;
+  form: FormModel;
+  onChange: (name: string) => void;
+  onSubmit: (form: FormModel) => Promise<void>;
+}
 
-  static propTypes = {
-    username: PropTypes.string.isRequired,
-    form: PropTypes.instanceOf(FormModel),
-    onChange: PropTypes.func.isRequired,
-    onSubmit: PropTypes.func.isRequired,
-  };
-
-  static get defaultProps() {
+export default class ChangeUsername extends React.Component<Props> {
+  static get defaultProps(): Partial<Props> {
     return {
       form: new FormModel(),
     };
@@ -39,7 +34,7 @@ export default class ChangeUsername extends Component {
               <Message {...messages.changeUsernameTitle}>
                 {pageTitle => (
                   <h3 className={styles.title}>
-                    <Helmet title={pageTitle} />
+                    <Helmet title={pageTitle as string} />
                     {pageTitle}
                   </h3>
                 )}
@@ -80,7 +75,7 @@ export default class ChangeUsername extends Component {
     );
   }
 
-  onUsernameChange = event => {
+  onUsernameChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     this.props.onChange(event.target.value);
   };
 

packages/app/components/profile/multiFactorAuth/MultiFactorAuth.tsx

@@ -34,7 +34,7 @@ class MultiFactorAuth extends React.Component<{
             <Message {...messages.mfaTitle}>
               {pageTitle => (
                 <h3 className={styles.title}>
-                  <Helmet title={pageTitle} />
+                  <Helmet title={pageTitle as string} />
                   {pageTitle}
                 </h3>
               )}

packages/app/package.json

@@ -35,6 +35,7 @@
     "whatwg-fetch": "^3.0.0"
   },
   "devDependencies": {
+    "@types/react-helmet": "^5.0.14",
     "@types/webpack-env": "^1.14.1",
     "enzyme": "^3.8.0",
     "enzyme-adapter-react-16": "^1.15.1"

packages/app/pages/404/PageNotFound.tsx

@@ -1,10 +1,8 @@
 import React from 'react';
-
-import { FooterMenu } from 'app/components/footerMenu';
-
 import { Link } from 'react-router-dom';
 import { FormattedMessage as Message } from 'react-intl';
 import { Helmet } from 'react-helmet-async';
+import { FooterMenu } from 'app/components/footerMenu';
 
 import styles from './404.scss';
 import messages from './PageNotFound.intl.json';
@@ -14,7 +12,7 @@ export default function PageNotFound() {
   return (
     <div className={styles.page}>
       <Message {...messages.title}>
-        {pageTitle => <Helmet title={pageTitle} />}
+        {pageTitle => <Helmet title={pageTitle as string} />}
       </Message>
 
       <div className={styles.loading}>

packages/app/pages/auth/SuccessOauthPage.tsx

@@ -42,7 +42,7 @@ export default class SuccessOauthPage extends React.Component<{
     return (
       <div className={styles.page}>
         <Message {...messages.title}>
-          {pageTitle => <Helmet title={pageTitle} />}
+          {pageTitle => <Helmet title={pageTitle as string} />}
         </Message>
 
         <div className={styles.wrapper}>

packages/app/pages/rules/RulesPage.tsx

@@ -98,7 +98,7 @@ export default class RulesPage extends Component<{
     return (
       <div>
         <Message {...messages.title}>
-          {pageTitle => <Helmet title={pageTitle} />}
+          {pageTitle => <Helmet title={pageTitle as string} />}
         </Message>
 
         <div className={styles.rules}>

packages/app/shell/App.tsx

@@ -1,6 +1,7 @@
-import React from 'react';
 import { hot } from 'react-hot-loader/root';
+import React from 'react';
 import { Route, Switch } from 'react-router-dom';
+import { History } from 'history';
 import { Store } from 'app/reducers';
 import AuthFlowRoute from 'app/containers/AuthFlowRoute';
 import RootPage from 'app/pages/root/RootPage';
@@ -14,7 +15,7 @@ const SuccessOauthPage = React.lazy(() =>
   ),
 );
 
-const App = ({ store, history }: { store: Store; history: any }) => (
+const App = ({ store, history }: { store: Store; history: History<any> }) => (
   <ContextProvider store={store} history={history}>
     <React.Suspense fallback={<ComponentLoader />}>
       <Switch>