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