diff --git a/src/features/ui/components/modals/zaps-modal.tsx b/src/features/ui/components/modals/zaps-modal.tsx index 7f1e5380a..e6db04c9b 100644 --- a/src/features/ui/components/modals/zaps-modal.tsx +++ b/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 = ({ 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 | undefined => { if (!zaps) return; @@ -43,6 +43,13 @@ const ZapsModal: React.FC = ({ 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 = ({ onClose, statusId }) => { itemClassName='pb-3' style={{ height: '80vh' }} useWindowScroll={false} + onLoadMore={handleLoadMore} + hasMore={!!next} > {accounts.map((account, index) => { return (