WIP

client/coral-framework/lib/action.js

@@ -0,0 +1,21 @@
+export default class Action {
+  listeners = [];
+
+  listen = cb => {
+    this.listeners.push(cb);
+  };
+
+  unlisten = cb => {
+    this.listeners = this.listeners.filter(i => i !== cb);
+  };
+
+  event = { listen: this.listen, unlisten: this.unlisten };
+
+  call(...args) {
+    this.listeners.forEach(cb => cb(...args));
+  }
+
+  asEvent() {
+    return this.event;
+  }
+}

plugin-api/client/lib/index.js

@@ -0,0 +1 @@
+export { default as Action } from 'coral-framework/lib/action';

plugins/talk-plugin-notifications-category-reply/client/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "@coralproject/eslint-config-talk/client"
+}

plugins/talk-plugin-notifications-category-reply/client/components/Toggle.css

@@ -0,0 +1,3 @@
+.innerSettings {
+  padding-left: 24px;
+}

plugins/talk-plugin-notifications-category-reply/client/components/Toggle.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { t } from 'plugin-api/beta/client/services';
+import { Checkbox } from 'plugin-api/beta/client/components/ui';
+import styles from './Toggle.css';
+
+class Toggle extends React.Component {
+  render() {
+    const { checked } = this.props;
+    return (
+      <div className={styles.toggle}>
+        <div className={styles.description}>
+          {t('talk-plugin-notifications-category-reply.toggle_description')}
+          <Checkbox checked={checked} />
+        </div>
+      </div>
+    );
+  }
+}
+
+Toggle.propTypes = {
+  checked: PropTypes.bool,
+};
+
+export default Toggle;

plugins/talk-plugin-notifications-category-reply/client/containers/Toggle.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { compose, gql } from 'react-apollo';
+import Toggle from '../components/Toggle';
+import { withFragments } from 'plugin-api/beta/client/hocs';
+
+class ToggleContainer extends React.Component {
+  render() {
+    return <Toggle checked={this.props.root.me.notificationSettings.onReply} />;
+  }
+}
+
+ToggleContainer.propTypes = {
+  data: PropTypes.object,
+  root: PropTypes.object,
+};
+
+const enhance = compose(
+  withFragments({
+    root: gql`
+      fragment TalkNotificationsCategoryReply_Toggle_root on RootQuery {
+        me {
+          notificationSettings {
+            onReply
+          }
+        }
+      }
+    `,
+  })
+);
+
+export default enhance(ToggleContainer);

plugins/talk-plugin-notifications-category-reply/client/index.js

@@ -0,0 +1,9 @@
+import Toggle from './containers/Toggle';
+import translations from './translations.yml';
+
+export default {
+  slots: {
+    notificationSettings: [Toggle],
+  },
+  translations,
+};

plugins/talk-plugin-notifications-category-reply/client/translations.yml

@@ -0,0 +1,3 @@
+en:
+  talk-plugin-notifications-category-reply:
+    toggle_description: My comment receives a reply

plugins/talk-plugin-notifications/client/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "@coralproject/eslint-config-talk/client"
+}

plugins/talk-plugin-notifications/client/components/Settings.css

@@ -0,0 +1,8 @@
+.innerSettings {
+  padding-left: 12px;
+}
+
+.subtitle {
+  margin: 0;
+  margin-bottom: 8px;
+}

plugins/talk-plugin-notifications/client/components/Settings.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { IfSlotIsNotEmpty } from 'plugin-api/beta/client/components';
+import { Slot } from 'plugin-api/beta/client/components';
+import { t } from 'plugin-api/beta/client/services';
+import styles from './Settings.css';
+
+class Settings extends React.Component {
+  render() {
+    const { root } = this.props;
+    return (
+      <IfSlotIsNotEmpty slot="notificationSettings" queryData={{ root }}>
+        <div>
+          <h3>{t('talk-plugin-notifications.settings_title')}</h3>
+          <h4 className={styles.subtitle}>
+            {t('talk-plugin-notifications.settings_subtitle')}
+          </h4>
+          <div className={styles.innerSettings}>
+            <Slot fill="notificationSettings" queryData={{ root }} />
+          </div>
+        </div>
+      </IfSlotIsNotEmpty>
+    );
+  }
+}
+
+Settings.propTypes = {
+  root: PropTypes.object,
+};
+
+export default Settings;

plugins/talk-plugin-notifications/client/containers/Settings.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { compose, gql } from 'react-apollo';
+import Settings from '../components/Settings';
+import { withFragments } from 'plugin-api/beta/client/hocs';
+import { getSlotFragmentSpreads } from 'plugin-api/beta/client/utils';
+
+const slots = ['notificationSettings'];
+
+class SettingsContainer extends React.Component {
+  render() {
+    return <Settings data={this.props.data} root={this.props.root} />;
+  }
+}
+
+SettingsContainer.propTypes = {
+  data: PropTypes.object,
+  root: PropTypes.object,
+};
+
+const enhance = compose(
+  withFragments({
+    root: gql`
+      fragment TalkNotifications_Settings_root on RootQuery {
+        __typename
+        ${getSlotFragmentSpreads(slots, 'root')}
+      }
+    `,
+  })
+);
+
+export default enhance(SettingsContainer);

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

@@ -0,0 +1,9 @@
+import Settings from './containers/Settings';
+import translations from './translations.yml';
+
+export default {
+  slots: {
+    profileSettings: [Settings],
+  },
+  translations,
+};

plugins/talk-plugin-notifications/client/translations.yml

@@ -0,0 +1,4 @@
+en:
+  talk-plugin-notifications:
+    settings_title: Notifications
+    settings_subtitle: Receive notifications when