refactor: remove toggle component's duplicate

2 files changed, 15 insertions, 18 deletions

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,
 );