Build proposals index page

client/index.html

@@ -0,0 +1,7 @@
+<h1>Welcome to the SD.js Speaker Portal</h1>
+
+<form action='proposals'>
+  <input type='submit' value='Proposals index page' />
+</form>
+
+<div id='content'></div>

package.json

@@ -14,6 +14,7 @@
     "architect": "0.1.11",
     "architect-debug-logger": "1.0.1",
     "async": "2.0.0-rc.6",
+    "axios": "0.12.0",
     "babel-plugin-transform-react-jsx": "^6.8.0",
     "babel-preset-es2015": "^6.9.0",
     "babel-preset-react": "^6.11.1",

server/boot/root.js

@@ -1,10 +1,13 @@
-'use strict'
-module.exports = function(server) {
-  var log = require('debug')('boot:root')
-  log('show status at /')
+// this is commented out so that index.html in the 'client' folder will render when
+// user navigates to root directory
 
-  // Install a `/` route that returns server status
-  var router = server.loopback.Router()
-  router.get('/', server.loopback.status())
-  server.use(router)
-}
+// 'use strict'
+// module.exports = function(server) {
+//   var log = require('debug')('boot:root')
+//   log('show status at /')
+
+//   // Install a `/` route that returns server status
+//   var router = server.loopback.Router()
+//   router.get('/', server.loopback.status())
+//   server.use(router)
+// }

universal/components/ProposalsTable/ProposalsTable.jsx

@@ -1,41 +1,95 @@
 import React from 'react';
+import axios from 'axios';
 
 const ProposalsTable = React.createClass({
-  render() {
+
+  loadProposalsFromServer: function () {
+    var th = this;
+    axios({
+      method: 'get',
+      // TODO: un-hardcode the url
+      url: "http://localhost:3000/api/proposals",
+      dataType: 'json',
+      cache: false,
+      })
+      .then(function (response) {
+        console.log("Proposals listed below:");
+        console.log(response.data);
+        th.setState({
+          proposals: response.data
+        });
+      })
+      .catch(function(error) {
+        console.log(error);
+      });
+  },
+
+  getInitialState: function() {
+    return {
+      proposals: [
+        // dummy data to test initial state
+        {id: 1, speakerId: 1, talkId: 1},
+        {id: 2, speakerId: 2, talkId: 2},
+        {id: 3, speakerId: 3, talkId: 3}
+        ]
+    }
+  },
+
+  // this section of code is not being hit, nothing logs to console
+  componentDidMount: function() {
+    console.log("I'm in the mainframe!")
+    this.loadProposalsFromServer();
+  },
+
+  render: function() {
+
+    // this is what each instance of a row will look like
+    var ProposalRow = React.createClass({
+      render: function() {
+        return (
+          <tr>
+            <td>{this.props.proposal.id}</td>
+            <td>{this.props.proposal.speakerId}</td>
+            <td>{this.props.proposal.talkId}</td>
+          </tr>)
+      }
+    });
+
+    // create row elements from state data
+    var proposalRows = this.state.proposals.map(function(proposal) {
+      console.log(proposal);
+      return React.createElement(ProposalRow, { proposal: proposal });
+    });
+
     return (
-      <div>
-        <div>
-          <button>New User</button>
-          <button>Import</button>
-          <button>Export</button>
-        </div>
-      <div>
-      <table>
-      <thead>
-      <tr>
-      <th>#</th>
-    <th>First Name</th>
-    <th>Last Name</th>
-    <th>Username</th>
-  </tr>
-  </thead>
-    <tbody>
-    <tr>
-      <td>1</td>
-      <td>Mark</td>
-      <td>Tompson</td>
-      <td>the_mark7</td>
-      <td>
-        <a href="user.html"><i className="icon-pencil"></i></a>
-        <a href="#myModal" role="button" data-toggle="modal"><i className="icon-remove"></i></a>
-        </td>
-        </tr>
-
-        </tbody>
-      </table>
-    </div>
-    </div>)
+        <div id='proposalsTable'>
+          <div>
+            <button>Sign up for a lightning talk</button>
+          </div>
+          <br />
+          <div>
+            <table>
+              <thead>
+                <tr>
+                  <th>Proposal Id</th>
+                  <th>Speaker Id</th>
+                  <th>Talk Id</th>
+                </tr>
+              </thead>
+              <tbody>
+                {proposalRows}
+              </tbody>
+            </table>
+          </div>
+        </div>)
   }
 });
 
+// not sure what this does, but doesn't appear to be breaking anything
 module.exports = ProposalsTable;
+
+// was getting a "'document' not defined" error so wrapped it in an if statement to check
+// to see if a window object is present (meaning it's on the browser/client side)
+if (typeof window !== 'undefined') {
+  React.render(<ProposalsTable />, document.getElementById("#content"));
+}