Refactor talk-plugin-notifications using the new withGraphQLExtension

plugins/talk-plugin-notifications/client/api/components/Toggle.css

@@ -0,0 +1,20 @@
+.title {
+  display: inline-block;
+  width: 100%;
+  cursor: pointer;
+  user-select: none;
+
+  &.disabled {
+    color: #e5e5e5;
+    cursor: default;
+  }
+}
+
+.toggle {
+  display: flex;
+  align-items: center;
+}
+
+.checkBox {
+  text-align: right;
+}

plugins/talk-plugin-notifications/client/api/components/Toggle.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Checkbox } from 'plugin-api/beta/client/components/ui';
+import styles from './Toggle.css';
+import uuid from 'uuid/v4';
+import cn from 'classnames';
+
+class Toggle extends React.Component {
+  id = uuid();
+
+  render() {
+    const { checked, onChange, children, disabled } = this.props;
+    return (
+      <div className={styles.toggle}>
+        <label
+          htmlFor={this.id}
+          className={cn(styles.title, { [styles.disabled]: disabled })}
+        >
+          {children}
+        </label>
+        <div className={styles.checkBox}>
+          <Checkbox
+            checked={checked}
+            onChange={onChange}
+            id={this.id}
+            disabled={disabled}
+          />
+        </div>
+      </div>
+    );
+  }
+}
+
+Toggle.propTypes = {
+  disabled: PropTypes.bool,
+  checked: PropTypes.bool,
+  onChange: PropTypes.func,
+  children: PropTypes.node,
+};
+
+export default Toggle;

plugins/talk-plugin-notifications/client/api/components/index.js

@@ -0,0 +1 @@
+export { default as Toggle } from './Toggle';