render metacodeOptions in right click menu with react

frontend/src/Metamaps/JIT.js

@@ -2,9 +2,14 @@
 
 import _ from 'lodash'
 import outdent from 'outdent'
+import clipboard from 'clipboard-js'
+import React from 'react'
+import ReactDOM from 'react-dom'
 
 import $jit from '../patched/JIT'
 
+import MetacodeSelect from '../components/MetacodeSelect'
+
 import Active from './Active'
 import Control from './Control'
 import Create from './Create'
@@ -21,7 +26,6 @@ import Topic from './Topic'
 import TopicCard from './Views/TopicCard'
 import Util from './Util'
 import Visualize from './Visualize'
-import clipboard from 'clipboard-js'
 
 let panningInt
 
@@ -1418,9 +1422,7 @@ const JIT = {
           <div class="expandLi"></div>
         </li>`
 
-      const metacodeOptions = $('#metacodeOptions').html()
+      menustring += '<li class="rc-metacode"><div class="rc-icon"></div>Change metacode<span id="metacodeOptionsWrapper"></span><div class="expandLi"></div></li>'
-
-      menustring += '<li class="rc-metacode"><div class="rc-icon"></div>Change metacode' + metacodeOptions + '<div class="expandLi"></div></li>'
     }
     if (Active.Topic) {
       if (!Active.Mapper) {
@@ -1475,6 +1477,20 @@ const JIT = {
     // add the menu to the page
     $('#wrapper').append(rightclickmenu)
 
+    ReactDOM.render(
+      React.createElement(MetacodeSelect, {
+        onMetacodeSelect: metacodeId => {
+          const topic = Topic.get(node.id)
+          debugger
+          topic.save({
+            metacode_id: metacodeId
+          })
+        },
+        metacodeSets: TopicCard.metacodeSets
+      }),
+      document.getElementById('metacodeOptionsWrapper')
+    )
+
     // attach events to clicks on the list items
 
     // delete the selected things from the database
@@ -1524,7 +1540,6 @@ const JIT = {
     // change the metacode of all the selected nodes that you have edit permission for
     $('.rc-metacode li li').click(function() {
       $('.rightclickmenu').remove()
-      //
       Control.updateSelectedMetacodes($(this).attr('data-id'))
     })