Merge pull request #2 from gabrielbonner/create-proposals-index-page

Refactor to use component mounting best practices
sandiegojs · Aug 17, 2016 · daafded · daafded
2 parents 67a56cd + 5dea520
commit daafded
Showing 1 changed file with 59 additions and 40 deletions.
diff --git a/universal/components/ProposalsTable/ProposalsTable.jsx b/universal/components/ProposalsTable/ProposalsTable.jsx
@@ -2,8 +2,9 @@ import React from 'react';
 import axios from 'axios';
 
 const ProposalsTable = React.createClass({
-  render: function() {
 
+  loadProposalsFromServer: function () {
+    var th = this;
     axios({
       method: 'get',
       // TODO: un-hardcode the url
@@ -14,55 +15,73 @@ const ProposalsTable = React.createClass({
       .then(function (response) {
         console.log("Proposals listed below:");
         console.log(response.data);
+        th.setState({
+          proposals: response.data
+        });
       })
       .catch(function(error) {
         console.log(error);
       });
+  },
 
-    // TODO: save response from http request to proposals variable
-    // and update the state so that data shows on page
-    var proposals = [
-      {id: 1, speakerId: 1, talkId: 1},
-      {id: 2, speakerId: 2, talkId: 2},
-      {id: 3, speakerId: 3, talkId: 3},
-      ]
+  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}
+        ]
+    }
+  },
 
-    var proposalRows = proposals.map(function(proposal) {
-      return React.createElement(ProposalRow, { proposal: proposal });
+  // 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>)
+      }
     });
 
-    return (
-      <div>
-        <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>)
-  }
-});
+    // create row elements from state data
+    var proposalRows = this.state.proposals.map(function(proposal) {
+      console.log(proposal);
+      return React.createElement(ProposalRow, { proposal: proposal });
+    });
 
-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>)
+        <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>)
   }
 });