moon
/
soapbox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(zaps-modal): add pagination support

This commit is contained in:
P. Reis 2024-06-23 18:45:23 -03:00
parent bcbfed9faf
commit 64354c6d09
1 changed files with 11 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/features/ui/components/modals/zaps-modal.tsx
View File

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