From 55b031ccb7433ae7d6e46088901a11e6a5413a7b Mon Sep 17 00:00:00 2001
From: Connor Turland <connorturland@gmail.com>
Date: Tue, 7 Mar 2017 01:47:10 +0000
Subject: [PATCH] add topic following for internal testing

---
 app/assets/stylesheets/application.scss.erb | 10 ++++++++++
 frontend/src/Metamaps/Views/TopicCard.js    | 15 +++++++++++++++
 frontend/src/components/TopicCard/Follow.js | 17 +++++++++++++++++
 frontend/src/components/TopicCard/index.js  |  8 +++++++-
 4 files changed, 49 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/components/TopicCard/Follow.js

diff --git a/app/assets/stylesheets/application.scss.erb b/app/assets/stylesheets/application.scss.erb
index 2045628c..0c7b9976 100644
--- a/app/assets/stylesheets/application.scss.erb
+++ b/app/assets/stylesheets/application.scss.erb
@@ -3139,3 +3139,13 @@ script.data-gratipay-username {
 .inline {
   display: inline-block;
 }
+
+.topicFollow {
+    text-align: center;
+    height: 48px;
+    line-height: 48px;
+    border-top: 1px solid #BDBDBD;
+    background: #FFF;
+    cursor: pointer;
+    font-family: din-regular;
+}
\ No newline at end of file
diff --git a/frontend/src/Metamaps/Views/TopicCard.js b/frontend/src/Metamaps/Views/TopicCard.js
index 51036685..0b02fccd 100644
--- a/frontend/src/Metamaps/Views/TopicCard.js
+++ b/frontend/src/Metamaps/Views/TopicCard.js
@@ -5,6 +5,7 @@ import ReactDOM from 'react-dom'
 
 import Active from '../Active'
 import Visualize from '../Visualize'
+import GlobalUI from '../GlobalUI'
 
 import ReactTopicCard from '../../components/TopicCard'
 
@@ -24,6 +25,20 @@ const TopicCard = {
         updateTopic: obj => {
           topic.save(obj, { success: topic => self.populateShowCard(topic) })
         },
+        onFollow: () => {
+          const isFollowing = topic.isFollowedBy(Active.Mapper)
+          $.post({
+            url: `/topics/${topic.id}/${isFollowing ? 'un' : ''}follow`
+          })
+          if (isFollowing) {
+            GlobalUI.notifyUser('You are no longer following this topic')
+            Active.Mapper.unfollowTopic(topic.id)
+          } else {
+            GlobalUI.notifyUser('You are now following this topic')
+            Active.Mapper.followTopic(topic.id)
+          }
+          self.populateShowCard(topic)
+        },
         metacodeSets: self.metacodeSets,
         redrawCanvas: () => {
           Visualize.mGraph.plot()
diff --git a/frontend/src/components/TopicCard/Follow.js b/frontend/src/components/TopicCard/Follow.js
new file mode 100644
index 00000000..786001d7
--- /dev/null
+++ b/frontend/src/components/TopicCard/Follow.js
@@ -0,0 +1,17 @@
+import React, { PropTypes, Component } from 'react'
+
+class Follow extends Component {
+  render = () => {
+    const { isFollowing, onFollow } = this.props
+    return <div className='topicFollow' onClick={onFollow}>
+      {isFollowing ? 'Unfollow' : 'Follow'}
+    </div>
+  }
+}
+
+Follow.propTypes = {
+  isFollowing: PropTypes.bool,
+  onFollow: PropTypes.func
+}
+
+export default Follow
diff --git a/frontend/src/components/TopicCard/index.js b/frontend/src/components/TopicCard/index.js
index 3ebe700a..2c30d45e 100644
--- a/frontend/src/components/TopicCard/index.js
+++ b/frontend/src/components/TopicCard/index.js
@@ -4,11 +4,15 @@ import Title from './Title'
 import Links from './Links'
 import Desc from './Desc'
 import Attachments from './Attachments'
+import Follow from './Follow'
+import Util from '../../Metamaps/Util'
+
 
 class ReactTopicCard extends Component {
   render = () => {
-    const { topic, ActiveMapper } = this.props
+    const { topic, ActiveMapper, onFollow } = this.props
     const authorizedToEdit = topic.authorizeToEdit(ActiveMapper)
+    const isFollowing = topic.isFollowedBy(ActiveMapper)
     const hasAttachment = topic.get('link') && topic.get('link') !== ''
 
     let classname = 'permission'
@@ -40,6 +44,7 @@ class ReactTopicCard extends Component {
             authorizedToEdit={authorizedToEdit}
             updateTopic={this.props.updateTopic}
           />
+          {Util.isTester(ActiveMapper) && <Follow isFollowing={isFollowing} onFollow={onFollow} />}
           <div className="clearfloat"></div>
         </div>
       </div>
@@ -51,6 +56,7 @@ ReactTopicCard.propTypes = {
   topic: PropTypes.object,
   ActiveMapper: PropTypes.object,
   updateTopic: PropTypes.func,
+  onFollow: PropTypes.func,
   metacodeSets: PropTypes.arrayOf(PropTypes.shape({
     name: PropTypes.string,
     metacodes: PropTypes.arrayOf(PropTypes.shape({