From 6bff2bb5439d25e0ab2a24a8ca1b28b89ef40ff9 Mon Sep 17 00:00:00 2001
From: Ricardo Cino <ricardo@cino.io>
Date: Sun, 26 Jun 2022 23:59:32 +0200
Subject: chore: turned all auth containers into typescript (#375)

---
 src/containers/auth/AuthLayoutContainer.js   | 86 ----------------------------
 src/containers/auth/AuthLayoutContainer.tsx  | 63 ++++++++++++++++++++
 src/containers/auth/ChangeServerScreen.js    | 45 ---------------
 src/containers/auth/ChangeServerScreen.tsx   | 33 +++++++++++
 src/containers/auth/ImportScreen.tsx         | 19 ++----
 src/containers/auth/InviteScreen.js          | 22 -------
 src/containers/auth/InviteScreen.tsx         | 14 +++++
 src/containers/auth/LockedScreen.tsx         | 19 ++----
 src/containers/auth/LoginScreen.js           | 41 -------------
 src/containers/auth/LoginScreen.tsx          | 29 ++++++++++
 src/containers/auth/PasswordScreen.tsx       | 17 ++----
 src/containers/auth/SetupAssistantScreen.tsx | 27 ++-------
 src/containers/auth/SignupScreen.js          | 46 ---------------
 src/containers/auth/SignupScreen.tsx         | 32 +++++++++++
 src/containers/auth/WelcomeScreen.tsx        | 16 ++----
 15 files changed, 192 insertions(+), 317 deletions(-)
 delete mode 100644 src/containers/auth/AuthLayoutContainer.js
 create mode 100644 src/containers/auth/AuthLayoutContainer.tsx
 delete mode 100644 src/containers/auth/ChangeServerScreen.js
 create mode 100644 src/containers/auth/ChangeServerScreen.tsx
 delete mode 100644 src/containers/auth/InviteScreen.js
 create mode 100644 src/containers/auth/InviteScreen.tsx
 delete mode 100644 src/containers/auth/LoginScreen.js
 create mode 100644 src/containers/auth/LoginScreen.tsx
 delete mode 100644 src/containers/auth/SignupScreen.js
 create mode 100644 src/containers/auth/SignupScreen.tsx

(limited to 'src/containers/auth')

diff --git a/src/containers/auth/AuthLayoutContainer.js b/src/containers/auth/AuthLayoutContainer.js
deleted file mode 100644
index e6d6dcf8a..000000000
--- a/src/containers/auth/AuthLayoutContainer.js
+++ /dev/null
@@ -1,86 +0,0 @@
-import { Component } from 'react';
-import PropTypes from 'prop-types';
-import { inject, observer } from 'mobx-react';
-import { ThemeProvider } from 'react-jss';
-
-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,
-  };
-
-  render() {
-    const { stores, actions, children, location } = this.props;
-    const { app, features, globalError, user } = stores;
-
-    const isLoadingBaseFeatures =
-      features.defaultFeaturesRequest.isExecuting &&
-      !features.defaultFeaturesRequest.wasExecuted;
-
-    if (isLoadingBaseFeatures) {
-      return (
-        <ThemeProvider theme={stores.ui.theme}>
-          <AppLoader />
-        </ThemeProvider>
-      );
-    }
-
-    const { isLoggingOut } = user;
-    if (isLoggingOut) {
-      return (
-        <ThemeProvider theme={stores.ui.theme}>
-          <AppLoader texts={['Logging you out...']} />
-        </ThemeProvider>
-      );
-    }
-
-    return (
-      <ThemeProvider theme={stores.ui.theme}>
-        <AuthLayout
-          error={globalError.response}
-          pathname={location.pathname}
-          isOnline={app.isOnline}
-          isAPIHealthy={!app.healthCheckRequest.isError}
-          retryHealthCheck={actions.app.healthCheck}
-          isHealthCheckLoading={app.healthCheckRequest.isExecuting}
-          isFullScreen={app.isFullScreen}
-          installAppUpdate={actions.app.installUpdate}
-          appUpdateIsDownloaded={
-            app.updateStatus === app.updateStatusTypes.DOWNLOADED
-          }
-        >
-          {children}
-        </AuthLayout>
-      </ThemeProvider>
-    );
-  }
-}
-
-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/AuthLayoutContainer.tsx b/src/containers/auth/AuthLayoutContainer.tsx
new file mode 100644
index 000000000..8d65ec6f4
--- /dev/null
+++ b/src/containers/auth/AuthLayoutContainer.tsx
@@ -0,0 +1,63 @@
+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 AppLoader from '../../components/ui/AppLoader';
+
+interface AuthLayoutContainerProps extends DefaultProps {
+  location: Location;
+  children: ReactNode[] | ReactNode;
+}
+
+class AuthLayoutContainer extends Component<AuthLayoutContainerProps> {
+  render(): ReactElement {
+    const { stores, actions, children, location } = this.props;
+    const { app, features, globalError, user } = stores;
+
+    const isLoadingBaseFeatures =
+      features.defaultFeaturesRequest.isExecuting &&
+      !features.defaultFeaturesRequest.wasExecuted;
+
+    if (isLoadingBaseFeatures) {
+      return (
+        <ThemeProvider theme={stores.ui.theme}>
+          <AppLoader theme={stores.ui.theme} />
+        </ThemeProvider>
+      );
+    }
+
+    const { isLoggingOut } = user;
+    if (isLoggingOut) {
+      return (
+        <ThemeProvider theme={stores.ui.theme}>
+          <AppLoader theme={stores.ui.theme} texts={['Logging you out...']} />
+        </ThemeProvider>
+      );
+    }
+
+    return (
+      <ThemeProvider theme={stores.ui.theme}>
+        <AuthLayout
+          error={globalError.response}
+          pathname={location.pathname}
+          isOnline={app.isOnline}
+          isAPIHealthy={!app.healthCheckRequest.isError}
+          retryHealthCheck={actions.app.healthCheck}
+          isHealthCheckLoading={app.healthCheckRequest.isExecuting}
+          isFullScreen={app.isFullScreen}
+          installAppUpdate={actions.app.installUpdate}
+          appUpdateIsDownloaded={
+            app.updateStatus === app.updateStatusTypes.DOWNLOADED
+          }
+        >
+          {children}
+        </AuthLayout>
+      </ThemeProvider>
+    );
+  }
+}
+
+export default inject('stores', 'actions')(observer(AuthLayoutContainer));
diff --git a/src/containers/auth/ChangeServerScreen.js b/src/containers/auth/ChangeServerScreen.js
deleted file mode 100644
index 60bfde088..000000000
--- a/src/containers/auth/ChangeServerScreen.js
+++ /dev/null
@@ -1,45 +0,0 @@
-import { Component } from 'react';
-import PropTypes from 'prop-types';
-import { inject, observer } from 'mobx-react';
-import { RouterStore } from 'mobx-react-router';
-import ChangeServer from '../../components/auth/ChangeServer';
-import SettingsStore from '../../stores/SettingsStore';
-
-class ChangeServerScreen extends Component {
-  constructor(props) {
-    super(props);
-
-    this.onSubmit = this.onSubmit.bind(this);
-  }
-
-  onSubmit(values) {
-    const { server } = values;
-
-    this.props.actions.settings.update({
-      type: 'app',
-      data: {
-        server,
-      },
-    });
-    this.props.stores.router.push('/auth');
-  }
-
-  render() {
-    const { stores } = this.props;
-    const { server } = stores.settings.all.app;
-
-    return <ChangeServer onSubmit={this.onSubmit} server={server} />;
-  }
-}
-
-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/ChangeServerScreen.tsx b/src/containers/auth/ChangeServerScreen.tsx
new file mode 100644
index 000000000..6af87e4a1
--- /dev/null
+++ b/src/containers/auth/ChangeServerScreen.tsx
@@ -0,0 +1,33 @@
+import { Component, ReactElement } from 'react';
+import { inject, observer } from 'mobx-react';
+import { DefaultProps } from 'src/@types/ferdium-components.types';
+import ChangeServer from '../../components/auth/ChangeServer';
+
+class ChangeServerScreen extends Component<DefaultProps> {
+  constructor(props: DefaultProps) {
+    super(props);
+
+    this.onSubmit = this.onSubmit.bind(this);
+  }
+
+  onSubmit(values: any): void {
+    const { server } = values;
+
+    this.props.actions.settings.update({
+      type: 'app',
+      data: {
+        server,
+      },
+    });
+    this.props.stores.router.push('/auth');
+  }
+
+  render(): ReactElement {
+    const { stores } = this.props;
+    const { server } = stores.settings.all.app;
+
+    return <ChangeServer onSubmit={this.onSubmit} server={server} />;
+  }
+}
+
+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.js
deleted file mode 100644
index f8351f458..000000000
--- a/src/containers/auth/LoginScreen.js
+++ /dev/null
@@ -1,41 +0,0 @@
-import { Component } from 'react';
-import PropTypes from 'prop-types';
-import { inject, observer } from 'mobx-react';
-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,
-  };
-
-  render() {
-    const { actions, stores, error } = this.props;
-    return (
-      <Login
-        onSubmit={actions.user.login}
-        isSubmitting={stores.user.loginRequest.isExecuting}
-        isTokenExpired={stores.user.isTokenExpired}
-        isServerLogout={
-          stores.user.logoutReason === stores.user.logoutReasonTypes.SERVER
-        }
-        signupRoute={stores.user.signupRoute}
-        passwordRoute={stores.user.passwordRoute}
-        error={error}
-      />
-    );
-  }
-}
-
-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/LoginScreen.tsx b/src/containers/auth/LoginScreen.tsx
new file mode 100644
index 000000000..4c5271fe1
--- /dev/null
+++ b/src/containers/auth/LoginScreen.tsx
@@ -0,0 +1,29 @@
+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';
+
+interface LoginScreenProps extends DefaultProps {
+  error: GlobalError;
+}
+
+class LoginScreen extends Component<LoginScreenProps> {
+  render(): ReactElement {
+    const { actions, stores, error } = this.props;
+    return (
+      <Login
+        onSubmit={actions.user.login}
+        isSubmitting={stores.user.loginRequest.isExecuting}
+        isTokenExpired={stores.user.isTokenExpired}
+        isServerLogout={
+          stores.user.logoutReason === stores.user.logoutReasonTypes.SERVER
+        }
+        signupRoute={stores.user.signupRoute}
+        passwordRoute={stores.user.passwordRoute}
+        error={error}
+      />
+    );
+  }
+}
+
+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 (
-- 
cgit v1.2.3-70-g09d2