From 500ac3eefea94548e693323bc7fc2c72531f7ee3 Mon Sep 17 00:00:00 2001 From: oakes Date: Sun, 25 Jun 2023 18:38:48 -0400 Subject: [PATCH] Add pagination to favourited_by dialog --- app/soapbox/actions/interactions.ts | 39 +++++++++++++++++-- .../ui/components/modals/favourites-modal.tsx | 11 +++++- app/soapbox/reducers/user-lists.ts | 5 ++- 3 files changed, 50 insertions(+), 5 deletions(-) diff --git a/app/soapbox/actions/interactions.ts b/app/soapbox/actions/interactions.ts index 77bccb41f..6615c4b63 100644 --- a/app/soapbox/actions/interactions.ts +++ b/app/soapbox/actions/interactions.ts @@ -3,7 +3,7 @@ import { defineMessages } from 'react-intl'; import toast from 'soapbox/toast'; import { isLoggedIn } from 'soapbox/utils/auth'; -import api from '../api'; +import api, { getLinks } from '../api'; import { fetchRelationships } from './accounts'; import { importFetchedAccounts, importFetchedStatus } from './importer'; @@ -73,6 +73,9 @@ const REMOTE_INTERACTION_REQUEST = 'REMOTE_INTERACTION_REQUEST'; const REMOTE_INTERACTION_SUCCESS = 'REMOTE_INTERACTION_SUCCESS'; const REMOTE_INTERACTION_FAIL = 'REMOTE_INTERACTION_FAIL'; +const FAVOURITES_EXPAND_SUCCESS = 'FAVOURITES_EXPAND_SUCCESS'; +const FAVOURITES_EXPAND_FAIL = 'FAVOURITES_EXPAND_FAIL'; + const messages = defineMessages({ bookmarkAdded: { id: 'status.bookmarked', defaultMessage: 'Bookmark added.' }, bookmarkRemoved: { id: 'status.unbookmarked', defaultMessage: 'Bookmark removed.' }, @@ -412,9 +415,10 @@ const fetchFavourites = (id: string) => dispatch(fetchFavouritesRequest(id)); api(getState).get(`/api/v1/statuses/${id}/favourited_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(fetchFavouritesSuccess(id, response.data)); + dispatch(fetchFavouritesSuccess(id, response.data, next ? next.uri : null)); }).catch(error => { dispatch(fetchFavouritesFail(id, error)); }); @@ -425,10 +429,11 @@ const fetchFavouritesRequest = (id: string) => ({ id, }); -const fetchFavouritesSuccess = (id: string, accounts: APIEntity[]) => ({ +const fetchFavouritesSuccess = (id: string, accounts: APIEntity[], next: string | null) => ({ type: FAVOURITES_FETCH_SUCCESS, id, accounts, + next, }); const fetchFavouritesFail = (id: string, error: AxiosError) => ({ @@ -437,6 +442,31 @@ const fetchFavouritesFail = (id: string, error: AxiosError) => ({ error, }); +const expandFavourites = (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(expandFavouritesSuccess(id, response.data, next ? next.uri : null)); + }).catch(error => { + dispatch(expandFavouritesFail(id, error)); + }); + }; + +const expandFavouritesSuccess = (id: string, accounts: APIEntity[], next: string | null) => ({ + type: FAVOURITES_EXPAND_SUCCESS, + id, + accounts, + next, +}); + +const expandFavouritesFail = (id: string, error: AxiosError) => ({ + type: FAVOURITES_EXPAND_FAIL, + id, + error, +}); + const fetchDislikes = (id: string) => (dispatch: AppDispatch, getState: () => RootState) => { if (!isLoggedIn(getState)) return; @@ -669,6 +699,8 @@ export { REMOTE_INTERACTION_REQUEST, REMOTE_INTERACTION_SUCCESS, REMOTE_INTERACTION_FAIL, + FAVOURITES_EXPAND_SUCCESS, + FAVOURITES_EXPAND_FAIL, reblog, unreblog, toggleReblog, @@ -713,6 +745,7 @@ export { fetchFavouritesRequest, fetchFavouritesSuccess, fetchFavouritesFail, + expandFavourites, fetchDislikes, fetchDislikesRequest, fetchDislikesSuccess, diff --git a/app/soapbox/features/ui/components/modals/favourites-modal.tsx b/app/soapbox/features/ui/components/modals/favourites-modal.tsx index 52081a2b0..d5ecbc837 100644 --- a/app/soapbox/features/ui/components/modals/favourites-modal.tsx +++ b/app/soapbox/features/ui/components/modals/favourites-modal.tsx @@ -1,7 +1,7 @@ import React, { useEffect } from 'react'; import { FormattedMessage } from 'react-intl'; -import { fetchFavourites } from 'soapbox/actions/interactions'; +import { fetchFavourites, expandFavourites } from 'soapbox/actions/interactions'; import ScrollableList from 'soapbox/components/scrollable-list'; import { Modal, Spinner } from 'soapbox/components/ui'; import AccountContainer from 'soapbox/containers/account-container'; @@ -16,6 +16,7 @@ const FavouritesModal: React.FC = ({ onClose, statusId }) => { const dispatch = useAppDispatch(); const accountIds = useAppSelector((state) => state.user_lists.favourited_by.get(statusId)?.items); + const next = useAppSelector((state) => state.user_lists.favourited_by.get(statusId)?.next); const fetchData = () => { dispatch(fetchFavourites(statusId)); @@ -29,6 +30,12 @@ const FavouritesModal: React.FC = ({ onClose, statusId }) => { onClose('FAVOURITES'); }; + const handleLoadMore = () => { + if (next) { + dispatch(expandFavourites(statusId, next!)); + } + }; + let body; if (!accountIds) { @@ -44,6 +51,8 @@ const FavouritesModal: 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 3cb1f9205..6652cfc24 100644 --- a/app/soapbox/reducers/user-lists.ts +++ b/app/soapbox/reducers/user-lists.ts @@ -60,6 +60,7 @@ import { import { REBLOGS_FETCH_SUCCESS, FAVOURITES_FETCH_SUCCESS, + FAVOURITES_EXPAND_SUCCESS, DISLIKES_FETCH_SUCCESS, REACTIONS_FETCH_SUCCESS, } from 'soapbox/actions/interactions'; @@ -174,7 +175,9 @@ export default function userLists(state = ReducerRecord(), action: AnyAction) { case REBLOGS_FETCH_SUCCESS: return normalizeList(state, ['reblogged_by', action.id], action.accounts); case FAVOURITES_FETCH_SUCCESS: - return normalizeList(state, ['favourited_by', action.id], action.accounts); + return normalizeList(state, ['favourited_by', action.id], action.accounts, action.next); + case FAVOURITES_EXPAND_SUCCESS: + return appendToList(state, ['favourited_by', action.id], action.accounts, action.next); case DISLIKES_FETCH_SUCCESS: return normalizeList(state, ['disliked_by', action.id], action.accounts); case REACTIONS_FETCH_SUCCESS: