add load more button on index page

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>

app/assets/javascripts/components/organization_display.jsx

@@ -1,23 +1,40 @@
 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});
   },
+
   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) {
+          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,10 +45,12 @@ 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>
+                <a href="javascript:void(0);" onClick={this.loadMore}>Load more...</a>
               </div>
               <br />
             </div>;

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

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>