simplify views/topiccard (#1102)

* simplify views/topiccard

* Update Links.js

frontend/src/Metamaps/DataModel/Topic.js

@@ -93,25 +93,11 @@ const Topic = Backbone.Model.extend({
 
     return node
   },
-  updateViews: function() {
-    var onPageWithTopicCard = Active.Map || Active.Topic
-    var node = this.get('node')
-    // update topic card, if this topic is the one open there
-    if (onPageWithTopicCard && this === TopicCard.openTopicCard) {
-      TopicCard.showCard(node)
-    }
-
-    // update the node on the map
-    if (onPageWithTopicCard && node) {
-      node.name = this.get('name')
-      Visualize.mGraph.plot()
-    }
-  },
   updateCardView: function() {
     var onPageWithTopicCard = Active.Map || Active.Topic
     var node = this.get('node')
     // update topic card, if this topic is the one open there
-    if (onPageWithTopicCard && this === TopicCard.openTopicCard) {
+    if (onPageWithTopicCard && this === TopicCard.openTopic) {
       TopicCard.showCard(node)
     }
   },

frontend/src/Metamaps/GlobalUI/ReactApp.js

@@ -35,12 +35,14 @@ const ReactApp = {
   mobile: false,
   mobileTitle: '',
   mobileTitleWidth: 0,
+  metacodeSets: [],
   init: function(serverData, openLightbox) {
     const self = ReactApp
     self.serverData = serverData
     self.unreadNotificationsCount = serverData.unreadNotificationsCount
     self.mobileTitle = serverData.mobileTitle
     self.openLightbox = openLightbox
+    self.metacodeSets = serverData.metacodeSets
     routes = makeRoutes(serverData.ActiveMapper)
     self.resize()
     window && window.addEventListener('resize', self.resize)
@@ -148,10 +150,9 @@ const ReactApp = {
     const self = ReactApp
     return {
       openTopic: TopicCard.openTopic,
-      metacodeSets: TopicCard.metacodeSets,
-      updateTopic: TopicCard.updateTopic,
-      onTopicFollow: TopicCard.onTopicFollow,
-      redrawCanvas: () => Visualize.mGraph.plot()
+      metacodeSets: self.metacodeSets,
+      updateTopic: (topic, obj) => topic.save(obj),
+      onTopicFollow: Topic.onTopicFollow
     }
   },
   getTopicProps: function() {

frontend/src/Metamaps/Import.js

@@ -375,7 +375,7 @@ const Import = {
             url
           }, function success(data, textStatus) {
             if (typeof data === 'string' && data.trim() === '') return
-            var selector = '#showcard #topic_' + topic.get('id') + ' .best_in_place'
+            var selector = '.showcard #topic_' + topic.get('id') + ' .best_in_place'
             if ($(selector).find('form').length > 0) {
               $(selector).find('textarea, input').val(data.title)
             } else {

frontend/src/Metamaps/JIT.js

@@ -15,7 +15,7 @@ import Control from './Control'
 import Create from './Create'
 import DataModel from './DataModel'
 import Filter from './Filter'
-import GlobalUI from './GlobalUI'
+import GlobalUI, { ReactApp } from './GlobalUI'
 import Map from './Map'
 import Mouse from './Mouse'
 import Selected from './Selected'
@@ -1468,7 +1468,7 @@ const JIT = {
           }
           $(rightclickmenu).remove()
         },
-        metacodeSets: TopicCard.metacodeSets
+        metacodeSets: ReactApp.metacodeSets
       }),
       document.getElementById('metacodeOptionsWrapper')
     )

frontend/src/Metamaps/Topic.js

@@ -86,6 +86,20 @@ const Topic = {
       Active.Topic = DataModel.Topics.get(nodeid)
     }
   },
+  onTopicFollow: topic => {
+    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)
+    }
+    ReactApp.render()
+  },
   fetchRelatives: function(nodes, metacodeId) {
     var self = this
 

frontend/src/Metamaps/Views/TopicCard.js

@@ -1,48 +1,14 @@
-/* global $ */
-
-import Active from '../Active'
-import Visualize from '../Visualize'
-import GlobalUI, { ReactApp } from '../GlobalUI'
+import { ReactApp } from '../GlobalUI'
 
 const TopicCard = {
-  openTopic: null, // stores the topic that's currently open
-  metacodeSets: [],
-  init: function(serverData) {
-    const self = TopicCard
-    self.metacodeSets = serverData.metacodeSets
-  },
-  onTopicFollow: topic => {
-    const self = TopicCard
-    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() {
+  openTopic: null,
+  showCard: function(node) {
+    TopicCard.openTopic = node.getData('topic')
     ReactApp.render()
   },
-  showCard: function(node, opts = {}) {
-    var self = TopicCard
-    var topic = node.getData('topic')
-    self.openTopic = topic
-    self.render()
-  },
   hideCard: function() {
-    var self = TopicCard
-    self.openTopic = null
-    self.render()
+    TopicCard.openTopic = null
+    ReactApp.render()
   }
 }
 

frontend/src/Metamaps/Views/index.js

@@ -11,7 +11,6 @@ const Views = {
   init: (serverData) => {
     $(document).on(JUNTO_UPDATED, () => ExploreMaps.render())
     ChatView.init([serverData['sounds/MM_sounds.mp3'], serverData['sounds/MM_sounds.ogg']])
-    TopicCard.init(serverData)
   },
   ExploreMaps,
   ChatView,

frontend/src/components/TopicCard/Links.js

@@ -25,7 +25,8 @@ class Links extends Component {
     this.props.updateTopic({
       metacode_id: metacodeId
     })
-    this.props.redrawCanvas()
+    // this needs to trigger a redraw of the canvas,
+    // which it currently does using backbone. If backbone comes out, make sure it still does
   }
 
   toggleShowMoreMaps = e => {
@@ -155,8 +156,7 @@ Links.propTypes = {
       icon_path: PropTypes.string, // url
       name: PropTypes.string
     }))
-  })),
-  redrawCanvas: PropTypes.func
+  }))
 }
 
 export default Links

frontend/src/components/TopicCard/index.js

@@ -32,7 +32,7 @@ class ReactTopicCard extends Component {
 
     return (
       <Draggable handle=".metacodeImage" defaultPosition={{x: 100, y: 100}}>
-        <div className="showcard mapElement mapElementHidden" id="showcard">
+        <div className="showcard mapElement mapElementHidden">
           <div className={classname}>
             <div className={`CardOnGraph ${hasAttachment ? 'hasAttachment' : ''}`} id={`topic_${topic.id}`}>
               <Title name={topic.get('name')}