add the html in react whoop

frontend/src/Metamaps/Views/TopicCard.js

@@ -9,14 +9,20 @@ import ReactTopicCard from '../../components/TopicCard'
 
 const TopicCard = {
   openTopicCard: null, // stores the topic that's currently open
+  metacodeSets: [],
+  init: function(serverData) {
+    const self = TopicCard
+    self.metacodeSets = serverData.metacodeSets
+  },
   populateShowCard: function(topic) {
-    var self = TopicCard
+    const self = TopicCard
     const topicCardObj = {
       topic: topic,
       ActiveMapper: Active.Mapper,
       updateTopic: obj => {
         topic.save(obj, { success: topic => self.populateShowCard(topic) })
-      }
+      },
+      metacodeSets: self.metacodeSets
     }
     ReactDOM.render(
       React.createElement(ReactTopicCard, topicCardObj),

frontend/src/components/TopicCard/Links.js

@@ -72,6 +72,7 @@ class Links extends Component {
           metacode={metacode}
           ActiveMapper={ActiveMapper}
           updateTopic={this.props.updateTopic}
+          metacodeSets={this.props.metacodeSets}
         />
         <div className="linkItem contributor">
           <a href={`/explore/mapper/${topic.get('user_id')}`} target="_blank"><img src={topic.get('user_image')} className="contributorIcon" width="32" height="32" /></a>
@@ -102,7 +103,15 @@ class Links extends Component {
 Links.propTypes = {
   topic: PropTypes.object, // backbone object
   ActiveMapper: PropTypes.object,
-  updateTopic: PropTypes.func
+  updateTopic: PropTypes.func,
+  metacodeSets: PropTypes.arrayOf(PropTypes.shape({
+    name: PropTypes.string,
+    metacodes: PropTypes.arrayOf(PropTypes.shape({
+      id: PropTypes.number,
+      icon_path: PropTypes.string, // url
+      name: PropTypes.string
+    }))
+  }))
 }
 
 export default Links

frontend/src/components/TopicCard/Metacode.js

@@ -91,11 +91,16 @@ const bindShowCardListeners = (topic, ActiveMapper) => {
   }
 }
 
-function metacodeOptions(metacodeSets) {
+class Metacode extends Component {
+  componentDidMount = () => {
+    bindShowCardListeners(this.props.topic, this.props.ActiveMapper)
+  }
+
+  metacodeOptions = () => {
     return (
       <div id="metacodeOptions">
         <ul>
-        {metacodeSets.map(set => {
+          {this.props.metacodeSets.map(set => {
             <li key={set.name}>
               <span>{set.name}</span>
               <div class="expandMetacodeSet"></div>
@@ -115,10 +120,6 @@ function metacodeOptions(metacodeSets) {
     )
   }
 
-class Metacode extends Component {
-  componentDidMount = () => {
-    bindShowCardListeners(this.props.topic, this.props.ActiveMapper)
-  }
 
   render = () => {
     const { metacode } = this.props
@@ -132,7 +133,9 @@ class Metacode extends Component {
           <div className="expandMetacodeSelect"></div>
         </div>
         <div className="metacodeImage" style={{backgroundImage: `url(${metacode.get('icon')})`}} title="click and drag to move card"></div>
-        <div className="metacodeSelect" dangerouslySetInnerHTML={{ __html: metacodeSelectHTML }} />
+        <div className="metacodeSelect">
+          {this.metacodeOptions()}
+        </div>
       </div>
     )
   }
@@ -142,7 +145,15 @@ Metacode.propTypes = {
   topic: PropTypes.object, // backbone object
   metacode: PropTypes.object, // backbone object
   ActiveMapper: PropTypes.object,
-  updateTopic: PropTypes.func
+  updateTopic: PropTypes.func,
+  metacodeSets: PropTypes.arrayOf(PropTypes.shape({
+    name: PropTypes.string,
+    metacodes: PropTypes.arrayOf(PropTypes.shape({
+      id: PropTypes.number,
+      icon_path: PropTypes.string, // url
+      name: PropTypes.string
+    }))
+  }))
 }
 
 export default Metacode

frontend/src/components/TopicCard/index.js

@@ -30,6 +30,7 @@ class ReactTopicCard extends Component {
           <Links topic={topic}
             ActiveMapper={this.props.ActiveMapper}
             updateTopic={this.props.updateTopic}
+            metacodeSets={this.props.metacodeSets}
           />
           <Desc desc={topic.get('desc')}
             authorizedToEdit={authorizedToEdit}
@@ -49,7 +50,15 @@ class ReactTopicCard extends Component {
 ReactTopicCard.propTypes = {
   topic: PropTypes.object,
   ActiveMapper: PropTypes.object,
-  updateTopic: PropTypes.func
+  updateTopic: PropTypes.func,
+  metacodeSets: PropTypes.arrayOf(PropTypes.shape({
+    name: PropTypes.string,
+    metacodes: PropTypes.arrayOf(PropTypes.shape({
+      id: PropTypes.number,
+      icon_path: PropTypes.string, // url
+      name: PropTypes.string
+    }))
+  }))
 }
 
 export default ReactTopicCard