Wrap facility search results with react-infinite via react-infininte-any-height #711

jwalgran · 2019-07-29T23:11:17Z

Overview

Wraps search facility results with react-infinite via react-infininte-any-height in preparation for loading more than 500 results.

Connects #705

Demo

Notes

React infinite requires that we specify the height of the list item container. We accomplish this by listening for window resize events, tracking the window size in the Redux state, then calculating the proper container size.

react-infinite-any-height is a wrapper around react-infinite that wraps each list item with a span and uses that span to calculate the height, preventing the need to force all list items to be the same height. There is a lot of variability in the length of facility names and addresses. On narrow screens some list items can be twice as tall as others.

Testing Instructions

Run ./scripts/update to install the new packages
Verify that the facility search UI works as before

Checklist

fixup! commits have been squashed
CI passes after rebase
CHANGELOG.md updated with summary of features or fixes, following Keep a Changelog guidelines

There was a single dependency in the `package.json` file that was not in correct alphabetical order.

We will use this to load additional facility search results on demand. Added by running this command on the development Vagrant VM. ``` docker-compose \ run --rm --no-deps app \ yarn add react-infinite@0.13.0 ```

kellyi · 2019-07-30T20:47:29Z

src/app/package.json

@@ -25,6 +25,8 @@
        "react-copy-to-clipboard": "5.0.1",
        "react-dom": "16.8.6",
        "react-hot-loader": "4.9.0",
+        "react-infinite": "0.13.0",
+        "react-infinite-any-height": "^2.3.0",


Consider removing ^ here just to stay in tune with the other imports.

Good idea. Will do.

Pinned the react-infinite-any-height version in fixup a9c5d89

kellyi · 2019-07-30T20:48:21Z

src/app/src/components/FilterSidebarFacilitiesTab.jsx

+        138, // Sidebar controls
+        51, // Footer
+        8, // Additional padding
+    ];


Wonder if we should set these values as constants somewhere if they're hard-coded in multiple places?

Good idea. Since we are styling with JS objects, we should have the luxury of just moving the values out to a shared constant.

Turns out it is not that easy. There are min-height and padding directives coming in from our top level stylesheet as well as Material UI that are complicating things. I am going to instead add class tags to the elements that we need to measure and do the height calculation on the fly.

Implemented a class-based height calculation in fixup abdafcf

kellyi · 2019-07-30T20:49:09Z

src/app/src/reducers/UIReducer.js

@@ -20,6 +21,10 @@ const initialState = Object.freeze({
        filterText: '',
        resetButtonClickCount: 0,
    }),
+    window: Object.freeze({
+        innerHeight: typeof window === 'object' ? window.innerHeight : null,
+        innerWidth: typeof window === 'object' ? window.innerWidth : null,


There is also https://lodash.com/docs/4.17.15#isObject but it probably does the same thing.

Interestingly there is a subtle difference. _.isObject considers a function to be an "object"

https://github.com/lodash/lodash/blob/9f865886f8ae22b205107b00b7b65871bfc9a2f0/lodash.isobject/index.js#L35-L38

Good to know, but it doesn't matter in this case. Switching to isObject will make things a bit more readable.

Switched to using isObject in fixup 2952bdf

kellyi · 2019-07-30T20:52:36Z

We may not need to worry about them but it appears that react-infinite & react-infinite-any-height cause some peer dependency warnings on yarn install.

kellyi

👍 This works well!

I noticed that the CHANGELOG wasn't updated with this PR, so reminder to update that before merging.

Tracking the window size will allow components with fixes sizes to respond accordingly. For example, `react-infinite` requires us to specify a fixed container height.

We plan to allow for the display of all matching search results rather than capping the result count at 500. Using `react-infinite` will allow us to trigger a request for additional items when the person searching for facilities scrolls to the bottom of the partial list. `react-infinite` forces us to explicitly set the size of the container and the size of each item. We are temporarily using a hardcoded 120px height for list items which looks ok for most results. In a future commit we can develop a "height calculator" that would allow us to resume using variable height list items.

`react-infinite-any-height` is a wrapper around `react-infinite` that wraps each list item with a span and uses that span to calculate the height, preventing the need to force all list items to be the same height. There is a lot of variability in the length of facility names and addresses. On narrow screens some list items can be twice as tall as others.

jwalgran · 2019-07-31T19:07:07Z

Thanks for the excellent suggestions.

jwalgran added 2 commits July 29, 2019 10:27

Sort JS dependencies

451ccdb

There was a single dependency in the `package.json` file that was not in correct alphabetical order.

Add react-infinite as a client dependency.

789d375

We will use this to load additional facility search results on demand. Added by running this command on the development Vagrant VM. ``` docker-compose \ run --rm --no-deps app \ yarn add react-infinite@0.13.0 ```

jwalgran force-pushed the jcw/infinite branch from 0d40f6f to 64c78b6 Compare July 30, 2019 17:14

jwalgran changed the title ~~Wrap facility search results with react-infinite~~ Wrap facility search results with react-infinite via react-infininte-any-height Jul 30, 2019

jwalgran marked this pull request as ready for review July 30, 2019 17:23

jwalgran requested a review from kellyi July 30, 2019 17:23

jwalgran assigned kellyi Jul 30, 2019

kellyi reviewed Jul 30, 2019

View reviewed changes

kellyi approved these changes Jul 30, 2019

View reviewed changes

kellyi assigned jwalgran and unassigned kellyi Jul 30, 2019

jwalgran added 4 commits July 31, 2019 11:58

Add redux action to track window size

6f11442

Tracking the window size will allow components with fixes sizes to respond accordingly. For example, `react-infinite` requires us to specify a fixed container height.

Update CHANGELOG

328b8bc

jwalgran force-pushed the jcw/infinite branch from 7d9e840 to 328b8bc Compare July 31, 2019 18:59

jwalgran merged commit f8b970d into develop Jul 31, 2019

jwalgran deleted the jcw/infinite branch July 31, 2019 19:07

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Wrap facility search results with react-infinite via react-infininte-any-height #711

Wrap facility search results with react-infinite via react-infininte-any-height #711

jwalgran commented Jul 29, 2019 •

edited

kellyi Jul 30, 2019

jwalgran Jul 31, 2019

jwalgran Jul 31, 2019

kellyi Jul 30, 2019

jwalgran Jul 31, 2019

jwalgran Jul 31, 2019

jwalgran Jul 31, 2019

kellyi Jul 30, 2019

jwalgran Jul 31, 2019

jwalgran Jul 31, 2019

kellyi commented Jul 30, 2019 •

edited

kellyi left a comment

jwalgran commented Jul 31, 2019

Wrap facility search results with react-infinite via react-infininte-any-height #711

Wrap facility search results with react-infinite via react-infininte-any-height #711

Conversation

jwalgran commented Jul 29, 2019 • edited

Overview

Demo

Notes

Testing Instructions

Checklist

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kellyi commented Jul 30, 2019 • edited

kellyi left a comment

Choose a reason for hiding this comment

jwalgran commented Jul 31, 2019

jwalgran commented Jul 29, 2019 •

edited

kellyi commented Jul 30, 2019 •

edited