From 227b4b6ba0e4c8faff6d42c4d3165e2d7f8fa5a9 Mon Sep 17 00:00:00 2001
From: Wei Yi <weiyi2017@gmail.com>
Date: Thu, 28 Jul 2016 11:07:06 -0700
Subject: [PATCH 1/3] add load more button on index page

---
 .../javascripts/components/organization.jsx   | 22 +-------
 .../components/organization_display.jsx       | 50 +++++++++++++------
 app/controllers/organizations_controller.rb   |  6 ++-
 app/views/organizations/index.html.erb        |  8 ---
 4 files changed, 41 insertions(+), 45 deletions(-)

diff --git a/app/assets/javascripts/components/organization.jsx b/app/assets/javascripts/components/organization.jsx
index d151cbb..b0288f8 100644
--- a/app/assets/javascripts/components/organization.jsx
+++ b/app/assets/javascripts/components/organization.jsx
@@ -1,26 +1,6 @@
 var Organization = React.createClass({
-  nameMatched: function() {
-    return (
-      this.props.searchTerm === null || this.props.organization.name.toLowerCase().match(this.props.searchTerm.toLowerCase())
-    );
-  },
-  teamSizeMatched: function() {
-    var sizeInput = this.props.sizeInput;
-    var techTeamSize = this.props.organization.tech_team_size;
-
-    return (
-      this.props.techSizeSearch === null ||
-      (sizeInput === "1" && techTeamSize < 25) ||
-      (sizeInput === "2" && techTeamSize > 25 && techTeamSize < 50) ||
-      (sizeInput === "3" && techTeamSize > 50)
-    );
-  },
   render: function() {
-    if ((!this.nameMatched()) || (!this.teamSizeMatched())) {
-      var styles = { display: "none" };
-    }
-
-    return <div style={styles} className="org-container col-lg-3 col-md-4 col-sm-6 col-xs-12 text-center" data-id={ this.props.organization.id } >
+    return <div className="org-container col-lg-3 col-md-4 col-sm-6 col-xs-12 text-center" data-id={ this.props.organization.id } >
               <img src={ this.props.organization.logo } id="org-logo"/>
               <h3><a href={ "/organizations/" + this.props.organization.id } className="link-to-org">{ this.props.organization.name }</a></h3>
               <p>{ this.props.organization.employee_count } employees</p>
diff --git a/app/assets/javascripts/components/organization_display.jsx b/app/assets/javascripts/components/organization_display.jsx
index 46579d2..9853cd8 100644
--- a/app/assets/javascripts/components/organization_display.jsx
+++ b/app/assets/javascripts/components/organization_display.jsx
@@ -1,23 +1,42 @@
 var OrganizationsDisplay = React.createClass({
   getInitialState: function() {
-    return { searchTerm: null, techSizeSearch: null, techStacks: null };
+
+    return { organizations: [], currentPage: 1, searchTerm: null, techSizeSearch: null, techStacks: null };
+  },
+
+  componentDidMount: function() {
+    var organizations = this.props.organizations.map(function(organization) {
+      return <Organization organization = { organization }
+                           key = { organization.id } />
+    }.bind(this));
+    this.setState({organizations: organizations});
+    console.log("App Component is mounted");
   },
+
   filterOrganizations: function() {
     var searchTerm = this.refs.searchInput.value.toLowerCase();
     this.setState({ searchTerm: searchTerm });
   },
-  filterOrganizationTechSize: function() {
-    var techSizeSearch = this.refs.sizeInput.value;
-    this.setState({ techSizeSearch: techSizeSearch });
-  },
-  render: function() {
-    var organizations = this.props.organizations.map(function(organization, index) {
-      return <Organization organization = { organization }
-                           key = { index }
-                           searchTerm = { this.state.searchTerm }
-                           techSizeSearch = { this.state.techSizeSearch }/>
-    }.bind(this));
+  loadMore: function() {
+    var newPage = (this.state.currentPage + 1);
+      $.ajax({
+        url: "http://localhost:3000/organizations.json?page=" + newPage,
+        method: "GET",
+        error: function() {
+          alert("Can't load more questions");
+        },
+        success: function(data) {
+          console.log(data)
+          var newElements = data.map(function(organization) {
+            return <Organization organization = { organization }
+                                 key = { organization.id }/>
+          });
+          this.setState({organizations: this.state.organizations.concat(newElements), currentPage: newPage})
+        }.bind(this)
+      });
+    },
 
+   render: function() {
     return <div>
               <input id="organization-search" type="text" className="form-control" placeholder="Search" ref="searchInput" onChange= { this.filterOrganizations } ></input>
 
@@ -28,9 +47,10 @@ var OrganizationsDisplay = React.createClass({
                 <option value="3"> 50 or more </option>
               </select>
               <br />
-              <div class="container-fluid text-center">
-                <div class="row">
-                  { organizations }
+              <div className="clearfix"></div>
+              <div className="container-fluid text-center">
+                <div className="row">
+                  { this.state.organizations }
                 </div>
               </div>
               <br />
diff --git a/app/controllers/organizations_controller.rb b/app/controllers/organizations_controller.rb
index ea44a18..e9df881 100644
--- a/app/controllers/organizations_controller.rb
+++ b/app/controllers/organizations_controller.rb
@@ -2,7 +2,7 @@ class OrganizationsController < ApplicationController
   before_action :authenticate_user!, except: [:index, :show, :filter]
   before_action :find_organization, only: [:show, :edit, :update, :destroy]
 
-  ORGANIZATIONS_PER_PAGE = 18
+  ORGANIZATIONS_PER_PAGE = 16
 
   def new
     if current_user.organization.present?
@@ -29,6 +29,10 @@ def index
     else
       @organizations = Organization.published.page(params[:page]).per(ORGANIZATIONS_PER_PAGE)
     end
+    respond_to do |format|
+      format.html
+      format.json {render json: @organizations}
+    end
   end
 
   def edit
diff --git a/app/views/organizations/index.html.erb b/app/views/organizations/index.html.erb
index 14ada6e..43051b7 100644
--- a/app/views/organizations/index.html.erb
+++ b/app/views/organizations/index.html.erb
@@ -27,11 +27,3 @@ google.maps.event.addDomListener(window, 'page:load', initialize);
 <%= select_tag :technologies, options_for_select(@technologies.each.map{|stack| stack.name}), class: "chosen-select form-control", id: "tech-stacks", multiple: true, data: {placeholder: "Tech Stacks (Max 3)"} %>
 
 <%= react_component "OrganizationsDisplay", organizations: @organizations, techStacks: @technologies %>
-
-<!-- Pagination for Organizations -->
-<div class="container-fluid text-center">
-  <%= paginate @organizations %>
-</div>
-<div class="container-fluid text-center">
-  <%= page_entries_info @organizations %>
-</div>

From 4a6a5e4b63294739eae39bca9dd8c45348c06895 Mon Sep 17 00:00:00 2001
From: Wei Yi <weiyi2017@gmail.com>
Date: Thu, 28 Jul 2016 19:13:34 -0700
Subject: [PATCH 2/3] added the load more like that was missing

---
 app/assets/javascripts/components/organization_display.jsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/app/assets/javascripts/components/organization_display.jsx b/app/assets/javascripts/components/organization_display.jsx
index 9853cd8..548cf85 100644
--- a/app/assets/javascripts/components/organization_display.jsx
+++ b/app/assets/javascripts/components/organization_display.jsx
@@ -52,6 +52,7 @@ var OrganizationsDisplay = React.createClass({
                 <div className="row">
                   { this.state.organizations }
                 </div>
+                <a href="javascript:void(0);" onClick={this.loadMore}>Load more...</a>
               </div>
               <br />
             </div>;

From 9597327e6bbce2f9381485a8a39b84d5114f2ccf Mon Sep 17 00:00:00 2001
From: Wei Yi <weiyi2017@gmail.com>
Date: Thu, 28 Jul 2016 19:17:17 -0700
Subject: [PATCH 3/3] remove console log

---
 app/assets/javascripts/components/organization_display.jsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/app/assets/javascripts/components/organization_display.jsx b/app/assets/javascripts/components/organization_display.jsx
index 548cf85..7ac633a 100644
--- a/app/assets/javascripts/components/organization_display.jsx
+++ b/app/assets/javascripts/components/organization_display.jsx
@@ -10,7 +10,6 @@ var OrganizationsDisplay = React.createClass({
                            key = { organization.id } />
     }.bind(this));
     this.setState({organizations: organizations});
-    console.log("App Component is mounted");
   },
 
   filterOrganizations: function() {
@@ -26,7 +25,6 @@ var OrganizationsDisplay = React.createClass({
           alert("Can't load more questions");
         },
         success: function(data) {
-          console.log(data)
           var newElements = data.map(function(organization) {
             return <Organization organization = { organization }
                                  key = { organization.id }/>