improve topic card readability and fix dragging bug

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

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 {
           <div className={`CardOnGraph ${hasAttachment ? 'hasAttachment' : ''}`} id={`topic_${topic.id}`}>
             <Title name={topic.get('name')}
               authorizedToEdit={authorizedToEdit}
-              onChange={this.props.updateTopic}
+              onChange={wrappedUpdateTopic}
             />
             <Links topic={topic}
               ActiveMapper={this.props.currentUser}
-              updateTopic={this.props.updateTopic}
+              updateTopic={wrappedUpdateTopic}
               metacodeSets={this.props.metacodeSets}
               redrawCanvas={this.props.redrawCanvas}
             />
             <Desc desc={topic.get('desc')}
               authorizedToEdit={authorizedToEdit}
-              onChange={this.props.updateTopic}
+              onChange={wrappedUpdateTopic}
             />
             <Attachments topic={topic}
               authorizedToEdit={authorizedToEdit}
-              updateTopic={this.props.updateTopic}
+              updateTopic={wrappedUpdateTopic}
             />
-          {Util.isTester(currentUser) && <Follow isFollowing={isFollowing} onTopicFollow={onTopicFollow} />}
+          {Util.isTester(currentUser) && <Follow isFollowing={isFollowing} onTopicFollow={wrappedTopicFollow} />}
             <div className="clearfloat"></div>
           </div>
         </div>