From 9364272ffc7b63e6e8641e4a03f2f2f2a0f73eee Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Tue, 6 Jun 2017 11:53:19 -0300
Subject: [PATCH] =?UTF-8?q?=C3=81dd=20classnames=20based=20on=20tags?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/Comment.js                 | 33 ++++++++++++++++++-
 .../src/components/ViewingOptions.js          |  2 +-
 .../src/reducers/comment.js                   |  6 +++-
 .../client/components/OffTopicFilter.js       |  7 ++--
 4 files changed, 43 insertions(+), 5 deletions(-)

diff --git a/client/coral-embed-stream/src/components/Comment.js b/client/coral-embed-stream/src/components/Comment.js
index 3b8b8b08d..1364e7748 100644
--- a/client/coral-embed-stream/src/components/Comment.js
+++ b/client/coral-embed-stream/src/components/Comment.js
@@ -27,6 +27,7 @@ import {getEditableUntilDate} from './util';
 import styles from './Comment.css';
 
 const isStaff = (tags) => !tags.every((t) => t.name !== 'STAFF');
+const hasTag = (tags, lookupTag) => !!tags.filter((tag) => tag.name === lookupTag).length;
 
 // hold actions links (e.g. Reply) along the comment footer
 const ActionButton = ({children}) => {
@@ -226,11 +227,41 @@ class Comment extends React.Component {
       () => 'Failed to remove best comment tag'
     );
 
+    /**
+     * classNamesToAdd
+     * adds classNames based on condition
+     * classnames is an array of objects with key as classnames and value as conditions
+     * i.e:
+     * {
+     *  'myClassName': { tags: ['STAFF']}
+     * }
+     *
+     * This will add myClassName to comments tagged with STAFF TAG.
+     * **/
+
+    const classNamesToAdd = classNames.reduce((acc, className) => {
+      let res = [];
+
+      // Adding classNames based on tags
+      Object.keys(className).map(cn => {
+        const condition = className[cn];
+        condition.tags.forEach(tag => {
+          if (hasTag(comment.tags, tag)) {
+            res = [...res, cn];
+          }
+        });
+      });
+
+      // TODO: Compare rest of the comment obj to the condition if needed
+
+      return [...acc, ...res];
+    }, []);
+
     return (
       <div
-        className={cn([commentClass, classNames])}
         id={`c_${comment.id}`}
         style={{marginLeft: depth * 30}}
+        className={cn([commentClass, classNamesToAdd])}
       >
         <hr aria-hidden={true} />
         <div
diff --git a/client/coral-embed-stream/src/components/ViewingOptions.js b/client/coral-embed-stream/src/components/ViewingOptions.js
index d0fdeaf5b..05f8afd2e 100644
--- a/client/coral-embed-stream/src/components/ViewingOptions.js
+++ b/client/coral-embed-stream/src/components/ViewingOptions.js
@@ -1,6 +1,6 @@
 import React from 'react';
-import styles from './ViewingOptions.css';
 import cn from 'classnames';
+import styles from './ViewingOptions.css';
 import Slot from 'coral-framework/components/Slot';
 
 export default class ViewingOptions extends React.Component {
diff --git a/client/coral-embed-stream/src/reducers/comment.js b/client/coral-embed-stream/src/reducers/comment.js
index e2cd43ee4..2f38cfce2 100644
--- a/client/coral-embed-stream/src/reducers/comment.js
+++ b/client/coral-embed-stream/src/reducers/comment.js
@@ -1,7 +1,11 @@
 import {ADD_CLASSNAME, REMOVE_CLASSNAME} from '../constants/comment';
 
 const initialState = {
-  classNames: []
+  classNames: [{
+    'wapoOff' : {
+      tags: ['OFF_TOPIC']
+    }
+  }]
 };
 
 export default function comment (state = initialState, action) {
diff --git a/plugins/coral-plugin-offtopic/client/components/OffTopicFilter.js b/plugins/coral-plugin-offtopic/client/components/OffTopicFilter.js
index 226f43d45..856bfef3c 100644
--- a/plugins/coral-plugin-offtopic/client/components/OffTopicFilter.js
+++ b/plugins/coral-plugin-offtopic/client/components/OffTopicFilter.js
@@ -6,11 +6,14 @@ import {addClassName, removeClassName} from 'coral-embed-stream/src/actions/comm
 
 class OffTopicFilter extends React.Component {
 
-  className = 'OFF_TOPIC';
+  tag = 'OFF_TOPIC';
+  className = 'wapoOfftopic';
 
   handleChange = (e) => {
     if (e.target.checked) {
-      this.props.addClassName(this.className);
+      this.props.addClassName({
+        [this.className] : {tags: [this.tag]}
+      });
     } else {
       const idx = this.props.comment.classNames.indexOf(this.className);
       this.props.removeClassName(idx);