React Native: Marking posts a user has seen on his activity feed - reactjs

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.

Related

how to store likes data in flutter

I'm developing an app in which I need to show come "coupons" I get from the API. I also have a "liked coupons" page where I need to show the ones the user has liked. I'm facing 2 problems here:
1- I don't know how to store likes, should I implement a local database for everything or should I ask our back-end team to save the liked/not liked state on the server?
2- I have a model class for coupons, and I have a coupon_list widget which is a horizontal listview.builder(). the problem is that some coupons are being showed in 2 or 3 different lists and I need them to all turn to liked when user likes an instance from a single list. how can I do that? (I want to do something like working with pointers in c++, passing the ACTUAL variable instead of it's value so it changes globally)
I would like to suggest you to store it in server as well. (Ask to your back-end team to add parameter) So that if user logout or sign in from different device "liked coupons" data will be available in all cases.
And for 2) multiple coupon entry you have to manage it via unique id. Like every coupon has its unique series no / pattern num. So you can put condition on that. i.e. Add "unique_no" to liked_list from all available list of coupon
Solution
Use Shared Preferences! This is something like a database on the device you are currently running. So if the user makes a like you can save that on their device!
To add Shared Preferences to your app look this video
Hope it helps!

How to query/ lazy load next batch if the current result did not fill up the page in React native

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.

How to have single store for each tab in redux [reactjs]?

We have a web app composed of several pages containing links of data retrieved from database. Upon clicking one link[data], the user should be directed to another page. For navigation between pages, we have used breadcrumb. The breadcrumb is stored in redux store. Currently, when the user tries to ctrl+click or open link in new tab, we managed to use single store across multiple tabs. Hence, if the user opens 3 separate links [data] in new tabs, the updates made on the breadcrumb affect previously opened tabs when these tabs/pages are refreshed. For example:
In homepage, I have these links:
Data_1
Data_2
Data_3
Current breadcrumb in the homepage is like this:
HomePage/
Once the user opens Data_1 in new tab, the expected breadcrumb in the new tab is:
HomePage/Data_1/
Similarly, if the user tries to open Data_2 and Data_3, in new tabs, the breadcrumbs should appear as follows for tab 1 and tab 2, respectively:
HomePage/Data_2/
HomePage/Data_3/
In the current implementation, I managed to update the state of breadcrumb whenever new links are opened such that breadcrumb[0] would be equivalent to HomePage while breadcrumb[1] was initially Data_1, then became Data_2, and lastly Data_3. Hence, the last value of breadcrumb[1] is Data_3 since that's the last opened link. My problem is that whenever the user refreshes previously opened tabs/pages corresponding to Data_1 and Data_2, since they are all using a single store and breadcrumb[1] has been changed to Data_3, the breadcrumbs in Data_1 and Data_2 pages also become Data_3.
In this case, I can just think of using multiple stores since I perceive that it could be the only solution given my use case. Meanwhile, I can't find any sufficient documentation online regarding using multiple stores in redux. Maybe I can pass the store to the next page in params...? something like that
Can someone please help. Thanks in advance.
To emulate per-tab same site persistency, I would, right before the page is about to be refreshed (window.beforeunload or similar)
1 - Write to localStorage about my breadcrumb
2 - Refresh
3 - Read from localStorage about my breadcrumb to initialize myself properly (so the data here SHOULD be mine because i just wrote it)
4 - remove breadcrumb information from localStorage (to prevent other tabs from reading it)
Now, you still have the case where the user just closes the tab, so you would have stale data about the breadcrumb in your localStorage. You can add a little expiration mechanism (you might consider that data in the localStorage older than 10 seconds is stale and just pretend it isn't here and delete it at step 3.) Cookies would work pretty much the same, with a built-in expiration mechanism.

Is there a way to quickly add a new row of fields on a visulforce page?

I am trying to create a incident log in safesfore. The key aspect is that everything can be added on the same page reducing the amount of clicks that have to be made. There are 6 fields i have created:
Date Opened, Date closed, incident, reported to, reported by and notes.
I was wondering if there is a way to create an "add new" button that will create another row of the fields i have just lised. The idea being that the page does not refresh it is all done in real time.
Many thanks
You'll need a custom Visualforce page implementation.
There are 2 ways to do it
1) Building a list of records on apex and iterate over that list displaying the fields on the front end (vf page apex:repeat)-- Then when the button "add new" is clicked you'll append an empty record to the list and re-render the apex:repeat to reflect the changes.
This is good because you don't need a lot of boilerplate code since the records with be binded with the backend. However, the rerendering can lead to some performance issues in my experience.
2) Build a custom Javascript implementation, where you have an in memory collection and using DOM manipulation add/remove rows of the list. When the user saves the data from memory must be sent using JSON and a VF Remoting method can perform the JSON parsing and saving the rows.
Both are valid, the first is good to avoid boilerplate but the second is much faster (but you need to write some boilerplate).

Using google search api cursor in angular js app to get all results for google patent search

I want to make a search into google patent using the following URL which is obsolete
https://ajax.googleapis.com/ajax/services/search/patent?v=1.0&q=thumb%20wrestling%20apparatus&userip=192.168.1.102
It gives me limited number of records per page.
But at the end of the JSON it also returns the cursor which has start and label keys. So my question is that how can I use that cursor to show all the records in my search. Like if there are 8 pages and each page contains 4 records so I want to show all 32 records on my UI.
How can I achieve that?
And second question that is there REST APi for google patent search? If yes then how can I search the patent using REST API and how can I get all the records on one page?
It looks like the API is restricted to a maximum of 8 results per request (you can increase your current 4 results to 8 by using the query param rsz=8.
So I guess the only way to get all results is by performing multiple requests. So if the current page info data is...
"pages":[
{"start":"0","label":1},
{"start":"8","label":2},
{"start":"16","label":3},
{"start":"24","label":4},
{"start":"32","label":5}
]
You would make 5 requests chaining the start param start=0, start=8 ... and so on, extracting the results and pushing to an array store. If you're not already I recommend using something like Restangular, as it would make this process much easier.
Depending on how your UI is set out, it would be nice maybe to do this with some lazy loading as the user is scrolling through the list?

Resources