From 90f77cd4f7b709b26d117f9096d3cbe59d7c314d Mon Sep 17 00:00:00 2001 From: Connor Turland Date: Wed, 22 Mar 2017 19:22:38 -0400 Subject: [PATCH] simplify views/topiccard (#1102) * simplify views/topiccard * Update Links.js --- frontend/src/Metamaps/DataModel/Topic.js | 16 +------- frontend/src/Metamaps/GlobalUI/ReactApp.js | 9 +++-- frontend/src/Metamaps/Import.js | 2 +- frontend/src/Metamaps/JIT.js | 4 +- frontend/src/Metamaps/Topic.js | 14 +++++++ frontend/src/Metamaps/Views/TopicCard.js | 46 +++------------------- frontend/src/Metamaps/Views/index.js | 1 - frontend/src/components/TopicCard/Links.js | 6 +-- frontend/src/components/TopicCard/index.js | 2 +- 9 files changed, 33 insertions(+), 67 deletions(-) diff --git a/frontend/src/Metamaps/DataModel/Topic.js b/frontend/src/Metamaps/DataModel/Topic.js index e8025a7d..10acc5b1 100644 --- a/frontend/src/Metamaps/DataModel/Topic.js +++ b/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) } }, diff --git a/frontend/src/Metamaps/GlobalUI/ReactApp.js b/frontend/src/Metamaps/GlobalUI/ReactApp.js index 75e4ed8b..db850091 100644 --- a/frontend/src/Metamaps/GlobalUI/ReactApp.js +++ b/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() { diff --git a/frontend/src/Metamaps/Import.js b/frontend/src/Metamaps/Import.js index 9b90b993..54e256b2 100644 --- a/frontend/src/Metamaps/Import.js +++ b/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 { diff --git a/frontend/src/Metamaps/JIT.js b/frontend/src/Metamaps/JIT.js index 8100ebfe..ffaab923 100644 --- a/frontend/src/Metamaps/JIT.js +++ b/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') ) diff --git a/frontend/src/Metamaps/Topic.js b/frontend/src/Metamaps/Topic.js index 49b27253..0054ad55 100644 --- a/frontend/src/Metamaps/Topic.js +++ b/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 diff --git a/frontend/src/Metamaps/Views/TopicCard.js b/frontend/src/Metamaps/Views/TopicCard.js index 670ce762..943869e9 100644 --- a/frontend/src/Metamaps/Views/TopicCard.js +++ b/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() } } diff --git a/frontend/src/Metamaps/Views/index.js b/frontend/src/Metamaps/Views/index.js index 85a710c3..0f7cf566 100644 --- a/frontend/src/Metamaps/Views/index.js +++ b/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, diff --git a/frontend/src/components/TopicCard/Links.js b/frontend/src/components/TopicCard/Links.js index c4b4796f..accf2bfa 100644 --- a/frontend/src/components/TopicCard/Links.js +++ b/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 diff --git a/frontend/src/components/TopicCard/index.js b/frontend/src/components/TopicCard/index.js index 0245e1a2..e3297dad 100644 --- a/frontend/src/components/TopicCard/index.js +++ b/frontend/src/components/TopicCard/index.js @@ -32,7 +32,7 @@ class ReactTopicCard extends Component { return ( -
+