Transform 'AuthLayoutContainer' component hierarchy to tsx (#699)

Co-authored-by: Muhamed <>
Co-authored-by: Vijay A <vraravam@users.noreply.github.com>

13 files changed, 218 insertions, 273 deletions

diff --git a/src/components/AppUpdateInfoBar.tsx b/src/components/AppUpdateInfoBar.tsx
index 3ff488b74..ff4a9b9ad 100644
--- a/src/components/AppUpdateInfoBar.tsx
+++ b/src/components/AppUpdateInfoBar.tsx
@@ -1,6 +1,7 @@
 import { defineMessages, useIntl } from 'react-intl';
 
 import { mdiInformation } from '@mdi/js';
+import { MouseEventHandler } from 'react';
 import InfoBar from './ui/InfoBar';
 import Icon from './ui/icon';
 
@@ -21,17 +22,14 @@ const messages = defineMessages({
   },
 });
 
-type Props = {
-  onInstallUpdate: () => void;
+export interface IProps {
+  onInstallUpdate: MouseEventHandler<HTMLButtonElement>;
   onHide: () => void;
   updateVersionParsed: string;
-};
+}
 
-const AppUpdateInfoBar = ({
-  onInstallUpdate,
-  updateVersionParsed,
-  onHide,
-}: Props) => {
+const AppUpdateInfoBar = (props: IProps) => {
+  const { onInstallUpdate, updateVersionParsed, onHide } = props;
   const intl = useIntl();
 
   return (
diff --git a/src/components/auth/AuthLayout.jsx b/src/components/auth/AuthLayout.tsx
index 5c87c3080..527c2bb74 100644
--- a/src/components/auth/AuthLayout.jsx
+++ b/src/components/auth/AuthLayout.tsx
@@ -1,52 +1,53 @@
-import { cloneElement, Component } from 'react';
-import PropTypes from 'prop-types';
+import {
+  cloneElement,
+  Component,
+  MouseEventHandler,
+  ReactElement,
+} from 'react';
 import { observer } from 'mobx-react';
 import { TitleBar } from 'electron-react-titlebar/renderer';
-
-import { injectIntl } from 'react-intl';
+import { injectIntl, WrappedComponentProps } from 'react-intl';
 import { mdiFlash } from '@mdi/js';
+import { GlobalError } from '../../@types/ferdium-components.types';
 import Link from '../ui/Link';
 import InfoBar from '../ui/InfoBar';
-
 import { Component as PublishDebugInfo } from '../../features/publishDebugInfo';
-
-import {
-  oneOrManyChildElements,
-  globalError as globalErrorPropType,
-} from '../../prop-types';
 import { updateVersionParse } from '../../helpers/update-helpers';
 import globalMessages from '../../i18n/globalMessages';
-
 import { isWindows } from '../../environment';
 import AppUpdateInfoBar from '../AppUpdateInfoBar';
 import { GITHUB_FERDIUM_URL } from '../../config';
 import Icon from '../ui/icon';
-
 import { serverName } from '../../api/apiBase';
 
-class AuthLayout extends Component {
-  static propTypes = {
-    children: oneOrManyChildElements.isRequired,
-    error: globalErrorPropType.isRequired,
-    isOnline: PropTypes.bool.isRequired,
-    isAPIHealthy: PropTypes.bool.isRequired,
-    retryHealthCheck: PropTypes.func.isRequired,
-    isHealthCheckLoading: PropTypes.bool.isRequired,
-    isFullScreen: PropTypes.bool.isRequired,
-    installAppUpdate: PropTypes.func.isRequired,
-    appUpdateIsDownloaded: PropTypes.bool.isRequired,
-    updateVersion: PropTypes.string.isRequired,
-  };
+export interface IProps extends WrappedComponentProps {
+  children: ReactElement;
+  error: GlobalError;
+  isOnline: boolean;
+  isAPIHealthy: boolean;
+  retryHealthCheck: MouseEventHandler<HTMLButtonElement>;
+  isHealthCheckLoading: boolean;
+  isFullScreen: boolean;
+  installAppUpdate: MouseEventHandler<HTMLButtonElement>;
+  appUpdateIsDownloaded: boolean;
+  updateVersion: string;
+}
+
+interface IState {
+  shouldShowAppUpdateInfoBar: boolean;
+}
 
-  constructor() {
-    super();
+@observer
+class AuthLayout extends Component<IProps, IState> {
+  constructor(props: IProps) {
+    super(props);
 
     this.state = {
       shouldShowAppUpdateInfoBar: true,
     };
   }
 
-  render() {
+  render(): ReactElement {
     const {
       children,
       error,
@@ -58,9 +59,9 @@ class AuthLayout extends Component {
       installAppUpdate,
       appUpdateIsDownloaded,
       updateVersion,
+      intl,
     } = this.props;
 
-    const { intl } = this.props;
     let serverNameParse = serverName();
     serverNameParse =
       serverNameParse === 'Custom' ? 'your Custom Server' : serverNameParse;
@@ -124,4 +125,4 @@ class AuthLayout extends Component {
   }
 }
 
-export default injectIntl(observer(AuthLayout));
+export default injectIntl(AuthLayout);
diff --git a/src/components/ui/AppLoader/index.tsx b/src/components/ui/AppLoader/index.tsx
index caa7e381d..f4d9b8e73 100644
--- a/src/components/ui/AppLoader/index.tsx
+++ b/src/components/ui/AppLoader/index.tsx
@@ -1,7 +1,7 @@
-import { Component } from 'react';
+import { Component, ReactElement } from 'react';
 import classnames from 'classnames';
-
-import injectStyle from 'react-jss';
+import withStyles, { WithStylesProps } from 'react-jss';
+import { Theme } from '../../../themes';
 import FullscreenLoader from '../FullscreenLoader';
 import shuffleArray from '../../../helpers/array-helpers';
 
@@ -18,24 +18,27 @@ const textList = shuffleArray([
   'Fixing bugs',
 ]);
 
-type Props = {
-  classes: typeof styles;
-  theme: any;
-  texts: string[];
-};
-
-class AppLoader extends Component<Props> {
-  static defaultProps = {
-    texts: textList,
-  };
+interface IProps extends WithStylesProps<typeof styles> {
+  theme: Theme;
+  texts?: string[];
+}
 
-  state = {
-    step: 0,
-  };
+interface IState {
+  step: number;
+}
 
+class AppLoader extends Component<IProps, IState> {
   interval: NodeJS.Timeout | null = null;
 
-  componentDidMount() {
+  constructor(props: IProps) {
+    super(props);
+
+    this.state = {
+      step: 0,
+    };
+  }
+
+  componentDidMount(): void {
     this.interval = setInterval(() => {
       this.setState((prevState: { step: number }) => ({
         step: prevState.step === textList.length - 1 ? 0 : prevState.step + 1,
@@ -43,14 +46,14 @@ class AppLoader extends Component<Props> {
     }, 2500);
   }
 
-  componentWillUnmount() {
+  componentWillUnmount(): void {
     if (this.interval) {
       clearInterval(this.interval);
     }
   }
 
-  render() {
-    const { classes, theme, texts } = this.props;
+  render(): ReactElement {
+    const { classes, theme, texts = textList } = this.props;
     const { step } = this.state;
 
     return (
@@ -58,20 +61,21 @@ class AppLoader extends Component<Props> {
         className={classes.component}
         spinnerColor={theme.colorAppLoaderSpinner}
       >
-        {texts.map((text, i) => (
-          <span
-            key={text}
-            className={classnames({
-              [`${classes.slogan}`]: true,
-              [`${classes.visible}`]: step === i,
-            })}
-          >
-            {text}
-          </span>
-        ))}
+        {texts &&
+          texts.map((text, i) => (
+            <span
+              key={text}
+              className={classnames({
+                [`${classes.slogan}`]: true,
+                [`${classes.visible}`]: step === i,
+              })}
+            >
+              {text}
+            </span>
+          ))}
       </FullscreenLoader>
     );
   }
 }
 
-export default injectStyle(styles, { injectTheme: true })(AppLoader);
+export default withStyles(styles, { injectTheme: true })(AppLoader);
diff --git a/src/components/ui/AppLoader/styles.ts b/src/components/ui/AppLoader/styles.ts
index 9891e0387..6bf3b4f3c 100644
--- a/src/components/ui/AppLoader/styles.ts
+++ b/src/components/ui/AppLoader/styles.ts
@@ -1,8 +1,7 @@
-let sloganTransition = 'none';
-
-if (window && window.matchMedia('(prefers-reduced-motion: no-preference)')) {
-  sloganTransition = 'opacity 1s ease';
-}
+const sloganTransition =
+  window && window.matchMedia('(prefers-reduced-motion: no-preference)')
+    ? 'opacity 1s ease'
+    : 'none';
 
 export default {
   component: {
diff --git a/src/components/ui/InfoBar.js b/src/components/ui/InfoBar.tsx
index d73491da0..ef8f6ad6f 100644
--- a/src/components/ui/InfoBar.js
+++ b/src/components/ui/InfoBar.tsx
@@ -1,11 +1,11 @@
-import { Component } from 'react';
-import PropTypes from 'prop-types';
+import { Component, MouseEventHandler, ReactNode } from 'react';
 import { observer } from 'mobx-react';
 import classnames from 'classnames';
 import Loader from 'react-loader';
-import { defineMessages, injectIntl } from 'react-intl';
+import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
 
 import { mdiClose } from '@mdi/js';
+import { noop } from 'lodash';
 import Appear from './effects/Appear';
 import Icon from './icon';
 
@@ -16,51 +16,35 @@ const messages = defineMessages({
   },
 });
 
-// Should this file be converted into the coding style similar to './toggle/index.tsx'?
-class InfoBar extends Component {
-  static propTypes = {
-    // eslint-disable-next-line react/forbid-prop-types
-    children: PropTypes.any.isRequired,
-    onClick: PropTypes.func,
-    type: PropTypes.string,
-    className: PropTypes.string,
-    ctaLabel: PropTypes.string,
-    ctaLoading: PropTypes.bool,
-    position: PropTypes.string,
-    sticky: PropTypes.bool,
-    onHide: PropTypes.func,
-  };
-
-  static defaultProps = {
-    onClick: () => null,
-    type: 'primary',
-    className: '',
-    ctaLabel: '',
-    ctaLoading: false,
-    position: 'bottom',
-    sticky: false,
-    onHide: () => null,
-  };
+interface IProps extends WrappedComponentProps {
+  children: ReactNode;
+  onClick?: MouseEventHandler<HTMLButtonElement>;
+  type?: string;
+  className?: string;
+  ctaLabel?: string;
+  ctaLoading?: boolean;
+  position?: string;
+  sticky?: boolean;
+  onHide?: () => void;
+}
 
+@observer
+class InfoBar extends Component<IProps> {
   render() {
     const {
       children,
-      type,
-      className,
-      ctaLabel,
-      ctaLoading,
-      onClick,
-      position,
-      sticky,
-      onHide,
+      type = 'primary',
+      onClick = noop,
+      className = '',
+      ctaLabel = '',
+      ctaLoading = false,
+      position = 'bottom',
+      sticky = false,
+      onHide = noop,
+      intl,
     } = this.props;
 
-    const { intl } = this.props;
-
-    let transitionName = 'slideUp';
-    if (position === 'top') {
-      transitionName = 'slideDown';
-    }
+    const transitionName = position === 'top' ? 'slideDown' : 'slideUp';
 
     return (
       <Appear
@@ -102,4 +86,4 @@ class InfoBar extends Component {
   }
 }
 
-export default injectIntl(observer(InfoBar));
+export default injectIntl(InfoBar);
diff --git a/src/components/ui/Modal/index.tsx b/src/components/ui/Modal/index.tsx
index 7407a686d..154beef0c 100644
--- a/src/components/ui/Modal/index.tsx
+++ b/src/components/ui/Modal/index.tsx
@@ -1,41 +1,33 @@
-import { Component, ReactChildren } from 'react';
+import { Component, ReactNode } from 'react';
 import ReactModal from 'react-modal';
 import classnames from 'classnames';
-import injectCSS from 'react-jss';
+import injectCSS, { WithStylesProps } from 'react-jss';
 import { mdiClose } from '@mdi/js';
 
 import Icon from '../icon';
 import styles from './styles';
 
-type Props = {
-  children: ReactChildren;
-  className: string;
-  classes: any;
+interface IProps extends WithStylesProps<typeof styles> {
+  children: ReactNode;
   isOpen: boolean;
-  portal: string;
   close: () => void;
-  shouldCloseOnOverlayClick: boolean;
-  showClose: boolean;
-};
-
-class Modal extends Component<Props> {
-  static defaultProps = {
-    className: null,
-    portal: 'modal-portal',
-    shouldCloseOnOverlayClick: false,
-    showClose: true,
-  };
+  className?: string | null;
+  portal?: string;
+  shouldCloseOnOverlayClick?: boolean;
+  showClose?: boolean;
+}
 
+class Modal extends Component<IProps> {
   render() {
     const {
       children,
-      className,
       classes,
       isOpen,
-      portal,
       close,
-      shouldCloseOnOverlayClick,
-      showClose,
+      className = null,
+      portal = 'modal-portal',
+      shouldCloseOnOverlayClick = false,
+      showClose = true,
     } = this.props;
 
     return (
diff --git a/src/components/ui/headline/index.tsx b/src/components/ui/headline/index.tsx
index b5a5f695f..bebd8adcf 100644
--- a/src/components/ui/headline/index.tsx
+++ b/src/components/ui/headline/index.tsx
@@ -1,16 +1,22 @@
 import classnames from 'classnames';
-import { Component, createElement, ReactNode } from 'react';
+import {
+  Component,
+  createElement,
+  MouseEventHandler,
+  ReactElement,
+  ReactNode,
+} from 'react';
 import injectStyle, { WithStylesProps } from 'react-jss';
 
 import { Theme } from '../../../themes';
 import { Omit } from '../typings/generic';
 
 interface IProps extends WithStylesProps<typeof styles> {
+  children: ReactNode;
   level?: number;
   className?: string;
-  children: string | ReactNode;
   id?: string;
-  onClick?: () => void;
+  onClick?: MouseEventHandler<HTMLButtonElement>;
 }
 
 const styles = (theme: Theme) => ({
@@ -40,7 +46,7 @@ const styles = (theme: Theme) => ({
 });
 
 class HeadlineComponent extends Component<IProps> {
-  render() {
+  render(): ReactElement {
     const { classes, level, className, children, id, onClick } = this.props;
 
     return createElement(
@@ -61,7 +67,6 @@ class HeadlineComponent extends Component<IProps> {
 }
 
 const Headline = injectStyle(styles, { injectTheme: true })(HeadlineComponent);
-
 const createH = (level: number) => (props: Omit<IProps, 'classes'>) =>
   (
     <Headline level={level} {...props}>
diff --git a/src/components/ui/icon/index.tsx b/src/components/ui/icon/index.tsx
index 7e13b98c7..5b432a194 100644
--- a/src/components/ui/icon/index.tsx
+++ b/src/components/ui/icon/index.tsx
@@ -1,6 +1,6 @@
 import MdiIcon from '@mdi/react';
 import classnames from 'classnames';
-import { Component } from 'react';
+import { Component, ReactElement } from 'react';
 import injectStyle, { WithStylesProps } from 'react-jss';
 
 import { Theme } from '../../../themes';
@@ -18,12 +18,8 @@ const styles = (theme: Theme) => ({
 });
 
 class IconComponent extends Component<IProps> {
-  public static defaultProps = {
-    size: 1,
-  };
-
-  render() {
-    const { classes, icon, size, className } = this.props;
+  render(): ReactElement {
+    const { classes, icon, size = 1, className } = this.props;
 
     if (!icon) {
       console.warn('No Icon specified');
diff --git a/src/components/ui/input/index.tsx b/src/components/ui/input/index.tsx
index aa282cce0..b19bb4bc9 100644
--- a/src/components/ui/input/index.tsx
+++ b/src/components/ui/input/index.tsx
@@ -3,14 +3,12 @@ import Icon from '@mdi/react';
 import classnames from 'classnames';
 import { Component, createRef, InputHTMLAttributes } from 'react';
 import injectSheet, { WithStylesProps } from 'react-jss';
-
+import { noop } from 'lodash';
 import { IFormField } from '../typings/generic';
-
 import Error from '../error';
 import Label from '../label';
 import Wrapper from '../wrapper';
 import { scorePasswordFunc } from './scorePassword';
-
 import styles from './styles';
 
 interface IData {
@@ -26,7 +24,7 @@ interface IProps
   suffix?: string;
   scorePassword?: boolean;
   showPasswordToggle?: boolean;
-  data: IData;
+  data?: IData;
   inputClassName?: string;
   onEnterKey?: Function;
 }
@@ -37,42 +35,31 @@ interface IState {
 }
 
 class InputComponent extends Component<IProps, IState> {
-  static defaultProps = {
-    focus: false,
-    onChange: () => {},
-    onBlur: () => {},
-    onFocus: () => {},
-    scorePassword: false,
-    showLabel: true,
-    showPasswordToggle: false,
-    type: 'text',
-    disabled: false,
-  };
-
-  state = {
-    passwordScore: 0,
-    showPassword: false,
-  };
-
   private inputRef = createRef<HTMLInputElement>();
 
-  componentDidMount() {
-    const { focus, data } = this.props;
+  constructor(props: IProps) {
+    super(props);
+
+    this.state = {
+      passwordScore: 0,
+      showPassword: false,
+    };
+  }
+
+  componentDidMount(): void {
+    const { focus, data = {} } = this.props;
 
     if (this.inputRef && this.inputRef.current) {
       if (focus) {
         this.inputRef.current.focus();
       }
 
-      if (data) {
-        Object.keys(data).map(
-          key => (this.inputRef.current!.dataset[key] = data[key]),
-        );
-      }
+      for (const key of Object.keys(data))
+        this.inputRef.current!.dataset[key] = data[key];
     }
   }
 
-  onChange(e: React.ChangeEvent<HTMLInputElement>) {
+  onChange(e: React.ChangeEvent<HTMLInputElement>): void {
     const { scorePassword, onChange } = this.props;
 
     if (onChange) {
@@ -97,28 +84,28 @@ class InputComponent extends Component<IProps, IState> {
     const {
       classes,
       className,
-      disabled,
       error,
       id,
       inputClassName,
       label,
       prefix,
-      scorePassword,
       suffix,
-      showLabel,
-      showPasswordToggle,
-      type,
       value,
       name,
       placeholder,
       spellCheck,
-      onBlur,
-      onFocus,
       min,
       max,
       step,
       required,
       noMargin,
+      onBlur = noop,
+      onFocus = noop,
+      scorePassword = false,
+      showLabel = true,
+      showPasswordToggle = false,
+      type = 'text',
+      disabled = false,
     } = this.props;
 
     const { showPassword, passwordScore } = this.state;
diff --git a/src/containers/auth/AuthLayoutContainer.tsx b/src/containers/auth/AuthLayoutContainer.tsx
index 6fc6713f1..6a1fed0d7 100644
--- a/src/containers/auth/AuthLayoutContainer.tsx
+++ b/src/containers/auth/AuthLayoutContainer.tsx
@@ -2,14 +2,15 @@ import { Component, ReactElement } from 'react';
 import { inject, observer } from 'mobx-react';
 import { ThemeProvider } from 'react-jss';
 import { Outlet } from 'react-router-dom';
-
 import { StoresProps } from '../../@types/ferdium-components.types';
 import AuthLayout from '../../components/auth/AuthLayout';
 import AppLoader from '../../components/ui/AppLoader';
 
-interface AuthLayoutContainerProps extends StoresProps {}
+interface IProps extends StoresProps {}
 
-class AuthLayoutContainer extends Component<AuthLayoutContainerProps> {
+@inject('stores', 'actions')
+@observer
+class AuthLayoutContainer extends Component<IProps> {
   render(): ReactElement {
     const { stores, actions } = this.props;
     const { app, features, globalError, user } = stores;
@@ -39,7 +40,6 @@ class AuthLayoutContainer extends Component<AuthLayoutContainerProps> {
       <ThemeProvider theme={stores.ui.theme}>
         <AuthLayout
           error={globalError.response}
-          pathname={stores.router.location.pathname}
           isOnline={app.isOnline}
           isAPIHealthy={!app.healthCheckRequest.isError}
           retryHealthCheck={actions.app.healthCheck}
@@ -58,4 +58,4 @@ class AuthLayoutContainer extends Component<AuthLayoutContainerProps> {
   }
 }
 
-export default inject('stores', 'actions')(observer(AuthLayoutContainer));
+export default AuthLayoutContainer;
diff --git a/src/features/publishDebugInfo/Component.js b/src/features/publishDebugInfo/Component.tsx
index 27661d917..e265902dd 100644
--- a/src/features/publishDebugInfo/Component.js
+++ b/src/features/publishDebugInfo/Component.tsx
@@ -1,18 +1,15 @@
 import { inject, observer } from 'mobx-react';
-import PropTypes from 'prop-types';
-import { Component } from 'react';
-import { defineMessages, injectIntl } from 'react-intl';
-import injectSheet from 'react-jss';
+import { Component, ReactElement } from 'react';
+import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
+import withStyles, { WithStylesProps } from 'react-jss';
+import { StoresProps } from '../../@types/ferdium-components.types';
 import { state as ModalState } from './store';
-
 import { H1 } from '../../components/ui/headline';
 import { sendAuthRequest } from '../../api/utils/auth';
 import Button from '../../components/ui/button';
 import Input from '../../components/ui/input/index';
 import Modal from '../../components/ui/Modal';
 import { DEBUG_API } from '../../config';
-import AppStore from '../../stores/AppStore';
-import ServicesStore from '../../stores/ServicesStore';
 
 const debug = require('../../preload-safe-debug')(
   'Ferdium:feature:publishDebugInfo',
@@ -78,30 +75,47 @@ const styles = theme => ({
   },
 });
 
-class PublishDebugLogModal extends Component {
-  state = {
-    log: null,
-    error: false,
-    isSendingLog: false,
-  };
+interface IProps
+  extends Partial<StoresProps>,
+    WithStylesProps<typeof styles>,
+    WrappedComponentProps {}
+
+interface IState {
+  log: null;
+  error: boolean;
+  isSendingLogs: boolean;
+}
+
+@inject('stores', 'actions')
+@observer
+class PublishDebugLogModal extends Component<IProps, IState> {
+  constructor(props: IProps) {
+    super(props);
+
+    this.state = {
+      log: null,
+      error: false,
+      isSendingLogs: false,
+    };
+  }
 
   // Close this modal
-  close() {
+  close(): void {
     ModalState.isModalVisible = false;
     this.setState({
       log: null,
       error: false,
-      isSendingLog: false,
+      isSendingLogs: false,
     });
   }
 
-  async publishDebugInfo() {
+  async publishDebugInfo(): Promise<void> {
     debug('debugInfo: starting publish');
     this.setState({
-      isSendingLog: true,
+      isSendingLogs: true,
     });
 
-    const debugInfo = JSON.stringify(this.props.stores.app.debugInfo);
+    const debugInfo = JSON.stringify(this.props.stores?.app?.debugInfo);
 
     const request = await sendAuthRequest(
       `${DEBUG_API}/create`,
@@ -118,31 +132,21 @@ class PublishDebugLogModal extends Component {
     if (request.status === 200) {
       const response = await request.json();
       if (response.id) {
-        this.setState({
-          log: response.id,
-        });
+        this.setState({ log: response.id });
       } else {
-        this.setState({
-          error: true,
-        });
+        this.setState({ error: true });
       }
     } else {
-      this.setState({
-        error: true,
-      });
+      this.setState({ error: true });
     }
 
     debug('debugInfo: finished publishing');
   }
 
-  render() {
+  render(): ReactElement {
     const { isModalVisible } = ModalState;
-
-    const { classes } = this.props;
-
-    const { log, error, isSendingLog } = this.state;
-
-    const { intl } = this.props;
+    const { classes, intl } = this.props;
+    const { log, error, isSendingLogs } = this.state;
 
     return (
       <Modal
@@ -159,18 +163,16 @@ class PublishDebugLogModal extends Component {
             <p className={classes.info}>
               {intl.formatMessage(messages.published)}
             </p>
-            <Input showLabel={false} value={`${DEBUG_API}/${log}`} readonly />
+            {/* TODO - [TS DEBT] need to check if <Input/> take readOnly and use it  */}
+            <Input showLabel={false} value={`${DEBUG_API}/${log}`} readOnly />
           </>
         )}
-
         {error && (
           <p className={classes.info}>{intl.formatMessage(messages.error)}</p>
         )}
-
         {!log && !error && (
           <>
             <p className={classes.info}>{intl.formatMessage(messages.info)}</p>
-
             <a
               href={`${DEBUG_API}/privacy.html`}
               target="_blank"
@@ -187,13 +189,12 @@ class PublishDebugLogModal extends Component {
             >
               {intl.formatMessage(messages.terms)}
             </a>
-
             <Button
               type="button"
               label={intl.formatMessage(messages.publish)}
               className={classes.button}
               onClick={() => this.publishDebugInfo()}
-              disabled={isSendingLog}
+              disabled={isSendingLogs}
             />
           </>
         )}
@@ -202,18 +203,6 @@ class PublishDebugLogModal extends Component {
   }
 }
 
-PublishDebugLogModal.propTypes = {
-  stores: PropTypes.shape({
-    app: PropTypes.instanceOf(AppStore).isRequired,
-  }).isRequired,
-  actions: PropTypes.shape({
-    service: PropTypes.instanceOf(ServicesStore).isRequired,
-  }).isRequired,
-  classes: PropTypes.object.isRequired,
-};
-
 export default injectIntl(
-  injectSheet(styles, { injectTheme: true })(
-    inject('stores', 'actions')(observer(PublishDebugLogModal)),
-  ),
+  withStyles(styles, { injectTheme: true })(PublishDebugLogModal),
 );
diff --git a/src/features/publishDebugInfo/index.ts b/src/features/publishDebugInfo/index.ts
index 80714a104..cbbdbc594 100644
--- a/src/features/publishDebugInfo/index.ts
+++ b/src/features/publishDebugInfo/index.ts
@@ -1,21 +1,17 @@
-import { state as ModalState } from './store';
+import { state } from './store';
 
 export { default as Component } from './Component';
 
-const state = ModalState;
 const debug = require('../../preload-safe-debug')(
   'Ferdium:feature:publishDebugInfo',
 );
 
-export default function initialize() {
+export default function initialize(): void {
   debug('Initialize publishDebugInfo feature');
 
-  function showModal() {
+  const showModal = (): void => {
     state.isModalVisible = true;
-  }
-
-  window['ferdium'].features.publishDebugInfo = {
-    state,
-    showModal,
   };
+
+  window['ferdium'].features.publishDebugInfo = { state, showModal };
 }
diff --git a/src/routes.tsx b/src/routes.tsx
index 478d3dfe8..8150d135e 100644
--- a/src/routes.tsx
+++ b/src/routes.tsx
@@ -6,7 +6,7 @@ import {
   Routes,
   unstable_HistoryRouter as HistoryRouter,
 } from 'react-router-dom';
-
+import { HashHistory } from 'history';
 import AppLayoutContainer from './containers/layout/AppLayoutContainer';
 import SettingsWindow from './containers/settings/SettingsWindow';
 import ReleaseNotesWindow from './containers/settings/ReleaseNotesWindow';
@@ -33,25 +33,19 @@ import AuthLayoutContainer from './containers/auth/AuthLayoutContainer';
 import WorkspacesScreen from './features/workspaces/containers/WorkspacesScreen';
 import EditWorkspaceScreen from './features/workspaces/containers/EditWorkspaceScreen';
 import { WORKSPACES_ROUTES } from './features/workspaces/constants';
-import { Actions } from './actions/lib/actions';
-import { RealStores } from './stores';
+import { StoresProps } from './@types/ferdium-components.types';
 
-type Props = {
-  stores: RealStores;
-  actions: Actions;
-  history: any;
-};
+interface IProps extends StoresProps {
+  history: HashHistory;
+}
 
-class FerdiumRoutes extends Component<Props> {
+@inject('stores', 'actions')
+@observer
+class FerdiumRoutes extends Component<IProps> {
   render(): ReactElement {
-    const { history } = this.props;
-    const routeProps = {
-      stores: this.props.stores,
-      actions: this.props.actions,
-    };
-    const errorProps = {
-      error: this.props.stores.globalError.error || {},
-    };
+    const { history, stores, actions } = this.props;
+    const routeProps: StoresProps = { stores, actions };
+    const errorProps = { error: this.props.stores.globalError.error || {} };
 
     return (
       <HistoryRouter history={history}>
@@ -185,4 +179,4 @@ class FerdiumRoutes extends Component<Props> {
   }
 }
 
-export default inject('stores', 'actions')(observer(FerdiumRoutes));
+export default FerdiumRoutes;