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
+ return

{ this.props.organization.name }

{ this.props.organization.employee_count } employees

diff --git a/app/assets/javascripts/components/organization_display.jsx b/app/assets/javascripts/components/organization_display.jsx index 46579d2..7ac633a 100644 --- a/app/assets/javascripts/components/organization_display.jsx +++ b/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 + }.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 - }.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 + }); + this.setState({organizations: this.state.organizations.concat(newElements), currentPage: newPage}) + }.bind(this) + }); + }, + render: function() { return
@@ -28,10 +45,12 @@ var OrganizationsDisplay = React.createClass({
-
-
- { organizations } +
+
+
+ { this.state.organizations }
+ Load more...

; 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 %> - - -
- <%= paginate @organizations %> -
-
- <%= page_entries_info @organizations %> -