USER STORY: Infinite scroll for Profiles

[blahosyl]

As a Use,

I want to browse profiles continuously,

so that I do not have to click a button to load more profiles

Acceptance Criteria

1. Profiles load automatically without the user having to click "next"
2. Spinner is showing while profiles are loading

Tasks

• install infinite scroll component npm install react-infinite-scroll-component(if not already installed)
• [x]create fetchMoreData in utils (if not already created)
• in ProfileList component, call Profile inside InfiniteScroll, with fetchMoreData in the next prop

[blahosyl]

Blocked by #59

[blahosyl]

Contacted tutor support: John determined that InfiniteScroll was not even triggering. He tried several remediations, including hardcoding the dataLength, destructuring the setProfileData function and removing my conditional test that cuts out the one profile, but nothing worked.

[blahosyl]

After some more searching on Stackoverflow, I found some suggestions that had to do with fixing the height of InfiniteScroll (or its container div.)

Adding 'id="scrollableDiv"' to the parent container of InfiniteScroll and 'scrollableTarget="scrollableDiv"' to InfiniteScroll did not work.

Adding height={400} to the props of InfiniteScroll finally triggered the loader and retrieved the next page of profile objects from the API. However, these are not rendered, and the component shows the spinner indefinitely.

[blahosyl]

As for the next prop of InfiniteScroll, fetchMoreData(useProfileData, useSetProfileData) does not make the right API call. The API call is determined by the 1st argument (resource in teh fetchMoreData() definition).

Thus, but both fetchMoreData(profileList, useSetProfileData) and fetchMoreData(profileList, useProfileData) make the right API call, but profileList.results is not updated. This could be down to the 2nd argument being wrong.

[blahosyl]

An alternative fix to InfiniteScroll not triggering is to set the following CSS properties on its container.

overflow: hidden; /* Hide any overflow beyond the content's size */
height: 100vh; /* Set the height equal to the viewport height to limit scrolling */

The rest of the suggestion does not seem to change much.

[blahosyl]

Solution by John Rearden: use a custom API call instead of using fetchMoreData()

[blahosyl]

Make ProfileList div scrollable