convert metacode sets to a json object for react

app/helpers/application_helper.rb

@@ -1,55 +1,5 @@
 # frozen_string_literal: true
 module ApplicationHelper
-  def metacodeset
-    metacodes = current_user.settings.metacodes
-
-    return false unless metacodes[0].include?('metacodeset')
-    return 'Most' if metacodes[0].sub('metacodeset-', '') == 'Most'
-    return 'Recent' if metacodes[0].sub('metacodeset-', '') == 'Recent'
-
-    MetacodeSet.find(metacodes[0].sub('metacodeset-', '').to_i)
-  end
-
-  def user_metacodes
-    @m = current_user.settings.metacodes
-    set = metacodeset
-    @metacodes = if set && set == 'Most'
-                   Metacode.where(id: current_user.most_used_metacodes).to_a
-                 elsif set && set == 'Recent'
-                   Metacode.where(id: current_user.recent_metacodes).to_a
-                 elsif set
-                   set.metacodes.to_a
-                 else
-                   Metacode.where(id: @m).to_a
-                 end
-
-    focus_code = user_metacode()
-    if focus_code != nil && @metacodes.index{|m| m.id == focus_code.id} == nil
-      @metacodes.push(focus_code)
-    end
-
-    @metacodes
-      .sort! { |m1, m2| m2.name.downcase <=> m1.name.downcase }
-
-    if focus_code != nil
-      @metacodes.rotate!(@metacodes.index{|m| m.id == focus_code.id})
-    else
-      @metacodes.rotate!(-1)
-    end
-  end
-
-  def user_metacode
-    current_user.settings.metacode_focus ? Metacode.find(current_user.settings.metacode_focus.to_i) : nil
-  end
-
-  def user_most_used_metacodes
-    @metacodes = current_user.most_used_metacodes.map { |id| Metacode.find(id) }
-  end
-
-  def user_recent_metacodes
-    @metacodes = current_user.recent_metacodes.map { |id| Metacode.find(id) }
-  end
-
   def invite_link
     "#{request.base_url}/join" + (current_user ? "?code=#{current_user.code}" : '')
   end

app/helpers/metacode_sets_helper.rb

@@ -1,3 +0,0 @@
-# frozen_string_literal: true
-module MetacodeSetsHelper
-end

app/helpers/metacodes_helper.rb

@@ -1,3 +1,78 @@
 # frozen_string_literal: true
 module MetacodesHelper
+  def metacodeset
+    metacodes = current_user.settings.metacodes
+
+    return false unless metacodes[0].include?('metacodeset')
+    return 'Most' if metacodes[0].sub('metacodeset-', '') == 'Most'
+    return 'Recent' if metacodes[0].sub('metacodeset-', '') == 'Recent'
+
+    MetacodeSet.find(metacodes[0].sub('metacodeset-', '').to_i)
+  end
+
+  def user_metacodes
+    @m = current_user.settings.metacodes
+    set = metacodeset
+    @metacodes = if set && set == 'Most'
+                   Metacode.where(id: current_user.most_used_metacodes).to_a
+                 elsif set && set == 'Recent'
+                   Metacode.where(id: current_user.recent_metacodes).to_a
+                 elsif set
+                   set.metacodes.to_a
+                 else
+                   Metacode.where(id: @m).to_a
+                 end
+    
+    focus_code = user_metacode()
+    focus_code != nil && @metacodes.index{|m| m.id == focus_code.id} == nil
+      @metacodes.push(focus_code)
+    end
+
+    @metacodes.sort! { |m1, m2| m2.name.downcase <=> m1.name.downcase }
+
+    if focus_code != nil
+      @metacodes.rotate!(@metacodes.index{|m| m.id == focus_code.id})
+    else
+      @metacodes.rotate!(-1)
+    end
+  end
+
+  def user_metacode
+     current_user.settings.metacode_focus ? Metacode.find(current_user.settings.metacode_focus.to_i) : nil
+  end
+
+  def user_most_used_metacodes
+    @metacodes = current_user.most_used_metacodes.map { |id| Metacode.find(id) }
+  end
+
+  def user_recent_metacodes
+    @metacodes = current_user.recent_metacodes.map { |id| Metacode.find(id) }
+  end
+
+  def metacode_sets_json
+    metacode_sets = []
+    metacode_sets << {
+      name: 'Recently Used',
+      metacodes: user_recent_metacodes
+        .map { |m| { id: m.id, icon_path: asset_path(m.icon), name: m.name } }
+    }
+    metacode_sets << {
+      name: 'Most Used',
+      metacodes: user_most_used_metacodes
+        .map { |m| { id: m.id, icon_path: asset_path(m.icon), name: m.name } }
+    }
+    metacode_sets += MetacodeSet.order("name").all.map do |set|
+      {
+        name: set.name,
+        metacodes: set.metacodes.sort(&:name)
+          .map { |m| { id: m.id, icon_path: asset_path(m.icon), name: m.name } }
+      }
+    end
+    metacode_sets << {
+      name: 'All',
+      metacodes: Metacode.order("name").all
+        .map { |m| { id: m.id, icon_path: asset_path(m.icon), name: m.name } }
+    }
+    metacode_sets.to_json
+  end
 end

