feat(zaps-modal): add pagination support

src/features/ui/components/modals/zaps-modal.tsx

@@ -2,7 +2,7 @@ import { List as ImmutableList } from 'immutable';
 import React, { useEffect, useMemo } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { fetchZaps } from 'soapbox/actions/interactions';
+import { fetchZaps, expandZaps } from 'soapbox/actions/interactions';
 import ScrollableList from 'soapbox/components/scrollable-list';
 import { Modal, Spinner, Text } from 'soapbox/components/ui';
 import AccountContainer from 'soapbox/containers/account-container';
@@ -23,7 +23,7 @@ interface IZapsModal {
 const ZapsModal: React.FC<IZapsModal> = ({ onClose, statusId }) => {
   const dispatch = useAppDispatch();
   const zaps = useAppSelector((state) => state.user_lists.zapped_by.get(statusId)?.items);
-
+  const next = useAppSelector((state) => state.user_lists.zapped_by.get(statusId)?.next);
 
   const accounts = useMemo((): ImmutableList<IAccountWithZaps> | undefined => {
     if (!zaps) return;
@@ -43,6 +43,13 @@ const ZapsModal: React.FC<IZapsModal> = ({ onClose, statusId }) => {
     onClose('ZAPS');
   };
 
+  const handleLoadMore = () => {
+    if (next) {
+      console.log('next, zaps modal: ', next);
+      dispatch(expandZaps(statusId, next!));
+    }
+  };
+
   let body;
 
   if (!zaps || !accounts) {
@@ -58,6 +65,8 @@ const ZapsModal: React.FC<IZapsModal> = ({ onClose, statusId }) => {
         itemClassName='pb-3'
         style={{ height: '80vh' }}
         useWindowScroll={false}
+        onLoadMore={handleLoadMore}
+        hasMore={!!next}
       >
         {accounts.map((account, index) => {
           return (