chore: turned all auth containers into typescript (#375)

12 files changed, 91 insertions, 216 deletions

diff --git a/src/containers/auth/AuthLayoutContainer.js b/src/containers/auth/AuthLayoutContainer.tsx
index e6d6dcf8a..8d65ec6f4 100644
--- a/src/containers/auth/AuthLayoutContainer.js
+++ b/src/containers/auth/AuthLayoutContainer.tsx
@@ -1,28 +1,19 @@
-import { Component } from 'react';
-import PropTypes from 'prop-types';
+import { Component, ReactElement, ReactNode } from 'react';
 import { inject, observer } from 'mobx-react';
 import { ThemeProvider } from 'react-jss';
 
+import { DefaultProps } from 'src/@types/ferdium-components.types';
+import { Location } from 'mobx-react-router';
 import AuthLayout from '../../components/auth/AuthLayout';
-import AppStore from '../../stores/AppStore';
-import UserStore from '../../stores/UserStore';
-import GlobalErrorStore from '../../stores/GlobalErrorStore';
-import UIStore from '../../stores/UIStore';
-import SettingsStore from '../../stores/SettingsStore';
 import AppLoader from '../../components/ui/AppLoader';
 
-import { oneOrManyChildElements } from '../../prop-types';
-import FeaturesStore from '../../stores/FeaturesStore';
-
-class AuthLayoutContainer extends Component {
-  static propTypes = {
-    children: oneOrManyChildElements.isRequired,
-    location: PropTypes.shape({
-      pathname: PropTypes.string.isRequired,
-    }).isRequired,
-  };
+interface AuthLayoutContainerProps extends DefaultProps {
+  location: Location;
+  children: ReactNode[] | ReactNode;
+}
 
-  render() {
+class AuthLayoutContainer extends Component<AuthLayoutContainerProps> {
+  render(): ReactElement {
     const { stores, actions, children, location } = this.props;
     const { app, features, globalError, user } = stores;
 
@@ -33,7 +24,7 @@ class AuthLayoutContainer extends Component {
     if (isLoadingBaseFeatures) {
       return (
         <ThemeProvider theme={stores.ui.theme}>
-          <AppLoader />
+          <AppLoader theme={stores.ui.theme} />
         </ThemeProvider>
       );
     }
@@ -42,7 +33,7 @@ class AuthLayoutContainer extends Component {
     if (isLoggingOut) {
       return (
         <ThemeProvider theme={stores.ui.theme}>
-          <AppLoader texts={['Logging you out...']} />
+          <AppLoader theme={stores.ui.theme} texts={['Logging you out...']} />
         </ThemeProvider>
       );
     }
@@ -69,18 +60,4 @@ class AuthLayoutContainer extends Component {
   }
 }
 
-AuthLayoutContainer.propTypes = {
-  stores: PropTypes.shape({
-    app: PropTypes.instanceOf(AppStore).isRequired,
-    features: PropTypes.instanceOf(FeaturesStore).isRequired,
-    globalError: PropTypes.instanceOf(GlobalErrorStore).isRequired,
-    user: PropTypes.instanceOf(UserStore).isRequired,
-    ui: PropTypes.instanceOf(UIStore).isRequired,
-  }).isRequired,
-  actions: PropTypes.shape({
-    app: PropTypes.instanceOf(AppStore).isRequired,
-    settings: PropTypes.instanceOf(SettingsStore).isRequired,
-  }).isRequired,
-};
-
 export default inject('stores', 'actions')(observer(AuthLayoutContainer));
diff --git a/src/containers/auth/ChangeServerScreen.js b/src/containers/auth/ChangeServerScreen.tsx
index 60bfde088..6af87e4a1 100644
--- a/src/containers/auth/ChangeServerScreen.js
+++ b/src/containers/auth/ChangeServerScreen.tsx
@@ -1,18 +1,16 @@
-import { Component } from 'react';
-import PropTypes from 'prop-types';
+import { Component, ReactElement } from 'react';
 import { inject, observer } from 'mobx-react';
-import { RouterStore } from 'mobx-react-router';
+import { DefaultProps } from 'src/@types/ferdium-components.types';
 import ChangeServer from '../../components/auth/ChangeServer';
-import SettingsStore from '../../stores/SettingsStore';
 
-class ChangeServerScreen extends Component {
-  constructor(props) {
+class ChangeServerScreen extends Component<DefaultProps> {
+  constructor(props: DefaultProps) {
     super(props);
 
     this.onSubmit = this.onSubmit.bind(this);
   }
 
-  onSubmit(values) {
+  onSubmit(values: any): void {
     const { server } = values;
 
     this.props.actions.settings.update({
@@ -24,7 +22,7 @@ class ChangeServerScreen extends Component {
     this.props.stores.router.push('/auth');
   }
 
-  render() {
+  render(): ReactElement {
     const { stores } = this.props;
     const { server } = stores.settings.all.app;
 
@@ -32,14 +30,4 @@ class ChangeServerScreen extends Component {
   }
 }
 
-ChangeServerScreen.propTypes = {
-  actions: PropTypes.shape({
-    settings: PropTypes.instanceOf(SettingsStore).isRequired,
-  }).isRequired,
-  stores: PropTypes.shape({
-    settings: PropTypes.instanceOf(SettingsStore).isRequired,
-    router: PropTypes.instanceOf(RouterStore).isRequired,
-  }).isRequired,
-};
-
 export default inject('stores', 'actions')(observer(ChangeServerScreen));
diff --git a/src/containers/auth/ImportScreen.tsx b/src/containers/auth/ImportScreen.tsx
index 8d318cb2d..c128dec14 100644
--- a/src/containers/auth/ImportScreen.tsx
+++ b/src/containers/auth/ImportScreen.tsx
@@ -1,21 +1,10 @@
-import { Component } from 'react';
+import { Component, ReactElement } from 'react';
 import { inject, observer } from 'mobx-react';
-import { RouterStore } from 'mobx-react-router';
-import { UserStore } from 'src/stores.types';
+import { DefaultProps } from 'src/@types/ferdium-components.types';
 import Import from '../../components/auth/Import';
 
-interface IProps {
-  actions: {
-    user: UserStore;
-  };
-  stores: {
-    user: UserStore;
-    router: RouterStore;
-  };
-}
-
-class ImportScreen extends Component<IProps> {
-  render() {
+class ImportScreen extends Component<DefaultProps> {
+  render(): ReactElement {
     const { actions, stores } = this.props;
 
     if (stores.user.isImportLegacyServicesCompleted) {
diff --git a/src/containers/auth/InviteScreen.js b/src/containers/auth/InviteScreen.js
deleted file mode 100644
index fc66227cc..000000000
--- a/src/containers/auth/InviteScreen.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import { Component } from 'react';
-import PropTypes from 'prop-types';
-import { inject, observer } from 'mobx-react';
-import Invite from '../../components/auth/Invite';
-
-class InviteScreen extends Component {
-  render() {
-    const { actions } = this.props;
-
-    return <Invite onSubmit={actions.user.invite} embed={false} />;
-  }
-}
-
-InviteScreen.propTypes = {
-  actions: PropTypes.shape({
-    user: PropTypes.shape({
-      invite: PropTypes.func.isRequired,
-    }).isRequired,
-  }).isRequired,
-};
-
-export default inject('stores', 'actions')(observer(InviteScreen));
diff --git a/src/containers/auth/InviteScreen.tsx b/src/containers/auth/InviteScreen.tsx
new file mode 100644
index 000000000..a2c684f41
--- /dev/null
+++ b/src/containers/auth/InviteScreen.tsx
@@ -0,0 +1,14 @@
+import { Component, ReactElement } from 'react';
+import { inject, observer } from 'mobx-react';
+import { DefaultProps } from 'src/@types/ferdium-components.types';
+import Invite from '../../components/auth/Invite';
+
+class InviteScreen extends Component<DefaultProps> {
+  render(): ReactElement {
+    const { actions } = this.props;
+
+    return <Invite onSubmit={actions.user.invite} embed={false} />;
+  }
+}
+
+export default inject('stores', 'actions')(observer(InviteScreen));
diff --git a/src/containers/auth/LockedScreen.tsx b/src/containers/auth/LockedScreen.tsx
index 500bff0d6..8e3c1ec49 100644
--- a/src/containers/auth/LockedScreen.tsx
+++ b/src/containers/auth/LockedScreen.tsx
@@ -1,34 +1,23 @@
 import { Component, ReactElement } from 'react';
 import { inject, observer } from 'mobx-react';
-import { SettingsStore } from 'src/stores.types';
+import { DefaultProps } from 'src/@types/ferdium-components.types';
 import Locked from '../../components/auth/Locked';
 
 import { hash } from '../../helpers/password-helpers';
-import UserStore from '../../stores/UserStore';
 
-interface IProps {
-  actions: {
-    settings: SettingsStore;
-  };
-  stores: {
-    settings: SettingsStore;
-    user: UserStore;
-  };
-}
-
-class LockedScreen extends Component<IProps> {
+class LockedScreen extends Component<DefaultProps> {
   state = {
     error: false,
   };
 
-  constructor(props) {
+  constructor(props: DefaultProps) {
     super(props);
 
     this.onSubmit = this.onSubmit.bind(this);
     this.unlock = this.unlock.bind(this);
   }
 
-  onSubmit(values): void {
+  onSubmit(values: any): void {
     const { password } = values;
 
     let correctPassword = this.props.stores.settings.all.app.lockedPassword;
diff --git a/src/containers/auth/LoginScreen.js b/src/containers/auth/LoginScreen.tsx
index f8351f458..4c5271fe1 100644
--- a/src/containers/auth/LoginScreen.js
+++ b/src/containers/auth/LoginScreen.tsx
@@ -1,17 +1,14 @@
-import { Component } from 'react';
-import PropTypes from 'prop-types';
+import { Component, ReactElement } from 'react';
 import { inject, observer } from 'mobx-react';
+import { DefaultProps, GlobalError } from 'src/@types/ferdium-components.types';
 import Login from '../../components/auth/Login';
-import UserStore from '../../stores/UserStore';
 
-import { globalError as globalErrorPropType } from '../../prop-types';
-
-class LoginScreen extends Component {
-  static propTypes = {
-    error: globalErrorPropType.isRequired,
-  };
+interface LoginScreenProps extends DefaultProps {
+  error: GlobalError;
+}
 
-  render() {
+class LoginScreen extends Component<LoginScreenProps> {
+  render(): ReactElement {
     const { actions, stores, error } = this.props;
     return (
       <Login
@@ -29,13 +26,4 @@ class LoginScreen extends Component {
   }
 }
 
-LoginScreen.propTypes = {
-  actions: PropTypes.shape({
-    user: PropTypes.instanceOf(UserStore).isRequired,
-  }).isRequired,
-  stores: PropTypes.shape({
-    user: PropTypes.instanceOf(UserStore).isRequired,
-  }).isRequired,
-};
-
 export default inject('stores', 'actions')(observer(LoginScreen));
diff --git a/src/containers/auth/PasswordScreen.tsx b/src/containers/auth/PasswordScreen.tsx
index d88549712..3176e5a8b 100644
--- a/src/containers/auth/PasswordScreen.tsx
+++ b/src/containers/auth/PasswordScreen.tsx
@@ -1,19 +1,10 @@
-import { Component } from 'react';
+import { Component, ReactElement } from 'react';
 import { inject, observer } from 'mobx-react';
-import { UserStore } from 'src/stores.types';
+import { DefaultProps } from 'src/@types/ferdium-components.types';
 import Password from '../../components/auth/Password';
 
-interface IProps {
-  actions: {
-    user: UserStore;
-  };
-  stores: {
-    user: UserStore;
-  };
-};
-
-class PasswordScreen extends Component<IProps> {
-  render() {
+class PasswordScreen extends Component<DefaultProps> {
+  render(): ReactElement {
     const { actions, stores } = this.props;
 
     return (
diff --git a/src/containers/auth/SetupAssistantScreen.tsx b/src/containers/auth/SetupAssistantScreen.tsx
index 8f1871776..92f12c0bc 100644
--- a/src/containers/auth/SetupAssistantScreen.tsx
+++ b/src/containers/auth/SetupAssistantScreen.tsx
@@ -1,29 +1,12 @@
 /* eslint-disable no-await-in-loop */
-import { Component } from 'react';
+import { Component, ReactElement } from 'react';
 import { inject, observer } from 'mobx-react';
 
-import { RouterStore } from 'mobx-react-router';
+import { DefaultProps } from 'src/@types/ferdium-components.types';
 import { sleep } from '../../helpers/async-helpers';
 import SetupAssistant from '../../components/auth/SetupAssistant';
-import ServicesStore from '../../stores/ServicesStore';
-import RecipesStore from '../../stores/RecipesStore';
-import UserStore from '../../stores/UserStore';
 
-interface IProps {
-  stores: {
-    services: ServicesStore;
-    router: RouterStore;
-    recipes?: RecipesStore;
-    user?: UserStore;
-  };
-  actions: {
-    user: UserStore;
-    service: ServicesStore;
-    recipe: RecipesStore;
-  };
-};
-
-class SetupAssistantScreen extends Component<IProps> {
+class SetupAssistantScreen extends Component<DefaultProps> {
   state = {
     isSettingUpServices: false,
   };
@@ -68,7 +51,7 @@ class SetupAssistantScreen extends Component<IProps> {
     },
   };
 
-  async setupServices(serviceConfig) {
+  async setupServices(serviceConfig: any): Promise<void> {
     const {
       stores: { services, router },
     } = this.props;
@@ -103,7 +86,7 @@ class SetupAssistantScreen extends Component<IProps> {
     router.push('/');
   }
 
-  render() {
+  render(): ReactElement {
     return (
       <SetupAssistant
         onSubmit={config => this.setupServices(config)}
diff --git a/src/containers/auth/SignupScreen.js b/src/containers/auth/SignupScreen.js
deleted file mode 100644
index 3824e47d5..000000000
--- a/src/containers/auth/SignupScreen.js
+++ /dev/null
@@ -1,46 +0,0 @@
-import { Component } from 'react';
-import PropTypes from 'prop-types';
-import { inject, observer } from 'mobx-react';
-
-import Signup from '../../components/auth/Signup';
-import UserStore from '../../stores/UserStore';
-import FeaturesStore from '../../stores/FeaturesStore';
-
-import { globalError as globalErrorPropType } from '../../prop-types';
-
-class SignupScreen extends Component {
-  static propTypes = {
-    error: globalErrorPropType.isRequired,
-  };
-
-  onSignup(values) {
-    const { actions } = this.props;
-
-    actions.user.signup(values);
-  }
-
-  render() {
-    const { stores, error } = this.props;
-
-    return (
-      <Signup
-        onSubmit={values => this.onSignup(values)}
-        isSubmitting={stores.user.signupRequest.isExecuting}
-        loginRoute={stores.user.loginRoute}
-        error={error}
-      />
-    );
-  }
-}
-
-SignupScreen.propTypes = {
-  actions: PropTypes.shape({
-    user: PropTypes.instanceOf(UserStore).isRequired,
-  }).isRequired,
-  stores: PropTypes.shape({
-    user: PropTypes.instanceOf(UserStore).isRequired,
-    features: PropTypes.instanceOf(FeaturesStore).isRequired,
-  }).isRequired,
-};
-
-export default inject('stores', 'actions')(observer(SignupScreen));
diff --git a/src/containers/auth/SignupScreen.tsx b/src/containers/auth/SignupScreen.tsx
new file mode 100644
index 000000000..1dac392ef
--- /dev/null
+++ b/src/containers/auth/SignupScreen.tsx
@@ -0,0 +1,32 @@
+import { Component, ReactElement } from 'react';
+import { inject, observer } from 'mobx-react';
+
+import { DefaultProps, GlobalError } from 'src/@types/ferdium-components.types';
+import Signup from '../../components/auth/Signup';
+
+interface SignUpScreenComponents extends DefaultProps {
+  error: GlobalError;
+}
+
+class SignupScreen extends Component<SignUpScreenComponents> {
+  onSignup(values: any): void {
+    const { actions } = this.props;
+
+    actions.user.signup(values);
+  }
+
+  render(): ReactElement {
+    const { stores, error } = this.props;
+
+    return (
+      <Signup
+        onSubmit={values => this.onSignup(values)}
+        isSubmitting={stores.user.signupRequest.isExecuting}
+        loginRoute={stores.user.loginRoute}
+        error={error}
+      />
+    );
+  }
+}
+
+export default inject('stores', 'actions')(observer(SignupScreen));
diff --git a/src/containers/auth/WelcomeScreen.tsx b/src/containers/auth/WelcomeScreen.tsx
index 944d288ad..bbd73f4a2 100644
--- a/src/containers/auth/WelcomeScreen.tsx
+++ b/src/containers/auth/WelcomeScreen.tsx
@@ -1,19 +1,11 @@
-import { Component } from 'react';
+import { Component, ReactElement } from 'react';
 import { inject, observer } from 'mobx-react';
 
+import { DefaultProps } from 'src/@types/ferdium-components.types';
 import Welcome from '../../components/auth/Welcome';
-import UserStore from '../../stores/UserStore';
-import RecipePreviewsStore from '../../stores/RecipePreviewsStore';
 
-interface IProps {
-  stores: {
-    user: UserStore,
-    recipePreviews: RecipePreviewsStore,
-  },
-};
-
-class WelcomeScreen extends Component<IProps> {
-  render() {
+class WelcomeScreen extends Component<DefaultProps> {
+  render(): ReactElement {
     const { user, recipePreviews } = this.props.stores;
 
     return (