refactor: remove toggle component's duplicate

3 files changed, 26 insertions, 106 deletions

diff --git a/src/components/ui/Toggle.js b/src/components/ui/Toggle.js
deleted file mode 100644
index c1d86a7f6..000000000
--- a/src/components/ui/Toggle.js
+++ /dev/null
@@ -1,72 +0,0 @@
-import { Component } from 'react';
-import PropTypes from 'prop-types';
-import { observer } from 'mobx-react';
-import classnames from 'classnames';
-import { Field } from 'mobx-react-form';
-
-// Can this file be merged into the './toggle/index.tsx' file?
-class Toggle extends Component {
-  static propTypes = {
-    field: PropTypes.instanceOf(Field).isRequired,
-    className: PropTypes.string,
-    showLabel: PropTypes.bool,
-    disabled: PropTypes.bool,
-  };
-
-  static defaultProps = {
-    className: '',
-    showLabel: true,
-    disabled: false,
-  };
-
-  onChange(e) {
-    const { field } = this.props;
-
-    field.onChange(e);
-  }
-
-  render() {
-    const { field, className, showLabel, disabled } = this.props;
-
-    if (field.value === '' && field.default !== '') {
-      field.value = field.default;
-    }
-
-    return (
-      <div
-        className={classnames([
-          'franz-form__field',
-          'franz-form__toggle-wrapper',
-          'franz-form__toggle-disabled',
-          className,
-        ])}
-      >
-        <label
-          htmlFor={field.id}
-          className={classnames({
-            'franz-form__toggle': true,
-            'is-active': field.value,
-          })}
-        >
-          <div className="franz-form__toggle-button" />
-          <input
-            type="checkbox"
-            id={field.id}
-            name={field.name}
-            value={field.name}
-            checked={field.value}
-            onChange={e => (!disabled ? this.onChange(e) : null)}
-          />
-        </label>
-        {field.error && <div className={field.error}>{field.error}</div>}
-        {field.label && showLabel && (
-          <label className="franz-form__label" htmlFor={field.id}>
-            {field.label}
-          </label>
-        )}
-      </div>
-    );
-  }
-}
-
-export default observer(Toggle);
diff --git a/src/components/ui/button/index.tsx b/src/components/ui/button/index.tsx
index c1e647bc0..dc984bf95 100644
--- a/src/components/ui/button/index.tsx
+++ b/src/components/ui/button/index.tsx
@@ -2,7 +2,7 @@ import Icon from '@mdi/react';
 import classnames from 'classnames';
 import { Property } from 'csstype';
 import { noop } from 'lodash';
-import { Component, MouseEvent } from 'react';
+import { Component, MouseEventHandler } from 'react';
 import withStyles, { WithStylesProps } from 'react-jss';
 import Loader from 'react-loader';
 import { Theme } from '../../../themes';
@@ -136,7 +136,7 @@ interface IProps extends IFormField, WithStylesProps<typeof styles> {
   disabled?: boolean;
   id?: string;
   type?: 'button' | 'reset' | 'submit' | undefined;
-  onClick: (event: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;
+  onClick?: MouseEventHandler<HTMLInputElement>;
   buttonType?: ButtonType;
   loaded?: boolean;
   busy?: boolean;
diff --git a/src/components/ui/toggle/index.tsx b/src/components/ui/toggle/index.tsx
index d478cbba5..fee8adbc7 100644
--- a/src/components/ui/toggle/index.tsx
+++ b/src/components/ui/toggle/index.tsx
@@ -1,27 +1,26 @@
 import classnames from 'classnames';
 import { Property } from 'csstype';
+import { noop } from 'lodash';
 import { Component, InputHTMLAttributes } from 'react';
-import injectStyle, { WithStylesProps } from 'react-jss';
-
+import withStyles, { WithStylesProps } from 'react-jss';
 import { Theme } from '../../../themes';
-import { IFormField } from '../typings/generic';
-
 import Error from '../error';
 import Label from '../label';
+import { IFormField } from '../typings/generic';
 import Wrapper from '../wrapper';
 
 interface IProps
-  extends InputHTMLAttributes<HTMLInputElement>,
+  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'value'>,
     IFormField,
     WithStylesProps<typeof styles> {
   className?: string;
+  value: boolean | undefined; // due to type capability between InputHTMLAttributes and mobx-react-form
 }
 
-let buttonTransition: string = 'none';
-
-if (window && window.matchMedia('(prefers-reduced-motion: no-preference)')) {
-  buttonTransition = 'all .5s';
-}
+const buttonTransition: string =
+  window && window.matchMedia('(prefers-reduced-motion: no-preference)')
+    ? 'all .5s'
+    : 'none';
 
 const styles = (theme: Theme) => ({
   toggle: {
@@ -64,25 +63,18 @@ const styles = (theme: Theme) => ({
 });
 
 class ToggleComponent extends Component<IProps> {
-  public static defaultProps = {
-    onChange: () => {},
-    showLabel: true,
-    disabled: false,
-    error: '',
-  };
-
   render() {
     const {
       classes,
       className,
-      disabled,
-      error,
-      id,
-      label,
-      showLabel,
-      checked,
-      value,
-      onChange,
+      id = '',
+      name = '',
+      label = '',
+      error = '',
+      value = false,
+      showLabel = true,
+      disabled = false,
+      onChange = noop,
     } = this.props;
 
     return (
@@ -102,24 +94,24 @@ class ToggleComponent extends Component<IProps> {
             <div
               className={classnames({
                 [`${classes.button}`]: true,
-                [`${classes.buttonActive}`]: checked,
+                [`${classes.buttonActive}`]: value,
               })}
             />
             <input
-              className={classes.input}
-              id={id}
               type="checkbox"
-              checked={checked}
-              value={value}
+              id={id}
+              name={name}
+              checked={value as boolean | undefined}
+              className={classes.input}
               onChange={onChange}
               disabled={disabled}
             />
           </div>
         </Label>
-        {error && <Error message={error} />}
+        {error ? <Error message={error as string} /> : null}
       </Wrapper>
     );
   }
 }
 
-export default injectStyle(styles, { injectTheme: true })(ToggleComponent);
+export default withStyles(styles, { injectTheme: true })(ToggleComponent);