Deleted events remain in list view until a full refresh

[blakeblackshear]

The delete functionality works to delete events, but the frontend doesn't remove the deleted event from the list view until I refresh the page. I am testing in development where I have only 5 events.

cc @mitchross

[mitchross]

Looking.....

[mitchross]

@blakeblackshear cc @paularmstrong

Still learning this web code base. Can you help me under stand what this shouldFetch does? Ive tried debugging and reading the values in chrome debugger, but still a bit confused.

My initial debugging of this bug shows that in Events.jsx , 'payload' is still holding on the the event in the array of which was deleted. So the ''APPEND_EVENTS' gets called, but the payload hasn't been updated/notified that it needs to be refreshed

Trying to figure out where to do that.

On the delete event route call back, I can pass a query param like ?refresh=true so that we can leverage that for payload refresh potentially....

Looking for thoughts here. Thanks!

[paularmstrong]

IIRC, for this, first I was going to rework the API a bit to fix the after ordering so that we can pull events before a timestamp with a limit, but have them sliced at those closest to the after event eg:

• Database events has items 1-100
• UI is showing events 51-70
• We want to show newer events (higher number)
• We request after=70&limit=10 and expect 71-80
• However, right now we'll get items 91-100

In terms of shouldFetch, yes, it's helping keep a cache of the results so that we don't re-fetch data, since events are static once they're in the DB. This isn't as bug with shouldFetch necessarily, but rather the way events are fetched at all – there's no handling in the scrolling IntersectionObserver to watch the first node and determine if we should fetch newer events and how to even do that (because of the issue above)

[mitchross]

@paularmstrong Do you want to take this bug? Im not super sure how to solve this.

Here is what I noticed after several hours of debugging.

1. Events page loads and fetches all data. I stepped thru the shouldFetch logic and under stand the cache a bit better.
2. User clicks specific event and clicks delete. On Success of deletion we call route('/events', true);
3. Browser redirects to the Events.jsx page, but due to shouldFetch logic, the page isn't refresh ( makes sense from a performance standpoint). However there's no message/indication on that page to let the page know to refresh its data payload ( from a react useEffect / hook standpoint )

Do you have a flow chart of all methods in this class that are fired?

[mitchross]

@paularmstrong just following up on next steps... :)

[sinamics]

What if we slice the event out from the local memory without fetching new data from servere?

there's no handling in the scrolling IntersectionObserver to watch the first node and determine if we should fetch newer events and how to even do that.

Could we utilize websocket, so UI gets a notification / banner that newer events is available?
By doing so, we still keep the performance and let the user desides if new data should be loaded or not.

[mitchross]

@sinamics @paularmstrong

I believe the easiest/best way is to use Context API and update state.

[sinamics]

I found it pretty troublesome to find a good way to filter the event out from context as they are stored with url as a key, and mapping though all the url (key) to find the correct ID may not be the best option.

However, i have made a fix that solves this issue, but if @paularmstrong is gonna rebuild the whole API then i wont bother a PR, and im not sure my solution would be the best either 😄

release-0.9.0...Sinamics:delete-event

[mitchross]

@sinamics I think this solution looks fine

@paularmstrong @blakeblackshear think it would be a fine stop gap for release 9

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.