diff --git a/frontend/src/Metamaps/Views/TopicCard.js b/frontend/src/Metamaps/Views/TopicCard.js index 67417126..0c7b3e3f 100644 --- a/frontend/src/Metamaps/Views/TopicCard.js +++ b/frontend/src/Metamaps/Views/TopicCard.js @@ -10,8 +10,6 @@ import GlobalUI, { ReactApp } from '../GlobalUI' const TopicCard = { openTopic: null, // stores the topic that's currently open metacodeSets: [], - updateTopic: () => {}, - onTopicFollow: () => {}, redrawCanvas: () => { Visualize.mGraph.plot() }, @@ -19,32 +17,26 @@ const TopicCard = { const self = TopicCard self.metacodeSets = serverData.metacodeSets }, - populateShowCard: function(topic) { + onTopicFollow: topic => { const self = TopicCard - TopicCard.updateTopic = obj => { - topic.save(obj, { success: topic => self.populateShowCard(topic) }) - } - TopicCard.onTopicFollow = () => { - 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) - } - // initialize draggability - $('.showcard').draggable({ - handle: '.metacodeImage', - stop: function() { - $(this).height('auto') - } + 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.render() + }, + updateTopic: (topic, obj) => { + const self = TopicCard + topic.save(obj, { success: self.render }) + }, + render: function() { ReactApp.render() }, showCard: function(node, opts = {}) { @@ -52,8 +44,16 @@ const TopicCard = { var topic = node.getData('topic') self.openTopic = topic // populate the card that's about to show with the right topics data - self.populateShowCard(topic) - return $('.showcard').fadeIn('fast', () => opts.complete && opts.complete()) + self.render() + $('.showcard').fadeIn('fast', () => { + $('.showcard').draggable({ + handle: '.metacodeImage', + stop: function() { + $(this).height('auto') + } + }) + opts.complete && opts.complete() + }) }, hideCard: function() { var self = TopicCard diff --git a/frontend/src/components/TopicCard/index.js b/frontend/src/components/TopicCard/index.js index 5d19eb5f..7ef73673 100644 --- a/frontend/src/components/TopicCard/index.js +++ b/frontend/src/components/TopicCard/index.js @@ -9,11 +9,14 @@ import Util from '../../Metamaps/Util' class ReactTopicCard extends Component { render = () => { - const { currentUser, onTopicFollow } = this.props + const { currentUser, onTopicFollow, updateTopic } = this.props const topic = this.props.openTopic if (!topic) return null + const wrappedUpdateTopic = obj => updateTopic(topic, obj) + const wrappedTopicFollow = () => onTopicFollow(topic) + const authorizedToEdit = topic.authorizeToEdit(currentUser) const isFollowing = topic.isFollowedBy(currentUser) const hasAttachment = topic.get('link') && topic.get('link') !== '' @@ -32,23 +35,23 @@ class ReactTopicCard extends Component {