list metacodes and metacode setssssssssssssssssssssssssssssssss

README.md

@@ -51,10 +51,10 @@ Checklist
 - [ ] Modify the remaining rails templates into JSX templates
   - [x] notifications list
   - [x] notification page
-  - [ ] list metacodes
+  - [x] list metacodes
   - [ ] new metacode
   - [ ] edit metacode
-  - [ ] list metacode_sets
+  - [x] list metacode_sets
   - [ ] new metacode set
   - [ ] edit metacode set
   - [ ] authorized apps

src/Metamaps/DataFetcher.js

@@ -16,6 +16,12 @@ async function getMetacodes() {
   return data
 }
 
+async function getMetacodeSets() {
+  const res = await fetchWithCookies('/metacode_sets.json')
+  const data = await res.json()
+  return data
+}
+
 async function getCurrentUser() {
   const res = await fetchWithCookies('/users/current.json')
   const data = await res.json()
@@ -39,6 +45,7 @@ async function requestAccess(mapId) {
 
 module.exports = {
   getMetacodes,
+  getMetacodeSets,
   getCurrentUser,
   approveAccessRequest,
   denyAccessRequest,

src/Metamaps/GlobalUI/ReactApp.js

@@ -112,7 +112,8 @@ const ReactApp = {
       markAsRead: apply(Notifications.markAsRead, ReactApp.render),
       markAsUnread: apply(Notifications.markAsUnread, ReactApp.render),
       denyAccessRequest: DataFetcher.denyAccessRequest,
-      approveAccessRequest: DataFetcher.approveAccessRequest
+      approveAccessRequest: DataFetcher.approveAccessRequest,
+      metacodes: DataModel.Metacodes.toJSON()
     },
     self.getMapProps(),
     self.getTopicProps(),

src/Metamaps/index.js

@@ -89,6 +89,9 @@ document.addEventListener('DOMContentLoaded', async function() {
     const metacodes = await DataFetcher.getMetacodes()
     Metamaps.ServerData.Metacodes = metacodes
 
+    const metacodeSets = await DataFetcher.getMetacodeSets()
+    Metamaps.ServerData.metacodeSets = metacodeSets
+
     const activeMapper = await DataFetcher.getCurrentUser()
     if (activeMapper) {
       Metamaps.ServerData.ActiveMapper = activeMapper

src/routes/Admin/AdminHeader.js

@@ -1,8 +1,8 @@
 import React, { Component } from 'react'
-import NavBar from '../components/NavBar'
-import NavBarLink from '../components/NavBarLink'
+import NavBar from '../../components/NavBar'
+import NavBarLink from '../../components/NavBarLink'
 
-class Admin extends Component {
+class AdminHeader extends Component {
   render = () => {
     return (
       <NavBar>
@@ -15,4 +15,4 @@ class Admin extends Component {
   }
 }
 
-export default Admin
+export default AdminHeader

src/routes/Admin/EditMetacode.js

@@ -0,0 +1,14 @@
+import React, { Component } from 'react'
+import AdminHeader from './AdminHeader'
+
+class Metacodes extends Component {
+  render = () => {
+    return (
+      <div>
+        <AdminHeader />
+      </div>
+    )
+  }
+}
+
+export default Metacodes

src/routes/Admin/EditMetacodeSet.js

@@ -0,0 +1,14 @@
+import React, { Component } from 'react'
+import AdminHeader from './AdminHeader'
+
+class Metacodes extends Component {
+  render = () => {
+    return (
+      <div>
+        <AdminHeader />
+      </div>
+    )
+  }
+}
+
+export default Metacodes

src/routes/Admin/MetacodeSets.js

@@ -0,0 +1,65 @@
+import React, { Component } from 'react'
+import { Link } from 'react-router'
+import AdminHeader from './AdminHeader'
+
+class MetacodeSets extends Component {
+  render = () => {
+    const { metacodeSets, metacodes } = this.props
+    return (
+      <div>
+        <div id="yield">
+          <div className="centerContent">
+            <br />
+            <table>
+              <tbody>
+                <tr>
+                  <th>Name</th>
+                  <th>Description</th>
+                  <th>Metacodes</th>
+                </tr>
+                {metacodeSets.filter(m => m.id).map((metacodeSet, i) => {
+                  return <MetacodeSetRow key={i} metacodeSet={metacodeSet} metacodes={metacodes} />
+                })}
+              </tbody>
+            </table>
+          </div>
+        </div>
+        <AdminHeader />
+      </div>
+    )
+  }
+}
+
+class MetacodeSetRow extends Component {
+  render = () => {
+    const { metacodeSet, metacodes } = this.props
+    return (
+      <tr>
+        <td>
+          {metacodeSet.name}
+          <br />
+          <Link to={`/metacode_sets/${metacodeSet.id}/edit`}>Edit</Link>
+          <br />
+          <a data-confirm="Are you sure?" rel="nofollow" data-method="delete" href={`/metacode_sets/${metacodeSet.id}`}>Delete</a>
+        </td>
+        <td className="metacodeSetDesc">
+          {metacodeSet.description}
+        </td>
+        <td>
+          {metacodeSet.metacodes.map((mId, index) => {
+            const metacode = metacodes.find(m => m.id === mId)
+            return (
+              <span key={index}>
+                <img className="metacodeSetImage" src={metacode.icon} />
+                {(index+1) % 4 === 0 && <div className='clearfloat'></div>}
+              </span>
+            )
+          })}
+          <div className='clearfloat'></div>
+        </td>
+      </tr>
+    )
+  }
+}
+
+export default MetacodeSets

src/routes/Admin/Metacodes.js

@@ -0,0 +1,43 @@
+import React, { Component } from 'react'
+import { Link } from 'react-router'
+import AdminHeader from './AdminHeader'
+
+class Metacodes extends Component {
+  render = () => {
+    return (
+      <div>
+        <div id="yield">
+          <div className="centerContent">
+            <br />
+            <table>
+              <tbody>
+                <tr>
+                  <th>Name</th>
+                  <th>Icon</th>
+                  <th>Color</th>
+                  <th></th>
+                  <th></th>
+                </tr>
+                {this.props.metacodes.map(metacode => {
+                  return (
+                    <tr key={metacode.id}>
+                      <td>{metacode.name}</td>
+                      <td className="iconURL">{metacode.icon}</td>
+                      {metacode.color && <td className="iconColor" style={{backgroundColor: metacode.color}}>{metacode.color}</td>}
+                      {!metacode.color && <td></td>}
+                      <td><img width="40" src={metacode.icon} alt="metacode image" /></td>
+                      <td><Link to={`/metacodes/${metacode.id}/edit`}>Edit</Link></td>
+                    </tr>
+                  )
+                })}
+              </tbody>
+            </table>
+          </div>
+        </div>
+        <AdminHeader />
+      </div>
+    )
+  }
+}
+
+export default Metacodes

src/routes/Admin/NewMetacode.js

@@ -0,0 +1,14 @@
+import React, { Component } from 'react'
+import AdminHeader from './AdminHeader'
+
+class Metacodes extends Component {
+  render = () => {
+    return (
+      <div>
+        <AdminHeader />
+      </div>
+    )
+  }
+}
+
+export default Metacodes

src/routes/Admin/NewMetacodeSet.js

@@ -0,0 +1,14 @@
+import React, { Component } from 'react'
+import AdminHeader from './AdminHeader'
+
+class Metacodes extends Component {
+  render = () => {
+    return (
+      <div>
+        <AdminHeader />
+      </div>
+    )
+  }
+}
+
+export default Metacodes

src/routes/makeRoutes.js

@@ -1,10 +1,15 @@
 import React from 'react'
 import { Route, IndexRoute } from 'react-router'
-import Admin from './Admin'
 import App from './App'
 import Apps from './Apps'
 import Maps from './Maps'
 import MapView from './MapView'
+import Metacodes from './Admin/Metacodes'
+import NewMetacode from './Admin/NewMetacode'
+import EditMetacode from './Admin/EditMetacode'
+import MetacodeSets from './Admin/MetacodeSets'
+import NewMetacodeSet from './Admin/NewMetacodeSet'
+import EditMetacodeSet from './Admin/EditMetacodeSet'
 import Notifications from './Notifications/Notifications'
 import NotificationPage from './Notifications/NotificationPage'
 import TopicView from './TopicView'
@@ -50,14 +55,14 @@ export default function makeRoutes (currentUser) {
       <Route path="password/edit" component={nullComponent} />
     </Route>
     <Route path="metacodes">
-      <IndexRoute component={Admin} />
-      <Route path="new" component={Admin} />
-      <Route path=":id/edit" component={Admin} />
+      <IndexRoute component={Metacodes} />
+      <Route path="new" component={NewMetacode} />
+      <Route path=":id/edit" component={EditMetacode} />
     </Route>
     <Route path="metacode_sets">
-      <IndexRoute component={Admin} />
-      <Route path="new" component={Admin} />
-      <Route path=":id/edit" component={Admin} />
+      <IndexRoute component={MetacodeSets} />
+      <Route path="new" component={NewMetacodeSet} />
+      <Route path=":id/edit" component={EditMetacodeSet} />
     </Route>
     <Route path="oauth">
       <Route path="token/info" component={Apps} />

views/metacode_sets/index.js

@@ -1,46 +0,0 @@
-import React, { Component } from react
-
-class MyComponent extends Component {
-  render = () => {
-    return (
-<div id="yield">
-  <div className='centerContent'>
-    <br />
-    <table>
-      <tr>
-        <th>Name</th>
-        <th className='metacodeSetsDescription'>Description</th>
-        <th>Metacodes</th>
-      </tr>
-
-    { @metacode_sets.each do |metacode_set| }
-      <tr>
-        <td>
-          { metacode_set.name }<br />
-          { link_to 'Edit',
-              edit_metacode_set_path(metacode_set) }
-          <br />
-          { link_to 'Delete',
-              metacode_set, method: :delete,
-              data: { confirm: 'Are you sure?' } }
-        </td>
-        <td className='metacodeSetDesc'>{ metacode_set.desc }</td>
-        <td>
-          { metacode_set.metacodes.each_with_index do |metacode, index| }
-            <img className='metacodeSetImage' src='{ asset_path metacode.icon }' />
-            { if (index+1)%4 == 0 }
-            <div className='clearfloat'></div>
-            { end }
-          { end }
-          <div className='clearfloat'></div>
-        </td>
-      </tr>
-    { end }
-    </table>
-  </div>
-</div>
-    )
-  }
-}
-
-export default MyComponent

views/metacodes/index.js

@@ -1,40 +0,0 @@
-import React, { Component } from react
-
-class MyComponent extends Component {
-  render = () => {
-    return (
-<div id="yield">
-  <div className='centerContent'>
-    <br />
-    <table>
-      <tr>
-        <th>Name</th>
-        <th>Icon</th>
-        <th>Color</th>
-        <th></th>
-        <th></th>
-      </tr>
-
-    { @metacodes.each do |metacode| }
-      <tr>
-        <td>{ metacode.name }</td>
-        <td className="iconURL">{ metacode.icon }</td>
-        { if metacode.color }
-          <td className="iconColor" style="background-color: { metacode.color }">
-            { metacode.color }
-          </td>
-        { else }
-          <td></td>
-        { end }
-        <td>{ image_tag metacode.icon, width: 40 }</td>
-        <td>{ link_to 'Edit', edit_metacode_path(metacode) }</td>
-      </tr>
-    { end }
-    </table>
-  </div>
-</div>
-    )
-  }
-}
-
-export default MyComponent