deltaepsilon / firebase-paginator Goto Github PK

as far as i can tell this will get stuck in a loop if your dataset is smaller than itemsPerPage

assuming keys.length = 3, and pageSize=10

 if (keys.length === pageSize + 1) {  // false
  if (isLastPage) {
    delete collection[keys[keys.length - 1]];
  } else {
     delete collection[keys[0]];
  }
} else if (isForward) {  // false for default first page, gets called on second loop from last condition
  return setPage(); // this will loop us, fail the length check and then hit the condition below
} else {  // we will get here first time, then hit the isForward condition in the loop, then loop back here?
  return setPage(undefined, true, true);
}

thanks
J

I'm trying to use this library with create-react-app which leverages webpack.

When I try to import FirebasePaginator from "firebase-paginator" I get a bundle error. When I click on the console error, it points to the index file. Its possibly related how the module is organized.

I'd like to take the firebase-paginator.js and turn it into a FirebasePaginator class (it's currently a function) and update the codebase to es6. I won't change any current functionality. Would you be open for me to make this pull request after I make the changes?

I've actually started to do this in this work-n-progress grid demo. I took firebase-paginator.js and am using it in redux to store the state. I just need to finish updating the state after a bulk delete to complete the demo. I also have a few minor paging bugs but its mostly working thanks to your awesome library!

When I googled around, I found no other libraries that matched this in terms of ease of use. I really like your API approach hiding all the complexity behind simple: next, previous, gotoPage. It was exactly what I was looking for - I learned a lot - and I'd like to give back if possible.

On first load console.log(paginator.collection) prints:
{-LFkHWJvq5rgxoniuf22: 14}
When the button "Load More Jobs" is clicked the console prints:
{-LFkHWJvq5rgxoniuf22: 14}
if I keep pressing the button the console keeps logging the same:
{-LFkHWJvq5rgxoniuf22: 14}

<link rel="import" href="../bower_components/polymer/polymer-element.html">
<script src="firebase-paginator/firebase-paginator.js"></script>
<dom-module id="job-list">
  <template>
    <style include="oficio-styles">
     :host {
      display: block;
    }
    </style>
    <dom-repeat items="[[searchResults]]" as="job">
      <template>
        <job-item job-key="[[job]]"></job-item>
      </template>
    </dom-repeat>
     <paper-button class="white" disabled$=[[_isLastPage]] on-tap="_loadMore">Load More Jobs</paper-button>
  </template>
  <script>
  class JobList extends ReduxMixin(Polymer.Element) {
    static get is() {
      return 'job-list';
    }
    static get properties() {
      return {
        _paginator: {
          type: Object
        }
      };
    }
    ready(){
      super.ready();
      this._paginator = new FirebasePaginator(firebase.app().database().ref(`/active-jobs`), {finite: false, pageSize: 1, retainLastPage: true});
      this._initPaginator(this._paginator);
      this.jobs = [];
    }
    _initPaginator(paginator) {
      paginator.listen(function(name, payload) {
        if (name === 'value') {
          console.log(paginator.collection);
          this.set('_isLastPage', paginator.isLastPage);
          var collection = paginator.collection;
          var keys = Object.keys(collection);
          var i = keys.length;
          while (i--) {
            this.push('jobs', keys[i])
          }
        }
      }.bind(this));
    }
    _loadMore(){
      this._paginator.next();
    }
  }
  window.customElements.define(JobList.is, JobList);
  </script>
</dom-module>

this is the data in active-jobs:

{
  "-LFk7O9q8FfWBHoHqIt3" : 6,
  "-LFkHJ0M6UIVP-kCUJg8" : 17,
  "-LFkHWJvq5rgxoniuf22" : 14
}

Hey,

I was wondering at which point does Finite Pagination become a problem? Is the shallow endpoint restricted to some number of results?

Hi!
On node v8.11.1 I receive this:

Hi

Thanks for the plugin.

I have an empty data set and this part of code causes a continuous loop due to the promise not resolving (I guess).

if (keys.length === pageSize + 1) {

keys.length is 0, no results, so it will never match pageSize 0 + 1

Changing it to

if (keys.length === pageSize + 1 || !keys.length) {

Seemed to have fixed it for me.

Hi! I have an issue using infinite pagination. If the number of items per page is minor than the total records and isn't a multiple of it, the last page has always repeated items. For example:

• Total items = 10, items per page = 2 => no problem here, items per page is minor than the total but it's a multiple. 5 pages in total.

• Total items = 11, items per page = 2 => 6 pages in total, but the last one has two items instead of one. The repeated item also appears in the page 5. In this case the last page is always full and this is an evident issue if I'm using big pages... For example, if I have 1001 records, and pages of 100, the last page is going to have 100 records too, with 99 records repeated!

Hi!
Thank for this job!
I'm trying include paginator to isomorphic react-firebase (latest 16 and 4.6.2) app like this

// functions/firebase-database.js:
const FirebasePaginator = require('firebase-paginator')
// src/containers/App.jsx:
const FirebasePaginator = typeof window !== 'undefined' ? window.FirebasePaginator: undefined;

Expected outcome

get basic functionality with default options:

const paginator = new FirebasePaginator(firebase.database().ref('/employees').orderByChild('level'));
const getAllEmployees = () => {
  return paginator.once('value').then(snap => {
    return {employees: snap.val()};
  });
};

Actual outcome

TypeError: FirebasePaginator is not a constructor

The module is not installed because of the version of 'node'.

Expected outcome

A successful installation.

Actual outcome

Error:

error [email protected]: The engine "node" is incompatible with this module. Expected version "5.3.0".
error Found incompatible module

Steps to reproduce

# node -v
v7.3.0
# yarn add firebase-paginator

Examples show

var paginator = new FirebasePaginator(ref);
var itemsList = [];
var handler = function() {
  collection = paginator.collection();
};

But its paginator.collection

var paginator = new FirebasePaginator(ref);
var itemsList = [];
var handler = function() {
  collection = paginator.collection;
};

Hi there,

As I understand newly added items don't appear immediately when using finite pagination. However, is there a way to reload the paginator, so it fetches all items again? This way I would be able to refresh it when a new item was added. Something like the code below maybe?

itemRef.limitToLast(1).on('child_added', snapshot => {
     paginator.reload();
});

I'm attempting to use this in a NodeJS project. I've tried ES5 and ES6 imports.

Version: "firebase-paginator": "^1.0.13",

var FirebasePaginator = require('firebase-paginator')

Results in the error:

FirebasePaginator is not a constructor on line 
const paginator = new FirebasePaginator(testRef, { pageSize: 5, finite: false });

adding .default to the import does not resolve the issue.

import FirebasePaginator from 'firebase-paginator';

Causes the following error

_firebasePaginator2.default is not a constructor

I got "Uncaught TypeError: _firebasePaginator2.default is not a constructor" because of this line I guess, I change it to "(!isBrowser)" and it works

@deltaepsilon
will you fix it? Or moreover, if you get a PR will you merge it?

Solved with #18 but now:

with

PS: With infinite pagination it works.. but I need finite.