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

31 files changed, 151 insertions, 244 deletions

diff --git a/src/@types/ferdium-components.types.ts b/src/@types/ferdium-components.types.ts
new file mode 100644
index 000000000..df5e2f6ed
--- /dev/null
+++ b/src/@types/ferdium-components.types.ts
@@ -0,0 +1,13 @@
+import { Actions } from 'src/actions/lib/actions';
+import { RealStores } from 'src/stores';
+
+export interface DefaultProps {
+  actions: Actions;
+  stores: RealStores;
+}
+
+export interface GlobalError {
+  status: number;
+  message: string;
+  code: string;
+}
diff --git a/src/types.ts b/src/@types/ferdium.types.ts
index db8711cd3..0747f8e14 100644
--- a/src/types.ts
+++ b/src/@types/ferdium.types.ts
@@ -19,4 +19,4 @@ declare global {
  * Workaround to make TS recognize this file as a module.
  * https://fettblog.eu/typescript-augmenting-global-lib-dom/
  */
-export {};
+export { };
diff --git a/src/stores.types.ts b/src/@types/stores.types.ts
index 1899db92c..37b906239 100644
--- a/src/stores.types.ts
+++ b/src/@types/stores.types.ts
@@ -1,10 +1,13 @@
-import Workspace from './features/workspaces/models/Workspace';
-import Recipe from './models/Recipe';
-import Service from './models/Service';
-import User from './models/User';
-import { Request } from './stores/lib/Request';
-import { CachedRequest } from './stores/lib/CachedRequest';
-import Reaction from './stores/lib/Reaction';
+import Workspace from '../features/workspaces/models/Workspace';
+import Recipe from '../models/Recipe';
+import Service from '../models/Service';
+import User from '../models/User';
+import { Request } from '../stores/lib/Request';
+import { CachedRequest } from '../stores/lib/CachedRequest';
+import Reaction from '../stores/lib/Reaction';
+
+// TODO: This file will be removed in the future when all stores are
+// correctly typed and the use of these interfaces are obsolete.
 
 export interface FerdiumStores {
   app: AppStore;
@@ -307,7 +310,7 @@ export interface UserStore extends TypedStore {
   logoutReason: () => void;
   logoutReasonTypes: { SERVER: 'SERVER' };
   passwordRequest: Request;
-  retrievePassword: Promise<void>
+  retrievePassword: Promise<void>;
   signupRequest: () => void;
   updateUserInfoRequest: () => void;
   userData: () => void;
diff --git a/src/I18n.tsx b/src/I18n.tsx
index 1be6ab23d..b486758c3 100644
--- a/src/I18n.tsx
+++ b/src/I18n.tsx
@@ -8,13 +8,13 @@ import AppStore from './stores/AppStore';
 
 const translations = generatedTranslations();
 
-type Props = {
+interface Props {
   stores: {
     app: AppStore;
     user: UserStore;
   };
   children: ReactNode;
-};
+}
 
 class I18N extends Component<Props> {
   componentDidUpdate(): void {
diff --git a/src/components/ui/Loader.tsx b/src/components/ui/Loader.tsx
index d4ed0d6bb..67c9db22e 100644
--- a/src/components/ui/Loader.tsx
+++ b/src/components/ui/Loader.tsx
@@ -2,7 +2,7 @@ import { Component, ReactChildren } from 'react';
 import { observer, inject } from 'mobx-react';
 import Loader from 'react-loader';
 
-import { FerdiumStores } from '../../stores.types';
+import { FerdiumStores } from '../../@types/stores.types';
 
 type Props = {
   children: ReactChildren;
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 (
diff --git a/src/features/workspaces/containers/EditWorkspaceScreen.tsx b/src/features/workspaces/containers/EditWorkspaceScreen.tsx
index 0351ddafb..f0c7e4574 100644
--- a/src/features/workspaces/containers/EditWorkspaceScreen.tsx
+++ b/src/features/workspaces/containers/EditWorkspaceScreen.tsx
@@ -6,7 +6,7 @@ import EditWorkspaceForm from '../components/EditWorkspaceForm';
 import Workspace from '../models/Workspace';
 import { workspaceStore } from '../index';
 import { deleteWorkspaceRequest, updateWorkspaceRequest } from '../api';
-import { ServicesStore, WorkspacesStore } from '../../../stores.types';
+import { ServicesStore, WorkspacesStore } from '../../../@types/stores.types';
 
 type Props = {
   actions: {
diff --git a/src/features/workspaces/containers/WorkspacesScreen.tsx b/src/features/workspaces/containers/WorkspacesScreen.tsx
index 33808b69d..5b153fb50 100644
--- a/src/features/workspaces/containers/WorkspacesScreen.tsx
+++ b/src/features/workspaces/containers/WorkspacesScreen.tsx
@@ -9,7 +9,7 @@ import {
   getUserWorkspacesRequest,
   updateWorkspaceRequest,
 } from '../api';
-import { WorkspacesStore } from '../../../stores.types';
+import { WorkspacesStore } from '../../../@types/stores.types';
 
 type Props = {
   actions: {
diff --git a/src/helpers/async-helpers.ts b/src/helpers/async-helpers.ts
index 56051b065..6556a0141 100644
--- a/src/helpers/async-helpers.ts
+++ b/src/helpers/async-helpers.ts
@@ -1,4 +1,4 @@
-export function sleep(ms: number = 0) {
+export function sleep(ms: number = 0): Promise<void> {
   // eslint-disable-next-line no-promise-executor-return
   return new Promise(r => setTimeout(r, ms));
 }
diff --git a/src/stores/AppStore.ts b/src/stores/AppStore.ts
index 5659460c6..f333a0060 100644
--- a/src/stores/AppStore.ts
+++ b/src/stores/AppStore.ts
@@ -14,7 +14,7 @@ import ms from 'ms';
 import { URL } from 'url';
 import { readJsonSync } from 'fs-extra';
 
-import { Stores } from 'src/stores.types';
+import { Stores } from 'src/@types/stores.types';
 import { ApiInterface } from 'src/api';
 import { Actions } from 'src/actions/lib/actions';
 import TypedStore from './lib/TypedStore';
diff --git a/src/stores/GlobalErrorStore.ts b/src/stores/GlobalErrorStore.ts
index cb364574b..fcc1276c8 100644
--- a/src/stores/GlobalErrorStore.ts
+++ b/src/stores/GlobalErrorStore.ts
@@ -1,7 +1,7 @@
 import { observable, action } from 'mobx';
 import { Actions } from 'src/actions/lib/actions';
 import { ApiInterface } from 'src/api';
-import { Stores } from 'src/stores.types';
+import { Stores } from 'src/@types/stores.types';
 import Request from './lib/Request';
 import TypedStore from './lib/TypedStore';
 
diff --git a/src/stores/RecipePreviewsStore.ts b/src/stores/RecipePreviewsStore.ts
index 500f69b40..099867785 100644
--- a/src/stores/RecipePreviewsStore.ts
+++ b/src/stores/RecipePreviewsStore.ts
@@ -2,7 +2,7 @@ import { action, computed, observable } from 'mobx';
 import { Actions } from 'src/actions/lib/actions';
 import { ApiInterface } from 'src/api';
 import Recipe from 'src/models/Recipe';
-import { Stores } from 'src/stores.types';
+import { Stores } from 'src/@types/stores.types';
 
 import CachedRequest from './lib/CachedRequest';
 import Request from './lib/Request';
diff --git a/src/stores/RecipesStore.ts b/src/stores/RecipesStore.ts
index af2aa7fb0..d63e46bef 100644
--- a/src/stores/RecipesStore.ts
+++ b/src/stores/RecipesStore.ts
@@ -2,7 +2,7 @@ import { action, computed, observable } from 'mobx';
 import { readJSONSync } from 'fs-extra';
 import semver from 'semver';
 
-import { Stores } from 'src/stores.types';
+import { Stores } from 'src/@types/stores.types';
 import { ApiInterface } from 'src/api';
 import { Actions } from 'src/actions/lib/actions';
 import Recipe from 'src/models/Recipe';
diff --git a/src/stores/RequestStore.ts b/src/stores/RequestStore.ts
index 03ad2c7db..af686388a 100644
--- a/src/stores/RequestStore.ts
+++ b/src/stores/RequestStore.ts
@@ -4,7 +4,7 @@ import ms from 'ms';
 
 import { Actions } from 'src/actions/lib/actions';
 import { ApiInterface } from 'src/api';
-import { Stores } from 'src/stores.types';
+import { Stores } from 'src/@types/stores.types';
 import CachedRequest from './lib/CachedRequest';
 import { LOCAL_PORT } from '../config';
 
diff --git a/src/stores/ServicesStore.ts b/src/stores/ServicesStore.ts
index caa44146f..0164d092a 100644
--- a/src/stores/ServicesStore.ts
+++ b/src/stores/ServicesStore.ts
@@ -5,7 +5,7 @@ import ms from 'ms';
 import { ensureFileSync, pathExistsSync, writeFileSync } from 'fs-extra';
 import { join } from 'path';
 
-import { Stores } from 'src/stores.types';
+import { Stores } from 'src/@types/stores.types';
 import { ApiInterface } from 'src/api';
 import { Actions } from 'src/actions/lib/actions';
 import Request from './lib/Request';
diff --git a/src/stores/SettingsStore.ts b/src/stores/SettingsStore.ts
index 524f2e50c..dabd7b099 100644
--- a/src/stores/SettingsStore.ts
+++ b/src/stores/SettingsStore.ts
@@ -2,7 +2,7 @@ import { ipcRenderer } from 'electron';
 import { getCurrentWindow } from '@electron/remote';
 import { action, computed, observable, reaction } from 'mobx';
 import localStorage from 'mobx-localstorage';
-import { Stores } from 'src/stores.types';
+import { Stores } from 'src/@types/stores.types';
 import { ApiInterface } from 'src/api';
 import { Actions } from 'src/actions/lib/actions';
 import {
diff --git a/src/stores/UIStore.ts b/src/stores/UIStore.ts
index 306b14cb1..e9e099ebc 100644
--- a/src/stores/UIStore.ts
+++ b/src/stores/UIStore.ts
@@ -1,7 +1,7 @@
 import { action, observable, computed, reaction } from 'mobx';
 import { nativeTheme } from '@electron/remote';
 
-import { Stores } from 'src/stores.types';
+import { Stores } from 'src/@types/stores.types';
 import { ApiInterface } from 'src/api';
 import { Actions } from 'src/actions/lib/actions';
 import { Theme, theme, ThemeType } from '../themes';
diff --git a/src/stores/UserStore.ts b/src/stores/UserStore.ts
index 616ff29a6..0827f8196 100644
--- a/src/stores/UserStore.ts
+++ b/src/stores/UserStore.ts
@@ -6,7 +6,7 @@ import { ipcRenderer } from 'electron';
 
 import { ApiInterface } from 'src/api';
 import { Actions } from 'src/actions/lib/actions';
-import { Stores } from 'src/stores.types';
+import { Stores } from 'src/@types/stores.types';
 import { TODOS_PARTITION_ID } from '../config';
 import { isDevMode } from '../environment-remote';
 import Request from './lib/Request';
diff --git a/src/stores/index.ts b/src/stores/index.ts
index a5b1a7452..aac501cda 100644
--- a/src/stores/index.ts
+++ b/src/stores/index.ts
@@ -1,4 +1,3 @@
-import { Stores } from 'src/stores.types';
 import { RouterStore } from 'mobx-react-router';
 import { ApiInterface } from 'src/api';
 import { Actions } from 'src/actions/lib/actions';
@@ -16,12 +15,29 @@ import { workspaceStore } from '../features/workspaces';
 import { communityRecipesStore } from '../features/communityRecipes';
 import { todosStore } from '../features/todos';
 
+export interface RealStores {
+  router: RouterStore;
+  app: AppStore;
+  user: UserStore;
+  features: FeaturesStore;
+  settings: SettingsStore;
+  services: ServicesStore;
+  recipes: RecipesStore;
+  recipePreviews: RecipePreviewsStore;
+  ui: UIStore;
+  requests: RequestStore;
+  globalError: GlobalErrorStore;
+  workspaces: typeof workspaceStore;
+  communityRecipes: typeof communityRecipesStore;
+  todos: typeof todosStore;
+}
+
 export default (
   api: ApiInterface,
   actions: Actions,
   router: RouterStore,
-): Stores => {
-  const stores: Stores | any = {};
+): RealStores => {
+  const stores: RealStores | any = {};
   Object.assign(stores, {
     router,
     app: new AppStore(stores, api, actions),
diff --git a/src/stores/lib/TypedStore.ts b/src/stores/lib/TypedStore.ts
index 7f9d2d60f..c78f83850 100644
--- a/src/stores/lib/TypedStore.ts
+++ b/src/stores/lib/TypedStore.ts
@@ -1,7 +1,7 @@
 import { computed, IReactionPublic, observable } from 'mobx';
 import { Actions } from 'src/actions/lib/actions';
 import { ApiInterface } from 'src/api';
-import { Stores } from 'src/stores.types';
+import { Stores } from 'src/@types/stores.types';
 import Reaction from './Reaction';
 
 export default abstract class TypedStore {