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,35 +91,36 @@ const bindShowCardListeners = (topic, ActiveMapper) => {
   }
 }
 
-function metacodeOptions(metacodeSets) {
-	return (
-		<div id="metacodeOptions">
-			<ul>
-        {metacodeSets.map(set => {
-					<li key={set.name}>
-						<span>{set.name}</span>
-						<div class="expandMetacodeSet"></div>
-						<ul>
-              {set.metacodes.map(m => {
-								<li key={m.id} data-id={m.id}>
-									<img width="24" height="24" src={m.icon_path} alt={m.name} />
-									<div class="mSelectName">{m.name}</div>
-									<div class="clearfloat"></div>
-								</li>
-							})}
-						</ul>
-					</li>
-        })}
-  		</ul>
-		</div>
-	)
-}
-
 class Metacode extends Component {
   componentDidMount = () => {
     bindShowCardListeners(this.props.topic, this.props.ActiveMapper)
   }
 
+  metacodeOptions = () => {
+    return (
+      <div id="metacodeOptions">
+        <ul>
+          {this.props.metacodeSets.map(set => {
+            <li key={set.name}>
+              <span>{set.name}</span>
+              <div class="expandMetacodeSet"></div>
+              <ul>
+                {set.metacodes.map(m => {
+                  <li key={m.id} data-id={m.id}>
+                    <img width="24" height="24" src={m.icon_path} alt={m.name} />
+                    <div class="mSelectName">{m.name}</div>
+                    <div class="clearfloat"></div>
+                  </li>
+                })}
+              </ul>
+            </li>
+          })}
+        </ul>
+      </div>
+    )
+  }
+
+
   render = () => {
     const { metacode } = this.props
     // the code for this is stored in /views/main/_metacodeOptions.html.erb
@@ -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