Transform ChangeServer components tree to typescript (#725)

5 files changed, 221 insertions, 206 deletions

diff --git a/src/components/ui/Infobox.js b/src/components/ui/Infobox.tsx
index 8fb80d87f..1fc24816a 100644
--- a/src/components/ui/Infobox.js
+++ b/src/components/ui/Infobox.tsx
@@ -1,11 +1,11 @@
-import { Component } from 'react';
-import PropTypes from 'prop-types';
-import { observer } from 'mobx-react';
+import { Component, MouseEventHandler, ReactElement, ReactNode } from 'react';
 import classnames from 'classnames';
 import Loader from 'react-loader';
-import { defineMessages, injectIntl } from 'react-intl';
+import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
 import { mdiAlert, mdiCheckboxMarkedCircleOutline, mdiClose } from '@mdi/js';
-import Icon from '../ui/icon';
+import { noop } from 'lodash';
+import { observer } from 'mobx-react';
+import Icon from './icon';
 
 const icons = {
   'checkbox-marked-circle-outline': mdiCheckboxMarkedCircleOutline,
@@ -19,55 +19,51 @@ const messages = defineMessages({
   },
 });
 
-// Can this file be merged into the './infobox/index.tsx' file?
-class Infobox extends Component {
-  static propTypes = {
-    // eslint-disable-next-line react/forbid-prop-types
-    children: PropTypes.any.isRequired,
-    icon: PropTypes.string,
-    type: PropTypes.string,
-    ctaOnClick: PropTypes.func,
-    ctaLabel: PropTypes.string,
-    ctaLoading: PropTypes.bool,
-    dismissable: PropTypes.bool,
-    onDismiss: PropTypes.func,
-    onSeen: PropTypes.func,
-  };
+interface IProps extends WrappedComponentProps {
+  children: ReactNode;
+  icon?: string;
+  type?: string;
+  ctaLabel?: string;
+  ctaLoading?: boolean;
+  dismissible?: boolean;
+  ctaOnClick?: MouseEventHandler<HTMLButtonElement>;
+  onDismiss?: () => void;
+  onSeen?: () => void;
+}
 
-  static defaultProps = {
-    icon: '',
-    type: 'primary',
-    dismissable: false,
-    ctaOnClick: () => null,
-    ctaLabel: '',
-    ctaLoading: false,
-    onDismiss: () => null,
-    onSeen: () => null,
-  };
+interface IState {
+  dismissed: boolean;
+}
 
-  state = {
-    dismissed: false,
-  };
+// Can this file be merged into the './infobox/index.tsx' file?
+@observer
+class Infobox extends Component<IProps, IState> {
+  constructor(props: IProps) {
+    super(props);
+
+    this.state = {
+      dismissed: false,
+    };
+  }
 
-  componentDidMount() {
-    const { onSeen } = this.props;
-    if (onSeen) onSeen();
+  componentDidMount(): void {
+    const { onSeen = noop } = this.props;
+    onSeen();
   }
 
-  render() {
+  render(): ReactElement | null {
     const {
       children,
-      icon,
-      type,
-      ctaLabel,
-      ctaLoading,
-      ctaOnClick,
-      dismissable,
-      onDismiss,
+      icon = '',
+      type = 'primary',
+      dismissible = false,
+      ctaOnClick = noop,
+      ctaLabel = '',
+      ctaLoading = false,
+      onDismiss = noop,
+      intl,
     } = this.props;
 
-    const { intl } = this.props;
-
     if (this.state.dismissed) {
       return null;
     }
@@ -94,7 +90,7 @@ class Infobox extends Component {
             {ctaLabel}
           </button>
         )}
-        {dismissable && (
+        {dismissible && (
           <button
             type="button"
             onClick={() => {
@@ -112,4 +108,4 @@ class Infobox extends Component {
   }
 }
 
-export default injectIntl(observer(Infobox));
+export default injectIntl(Infobox);
diff --git a/src/components/ui/Input.tsx b/src/components/ui/Input.tsx
index 78b3a9200..c22dc5838 100644
--- a/src/components/ui/Input.tsx
+++ b/src/components/ui/Input.tsx
@@ -1,8 +1,16 @@
-import { ChangeEvent, Component, createRef, RefObject } from 'react';
+import {
+  ChangeEvent,
+  ChangeEventHandler,
+  Component,
+  createRef,
+  ReactElement,
+  RefObject,
+} from 'react';
 import { observer } from 'mobx-react';
 import classnames from 'classnames';
 import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
 import { mdiEye, mdiEyeOff } from '@mdi/js';
+import { noop } from 'lodash';
 import { scorePassword as scorePasswordFunc } from '../../helpers/password-helpers';
 import Icon from './icon';
 import { Field } from '../../@types/mobx-form.types';
@@ -23,6 +31,8 @@ interface IProps extends WrappedComponentProps {
   scorePassword?: boolean;
   prefix?: string;
   suffix?: string;
+  placeholder?: string;
+  onChange?: ChangeEventHandler<HTMLInputElement>;
 }
 
 interface IState {
@@ -53,14 +63,17 @@ class Input extends Component<IProps, IState> {
   }
 
   onChange(e: ChangeEvent<HTMLInputElement>): void {
-    const { field, scorePassword } = this.props;
+    const { field, scorePassword, onChange = noop } = this.props;
 
     if (field.onChange) {
+      onChange(e);
       field.onChange(e);
     }
 
     if (scorePassword) {
-      this.setState({ passwordScore: scorePasswordFunc(field.value) });
+      this.setState({
+        passwordScore: scorePasswordFunc(field.value as string),
+      });
     }
   }
 
@@ -70,7 +83,7 @@ class Input extends Component<IProps, IState> {
     }
   }
 
-  render() {
+  render(): ReactElement {
     const {
       field,
       className = null,
diff --git a/src/components/ui/Select.js b/src/components/ui/Select.tsx
index ca5ec9964..1d69a9acf 100644
--- a/src/components/ui/Select.js
+++ b/src/components/ui/Select.tsx
@@ -1,40 +1,41 @@
-import { createRef, Component } from 'react';
-import PropTypes from 'prop-types';
+import {
+  createRef,
+  Component,
+  ReactElement,
+  RefObject,
+  ChangeEvent,
+} from 'react';
 import { observer } from 'mobx-react';
-import { Field } from 'mobx-react-form';
 import classnames from 'classnames';
+import { Field } from '../../@types/mobx-form.types';
 
-// Can this file be merged into the './select/index.tsx' file?
-class Select extends Component {
-  static propTypes = {
-    field: PropTypes.instanceOf(Field).isRequired,
-    className: PropTypes.string,
-    showLabel: PropTypes.bool,
-    disabled: PropTypes.bool,
-    multiple: PropTypes.bool,
-  };
+interface IProps {
+  field: Field;
+  className?: string;
+  showLabel?: boolean;
+  disabled?: boolean;
+  multiple?: boolean;
+}
 
-  static defaultProps = {
-    className: null,
-    showLabel: true,
-    disabled: false,
-    multiple: false,
-  };
+// Can this file be merged into the './select/index.tsx' file?
+@observer
+class Select extends Component<IProps> {
+  private element: RefObject<HTMLSelectElement> =
+    createRef<HTMLSelectElement>();
 
-  constructor(props) {
+  constructor(props: IProps) {
     super(props);
-
-    this.element = createRef();
   }
 
-  multipleChange() {
-    const element = this.element.current;
-
-    const result = [];
-    const options = element && element.options;
-
+  multipleChange(e: ChangeEvent<HTMLSelectElement>): void {
+    e.preventDefault();
+    if (!this.element.current) {
+      return;
+    }
+    const result: string[] = [];
+    const { options } = this.element.current;
     for (const option of options) {
-      if (option.selected) {
+      if (option.selected && (option.value || option.text)) {
         result.push(option.value || option.text);
       }
     }
@@ -43,8 +44,14 @@ class Select extends Component {
     field.value = result;
   }
 
-  render() {
-    const { field, className, showLabel, disabled, multiple } = this.props;
+  render(): ReactElement {
+    const {
+      field,
+      className = null,
+      showLabel = true,
+      disabled = false,
+      multiple = false,
+    } = this.props;
 
     let selected = field.value;
 
@@ -74,7 +81,11 @@ class Select extends Component {
           </label>
         )}
         <select
-          onChange={multiple ? e => this.multipleChange(e) : field.onChange}
+          onChange={
+            multiple
+              ? (e: ChangeEvent<HTMLSelectElement>) => this.multipleChange(e)
+              : field.onChange
+          }
           id={field.id}
           defaultValue={selected}
           className="franz-form__select"
@@ -82,7 +93,7 @@ class Select extends Component {
           multiple={multiple}
           ref={this.element}
         >
-          {field.options.map(type => (
+          {field.options!.map(type => (
             <option
               key={type.value}
               value={type.value}
@@ -98,4 +109,4 @@ class Select extends Component {
   }
 }
 
-export default observer(Select);
+export default Select;
diff --git a/src/components/ui/infobox/index.tsx b/src/components/ui/infobox/index.tsx
index ad59ea81e..3b878a9de 100644
--- a/src/components/ui/infobox/index.tsx
+++ b/src/components/ui/infobox/index.tsx
@@ -1,32 +1,14 @@
 import { mdiClose } from '@mdi/js';
 import classnames from 'classnames';
-import { Component, ReactNode } from 'react';
-import injectStyle, { WithStylesProps } from 'react-jss';
-
+import { noop } from 'lodash';
+import { Component, ReactElement, ReactNode } from 'react';
+import withStyles, { WithStylesProps } from 'react-jss';
 import { Theme } from '../../../themes';
 import Icon from '../icon';
 
-interface IProps extends WithStylesProps<typeof styles> {
-  children: ReactNode;
-  icon?: string;
-  type?: string;
-  dismissable?: boolean;
-  ctaLabel?: string;
-
-  className?: string;
-  onDismiss?: () => void;
-  onUnmount?: () => void;
-  ctaOnClick?: () => void;
-}
-
-interface IState {
-  isDismissing: boolean;
-  dismissed: boolean;
-}
-
 const buttonStyles = (theme: Theme) => {
   const styles = {};
-  Object.keys(theme.styleTypes).map(style => {
+  for (const style of Object.keys(theme.styleTypes)) {
     Object.assign(styles, {
       [style]: {
         background: theme.styleTypes[style].accent,
@@ -38,7 +20,7 @@ const buttonStyles = (theme: Theme) => {
         },
       },
     });
-  });
+  }
 
   return styles;
 };
@@ -108,23 +90,35 @@ const styles = (theme: Theme) => ({
   ...buttonStyles(theme),
 });
 
+interface IProps extends WithStylesProps<typeof styles> {
+  children: ReactNode;
+  icon?: string;
+  type?: string;
+  dismissible?: boolean;
+  ctaLabel?: string;
+  className?: string;
+  onDismiss?: () => void;
+  onUnmount?: () => void;
+  ctaOnClick?: () => void;
+}
+
+interface IState {
+  isDismissing: boolean;
+  dismissed: boolean;
+}
+
 class InfoboxComponent extends Component<IProps, IState> {
-  public static defaultProps = {
-    type: 'primary',
-    dismissable: false,
-    ctaOnClick: () => {},
-    onDismiss: () => {},
-    ctaLabel: '',
-    className: '',
-  };
-
-  state = {
-    isDismissing: false,
-    dismissed: false,
-  };
-
-  dismiss() {
-    const { onDismiss } = this.props;
+  constructor(props: IProps) {
+    super(props);
+
+    this.state = {
+      isDismissing: false,
+      dismissed: false,
+    };
+  }
+
+  dismiss(): void {
+    const { onDismiss = noop } = this.props;
 
     this.setState({
       isDismissing: true,
@@ -146,16 +140,16 @@ class InfoboxComponent extends Component<IProps, IState> {
     if (onUnmount) onUnmount();
   }
 
-  render() {
+  render(): ReactElement | null {
     const {
       classes,
       children,
       icon,
-      type,
-      ctaLabel,
-      ctaOnClick,
-      dismissable,
-      className,
+      type = 'primary',
+      dismissible = false,
+      ctaOnClick = noop,
+      ctaLabel = '',
+      className = '',
     } = this.props;
 
     const { isDismissing, dismissed } = this.state;
@@ -186,7 +180,7 @@ class InfoboxComponent extends Component<IProps, IState> {
               {ctaLabel}
             </button>
           )}
-          {dismissable && (
+          {dismissible && (
             <button
               type="button"
               onClick={this.dismiss.bind(this)}
@@ -201,4 +195,4 @@ class InfoboxComponent extends Component<IProps, IState> {
   }
 }
 
-export default injectStyle(styles, { injectTheme: true })(InfoboxComponent);
+export default withStyles(styles, { injectTheme: true })(InfoboxComponent);
diff --git a/src/components/ui/select/index.tsx b/src/components/ui/select/index.tsx
index 805836130..b22c15320 100644
--- a/src/components/ui/select/index.tsx
+++ b/src/components/ui/select/index.tsx
@@ -5,47 +5,15 @@ import {
 } from '@mdi/js';
 import Icon from '@mdi/react';
 import classnames from 'classnames';
-import { ChangeEvent, Component, createRef } from 'react';
-import injectStyle, { WithStylesProps } from 'react-jss';
-
+import { ChangeEvent, Component, createRef, ReactElement } from 'react';
+import withStyles, { WithStylesProps } from 'react-jss';
+import { noop } from 'lodash';
 import { Theme } from '../../../themes';
 import { IFormField } from '../typings/generic';
-
 import Error from '../error';
 import Label from '../label';
 import Wrapper from '../wrapper';
 
-interface IOptions {
-  [index: string]: string;
-}
-
-interface IData {
-  [index: string]: string;
-}
-
-interface IProps extends IFormField, WithStylesProps<typeof styles> {
-  actionText: string;
-  className?: string;
-  inputClassName?: string;
-  defaultValue?: string;
-  disabled?: boolean;
-  id?: string;
-  name: string;
-  options: IOptions;
-  value: string;
-  onChange: (event: ChangeEvent<HTMLInputElement>) => void;
-  showSearch: boolean;
-  data: IData;
-}
-
-interface IState {
-  open: boolean;
-  value: string;
-  needle: string;
-  selected: number;
-  options: IOptions;
-}
-
 let popupTransition: string = 'none';
 let toggleTransition: string = 'none';
 
@@ -149,22 +117,38 @@ const styles = (theme: Theme) => ({
   input: {},
 });
 
-class SelectComponent extends Component<IProps> {
-  public static defaultProps = {
-    onChange: () => {},
-    showLabel: true,
-    disabled: false,
-    error: '',
-  };
-
-  state = {
-    open: false,
-    value: '',
-    needle: '',
-    selected: 0,
-    options: null,
-  };
+interface IOptions {
+  [index: string]: string;
+}
 
+interface IData {
+  [index: string]: string;
+}
+
+interface IProps extends IFormField, WithStylesProps<typeof styles> {
+  actionText: string;
+  className?: string;
+  inputClassName?: string;
+  defaultValue?: string;
+  disabled?: boolean;
+  id?: string;
+  name: string;
+  options: IOptions;
+  value: string;
+  onChange: (event: ChangeEvent<HTMLInputElement> | string) => void;
+  showSearch: boolean;
+  data: IData;
+}
+
+interface IState {
+  open: boolean;
+  value: string;
+  needle: string;
+  selected: number;
+  options: IOptions | null;
+}
+
+class SelectComponent extends Component<IProps, IState> {
   private componentRef = createRef<HTMLDivElement>();
 
   private inputRef = createRef<HTMLInputElement>();
@@ -175,9 +159,12 @@ class SelectComponent extends Component<IProps> {
 
   private activeOptionRef = createRef<HTMLDivElement>();
 
-  private keyListener: any;
+  private keyListener: (e: KeyboardEvent) => void;
 
-  static getDerivedStateFromProps(nextProps: IProps, prevState: IProps) {
+  static getDerivedStateFromProps(
+    nextProps: IProps,
+    prevState: IProps,
+  ): Partial<IState> {
     if (nextProps.value && nextProps.value !== prevState.value) {
       return {
         value: nextProps.value,
@@ -189,7 +176,22 @@ class SelectComponent extends Component<IProps> {
     };
   }
 
-  componentDidUpdate() {
+  constructor(props: IProps) {
+    super(props);
+
+    this.state = {
+      open: false,
+      value: '',
+      needle: '',
+      selected: 0,
+      options: null,
+    };
+
+    this.keyListener = noop;
+    this.arrowKeysHandler = this.arrowKeysHandler.bind(this);
+  }
+
+  componentDidUpdate(): void {
     const { open } = this.state;
 
     if (this.searchInputRef && this.searchInputRef.current && open) {
@@ -197,22 +199,20 @@ class SelectComponent extends Component<IProps> {
     }
   }
 
-  componentDidMount() {
+  componentDidMount(): void {
     if (this.inputRef && this.inputRef.current) {
       const { data } = this.props;
 
       if (data) {
-        Object.keys(data).map(
-          // eslint-disable-next-line no-return-assign
-          key => (this.inputRef.current!.dataset[key] = data[key]),
-        );
+        for (const key of Object.keys(data))
+          this.inputRef.current!.dataset[key] = data[key];
       }
     }
 
-    window.addEventListener('keydown', this.arrowKeysHandler.bind(this), false);
+    window.addEventListener('keydown', this.arrowKeysHandler, false);
   }
 
-  componentWillMount() {
+  UNSAFE_componentWillMount(): void {
     const { value } = this.props;
 
     if (this.componentRef && this.componentRef.current) {
@@ -231,17 +231,16 @@ class SelectComponent extends Component<IProps> {
     this.setFilter();
   }
 
-  componentWillUnmount() {
-    // eslint-disable-next-line unicorn/no-invalid-remove-event-listener
-    window.removeEventListener('keydown', this.arrowKeysHandler.bind(this));
+  componentWillUnmount(): void {
+    window.removeEventListener('keydown', this.arrowKeysHandler);
   }
 
-  setFilter(needle = '') {
+  setFilter(needle = ''): void {
     const { options } = this.props;
 
     let filteredOptions = {};
     if (needle) {
-      Object.keys(options).map(key => {
+      for (const key of Object.keys(options)) {
         if (
           key.toLocaleLowerCase().startsWith(needle.toLocaleLowerCase()) ||
           options[key]
@@ -252,7 +251,7 @@ class SelectComponent extends Component<IProps> {
             [`${key}`]: options[key],
           });
         }
-      });
+      }
     } else {
       filteredOptions = options;
     }
@@ -264,7 +263,7 @@ class SelectComponent extends Component<IProps> {
     });
   }
 
-  select(key: string) {
+  select(key: string): void {
     this.setState(() => ({
       value: key,
       open: false,
@@ -273,11 +272,11 @@ class SelectComponent extends Component<IProps> {
     this.setFilter();
 
     if (this.props.onChange) {
-      this.props.onChange(key as any);
+      this.props.onChange(key);
     }
   }
 
-  arrowKeysHandler(e: KeyboardEvent) {
+  arrowKeysHandler(e: KeyboardEvent): void {
     const { selected, open, options } = this.state;
 
     if (!open) return;
@@ -329,22 +328,22 @@ class SelectComponent extends Component<IProps> {
     }
   }
 
-  render() {
+  render(): ReactElement {
     const {
       actionText,
       classes,
       className,
       defaultValue,
-      disabled,
-      error,
       id,
       inputClassName,
       name,
       label,
-      showLabel,
       showSearch,
-      onChange,
       required,
+      onChange = noop,
+      showLabel = true,
+      disabled = false,
+      error = '',
     } = this.props;
 
     const { open, needle, value, selected, options } = this.state;
@@ -440,6 +439,8 @@ class SelectComponent extends Component<IProps> {
                   })}
                   onMouseOver={() => this.setState({ selected: i })}
                   ref={selected === i ? this.activeOptionRef : null}
+                  onKeyUp={noop}
+                  onFocus={noop}
                 >
                   {options![key]}
                 </div>
@@ -463,4 +464,4 @@ class SelectComponent extends Component<IProps> {
   }
 }
 
-export default injectStyle(styles, { injectTheme: true })(SelectComponent);
+export default withStyles(styles, { injectTheme: true })(SelectComponent);