Comments (14)
Hi,
Can you post a sample of your code or even better create a github repository with a page/route to replicate the issue?
from pagination.
Great! will do it asap!
from pagination.
Hi @Kurounin ! Just pushed my repo to replicate the issue https://github.com/mgscreativa/meteor-kurounin-pagination-refresh-issue
You login as admin with "[email protected]" and password as "password" (without the quotes).
After that, go to the "Activities" top menu item and see the list, if you press F5, you will get an endless loading animation!. If you click any item in the "Creator" column you will filter activities by user, and if you press F5, endless loading again...
Another question: I'm implementing the filter by creator (the creator column) by modifying the filters of the pagination object in the createContainer HOC of imports/ui/components/DataGrid/DataGrid.js is that ok or should be implemented elsewhere?
Thanks a lot!
from pagination.
I spent some time trying to fix this, but the error seems to stem from somewhere else.
When refreshing the Tracker.autorun()
which does the subscription when you do this.pagination = new Meteor.Pagination()
seems to be invalidated and stopped, which is why the ready is never set to true.
I tried to do a hack and stop Meteor from invalidating that subscription, but it didn't help since changing pages would not work anymore (since the Tracker is still invalidated).
I'll have to investigate it further. Probably the issue lies in how the router is used.
A few things I noticed: in DataGrid.js you should return the actual pagination properties. There's no need to have the additional checks for number of items.
export default createContainer((props) => {
let filters = {};
if (props.match.params._id) {
filters = {
createdBy: props.match.params._id,
};
}
console.log(filters);
props.pagination.filters(filters);
return {
ready: props.pagination.ready(),
items: props.pagination.getPage(),
}
}, DataGrid);
from pagination.
Thanks @Kurounin ! I moved the filters setup to the Activities page component like this
this.filters = {}; if (match.params._id) { this.filters = { createdBy: match.params._id, }; } this.pagination = new Meteor.Pagination(ActivitiesCollection, { name: 'activities.paginatedList', filters: this.filters, sort: {}, perPage: 10, reactive: false, debug: true, });
And now my DataCrid createContainer HOC code looks like this
export default createContainer(props => (
{
ready: props.pagination.ready(),
items: props.pagination.getPage(),
}
), DataGrid);
from pagination.
Regarding the F5 issue will try to remove the datagrid component to see what happens...
from pagination.
Hi @Kurounin! Please check out my latest push to https://github.com/mgscreativa/meteor-kurounin-pagination-refresh-issue
Test the link Activities No DataGrid It just prints some data using your react example but no luck, if I press F5 it doesn't get ready!
from pagination.
@mgscreativa Take a look at the PR on your repository.
To fix the issue I moved the loading condition outside the main app component and deferred the rendering of the main app after it loaded to ensure that a separate Tracker computation is used.
from pagination.
Great! It does work now!
By the way, reviewing my first pagination example here https://github.com/mgscreativa/kurounin-pagination-react-example there's no issue with f5 reloading. The difference between my actual project and the first example repo is that I switched boilerplates, the first one uses a modified version of Meteor Chef Base, and the second uses Meteor Chef PUP, the main difference is that it uses createContainer from react-meteor-data and in the App component it creates a container to track some vars. On the other hand, the first repo uses a custom container HOC in /modules/container created with compose from react-komposer and a custom meteor/tracker in /modules/get-tracker-loader.
I think the issue is that the new boilerplate messes up with the main App component ant that maybe renders Meteor confused about other trackers...
from pagination.
Well, it almost did it...
Another issue I found here is that if I refresh with F5 and lets say I'm at page 3, the page counter gets reset to page 1...
Clicking on page 3:
Pagination activities.paginatedList non-reactive subscribe {} {"fields":{},"sort":{},"skip":20,"limit":10,"reactive":false}
pagination.js:240 Pagination activities.paginatedList find {"sub_CEdDXxQBiSWjSEuat":1} {"fields":{},"sort":{}}
pagination.js:240 Pagination activities.paginatedList find {"sub_CEdDXxQBiSWjSEuat":1} {"fields":{},"sort":{}}
After refresh with F5:
Pagination activities.paginatedList non-reactive subscribe {} {"fields":{},"sort":{},"skip":0,"limit":10,"reactive":false}
pagination.js:240 Pagination activities.paginatedList find {"sub_LRXBXoZJp7yFdreXh":1} {"fields":{},"sort":{}}
pagination.js:240 Pagination activities.paginatedList find {"sub_LRXBXoZJp7yFdreXh":1} {"fields":{},"sort":{}}
Take a look at the skip it got reset after F5...
from pagination.
The page gets reset because that information is not kept anywhere (url or local storage). To keep the page after refresh you could watch for changes to the currentPage()
of the pagination instance and set the current url to include a page parameter. In the router you will need to modify so it reads the page param from url and feeds it to the pagination (by instantiating the pagination component with the page
setting being the url parameter value).
from pagination.
Thanks @Kurounin! After a revision of the code, It seems harder than I thought to implement your suggestion. In the first place, I can certainly create a new route lets say '/reactive-datatable/page/:page' and I was able to get that param and modify the DataTablesList component through componentWillReceiveProps but I can't set the BootstrapPaginator page to highlight! I saw in the BootstrapPaginator source that will receive a page prop but it seems unimplemented yet.
For the rest, I think it's matter of using componentWillMount and componentWillReceiveProps combined with pagination.currentPage and setState.
Thanks a lot for the advise, if you can review the BootstrapPaginator to accept that page prop will be great.
PS1: At this time, the F5 hack did the trick, now I'm insisting on this for pure hobby on my own
PS2: pagination.currentPage() actually returns a string and not an integer! typeof pagination.currentPage() === string!
from pagination.
BootstrapPaginator doesn't have a page param, because it reads the current page directly from the pagination instance, so once you set the initial page to the pagination there's no need to do anything else for the paginator.
pagination.currentPage() is a number. You probably have it as a string because you didn't typecast it when you set the page from url.
from pagination.
@mgscreativa I created a new PR which implements the page url query param.
from pagination.
Related Issues (20)
- Question: can these subscriptions be "unblocked"? HOT 5
- Question: what is the best way to pass a "limit" parameter from the client to the server? HOT 3
- Could the package be modified to use "aggregate" and not "find"? HOT 2
- Is there a recommended way to "close" a pagination? HOT 2
- Meteor v3 upgrade? HOT 1
- How does one set a limit on the total maximum number of documents to retrieve? HOT 2
- I want to concatenate/transform the doc before publishing HOT 5
- 'Pagination undefined reactive subscribe' error HOT 2
- QUESTION: Does this package support infinite scrolling? HOT 4
- Can't get method totalItems() to work HOT 2
- Publication is never ready inside constructor HOT 11
- Custom sort on pagination HOT 3
- Search in all Pages from Pagination HOT 5
- Reactivity does not work. When adding a new record, the list of documents does not get updated. HOT 3
- How to programmatically got to the next page? HOT 1
- Can the pagination be initialized to display the last page? HOT 2
- Multiple pagination load order HOT 1
- Question: are aggregate queries supported? HOT 2
- How to catch the event when pagination is ready, AND the corresponding DOM elements finished rendering? HOT 2
- Pagination does not work with pub-sub-lite package.
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from pagination.