From 03d5be2c5a59fe049302f3d65be4574166b7fb21 Mon Sep 17 00:00:00 2001 From: oakes Date: Sun, 25 Jun 2023 18:50:01 -0400 Subject: [PATCH] Add pagination to reblogged_by dialog --- app/soapbox/actions/interactions.ts | 37 ++++++++++++++++++- .../ui/components/modals/reblogs-modal.tsx | 11 +++++- app/soapbox/reducers/user-lists.ts | 5 ++- 3 files changed, 49 insertions(+), 4 deletions(-) diff --git a/app/soapbox/actions/interactions.ts b/app/soapbox/actions/interactions.ts index 6615c4b639..13689b5030 100644 --- a/app/soapbox/actions/interactions.ts +++ b/app/soapbox/actions/interactions.ts @@ -76,6 +76,9 @@ const REMOTE_INTERACTION_FAIL = 'REMOTE_INTERACTION_FAIL'; const FAVOURITES_EXPAND_SUCCESS = 'FAVOURITES_EXPAND_SUCCESS'; const FAVOURITES_EXPAND_FAIL = 'FAVOURITES_EXPAND_FAIL'; +const REBLOGS_EXPAND_SUCCESS = 'REBLOGS_EXPAND_SUCCESS'; +const REBLOGS_EXPAND_FAIL = 'REBLOGS_EXPAND_FAIL'; + const messages = defineMessages({ bookmarkAdded: { id: 'status.bookmarked', defaultMessage: 'Bookmark added.' }, bookmarkRemoved: { id: 'status.unbookmarked', defaultMessage: 'Bookmark removed.' }, @@ -383,9 +386,10 @@ const fetchReblogs = (id: string) => dispatch(fetchReblogsRequest(id)); api(getState).get(`/api/v1/statuses/${id}/reblogged_by`).then(response => { + const next = getLinks(response).refs.find(link => link.rel === 'next'); dispatch(importFetchedAccounts(response.data)); dispatch(fetchRelationships(response.data.map((item: APIEntity) => item.id))); - dispatch(fetchReblogsSuccess(id, response.data)); + dispatch(fetchReblogsSuccess(id, response.data, next ? next.uri : null)); }).catch(error => { dispatch(fetchReblogsFail(id, error)); }); @@ -396,10 +400,11 @@ const fetchReblogsRequest = (id: string) => ({ id, }); -const fetchReblogsSuccess = (id: string, accounts: APIEntity[]) => ({ +const fetchReblogsSuccess = (id: string, accounts: APIEntity[], next: string | null) => ({ type: REBLOGS_FETCH_SUCCESS, id, accounts, + next, }); const fetchReblogsFail = (id: string, error: AxiosError) => ({ @@ -408,6 +413,31 @@ const fetchReblogsFail = (id: string, error: AxiosError) => ({ error, }); +const expandReblogs = (id: string, path: string) => + (dispatch: AppDispatch, getState: () => RootState) => { + api(getState).get(path).then(response => { + const next = getLinks(response).refs.find(link => link.rel === 'next'); + dispatch(importFetchedAccounts(response.data)); + dispatch(fetchRelationships(response.data.map((item: APIEntity) => item.id))); + dispatch(expandReblogsSuccess(id, response.data, next ? next.uri : null)); + }).catch(error => { + dispatch(expandReblogsFail(id, error)); + }); + }; + +const expandReblogsSuccess = (id: string, accounts: APIEntity[], next: string | null) => ({ + type: REBLOGS_EXPAND_SUCCESS, + id, + accounts, + next, +}); + +const expandReblogsFail = (id: string, error: AxiosError) => ({ + type: REBLOGS_EXPAND_FAIL, + id, + error, +}); + const fetchFavourites = (id: string) => (dispatch: AppDispatch, getState: () => RootState) => { if (!isLoggedIn(getState)) return; @@ -701,6 +731,8 @@ export { REMOTE_INTERACTION_FAIL, FAVOURITES_EXPAND_SUCCESS, FAVOURITES_EXPAND_FAIL, + REBLOGS_EXPAND_SUCCESS, + REBLOGS_EXPAND_FAIL, reblog, unreblog, toggleReblog, @@ -741,6 +773,7 @@ export { fetchReblogsRequest, fetchReblogsSuccess, fetchReblogsFail, + expandReblogs, fetchFavourites, fetchFavouritesRequest, fetchFavouritesSuccess, diff --git a/app/soapbox/features/ui/components/modals/reblogs-modal.tsx b/app/soapbox/features/ui/components/modals/reblogs-modal.tsx index 3a90cf0cd3..bb328d8f0c 100644 --- a/app/soapbox/features/ui/components/modals/reblogs-modal.tsx +++ b/app/soapbox/features/ui/components/modals/reblogs-modal.tsx @@ -1,7 +1,7 @@ import React, { useEffect } from 'react'; import { FormattedMessage } from 'react-intl'; -import { fetchReblogs } from 'soapbox/actions/interactions'; +import { fetchReblogs, expandReblogs } from 'soapbox/actions/interactions'; import { fetchStatus } from 'soapbox/actions/statuses'; import ScrollableList from 'soapbox/components/scrollable-list'; import { Modal, Spinner } from 'soapbox/components/ui'; @@ -16,6 +16,7 @@ interface IReblogsModal { const ReblogsModal: React.FC = ({ onClose, statusId }) => { const dispatch = useAppDispatch(); const accountIds = useAppSelector((state) => state.user_lists.reblogged_by.get(statusId)?.items); + const next = useAppSelector((state) => state.user_lists.reblogged_by.get(statusId)?.next); const fetchData = () => { dispatch(fetchReblogs(statusId)); @@ -30,6 +31,12 @@ const ReblogsModal: React.FC = ({ onClose, statusId }) => { onClose('REBLOGS'); }; + const handleLoadMore = () => { + if (next) { + dispatch(expandReblogs(statusId, next!)); + } + }; + let body; if (!accountIds) { @@ -45,6 +52,8 @@ const ReblogsModal: React.FC = ({ onClose, statusId }) => { itemClassName='pb-3' style={{ height: '80vh' }} useWindowScroll={false} + onLoadMore={handleLoadMore} + hasMore={!!next} > {accountIds.map((id) => , diff --git a/app/soapbox/reducers/user-lists.ts b/app/soapbox/reducers/user-lists.ts index 6652cfc24f..80a5fbafce 100644 --- a/app/soapbox/reducers/user-lists.ts +++ b/app/soapbox/reducers/user-lists.ts @@ -59,6 +59,7 @@ import { } from 'soapbox/actions/groups'; import { REBLOGS_FETCH_SUCCESS, + REBLOGS_EXPAND_SUCCESS, FAVOURITES_FETCH_SUCCESS, FAVOURITES_EXPAND_SUCCESS, DISLIKES_FETCH_SUCCESS, @@ -173,7 +174,9 @@ export default function userLists(state = ReducerRecord(), action: AnyAction) { case FOLLOWING_EXPAND_SUCCESS: return appendToList(state, ['following', action.id], action.accounts, action.next); case REBLOGS_FETCH_SUCCESS: - return normalizeList(state, ['reblogged_by', action.id], action.accounts); + return normalizeList(state, ['reblogged_by', action.id], action.accounts, action.next); + case REBLOGS_EXPAND_SUCCESS: + return appendToList(state, ['reblogged_by', action.id], action.accounts, action.next); case FAVOURITES_FETCH_SUCCESS: return normalizeList(state, ['favourited_by', action.id], action.accounts, action.next); case FAVOURITES_EXPAND_SUCCESS: