Plugins renaming

plugins/talk-plugin-offtopic/client/.babelrc

@@ -0,0 +1,14 @@
+{
+  "presets": [
+    "es2015"
+  ],
+  "plugins": [
+    "add-module-exports",
+    "transform-class-properties",
+    "transform-decorators-legacy",
+    "transform-object-assign",
+    "transform-object-rest-spread",
+    "transform-async-to-generator",
+    "transform-react-jsx"
+  ]
+}

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

@@ -0,0 +1,23 @@
+{
+  "env": {
+    "browser": true,
+    "es6": true,
+    "mocha": true
+  },
+  "parserOptions": {
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "experimentalObjectRestSpread": true,
+      "jsx": true
+    }
+  },
+  "parser": "babel-eslint",
+  "plugins": [
+    "react"
+  ],
+  "rules": {
+    "react/jsx-uses-react": "error",
+    "react/jsx-uses-vars": "error",
+    "no-console": ["warn", { "allow": ["warn", "error"] }]
+  }
+}

plugins/talk-plugin-offtopic/client/actions.js

@@ -0,0 +1,5 @@
+import {OFFTOPIC_TOGGLE_CHECKBOX} from './constants';
+
+export const toggleCheckbox = () => ({
+  type: OFFTOPIC_TOGGLE_CHECKBOX
+});

plugins/talk-plugin-offtopic/client/components/OffTopicCheckbox.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import styles from './styles.css';
+
+import {t} from 'plugin-api/beta/client/services';
+
+export default class OffTopicCheckbox extends React.Component {
+
+  label = 'OFF_TOPIC';
+
+  componentDidMount() {
+    this.clearTagsHook = this.props.registerHook('postSubmit', () => {
+      const idx = this.props.tags.indexOf(this.label);
+      this.props.removeTag(idx);
+    });
+  }
+
+  componentWillUnmount() {
+    this.props.unregisterHook(this.clearTagsHook);
+  }
+
+  handleChange = (e) => {
+    const {addTag, removeTag} = this.props;
+    if (e.target.checked) {
+      addTag(this.label);
+    } else {
+      const idx = this.props.tags.indexOf(this.label);
+      removeTag(idx);
+    }
+  }
+
+  render() {
+    return (
+      <div className={styles.offTopic}>
+        {
+          !this.props.isReply ? (
+            <label className={styles.offTopicLabel}>
+              <input type="checkbox" onChange={this.handleChange}/>
+              {t('off_topic')}
+            </label>
+          ) : null
+        }
+      </div>
+    );
+  }
+}

plugins/talk-plugin-offtopic/client/components/OffTopicFilter.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import styles from './styles.css';
+
+export default class OffTopicFilter extends React.Component {
+
+  tag = 'OFF_TOPIC';
+  className = 'talk-plugin-off-topic-comment';
+  cn = {[this.className] : {tags: [this.tag]}};
+
+  handleChange = (e) => {
+    if (e.target.checked) {
+      this.props.addCommentClassName(this.cn);
+      this.props.toggleCheckbox();
+    } else {
+      const idx = this.props.commentClassNames.findIndex((i) => i[this.className]);
+      this.props.removeCommentClassName(idx);
+      this.props.toggleCheckbox();
+    }
+    this.props.closeViewingOptions();
+  }
+
+  render() {
+    return (
+      <div className={styles.viewingOption}>
+        <label>
+          <input type="checkbox" onChange={this.handleChange} checked={this.props.checked} />
+          Hide Off-Topic Comments
+        </label>
+      </div>
+    );
+  }
+}

plugins/talk-plugin-offtopic/client/components/OffTopicTag.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import styles from './styles.css';
+import {t} from 'plugin-api/beta/client/services';
+import {isTagged} from 'plugin-api/beta/client/utils';
+
+export default (props) => (
+  <span>
+    {
+      isTagged(props.comment.tags, 'OFF_TOPIC') && props.depth === 0 ? (
+        <span className={styles.tag}>
+          {t('off_topic')}
+        </span>
+      ) : null
+    }
+  </span>
+);

plugins/talk-plugin-offtopic/client/components/styles.css

@@ -0,0 +1,27 @@
+.offTopic {
+  height: 100%;
+}
+
+.offTopicLabel {
+  padding: 10px 20px;
+  display: block;
+}
+
+.tag {
+  background: #3D73D5;
+  font-size: 12px;
+  font-weight: bold;
+  color: white;
+  display: inline-block;
+  margin: 0px 5px;
+  padding: 5px 5px;
+  border-radius: 2px;
+}
+
+.viewingOption {
+  padding: 5px 0;
+}
+
+:global(.talk-plugin-off-topic-comment) {
+  display: none;
+}

plugins/talk-plugin-offtopic/client/constants.js

@@ -0,0 +1 @@
+export const OFFTOPIC_TOGGLE_CHECKBOX = 'OFFTOPIC_TOGGLE_CHECKBOX';

plugins/talk-plugin-offtopic/client/containers/OffTopicCheckbox.js

@@ -0,0 +1,14 @@
+import {bindActionCreators} from 'redux';
+import {addTag, removeTag} from 'plugin-api/alpha/client/actions';
+import {commentBoxTagsSelector} from 'plugin-api/alpha/client/selectors';
+import {connect} from 'plugin-api/beta/client/hocs';
+import OffTopicCheckbox from '../components/OffTopicCheckbox';
+
+const mapStateToProps = (state) => ({
+  tags: commentBoxTagsSelector(state)
+});
+
+const mapDispatchToProps = (dispatch) =>
+  bindActionCreators({addTag, removeTag}, dispatch);
+
+export default connect(mapStateToProps, mapDispatchToProps)(OffTopicCheckbox);

plugins/talk-plugin-offtopic/client/containers/OffTopicFilter.js

@@ -0,0 +1,30 @@
+import {connect} from 'plugin-api/beta/client/hocs';
+import {bindActionCreators} from 'redux';
+import {toggleCheckbox} from '../actions';
+import {commentClassNamesSelector} from 'plugin-api/alpha/client/selectors';
+import OffTopicFilter from '../components/OffTopicFilter';
+import {
+  closeViewingOptions
+} from 'plugins/talk-plugin-viewing-options/client/actions';
+import {
+  addCommentClassName,
+  removeCommentClassName
+} from 'plugin-api/alpha/client/actions';
+
+const mapStateToProps = (state) => ({
+  commentClassNames: commentClassNamesSelector(state),
+  checked: state.coralPluginOfftopic.checked
+});
+
+const mapDispatchToProps = (dispatch) =>
+  bindActionCreators(
+    {
+      toggleCheckbox,
+      closeViewingOptions,
+      addCommentClassName,
+      removeCommentClassName
+    },
+    dispatch
+  );
+
+export default connect(mapStateToProps, mapDispatchToProps)(OffTopicFilter);

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

@@ -0,0 +1,20 @@
+import translations from './translations.json';
+import OffTopicTag from './components/OffTopicTag';
+import OffTopicFilter from './containers/OffTopicFilter';
+import OffTopicCheckbox from './containers/OffTopicCheckbox';
+import reducer from './reducer';
+
+/**
+ * talk-plugin-offtopic depends on talk-plugin-viewing-options
+ * in other to display filter and use the streamViewingOptions slot
+ */
+
+export default {
+  translations,
+  reducer,
+  slots: {
+    commentInputDetailArea: [OffTopicCheckbox],
+    commentInfoBar: [OffTopicTag],
+    viewingOptions: [OffTopicFilter]
+  }
+};

plugins/talk-plugin-offtopic/client/reducer.js

@@ -0,0 +1,18 @@
+import {OFFTOPIC_TOGGLE_CHECKBOX} from './constants';
+
+const initialState = {
+  checked: false
+};
+
+export default function offTopic (state = initialState, action) {
+  switch (action.type) {
+  case OFFTOPIC_TOGGLE_CHECKBOX: {
+    return {
+      ...state,
+      checked: !state.checked
+    };
+  }
+  default :
+    return state;
+  }
+}

plugins/talk-plugin-offtopic/client/translations.json

@@ -0,0 +1,8 @@
+{
+  "en": {
+    "off_topic": "Off Topic"
+  },
+  "es": {
+    "off_topic": "Fuera de Topico"
+  }
+}