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

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

7 files changed, 117 insertions, 150 deletions

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;