Add pagination to reblogged_by dialog

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,

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<IReblogsModal> = ({ 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<IReblogsModal> = ({ onClose, statusId }) => {
     onClose('REBLOGS');
   };
 
+  const handleLoadMore = () => {
+    if (next) {
+      dispatch(expandReblogs(statusId, next!));
+    }
+  };
+
   let body;
 
   if (!accountIds) {
@@ -45,6 +52,8 @@ const ReblogsModal: React.FC<IReblogsModal> = ({ onClose, statusId }) => {
         itemClassName='pb-3'
         style={{ height: '80vh' }}
         useWindowScroll={false}
+        onLoadMore={handleLoadMore}
+        hasMore={!!next}
       >
         {accountIds.map((id) =>
           <AccountContainer key={id} id={id} />,

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: