From a1f5e31bfce97b4bbe492e24bf7d57ec2803c31a Mon Sep 17 00:00:00 2001
From: Muhamed <unknown>
Date: Mon, 7 Nov 2022 01:11:48 +0530
Subject: refactor: remove toggle component's duplicate

---
 src/components/auth/Import.js                      |  5 +-
 .../settings/services/EditServiceForm.js           | 32 ++++----
 .../settings/settings/EditSettingsForm.tsx         | 92 +++++++++++-----------
 src/components/ui/Toggle.js                        | 72 -----------------
 src/components/ui/button/index.tsx                 |  4 +-
 src/components/ui/toggle/index.tsx                 | 56 ++++++-------
 .../workspaces/components/EditWorkspaceForm.js     |  7 +-
 .../components/WorkspaceServiceListItem.tsx        | 26 +++---
 src/lib/Tray.ts                                    | 36 +++++----
 9 files changed, 126 insertions(+), 204 deletions(-)
 delete mode 100644 src/components/ui/Toggle.js

(limited to 'src')

diff --git a/src/components/auth/Import.js b/src/components/auth/Import.js
index 41b887974..b897116e2 100644
--- a/src/components/auth/Import.js
+++ b/src/components/auth/Import.js
@@ -4,9 +4,8 @@ import { observer, PropTypes as MobxPropTypes } from 'mobx-react';
 import { defineMessages, injectIntl } from 'react-intl';
 import { Link } from 'react-router-dom';
 import classnames from 'classnames';
-
 import Form from '../../lib/Form';
-import Toggle from '../ui/Toggle';
+import Toggle from '../ui/toggle';
 import Button from '../ui/button';
 import { H1 } from '../ui/headline';
 
@@ -97,7 +96,7 @@ class Import extends Component {
                 {this.form.$('import').map((service, i) => (
                   <tr key={service.id} className="service-table__row">
                     <td className="service-table__toggle">
-                      <Toggle field={service.$('add')} showLabel={false} />
+                      <Toggle {...service.$('add').bind()} showLabel={false} />
                     </td>
                     <td className="service-table__column-icon">
                       <img
diff --git a/src/components/settings/services/EditServiceForm.js b/src/components/settings/services/EditServiceForm.js
index eeb9ef54d..eb18b57eb 100644
--- a/src/components/settings/services/EditServiceForm.js
+++ b/src/components/settings/services/EditServiceForm.js
@@ -4,7 +4,6 @@ import { observer } from 'mobx-react';
 import { Link } from 'react-router-dom';
 import { defineMessages, injectIntl } from 'react-intl';
 import normalizeUrl from 'normalize-url';
-
 import { mdiInformation } from '@mdi/js';
 import Form from '../../../lib/Form';
 import Recipe from '../../../models/Recipe';
@@ -12,12 +11,11 @@ import Service from '../../../models/Service';
 import Tabs from '../../ui/Tabs/Tabs';
 import TabItem from '../../ui/Tabs/TabItem';
 import Input from '../../ui/input/index';
-import Toggle from '../../ui/Toggle';
+import Toggle from '../../ui/toggle';
 import Slider from '../../ui/Slider';
 import Button from '../../ui/button';
 import ImageUpload from '../../ui/ImageUpload';
 import Select from '../../ui/Select';
-
 import { isMac } from '../../../environment';
 import globalMessages from '../../../i18n/globalMessages';
 import Icon from '../../ui/icon';
@@ -342,22 +340,22 @@ class EditServiceForm extends Component {
               <div className="settings__options">
                 <div className="settings__settings-group">
                   <H3>{intl.formatMessage(messages.headlineNotifications)}</H3>
-                  <Toggle field={form.$('isNotificationEnabled')} />
-                  <Toggle field={form.$('isMuted')} />
+                  <Toggle {...form.$('isNotificationEnabled').bind()} />
+                  <Toggle {...form.$('isMuted').bind()} />
                   <p className="settings__help indented__help">
                     {intl.formatMessage(messages.isMutedInfo)}
                   </p>
-                  <Toggle field={form.$('isMediaBadgeEnabled')} />
+                  <Toggle {...form.$('isMediaBadgeEnabled').bind()} />
                 </div>
 
                 <div className="settings__settings-group">
                   <H3>{intl.formatMessage(messages.headlineBadges)}</H3>
-                  <Toggle field={form.$('isBadgeEnabled')} />
+                  <Toggle {...form.$('isBadgeEnabled').bind()} />
                   {recipe.hasIndirectMessages &&
                     form.$('isBadgeEnabled').value && (
                       <>
                         <Toggle
-                          field={form.$('isIndirectMessageBadgeEnabled')}
+                          {...form.$('isIndirectMessageBadgeEnabled').bind()}
                         />
                         <p className="settings__help indented__help">
                           {intl.formatMessage(messages.indirectMessageInfo)}
@@ -365,19 +363,21 @@ class EditServiceForm extends Component {
                       </>
                     )}
                   {recipe.allowFavoritesDelineationInUnreadCount && (
-                    <Toggle field={form.$('onlyShowFavoritesInUnreadCount')} />
+                    <Toggle
+                      {...form.$('onlyShowFavoritesInUnreadCount').bind()}
+                    />
                   )}
                 </div>
 
                 <div className="settings__settings-group">
                   <H3>{intl.formatMessage(messages.headlineGeneral)}</H3>
-                  <Toggle field={form.$('isEnabled')} />
-                  <Toggle field={form.$('isHibernationEnabled')} />
+                  <Toggle {...form.$('isEnabled').bind()} />
+                  <Toggle {...form.$('isHibernationEnabled').bind()} />
                   <p className="settings__help indented__help">
                     {intl.formatMessage(messages.isHibernationEnabledInfo)}
                   </p>
-                  <Toggle field={form.$('isWakeUpEnabled')} />
-                  <Toggle field={form.$('trapLinkClicks')} />
+                  <Toggle {...form.$('isWakeUpEnabled').bind()} />
+                  <Toggle {...form.$('trapLinkClicks').bind()} />
                   {/* TODO: Need to figure out how to effect this change without a reload of the recipe */}
                   <p className="settings__help indented__help">
                     {intl.formatMessage(messages.serviceReloadRequired)}
@@ -386,7 +386,7 @@ class EditServiceForm extends Component {
 
                 <div className="settings__settings-group">
                   <H3>{intl.formatMessage(messages.headlineAppearance)}</H3>
-                  <Toggle field={form.$('isDarkModeEnabled')} />
+                  <Toggle {...form.$('isDarkModeEnabled').bind()} />
                   {form.$('isDarkModeEnabled').value && (
                     <>
                       <H3>
@@ -399,7 +399,7 @@ class EditServiceForm extends Component {
                       <Slider field={form.$('darkReaderSepia')} />
                     </>
                   )}
-                  <Toggle field={form.$('isProgressbarEnabled')} />
+                  <Toggle {...form.$('isProgressbarEnabled').bind()} />
                 </div>
               </div>
               <div className="service-icon">
@@ -429,7 +429,7 @@ class EditServiceForm extends Component {
                   {intl.formatMessage(messages.headlineProxy)}
                   <span className="badge badge--success">beta</span>
                 </H3>
-                <Toggle field={form.$('proxy.isEnabled')} />
+                <Toggle {...form.$('proxy.isEnabled').bind()} />
                 {form.$('proxy.isEnabled').value && (
                   <>
                     <div className="grid">
diff --git a/src/components/settings/settings/EditSettingsForm.tsx b/src/components/settings/settings/EditSettingsForm.tsx
index 1d89b53a9..e796a48ec 100644
--- a/src/components/settings/settings/EditSettingsForm.tsx
+++ b/src/components/settings/settings/EditSettingsForm.tsx
@@ -6,7 +6,7 @@ import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
 import { mdiGithub, mdiOpenInNew, mdiPowerPlug } from '@mdi/js';
 import Form from '../../../lib/Form';
 import Button from '../../ui/button';
-import Toggle from '../../ui/Toggle.js';
+import Toggle from '../../ui/toggle';
 import Select from '../../ui/Select';
 import Input from '../../ui/input/index';
 import ColorPickerInput from '../../ui/ColorPickerInput';
@@ -522,26 +522,30 @@ class EditSettingsForm extends Component<IProps, IState> {
                 <H2 className="settings__section_header">
                   {intl.formatMessage(messages.sectionMain)}
                 </H2>
-                <Toggle field={form.$('autoLaunchOnStart')} />
-                <Toggle field={form.$('runInBackground')} />
-                <Toggle field={form.$('confirmOnQuit')} />
-                <Toggle field={form.$('enableSystemTray')} />
+                <Toggle {...form.$('autoLaunchOnStart').bind()} />
+                <Toggle {...form.$('runInBackground').bind()} />
+                <Toggle {...form.$('confirmOnQuit').bind()} />
+                <Toggle {...form.$('enableSystemTray').bind()} />
                 {reloadAfterResume && <Hr />}
-                <Toggle field={form.$('reloadAfterResume')} />
+                <Toggle {...form.$('reloadAfterResume').bind()} />
                 {reloadAfterResume && (
                   <div>
                     <Input {...form.$('reloadAfterResumeTime').bind()} />
                     <Hr />
                   </div>
                 )}
-                <Toggle field={form.$('startMinimized')} />
-                {isWindows && <Toggle field={form.$('minimizeToSystemTray')} />}
-                {isWindows && <Toggle field={form.$('closeToSystemTray')} />}
+                <Toggle {...form.$('startMinimized').bind()} />
+                {isWindows && (
+                  <Toggle {...form.$('minimizeToSystemTray').bind()} />
+                )}
+                {isWindows && (
+                  <Toggle {...form.$('closeToSystemTray').bind()} />
+                )}
 
-                <Toggle field={form.$('keepAllWorkspacesLoaded')} />
+                <Toggle {...form.$('keepAllWorkspacesLoaded').bind()} />
 
                 {isTodosActivated && <Hr />}
-                <Toggle field={form.$('enableTodos')} />
+                <Toggle {...form.$('enableTodos').bind()} />
                 {isTodosActivated && (
                   <div>
                     <Select field={form.$('predefinedTodoServer')} />
@@ -571,7 +575,7 @@ class EditSettingsForm extends Component<IProps, IState> {
                 {isTodosActivated && <Hr />}
 
                 {scheduledDNDEnabled && <Hr />}
-                <Toggle field={form.$('scheduledDNDEnabled')} />
+                <Toggle {...form.$('scheduledDNDEnabled').bind()} />
 
                 {scheduledDNDEnabled && (
                   <>
@@ -632,12 +636,12 @@ class EditSettingsForm extends Component<IProps, IState> {
                   {intl.formatMessage(messages.sectionServiceIconsSettings)}
                 </H2>
 
-                <Toggle field={form.$('showDisabledServices')} />
-                <Toggle field={form.$('showServiceName')} />
+                <Toggle {...form.$('showDisabledServices').bind()} />
+                <Toggle {...form.$('showServiceName').bind()} />
 
                 {isUseGrayscaleServicesEnabled && <Hr />}
 
-                <Toggle field={form.$('useGrayscaleServices')} />
+                <Toggle {...form.$('useGrayscaleServices').bind()} />
 
                 {isUseGrayscaleServicesEnabled && (
                   <>
@@ -650,8 +654,8 @@ class EditSettingsForm extends Component<IProps, IState> {
                   </>
                 )}
 
-                <Toggle field={form.$('showMessageBadgeWhenMuted')} />
-                <Toggle field={form.$('enableLongPressServiceHint')} />
+                <Toggle {...form.$('showMessageBadgeWhenMuted').bind()} />
+                <Toggle {...form.$('enableLongPressServiceHint').bind()} />
                 <Select field={form.$('iconSize')} />
 
                 <Select field={form.$('navigationBarBehaviour')} />
@@ -662,7 +666,7 @@ class EditSettingsForm extends Component<IProps, IState> {
                   {intl.formatMessage(messages.sectionHibernation)}
                 </H2>
                 <Select field={form.$('hibernationStrategy')} />
-                <Toggle field={form.$('hibernateOnStartup')} />
+                <Toggle {...form.$('hibernateOnStartup').bind()} />
                 <p
                   className="settings__message"
                   style={{
@@ -677,7 +681,7 @@ class EditSettingsForm extends Component<IProps, IState> {
 
                 <Select field={form.$('wakeUpStrategy')} />
                 <Select field={form.$('wakeUpHibernationStrategy')} />
-                <Toggle field={form.$('wakeUpHibernationSplay')} />
+                <Toggle {...form.$('wakeUpHibernationSplay').bind()} />
               </div>
             )}
 
@@ -687,15 +691,15 @@ class EditSettingsForm extends Component<IProps, IState> {
                 <H2 className="settings__section_header">
                   {intl.formatMessage(messages.sectionGeneralUi)}
                 </H2>
-                {isMac && <Toggle field={form.$('showDragArea')} />}
+                {isMac && <Toggle {...form.$('showDragArea').bind()} />}
 
-                <Toggle field={form.$('adaptableDarkMode')} />
+                <Toggle {...form.$('adaptableDarkMode').bind()} />
                 {!isAdaptableDarkModeEnabled && (
-                  <Toggle field={form.$('darkMode')} />
+                  <Toggle {...form.$('darkMode').bind()} />
                 )}
                 {(isDarkmodeEnabled || isAdaptableDarkModeEnabled) && (
                   <>
-                    <Toggle field={form.$('universalDarkMode')} />
+                    <Toggle {...form.$('universalDarkMode').bind()} />
                     <p
                       className="settings__message"
                       style={{
@@ -713,7 +717,7 @@ class EditSettingsForm extends Component<IProps, IState> {
                 )}
 
                 {isSplitModeEnabled && <Hr />}
-                <Toggle field={form.$('splitMode')} />
+                <Toggle {...form.$('splitMode').bind()} />
                 {isSplitModeEnabled && (
                   <Input
                     type="number"
@@ -776,21 +780,21 @@ class EditSettingsForm extends Component<IProps, IState> {
 
                 <Select field={form.$('sidebarServicesLocation')} />
 
-                <Toggle field={form.$('useHorizontalStyle')} />
+                <Toggle {...form.$('useHorizontalStyle').bind()} />
 
-                <Toggle field={form.$('hideCollapseButton')} />
+                <Toggle {...form.$('hideCollapseButton').bind()} />
 
-                <Toggle field={form.$('hideRecipesButton')} />
+                <Toggle {...form.$('hideRecipesButton').bind()} />
 
-                <Toggle field={form.$('hideSplitModeButton')} />
+                <Toggle {...form.$('hideSplitModeButton').bind()} />
 
-                <Toggle field={form.$('hideWorkspacesButton')} />
+                <Toggle {...form.$('hideWorkspacesButton').bind()} />
 
-                <Toggle field={form.$('hideNotificationsButton')} />
+                <Toggle {...form.$('hideNotificationsButton').bind()} />
 
-                <Toggle field={form.$('hideSettingsButton')} />
+                <Toggle {...form.$('hideSettingsButton').bind()} />
 
-                <Toggle field={form.$('alwaysShowWorkspaces')} />
+                <Toggle {...form.$('alwaysShowWorkspaces').bind()} />
               </div>
             )}
 
@@ -801,17 +805,17 @@ class EditSettingsForm extends Component<IProps, IState> {
                   {intl.formatMessage(messages.sectionPrivacy)}
                 </H2>
 
-                <Toggle field={form.$('privateNotifications')} />
-                <Toggle field={form.$('clipboardNotifications')} />
+                <Toggle {...form.$('privateNotifications').bind()} />
+                <Toggle {...form.$('clipboardNotifications').bind()} />
                 {(isWindows || isMac) && (
-                  <Toggle field={form.$('notifyTaskBarOnMessage')} />
+                  <Toggle {...form.$('notifyTaskBarOnMessage').bind()} />
                 )}
 
                 <Hr />
 
                 <Select field={form.$('webRTCIPHandlingPolicy')} />
 
-                <Toggle field={form.$('sentry')} />
+                <Toggle {...form.$('sentry').bind()} />
                 <p className="settings__help">
                   {intl.formatMessage(messages.sentryInfo)}
                 </p>
@@ -830,11 +834,11 @@ class EditSettingsForm extends Component<IProps, IState> {
 
                 <Hr />
 
-                <Toggle field={form.$('lockingFeatureEnabled')} />
+                <Toggle {...form.$('lockingFeatureEnabled').bind()} />
                 {lockingFeatureEnabled && (
                   <>
                     {isMac && systemPreferences.canPromptTouchID() && (
-                      <Toggle field={form.$('useTouchIdToUnlock')} />
+                      <Toggle {...form.$('useTouchIdToUnlock').bind()} />
                     )}
 
                     <Input
@@ -885,7 +889,7 @@ class EditSettingsForm extends Component<IProps, IState> {
 
                 <Hr />
 
-                <Toggle field={form.$('enableSpellchecking')} />
+                <Toggle {...form.$('enableSpellchecking').bind()} />
                 {!isMac && form.$('enableSpellchecking').value && (
                   <Select field={form.$('spellcheckerLanguage')} />
                 )}
@@ -901,7 +905,7 @@ class EditSettingsForm extends Component<IProps, IState> {
 
                 <Hr />
 
-                <Toggle field={form.$('enableTranslator')} />
+                <Toggle {...form.$('enableTranslator').bind()} />
 
                 {form.$('enableTranslator').value && (
                   <Select field={form.$('translatorEngine')} />
@@ -931,8 +935,8 @@ class EditSettingsForm extends Component<IProps, IState> {
                   {intl.formatMessage(messages.sectionAdvanced)}
                 </H2>
 
-                <Toggle field={form.$('enableGPUAcceleration')} />
-                <Toggle field={form.$('enableGlobalHideShortcut')} />
+                <Toggle {...form.$('enableGPUAcceleration').bind()} />
+                <Toggle {...form.$('enableGlobalHideShortcut').bind()} />
                 <p className="settings__help indented__help">
                   {intl.formatMessage(messages.appRestartRequired)}
                 </p>
@@ -1036,12 +1040,12 @@ class EditSettingsForm extends Component<IProps, IState> {
                   {intl.formatMessage(messages.sectionUpdates)}
                 </H2>
 
-                <Toggle field={form.$('automaticUpdates')} />
+                <Toggle {...form.$('automaticUpdates').bind()} />
                 {automaticUpdates && (
                   <>
                     <>
                       <div>
-                        <Toggle field={form.$('beta')} />
+                        <Toggle {...form.$('beta').bind()} />
                         {updateIsReadyToInstall ? (
                           <Button
                             label={intl.formatMessage(
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);
diff --git a/src/features/workspaces/components/EditWorkspaceForm.js b/src/features/workspaces/components/EditWorkspaceForm.js
index 6bc9ae6f0..ff4e71260 100644
--- a/src/features/workspaces/components/EditWorkspaceForm.js
+++ b/src/features/workspaces/components/EditWorkspaceForm.js
@@ -4,7 +4,6 @@ import { observer } from 'mobx-react';
 import { defineMessages, injectIntl } from 'react-intl';
 import { Link } from 'react-router-dom';
 import injectSheet from 'react-jss';
-
 import Infobox from '../../../components/ui/infobox/index';
 import Input from '../../../components/ui/input/index';
 import Button from '../../../components/ui/button';
@@ -14,10 +13,8 @@ import Form from '../../../lib/Form';
 import { required } from '../../../helpers/validation-helpers';
 import WorkspaceServiceListItem from './WorkspaceServiceListItem';
 import Request from '../../../stores/lib/Request';
-
 import { KEEP_WS_LOADED_USID } from '../../../config';
-
-import Toggle from '../../../components/ui/Toggle';
+import Toggle from '../../../components/ui/toggle';
 import { H2 } from '../../../components/ui/headline';
 
 const messages = defineMessages({
@@ -176,7 +173,7 @@ class EditWorkspaceForm extends Component {
           )}
           <div className={classes.nameInput}>
             <Input {...form.$('name').bind()} />
-            <Toggle field={form.$('keepLoaded')} />
+            <Toggle {...form.$('keepLoaded').bind()} />
             <p className={`${classes.keepLoadedInfo} franz-form__label`}>
               {intl.formatMessage(messages.keepLoadedInfo)}
             </p>
diff --git a/src/features/workspaces/components/WorkspaceServiceListItem.tsx b/src/features/workspaces/components/WorkspaceServiceListItem.tsx
index 0233d5749..420aed595 100644
--- a/src/features/workspaces/components/WorkspaceServiceListItem.tsx
+++ b/src/features/workspaces/components/WorkspaceServiceListItem.tsx
@@ -1,10 +1,10 @@
-import { Component } from 'react';
+import { Component, ReactElement } from 'react';
 import { observer } from 'mobx-react';
-import injectSheet from 'react-jss';
+import withStyles, { WithStylesProps } from 'react-jss';
 import classnames from 'classnames';
-
-import Toggle from '../../../components/ui/toggle/index';
+import Toggle from '../../../components/ui/toggle';
 import ServiceIcon from '../../../components/ui/ServiceIcon';
+import Service from '../../../models/Service';
 
 const styles = theme => ({
   listItem: {
@@ -29,15 +29,15 @@ const styles = theme => ({
   },
 });
 
-type Props = {
-  classes: any;
+interface IProps extends WithStylesProps<typeof styles> {
   isInWorkspace: boolean;
   onToggle: () => void;
-  service: any;
-};
+  service: Service;
+}
 
-class WorkspaceServiceListItem extends Component<Props> {
-  render() {
+@observer
+class WorkspaceServiceListItem extends Component<IProps> {
+  render(): ReactElement {
     const { classes, isInWorkspace, onToggle, service } = this.props;
 
     return (
@@ -53,7 +53,7 @@ class WorkspaceServiceListItem extends Component<Props> {
         </span>
         <Toggle
           className={classes.toggle}
-          checked={isInWorkspace}
+          value={isInWorkspace}
           onChange={onToggle}
         />
       </div>
@@ -61,6 +61,6 @@ class WorkspaceServiceListItem extends Component<Props> {
   }
 }
 
-export default injectSheet(styles, { injectTheme: true })(
-  observer(WorkspaceServiceListItem),
+export default withStyles(styles, { injectTheme: true })(
+  WorkspaceServiceListItem,
 );
diff --git a/src/lib/Tray.ts b/src/lib/Tray.ts
index 8e489edde..dafbb68aa 100644
--- a/src/lib/Tray.ts
+++ b/src/lib/Tray.ts
@@ -20,7 +20,7 @@ const INDICATOR_TRAY_INDIRECT = 'tray-indirect';
 
 // TODO: Need to support i18n for a lot of the hard-coded strings in this file
 export default class TrayIcon {
-  trayIcon: Tray | null = null;
+  tray: Tray | null = null;
 
   indicator: string | number = 0;
 
@@ -97,7 +97,9 @@ export default class TrayIcon {
   }
 
   _updateTrayMenu(appSettings): void {
-    if (!this.trayIcon) return;
+    if (!this.tray) {
+      return;
+    }
 
     if (appSettings && appSettings.type === 'app') {
       this.isAppMuted = appSettings.data.isAppMuted; // save current state after a change
@@ -105,7 +107,7 @@ export default class TrayIcon {
 
     this.trayMenu = Menu.buildFromTemplate(this.trayMenuTemplate(this));
     if (isLinux) {
-      this.trayIcon.setContextMenu(this.trayMenu);
+      this.tray.setContextMenu(this.trayMenu);
     }
   }
 
@@ -115,26 +117,26 @@ export default class TrayIcon {
   }
 
   _show(): void {
-    if (this.trayIcon) {
+    if (this.tray) {
       return;
     }
 
-    this.trayIcon = new Tray(this._getAsset('tray', INDICATOR_TRAY_PLAIN));
-    this.trayIcon.setToolTip('Ferdium');
+    this.tray = new Tray(this._getAsset('tray', INDICATOR_TRAY_PLAIN));
+    this.tray.setToolTip('Ferdium');
 
     this.trayMenu = Menu.buildFromTemplate(this.trayMenuTemplate(this));
     if (isLinux) {
-      this.trayIcon.setContextMenu(this.trayMenu);
+      this.tray.setContextMenu(this.trayMenu);
     }
 
-    this.trayIcon.on('click', () => {
+    this.tray.on('click', () => {
       this._toggleWindow();
     });
 
     if (isMac || isWindows) {
-      this.trayIcon.on('right-click', () => {
-        if (this.trayIcon && this.trayMenu) {
-          this.trayIcon.popUpContextMenu(this.trayMenu);
+      this.tray.on('right-click', () => {
+        if (this.tray && this.trayMenu) {
+          this.tray.popUpContextMenu(this.trayMenu);
         }
       });
     }
@@ -177,10 +179,10 @@ export default class TrayIcon {
   }
 
   _hide(): void {
-    if (!this.trayIcon) return;
+    if (!this.tray) return;
 
-    this.trayIcon.destroy();
-    this.trayIcon = null;
+    this.tray.destroy();
+    this.tray = null;
 
     if (isMac && this.themeChangeSubscriberId) {
       systemPreferences.unsubscribeNotification(this.themeChangeSubscriberId);
@@ -216,16 +218,16 @@ export default class TrayIcon {
   }
 
   _refreshIcon(): void {
-    if (!this.trayIcon) {
+    if (!this.tray) {
       return;
     }
 
-    this.trayIcon.setImage(
+    this.tray.setImage(
       this._getAsset('tray', this._getAssetFromIndicator(this.indicator)),
     );
 
     if (isMac && !macosVersion.isGreaterThanOrEqualTo('11')) {
-      this.trayIcon.setPressedImage(
+      this.tray.setPressedImage(
         this._getAsset(
           'tray',
           `${this._getAssetFromIndicator(this.indicator)}-active`,
-- 
cgit v1.2.3-54-g00ecf