app/views/shared/_metacodeoptions.html.erb

@@ -3,61 +3,7 @@
   # this code generates the list of icons that will drop down in the metacode select list on the topic card
   #%>
   
-<div id="metacodeOptions">
+<script>
-<ul>
+  Metamaps.ServerData = Metamaps.ServerData || {}
-  <li>
+  Metamaps.ServerData.metacodeSets = <%= raw metacode_sets_json %>
-    <span>Recently Used</span>
+</script>
-    <div class="expandMetacodeSet"></div>
-    <ul>
-    	<% user_recent_metacodes().each do |m| %>
-		  <li data-id="<%= m.id.to_s %>">
-		    <img width="24" height="24" src="<%= asset_path m.icon %>" alt="<%= m.name %>" />
-		    <div class="mSelectName"><%= m.name %></div>
-		    <div class="clearfloat"></div>
-		  </li>
-		<% end %>
-    </ul>
-  </li>
-  <li>
-    <span>Most Used</span>
-    <div class="expandMetacodeSet"></div>
-    <ul>
-    	<% user_most_used_metacodes().each do |m| %>
-		  <li data-id="<%= m.id.to_s %>">
-		    <img width="24" height="24" src="<%= asset_path m.icon %>" alt="<%= m.name %>" />
-		    <div class="mSelectName"><%= m.name %></div>
-		    <div class="clearfloat"></div>
-		  </li>
-		<% end %>
-    </ul>
-  </li>
-  <% MetacodeSet.order("name").all.each do |set| %>
-  <li>
-    <span><%= set.name %></span>
-    <div class="expandMetacodeSet"></div>
-    <ul>
-    	<% set.metacodes.sort { |a, b| a.name <=> b.name }.each do |m| %>
-		  <li data-id="<%= m.id.to_s %>">
-		    <img width="24" height="24" src="<%= asset_path m.icon %>" alt="<%= m.name %>" />
-		    <div class="mSelectName"><%= m.name %></div>
-		    <div class="clearfloat"></div>
-		  </li>
-		<% end %>
-    </ul>
-  </li>
-  <% end %>
-  <li>
-  	<span>All</span>
-    <div class="expandMetacodeSet"></div>
-  	<ul>
-  		<% Metacode.order("name").all.each do |m| %>
-		  <li data-id="<%= m.id.to_s %>">
-		    <img width="24" height="24" src="<%= asset_path m.icon %>" alt="<%= m.name %>" />
-		    <div class="mSelectName"><%= m.name %></div>
-		    <div class="clearfloat"></div>
-		  </li>
-		<% end %>
-  	</ul>
-  </li>
-</ul>
-</div>

frontend/src/components/TopicCard/Metacode.js

@@ -91,6 +91,30 @@ 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)