chore: transform containers/settings from js to tsx

src/@types/ferdium-components.types.ts

@@ -1,7 +1,7 @@
 import { Actions } from 'src/actions/lib/actions';
 import { RealStores } from 'src/stores';
 
-export interface DefaultProps {
+export interface StoresProps {
   actions: Actions;
   stores: RealStores;
 }

src/@types/mobx-form.types.ts

@@ -0,0 +1,20 @@
+export interface FormFieldOptions {
+  value?: string;
+  label?: string;
+  disabled?: boolean;
+}
+
+export interface FormFields {
+  fields: {
+    [key: string]: {
+      label?: string;
+      placeholder?: string;
+      options?: FormFieldOptions[];
+      value?: string | boolean | number | null;
+      default?: string | boolean | number | null;
+      type?: string; // todo specifiy probably
+      disabled?: boolean;
+      validators?: any; // Not sure yet.
+    };
+  };
+}

src/actions/lib/actions.ts

@@ -10,7 +10,7 @@ export interface Actions {
   [key: string]: {
     [key: string]: {
       (...args: any[]): void;
-      listeners: Array<Function>;
+      listeners: Function[];
       notify: (params: any) => void;
       listen: (listener: (params: any) => void) => void;
       off: (listener: (params: any) => void) => void;

src/config.ts

@@ -276,6 +276,8 @@ export const DEFAULT_APP_SETTINGS = {
   enableLongPressServiceHint: false,
   proxyFeatureEnabled: false,
   onlyShowFavoritesInUnreadCount: false,
+  customTodoServer: '',
+  locale: 'en-US',
 };
 
 export const DEFAULT_SERVICE_SETTINGS = {

src/containers/auth/AuthLayoutContainer.tsx

@@ -2,14 +2,14 @@ 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 { StoresProps } 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 {
+interface AuthLayoutContainerProps extends StoresProps {
   location: Location;
-  children: ReactNode[] | ReactNode;
+  children: ReactNode;
 }
 
 class AuthLayoutContainer extends Component<AuthLayoutContainerProps> {

src/containers/auth/ChangeServerScreen.tsx

@@ -1,10 +1,10 @@
 import { Component, ReactElement } from 'react';
 import { inject, observer } from 'mobx-react';
-import { DefaultProps } from 'src/@types/ferdium-components.types';
+import { StoresProps } from 'src/@types/ferdium-components.types';
 import ChangeServer from '../../components/auth/ChangeServer';
 
-class ChangeServerScreen extends Component<DefaultProps> {
-  constructor(props: DefaultProps) {
+class ChangeServerScreen extends Component<StoresProps> {
+  constructor(props: StoresProps) {
     super(props);
 
     this.onSubmit = this.onSubmit.bind(this);

src/containers/auth/ImportScreen.tsx

@@ -1,9 +1,9 @@
 import { Component, ReactElement } from 'react';
 import { inject, observer } from 'mobx-react';
-import { DefaultProps } from 'src/@types/ferdium-components.types';
+import { StoresProps } from 'src/@types/ferdium-components.types';
 import Import from '../../components/auth/Import';
 
-class ImportScreen extends Component<DefaultProps> {
+class ImportScreen extends Component<StoresProps> {
   render(): ReactElement {
     const { actions, stores } = this.props;
 

src/containers/auth/InviteScreen.tsx

@@ -1,9 +1,9 @@
 import { Component, ReactElement } from 'react';
 import { inject, observer } from 'mobx-react';
-import { DefaultProps } from 'src/@types/ferdium-components.types';
+import { StoresProps } from 'src/@types/ferdium-components.types';
 import Invite from '../../components/auth/Invite';
 
-class InviteScreen extends Component<DefaultProps> {
+class InviteScreen extends Component<StoresProps> {
   render(): ReactElement {
     const { actions } = this.props;
 

src/containers/auth/LockedScreen.tsx

@@ -1,16 +1,16 @@
 import { Component, ReactElement } from 'react';
 import { inject, observer } from 'mobx-react';
-import { DefaultProps } from 'src/@types/ferdium-components.types';
+import { StoresProps } from 'src/@types/ferdium-components.types';
 import Locked from '../../components/auth/Locked';
 
 import { hash } from '../../helpers/password-helpers';
 
-class LockedScreen extends Component<DefaultProps> {
+class LockedScreen extends Component<StoresProps> {
   state = {
     error: false,
   };
 
-  constructor(props: DefaultProps) {
+  constructor(props: StoresProps) {
     super(props);
 
     this.onSubmit = this.onSubmit.bind(this);

src/containers/auth/LoginScreen.tsx

@@ -1,9 +1,9 @@
 import { Component, ReactElement } from 'react';
 import { inject, observer } from 'mobx-react';
-import { DefaultProps, GlobalError } from 'src/@types/ferdium-components.types';
+import { StoresProps, GlobalError } from 'src/@types/ferdium-components.types';
 import Login from '../../components/auth/Login';
 
-interface LoginScreenProps extends DefaultProps {
+interface LoginScreenProps extends StoresProps {
   error: GlobalError;
 }
 

src/containers/auth/PasswordScreen.tsx

@@ -1,9 +1,9 @@
 import { Component, ReactElement } from 'react';
 import { inject, observer } from 'mobx-react';
-import { DefaultProps } from 'src/@types/ferdium-components.types';
+import { StoresProps } from 'src/@types/ferdium-components.types';
 import Password from '../../components/auth/Password';
 
-class PasswordScreen extends Component<DefaultProps> {
+class PasswordScreen extends Component<StoresProps> {
   render(): ReactElement {
     const { actions, stores } = this.props;
 

src/containers/auth/SetupAssistantScreen.tsx

@@ -2,11 +2,11 @@
 import { Component, ReactElement } from 'react';
 import { inject, observer } from 'mobx-react';
 
-import { DefaultProps } from 'src/@types/ferdium-components.types';
+import { StoresProps } from 'src/@types/ferdium-components.types';
 import { sleep } from '../../helpers/async-helpers';
 import SetupAssistant from '../../components/auth/SetupAssistant';
 
-class SetupAssistantScreen extends Component<DefaultProps> {
+class SetupAssistantScreen extends Component<StoresProps> {
   state = {
     isSettingUpServices: false,
   };

src/containers/auth/SignupScreen.tsx

@@ -1,10 +1,10 @@
 import { Component, ReactElement } from 'react';
 import { inject, observer } from 'mobx-react';
 
-import { DefaultProps, GlobalError } from 'src/@types/ferdium-components.types';
+import { StoresProps, GlobalError } from 'src/@types/ferdium-components.types';
 import Signup from '../../components/auth/Signup';
 
-interface SignUpScreenComponents extends DefaultProps {
+interface SignUpScreenComponents extends StoresProps {
   error: GlobalError;
 }
 

src/containers/auth/WelcomeScreen.tsx

@@ -1,10 +1,10 @@
 import { Component, ReactElement } from 'react';
 import { inject, observer } from 'mobx-react';
 
-import { DefaultProps } from 'src/@types/ferdium-components.types';
+import { StoresProps } from 'src/@types/ferdium-components.types';
 import Welcome from '../../components/auth/Welcome';
 
-class WelcomeScreen extends Component<DefaultProps> {
+class WelcomeScreen extends Component<StoresProps> {
   render(): ReactElement {
     const { user, recipePreviews } = this.props.stores;
 

src/containers/layout/AppLayoutContainer.js → src/containers/layout/AppLayoutContainer.tsx

@@ -1,34 +1,22 @@
-import { Children, Component } from 'react';
-import PropTypes from 'prop-types';
+import { Children, Component, ReactElement, ReactNode } from 'react';
 import { inject, observer } from 'mobx-react';
 import { ThemeProvider } from 'react-jss';
 
-import AppStore from '../../stores/AppStore';
-import RecipesStore from '../../stores/RecipesStore';
-import ServicesStore from '../../stores/ServicesStore';
-import FeaturesStore from '../../stores/FeaturesStore';
-import UIStore from '../../stores/UIStore';
-import SettingsStore from '../../stores/SettingsStore';
-import UserStore from '../../stores/UserStore';
-import RequestStore from '../../stores/RequestStore';
-import GlobalErrorStore from '../../stores/GlobalErrorStore';
-
-import { oneOrManyChildElements } from '../../prop-types';
+import { StoresProps } from 'src/@types/ferdium-components.types';
 import AppLayout from '../../components/layout/AppLayout';
 import Sidebar from '../../components/layout/Sidebar';
 import Services from '../../components/services/content/Services';
 import AppLoader from '../../components/ui/AppLoader';
 
-import { workspaceActions } from '../../features/workspaces/actions';
 import WorkspaceDrawer from '../../features/workspaces/components/WorkspaceDrawer';
 import { workspaceStore } from '../../features/workspaces';
 
-class AppLayoutContainer extends Component {
-  static defaultProps = {
-    children: null,
-  };
+interface AppLayoutContainerProps extends StoresProps {
+  children: ReactNode;
+}
 
-  render() {
+class AppLayoutContainer extends Component<AppLayoutContainerProps> {
+  render(): ReactElement {
     const {
       app,
       features,
@@ -38,7 +26,7 @@ class AppLayoutContainer extends Component {
       globalError,
       requests,
       user,
-      router
+      router,
     } = this.props.stores;
 
     /* HOTFIX for:
@@ -69,7 +57,8 @@ class AppLayoutContainer extends Component {
 
     const { retryRequiredRequests } = this.props.actions.requests;
 
-    const { installUpdate, toggleMuteApp, toggleCollapseMenu } = this.props.actions.app;
+    const { installUpdate, toggleMuteApp, toggleCollapseMenu } =
+      this.props.actions.app;
 
     const { openSettings, closeSettings } = this.props.actions.ui;
 
@@ -85,14 +74,10 @@ class AppLayoutContainer extends Component {
 
     const isLoadingSettings = !settings.loaded;
 
-    if (
-      isLoadingSettings ||
-      isLoadingFeatures ||
-      isLoadingServices
-    ) {
+    if (isLoadingSettings || isLoadingFeatures || isLoadingServices) {
       return (
         <ThemeProvider theme={ui.theme}>
-          <AppLoader />
+          <AppLoader theme={ui.theme} />
         </ThemeProvider>
       );
     }
@@ -127,7 +112,9 @@ class AppLayoutContainer extends Component {
         wakeUpService={awake}
         toggleMuteApp={toggleMuteApp}
         toggleCollapseMenu={toggleCollapseMenu}
-        toggleWorkspaceDrawer={workspaceActions.toggleWorkspaceDrawer}
+        toggleWorkspaceDrawer={
+          this.props.actions.workspaces.toggleWorkspaceDrawer
+        }
         isWorkspaceDrawerOpen={workspaceStore.isWorkspaceDrawerOpen}
         showServicesUpdatedInfoBar={ui.showServicesUpdatedInfoBar}
         showMessageBadgeWhenMutedSetting={
@@ -182,26 +169,4 @@ class AppLayoutContainer extends Component {
   }
 }
 
-AppLayoutContainer.propTypes = {
-  stores: PropTypes.shape({
-    services: PropTypes.instanceOf(ServicesStore).isRequired,
-    features: PropTypes.instanceOf(FeaturesStore).isRequired,
-    recipes: PropTypes.instanceOf(RecipesStore).isRequired,
-    app: PropTypes.instanceOf(AppStore).isRequired,
-    ui: PropTypes.instanceOf(UIStore).isRequired,
-    settings: PropTypes.instanceOf(SettingsStore).isRequired,
-    user: PropTypes.instanceOf(UserStore).isRequired,
-    requests: PropTypes.instanceOf(RequestStore).isRequired,
-    globalError: PropTypes.instanceOf(GlobalErrorStore).isRequired,
-  }).isRequired,
-  actions: PropTypes.shape({
-    service: PropTypes.instanceOf(ServicesStore).isRequired,
-    ui: PropTypes.instanceOf(UIStore).isRequired,
-    app: PropTypes.instanceOf(AppStore).isRequired,
-    requests: PropTypes.instanceOf(RequestStore).isRequired,
-  }).isRequired,
-  // eslint-disable-next-line react/require-default-props
-  children: oneOrManyChildElements,
-};
-
 export default inject('stores', 'actions')(observer(AppLayoutContainer));

src/containers/settings/AccountScreen.js → src/containers/settings/AccountScreen.tsx

@@ -1,36 +1,32 @@
-import { Component } from 'react';
-import PropTypes from 'prop-types';
+import { Component, ReactElement } from 'react';
 import { inject, observer } from 'mobx-react';
 
-import UserStore from '../../stores/UserStore';
-import AppStore from '../../stores/AppStore';
-import FeaturesStore from '../../stores/FeaturesStore';
-import SettingsStore from '../../stores/SettingsStore';
+import { StoresProps } from 'src/@types/ferdium-components.types';
 
 import AccountDashboard from '../../components/settings/account/AccountDashboard';
 import ErrorBoundary from '../../components/util/ErrorBoundary';
 import { LIVE_FRANZ_API } from '../../config';
 import { WEBSITE } from '../../environment-remote';
 
-class AccountScreen extends Component {
-  onCloseWindow() {
+class AccountScreen extends Component<StoresProps> {
+  onCloseWindow(): void {
     const { user, features } = this.props.stores;
     user.getUserInfoRequest.invalidate({ immediately: true });
     features.featuresRequest.invalidate({ immediately: true });
   }
 
-  reloadData() {
+  reloadData(): void {
     const { user } = this.props.stores;
 
     user.getUserInfoRequest.reload();
   }
 
-  handleWebsiteLink(route) {
+  handleWebsiteLink(route: string): void {
     const { actions, stores } = this.props;
 
-    const api = stores.settings.all.app.server;
+    const api: string = stores.settings.all.app.server;
 
-    const url =
+    const url: string =
       api === LIVE_FRANZ_API
         ? stores.user.getAuthURL(
             `${WEBSITE}${route}?utm_source=app&utm_medium=account_dashboard`,
@@ -40,7 +36,7 @@ class AccountScreen extends Component {
     actions.app.openExternalUrl({ url });
   }
 
-  render() {
+  render(): ReactElement {
     const { user, settings } = this.props.stores;
     const { user: userActions } = this.props.actions;
 
@@ -72,17 +68,4 @@ class AccountScreen extends Component {
   }
 }
 
-AccountScreen.propTypes = {
-  stores: PropTypes.shape({
-    user: PropTypes.instanceOf(UserStore).isRequired,
-    features: PropTypes.instanceOf(FeaturesStore).isRequired,
-    settings: PropTypes.instanceOf(SettingsStore).isRequired,
-    app: PropTypes.instanceOf(AppStore).isRequired,
-  }).isRequired,
-  actions: PropTypes.shape({
-    app: PropTypes.instanceOf(AppStore).isRequired,
-    user: PropTypes.instanceOf(UserStore).isRequired,
-  }).isRequired,
-};
-
 export default inject('stores', 'actions')(observer(AccountScreen));