What is a good pattern for how to handle a subset of objects.
Say I've got a list of Lockers, inside each Locker is a set of Items. The UI is something akin to this - we're going to hope that the ASCII art makes in through.
Locker#1 | Item #1 in Locker #2
Locker#2 ** | Item #2 in Locker #2
Locker#3 | Item #3 in Locker #2
| Item #4 in Locker #2
| Item #5 in Locker #2
| Item #6 in Locker #2
| Item #7 in Locker #2
| Item #8 in Locker #2
|
Locker #2 is selected (active). What I've been doing is setting a callback when locker #2 is activated and then doing a
ItemCollection.fetch({ data: { lid: LOCKER_ID }}) to fetch the subset of items that are ready for display. Which doesn't feel very backbone like.
What' the better approach -
Loading a subset of the models - if so is there a good example of how to do it?
Loading everything then doing Backbone filtering on the Collection?
Maybe an example of pagination that might be appropriate ?
I think everything depends on the amount of your data.
But I don't see any problem fetching the items Collection every time the filter changes. I really feel it is as Backbone way :). And this solution works for both cases: a lot of data, and few data.
As an optimization step you can cache the Collections and create new ones every time the filter changes. So you can reuse and already fetched one if the User click back to an already visited filter.
But still this optimization step is adding distance between your User and the fresh data. The User should reload the whole application to refresh his cached Collections. Or... add more code to reset Collections every X seconds... start to be a hard way.
So, in my opinion: re-fetch the Collection every time the User changes the filter sounds nice for me.
Related
I am currently building a calendar schedule view feature, where I have Month title as Header and the days as the items. I am currently fetching calendar event of about 6 weeks. which if the data is not present or so, it would still cover up the page and I can use onScrollEnd to query more data via useQuery.
But, I am trying to optimize my calendar feature and querying 6 weeks worth of events would not be ideal and would take time to load. thus, I was trying to find a way, where, if I can query let's say 1 week worth of data, if that does not have enough data (like 1-2 events) to cover the screen (for user to invoke onScrollEnd), then query next batch and so on and at the end wrapping the container with memo in order to help boost the load speed and lazy load data as required. Any idea how would this be possible?
I have looked at various examples of lazy loading such as:
https://snack.expo.dev/#johnborges/044274
etc, but my problem is that in these code examples, they do not cover the possibility of first or second batch/ page to have less data and querying for next page automatically.
I also thought of using FlatList nested with SectionList, but ended with conclusion that it would not be possible and data would be rendered twice.
What I want to happen:
<Schedule> --> component
render → Coordinate which Month in the SectionList should paginate through the events
<SectionList>
onEndReached → create more months
<Month>
<FlatList>
render → <Event />
onEndReached → fetch more events
<FlatList>
</Month>
</SectionList>
<Schedule>
So there are two "onEndReached" triggers, one to create more months when the user scrolls down the entire page and a second to get more events, when the user scrolls down the current month.
The Month component should just load 1 weeks worth of events at a time and paginate as the user is scrolling.. I somehow need some way to figure out that if the current week does not have enough data to cover the screen then query more data, and so one as always show the full page... Any help/ ideas would be appreciated. Thanks :).
I would try to measure the y position of the last element. If the y position is not close enough to the bottom, fetch more items. Store the previous fetch in the state. Add to that state the new fetch.
In my system, items (they are like blog posts), are published often.
In the main page I list 20 items, and there is a Load More button at the bottom, which will take the next 20 items. If I wait a while, there will be new blog posts in elastic, so If I click Load More, it will take the 20 items from 20 to 40, but there are new ones so it returns some items repeated.
The question is: how could I part from the last item published to paginate and get the next 20 items from that one? Like ignoring there are new items
I thought about making a query first to get the position (if there is a way to know the position of a specific item in a query) but it would be making the query twice.
I found the solution for this kind of cursor based pagination in elasticsearch:
https://www.elastic.co/guide/en/elasticsearch/reference/current/search-request-search-after.html
[EDIT]
This is what in the end worked for me
https://www.elastic.co/guide/en/elasticsearch/reference/current/search-request-scroll.html
I am implementing an activity feed similar to facebook or twitter's. I fetch newsfeed items in batches of x(I use RelayJS, x is the pagesize of connections). However, it may so happen that due to eager loading in the List View a lot of items are fetched for the news feed but the user doesn't scroll to the end to view them. How can I determine what news feed items a user has really seen so that I don't repeat them and only show the newer ones and the ones down below that were fetched but not shown to the user when he refreshes or opens the app next time? The easier solution is to discard all the x items that had been fetched as seen.
How is this info stored? A table of numUsers X numItems with booleans? A set of such items?
It depends a lot on your implementation. The most simple one would be return to the user only the information generated after their last login.
Now, if you want to actually keep track of the information that was actually seen by the user then I guess that is a lot more complex. Like storing every item ID and a flag to check if the user has seen it.
Then you can make a clean up on app close that will mark that very first item that you need to show them that they haven't seen. For example:
1 Not Seen
2 Not Seen
3 Seen
4 Not Seen
5 Not Seen
6 Seen
7 Seen
8 Seen
9 Seen
Upon closing the app, you store that you need to show them starting on the ID 5.
React router has very cool feature: if you have a list of items (Instagram for example) and if you click on one item, content opens in modal/overlay but if you copy-paste the link to new tab/window or share the link with a friend for example, it opens in its own page.
I would love to use this feature but I need to find a custom solution..
My posts are very data heavy
I've split posts data into 2 tables in database
1st is very lightweight containing essential data: 4-5 columns
2nd table is very heave, ~30 columns
When user uses search filter, list updates only with data from 1st table
If user clicks on post, it will open in a modal/overlay
I will recycle the data I already have (from 1st table) and also get rest of the data from 2nd table
However, when user shares the link or opens it in new tab/page, data from 1st table is not present. I would need to integrate a conditional logic:
If post opens in list view (modal/overlay), only get additinal 2nd table data
If it's opened in a new tab/window in its own page, get all the data, 1st table included
How could I integrate this with React router? Has anyone already tried it? This would also allow to use different layout/components when user opens item in page view. Is there a way to check it?
Or is there a flaw in my logic? I imagine list would update very fast because it doesn't require huge amount of data and also would modal/overlay because it recycles some of the data.
I read all the docs, also searched online - didn't find anything.
Modals in react router are great. I've used the pinterest example and adapted it to my own needs.
Ensure you do your check on state.modal===true in a master layout component to give you the modal styling.
you'll need to check if table 1 stuff is present in your state and dispatch an action to trigger the async call in componentDidMount. You should be fetching table 2 in all scenarios.
I have a VB2005 winforms application that will loads city data from my database table. This is to ensure that the user enters the correct city spelling, in order to receive an accurate quote. Currently, there are about 150K cities that are being loaded to the dropdown listbox on page load. It takes about 30-40 seconds for that page to load.
My initial thought was to allow the user to select the state first. Then load the city values. But the user has the option of going back and requesting a quote for a different city / state.
Is there a more efficient way to handle this?
Quotes are based on state and city name? If so, your approach sounds good, but consider basing quotes on zip instead, or zip/city name. Not everyone will find their city in your 150K list, and some don't live in named cities at all.
For starters you could have a BackgroundWorker or Thread load the data in the background into an array or list. You'd then pass this data to the comboBox when needed.
If you use this method, you must find a way of reindexing the fields from time to time though.