feat(web): auto-paginate events page

[paularmstrong]

This ended up being a lot larger than originally imagined, because of the need to lump multiple things together.

1. Adds an api layer

These custom hooks in web/api/index.jsx handle fetching data and retaining in-memory cache of the API requests, given the query parameters. They include a forceRefetch argument to allow replacing the cache with the results of a new call. If this parameter is not included (and is not unique since the last time it was used), the data will be reused from memory instead of attempting to query the API again.

This introduces a small dependency, immer, which allows us to ensure data stored is immutable and easy to update in the reducers.

2. Adds auto-pagination to the Events page

• Fixes a bug in the python HTTP API that prevented querying unique events using before and after timestamps
• Implements local state to the Events page using a reducer to track all events across paginated queries
• Uses an IntersectionObserver to watch the last row of the table to determine if it should attempt to fetch more events
• If the API returns fewer than the limit (hard-coded to 25, ~10kB JSON 🎉 ), assume we've reached the end of available events and stops looking for more

3. Adds top-level filters to Events page

• <select> dropdowns that update the page, clearing the current set of events displayed on change

closes #648
closes #601
closes #650

Tested on Chrome, Firefox, and Safari (all latest)

[blakeblackshear]

So are you effectively paging by using the before and after parameters? I'm guessing the request size is so large because of the thumbnails. Did you look at using the thumbnail.jpg endpoint instead?

[paularmstrong]

The api/events/ endpoint doesn't currently have a filter to not include them. That's something else that would need to be added in order to purge down the size of the JSON response.

I'm only paging on before and not after at the moment. There would need to be some considerable logic added to make it work bi-directionally. That's maybe something we could look into another time – and then be able to retain scroll position (which also comes with a lot of extra work & logic)

[blakeblackshear]

Mostly just curious. I can add the parameter to exclude thumbnails if you want to start passing it and pretending that it isn't returned. Then the browser can cache the images if we update the cache control headers for that path.

[paularmstrong]

Yeah we can definitely do that

[blakeblackshear]

Thinking about it a little more, it make make more sense to set the header from python on that endpoint. If the event is ongoing, the image can change, so we wouldn't want it to cache. Once it is being pulled from the database, it can't change and we can allow caching.

[paularmstrong]

Can definitely choose to display via base64 if it's provided in the response, falling back on the URL if not. I took a look at peewee, but my Python is a little rusty and I couldn't quickly figure out how to elegantly filter some fields from the model. Appreciate if you have time to take a look and solve it, or point me in the right direction.

[blakeblackshear]

I created a release-0.8.1 branch. I also created milestones for 0.8.1 and 0.8.2. Go ahead and scope out whatever you think can be done on the next day or so and assign to 0.8.1. Hoping to get that release out this weekend.

[blakeblackshear]

I have added the parameter on the release-0.8.1 branch with this PR.

[blakeblackshear]

Feel free to merge PRs once I have approved them.

[paularmstrong]

Cool. Wasn't sure if you were holding off for any reason 🎉