Basic pagination working

2017-04-07 04:50:46 +02:00
parent 5515774d17
commit 0fcee4a741
6 changed files with 90 additions and 85 deletions
--- a/web/components/Listings.js
+++ b/web/components/Listings.js
@@ -15,12 +15,17 @@ export default class Listings extends React.Component {
      //console.log('node.parentNode.scrollTop', node.scrollTop);
      //console.log('node.parentNode.clientHeight', node.clientHeight);

+      if (this.props && this.props.loadingMore) {
+
+        console.log('still loading!');
+        return;
+      }

      console.log('scrolling', node.scrollTop, node.scrollHeight, offset);
      if (offset < 50) {

        console.log('load more');
-        this.removeScrollListener();
+        //this.removeScrollListener();
        this.props.dispatch({type: 'LOAD_MORE_LISTINGS'});
      }
    }
@@ -46,15 +51,13 @@ export default class Listings extends React.Component {

  componentDidUpdate (prevProps) {
    console.log('RECEIVING PROPS: ', prevProps, 'new are', this.props);
-    //setTimeout(() => {
-      //this.attachScrollListener();
-    //}, 1000);
-    if (this.props.loadingMore != null) {
-      if (!this.props.loadingMore && prevProps.loadingMore) {
-        this.attachScrollListener();
-        console.log('ATTACHING AGAIN', this);
-      }
-    }
+
+    //if (this.props.loadingMore != null) {
+      //if (!this.props.loadingMore && prevProps.loadingMore) {
+        //this.attachScrollListener();
+        //console.log('ATTACHING AGAIN', this);
+      //}
+    //}
  }

  renderListings () {
@@ -131,7 +134,7 @@ export default class Listings extends React.Component {

  render () {

-    const {listings = (new Map())} = this.props;
+    const {listings = (new Map()), totalCount} = this.props;

    return (
      <div ref="listings" className="listings">
@@ -145,7 +148,7 @@ export default class Listings extends React.Component {
            </div>
          </div>
          <div className="listings-count">
-            {listings.size} rezultata
+            {totalCount} rezultata
          </div>
        </div>

--- a/web/components/Main.js
+++ b/web/components/Main.js
@@ -13,6 +13,7 @@ class Main extends React.Component {
      listingDetails: false,
      listings: (new Map()),
      imageIndex: 0,
+      page: 0,
      filters: {
        rooms: {},
        category: {}
@@ -89,7 +90,8 @@ class Main extends React.Component {

    map.addListener('idle', () => {
      console.log('idle');
-      this.refreshListings();
+      this.dispatch({type: 'MAP_IDLE'});
+      //this.refreshListings();
    });
  }

@@ -151,7 +153,7 @@ class Main extends React.Component {
      minPrice,
      maxPrice,
      category,
-      lastRecordId: this.state.lastRecordId
+      page: this.state.page
    });


@@ -161,16 +163,14 @@ class Main extends React.Component {

    properties
    .then(p => {
-      const lastRecordId = p.headers.get('X-Last-Record-Id');
-      console.log('lastRecordId', lastRecordId, p.headers);
      return {
        body: p.text(),
-        lastRecordId: p.headers.get('X-Last-Record-Id')
+        totalCount: p.headers.get('X-Total-Count')
      };
    })
-    .then(({body, lastRecordId}) => {
+    .then(({body, totalCount}) => {
      body.then(p => {
-      console.log('results_received: ', body, lastRecordId);
+      console.log('results_received: ', totalCount);
      const data = JSON.parse(p);

      const listingExists = (id) => {
@@ -252,8 +252,8 @@ class Main extends React.Component {
        action: {
          listings: data,
          newMarkers,
-          lastRecordId,
-          more
+          more,
+          totalCount
        }
      });
      });
@@ -362,6 +362,7 @@ class Main extends React.Component {
    } else {
      children.push(<Filters filters={this.state.filters} dispatch={this.dispatch.bind(this)} onClose={this.onCloseClick.bind(this)}/>);
      children.push(<Listings
+        totalCount={this.state.totalCount}
        loadingMore={this.state.loadingMore}
        listings={this.state.listings}
        dispatch={this.dispatch.bind(this)}
--- a/web/lib/api.js
+++ b/web/lib/api.js
@@ -8,7 +8,7 @@ export const loadProperties = ({
  maxSize  = '',
  rooms    = {},
  category = {},
-  lastRecordId
+    page = 1
 }) => {
  const allRooms = Object
    .keys(rooms)
@@ -22,11 +22,11 @@ export const loadProperties = ({

  // TODO: handle errors
  //return fetch(process.env.API_URL + '/api/search', {
-    let url = `http://localhost:3001/api/search/listings?bounds=${bounds}&minPrice=${minPrice}&maxPrice=${maxPrice}&rooms=${allRooms}&minSize=${minSize}&maxSize=${maxSize}&category=${allCategories}`
+    let url = `http://localhost:3001/api/search/listings?bounds=${bounds}&minPrice=${minPrice}&maxPrice=${maxPrice}&rooms=${allRooms}&minSize=${minSize}&maxSize=${maxSize}&category=${allCategories}&page=${page}`

-    if (lastRecordId) {
-      url += `&lastRecordId=${lastRecordId}`;
-    }
+    //if (lastRecordId) {
+      //url += `&lastRecordId=${lastRecordId}`;
+    //}

    return fetch(url, {
    //credentials: 'include'
--- a/web/lib/handlers.js
+++ b/web/lib/handlers.js
@@ -3,7 +3,7 @@ import { markSeen } from './api';
 const setMaxPrice = ({ type, action }, component) => {
  const maxPrice = parseFloat(action.maxPrice);
  component.setState({
-    lastRecordId: null,
+    page: 0,
    filters: {
      ...component.state.filters,
      maxPrice: isNaN(maxPrice) ? undefined : maxPrice,
@@ -15,7 +15,7 @@ const setMaxPrice = ({ type, action }, component) => {
 const setMinPrice = ({ type, action }, component) => {
  const minPrice = parseFloat(action.minPrice);
  component.setState({
-    lastRecordId: null,
+    page: 0,
    filters: {
      ...component.state.filters,
      minPrice: isNaN(minPrice) ? undefined : minPrice,
@@ -27,7 +27,7 @@ const setMinPrice = ({ type, action }, component) => {
 const setMinSize = ({ type, action }, component) => {
  const minSize = parseFloat(action.minSize);
  component.setState({
-    lastRecordId: null,
+    page: 0,
    filters: {
      ...component.state.filters,
      minSize: isNaN(minSize) ? undefined : minSize,
@@ -39,7 +39,7 @@ const setMinSize = ({ type, action }, component) => {
 const setMaxSize = ({ type, action }, component) => {
  const maxSize = parseFloat(action.maxSize);
  component.setState({
-    lastRecordId: null,
+    page: 0,
    filters: {
      ...component.state.filters,
      maxSize: isNaN(maxSize) ? undefined : maxSize,
@@ -78,8 +78,8 @@ const listingsLoaded = ({ type, action }, component) => {

  component.setState({
    listings: action.more ? (new Map([...component.state.listings, ...currentListings])) : currentListings,
-    lastRecordId: !action.more ? null : action.lastRecordId,
-    loadingMore: false
+    loadingMore: false,
+    totalCount: action.totalCount
  }, () => {
    component.markers = action.newMarkers;
    console.log('ALL LOADED', component.state.listings);
@@ -117,7 +117,7 @@ const viewImage = ({ type, action }, component) => {
 const searchPlaceChanged = ({ type, action }, component) => {
  component.setState({
    listingDetails: false,
-    lastRecordId: null
+    page: 0
  });
 };

@@ -126,7 +126,7 @@ const setRooms = ({ type, action }, component) => {

  component.setState(
    {
-      lastRecordId: null,
+      page: 0,
      filters: {
        ...component.state.filters,
        rooms: {
@@ -162,7 +162,7 @@ const setCategory = ({type, action}, component) => {

  component.setState(
    {
-      lastRecordId: null,
+      page: 0,
      filters: {
        ...component.state.filters,
        category: {
@@ -220,27 +220,26 @@ const backToResults = ({type, action}, component) => {
 const loadMoreListings = ({type, action}, component) => {
  console.log('loading more');

-  component.setState({
-    loadingMore: true
-  }, () => {
-    component.refreshListings(true);
-  });
+  const currentPage = component.state.page;
+  if (currentPage * 20 < component.state.totalCount) {
+    component.setState({
+      loadingMore: true,
+      page: currentPage + 1
+    }, () => {
+      component.refreshListings(true);
+    });
+  }
 }

-//const loadMoreListingsLoaded = ({type, action}, component) => {
-  //const currentListings = new Map();
-
-  //for (const listing of action.listings) {
-    //currentListings.set(listing._id, listing);
-  //}
-
-  //component.setState({
-    //listings: new Map([...component.state.listings, ...currentListings]),
-    //lastRecordId: action.lastRecordId
-  //}, () => {
-    //component.markers = action.newMarkers;
-  //});
-//}
+const mapIdle = ({type, action}, component) => {
+  component.setState({
+    page: 0
+  }, () => {
+    const scrollElem = document.querySelector('.right-content');
+    scrollElem.scrollTop = 0;
+    component.refreshListings();
+  })
+}

 const handlers = {
  SET_MIN_PRICE: setMinPrice,
@@ -259,7 +258,8 @@ const handlers = {
  SET_CATEGORY: setCategory,
  ON_LISTING_MOUSE_OVER: onListingMouseOver,
  BACK_TO_RESULTS: backToResults,
-  LOAD_MORE_LISTINGS: loadMoreListings
+  LOAD_MORE_LISTINGS: loadMoreListings,
+  MAP_IDLE: mapIdle
 };

 export const handleMessage = ({ type, action }, component) => {