feat: add pagination to members page

[SankhaChak]

• Increased limit for initial query
• Restricted refetch query limit to 20
• Introduced pagination
• UI changes - Show All button text changed to Show More

Screenshots -

Before -

After -

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
wonderverse-web	✅ Ready (Inspect)	Visit Preview	Sep 1, 2022 at 9:03PM (UTC)
wondrous-app	✅ Ready (Inspect)	Visit Preview	Sep 1, 2022 at 9:03PM (UTC)

[Lamperoyge]

do we actually need the ref here? I think we can use this without the ref and without showShowMoreButton state

we can do this: hasMore && podUserMembershipRequests ? <ShowMoreBtn ... /> : <... />

This way I think we can remove the ref and the additional state, let me know if this makes sense

[SankhaChak]

since we're using different limits for the initial query and refetch, the custom hook uses the initial limit to decide if there are more data, thus using the hasMore variable from the hook would not give us the correct data.

The ref here is used to prevent the data being lost during re-renders.

Does that make sense ?

[juniusfree]

@SankhaChak Please correct me if I'm wrong. To set the initial value of 'showShowMoreButton,' we can do the following:
const [showShowMoreButton, setShowShowMoreButton] = useState(hasMore);

As a result, we can remove the 'useRef' and also the 'useEffect' below.

Let's wait for adrian's comment, though.

[SankhaChak]

I believe not, since the component does re-render a couple of times and the first time the hook is called with undefined id, the hasMore value is returned false which is then preserved across the re-renders and not changed even if the hasMore value changes.

Let me know if that makes sense

[juniusfree]

Sorry, got it. 😅 I don't know if you tried this, but this works when I tested it even without using useRef.

useEffect(() => { setShowShowMoreButton(hasMore); }, [hasMore]);

[Lamperoyge]

so I played a little with your hook and did few tests and it seems to work as expected: https://www.toptal.com/developers/hastebin/yapuveqiwe.js

so basically you set the state inside the hook and then check previousData from the query, if data exists then it means it's a refetch, else it's first mount. You can use this to check the LIMIT you want to use. then you can remove the initialLoad, showMoreButton state and also the initialLoad ref. Then in your component just check for the hasMore from the hook

Let me know what you think @SankhaChak @juniusfree

[Lamperoyge]

const useGetOrgMemberRequests = (orgId) => { const [hasMore, setHasMore] = useState(false); const [getOrgUserMembershipRequests, { data, fetchMore, previousData }] = useLazyQuery(GET_ORG_MEMBERSHIP_REQUEST, { onCompleted: ({ getOrgMembershipRequest }) => { const limitToRefer = previousData ? REFETCH_QUERY_LIMIT : QUERY_LIMIT; setHasMore(getOrgMembershipRequest?.length >= limitToRefer); }, }); useEffect(() => { if (orgId) { getOrgUserMembershipRequests({ variables: { orgId, limit: QUERY_LIMIT, }, }); } }, [orgId, getOrgUserMembershipRequests]); // const hasMore = data?.getOrgMembershipRequest?.length >= QUERY_LIMIT; return { data: data?.getOrgMembershipRequest, fetchMore, hasMore }; }; also leave this here, tho the hastebin link is more readable imo

[Lamperoyge]

if previousData is undefined it means it's the first time the query is called so we basically hook to this

[SankhaChak]

Seems like a great solution to me @Lamperoyge

Added a few changes to this -
the getOrgMembershipRequest value returned in the onCompleted callback was containing all the requests till that point, so had to create another variable to calculate the updated data length.

Code -

const updatedDataLength = previousData ? getOrgMembershipRequest?.length - previousData?.getOrgMembershipRequest?.length : getOrgMembershipRequest?.length;

This has one issue though, let's say the last fetchMore returns exactly the number of requests as the limit, the next requests' onCompleted callback doesn't run for some reason.

I'm trying to debug this, let me know if you know any solution for the same

[SankhaChak]

Have made the necessary changes. Thank you @Lamperoyge and @juniusfree for your valuable feedback, got to learn quite a lot while going through this PR :)

[juniusfree]

These are some of my observations. Please let me know if you have questions.

[juniusfree]

lgtm 👍👍