matty/ncd-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

pl-fe: allow refetching interactions lists

Browse Source 
Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>
This commit is contained in:
nicole mikołajczyk
2025-09-15 10:56:44 +02:00
parent 7adde428e9
commit f4243d9caf
6 changed files with 88 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
packages/pl-fe/src/modals/dislikes-modal.tsx
View File

@ -1,6 +1,7 @@
import React from 'react';
import { FormattedMessage } from 'react-intl';
import PullToRefresh from 'pl-fe/components/pull-to-refresh';
import ScrollableList from 'pl-fe/components/scrollable-list';
import Modal from 'pl-fe/components/ui/modal';
import Spinner from 'pl-fe/components/ui/spinner';
@ -14,7 +15,7 @@ interface DislikesModalProps {
}
const DislikesModal: React.FC<BaseModalProps & DislikesModalProps> = ({ onClose, statusId }) => {
const { data: accountIds, isLoading, hasNextPage, fetchNextPage } = useStatusDislikes(statusId);
const { data: accountIds, isLoading, hasNextPage, fetchNextPage, refetch } = useStatusDislikes(statusId);
const onClickClose = () => {
onClose('DISLIKES');
@ -28,20 +29,22 @@ const DislikesModal: React.FC<BaseModalProps & DislikesModalProps> = ({ onClose,
const emptyMessage = <FormattedMessage id='empty_column.dislikes' defaultMessage='No one has disliked this post yet. When someone does, they will show up here.' />;
body = (
<ScrollableList
emptyMessage={emptyMessage}
listClassName='max-w-full'
itemClassName='pb-3'
style={{ height: 'calc(80vh - 88px)' }}
hasMore={hasNextPage}
isLoading={typeof isLoading === 'boolean' ? isLoading : true}
onLoadMore={() => fetchNextPage({ cancelRefetch: false })}
useWindowScroll={false}
>
{accountIds.map(id =>
<AccountContainer key={id} id={id} />,
)}
</ScrollableList>
<PullToRefresh onRefresh={refetch}>
<ScrollableList
emptyMessage={emptyMessage}
listClassName='max-w-full'
itemClassName='pb-3'
style={{ height: 'calc(80vh - 88px)' }}
hasMore={hasNextPage}
isLoading={typeof isLoading === 'boolean' ? isLoading : true}
onLoadMore={() => fetchNextPage({ cancelRefetch: false })}
useWindowScroll={false}
>
{accountIds.map(id =>
<AccountContainer key={id} id={id} />,
)}
</ScrollableList>
</PullToRefresh>
);
}

27
packages/pl-fe/src/modals/event-participants-modal.tsx
View File

@ -1,6 +1,7 @@
import React from 'react';
import { FormattedMessage } from 'react-intl';
import PullToRefresh from 'pl-fe/components/pull-to-refresh';
import ScrollableList from 'pl-fe/components/scrollable-list';
import Modal from 'pl-fe/components/ui/modal';
import Spinner from 'pl-fe/components/ui/spinner';
@ -14,7 +15,7 @@ interface EventParticipantsModalProps {
}
const EventParticipantsModal: React.FC<BaseModalProps & EventParticipantsModalProps> = ({ onClose, statusId }) => {
const { data: accountIds, isLoading, hasNextPage, fetchNextPage } = useEventParticipations(statusId);
const { data: accountIds, isLoading, hasNextPage, fetchNextPage, refetch } = useEventParticipations(statusId);
const onClickClose = () => {
onClose('EVENT_PARTICIPANTS');
@ -28,17 +29,19 @@ const EventParticipantsModal: React.FC<BaseModalProps & EventParticipantsModalPr
const emptyMessage = <FormattedMessage id='empty_column.event_participants' defaultMessage='No one joined this event yet. When someone does, they will show up here.' />;
body = (
<ScrollableList
emptyMessage={emptyMessage}
listClassName='max-w-full'
itemClassName='pb-3'
hasMore={hasNextPage}
isLoading={typeof isLoading === 'boolean' ? isLoading : true}
onLoadMore={() => fetchNextPage({ cancelRefetch: false })}
useWindowScroll={false}
>
{accountIds.map(id => <AccountContainer key={id} id={id} />)}
</ScrollableList>
<PullToRefresh onRefresh={refetch}>
<ScrollableList
emptyMessage={emptyMessage}
listClassName='max-w-full'
itemClassName='pb-3'
hasMore={hasNextPage}
isLoading={typeof isLoading === 'boolean' ? isLoading : true}
onLoadMore={() => fetchNextPage({ cancelRefetch: false })}
useWindowScroll={false}
>
{accountIds.map(id => <AccountContainer key={id} id={id} />)}
</ScrollableList>
</PullToRefresh>
);
}

33
packages/pl-fe/src/modals/favourites-modal.tsx
View File

@ -1,6 +1,7 @@
import React from 'react';
import { FormattedMessage } from 'react-intl';
import PullToRefresh from 'pl-fe/components/pull-to-refresh';
import ScrollableList from 'pl-fe/components/scrollable-list';
import Modal from 'pl-fe/components/ui/modal';
import Spinner from 'pl-fe/components/ui/spinner';
@ -14,7 +15,7 @@ interface FavouritesModalProps {
}
const FavouritesModal: React.FC<BaseModalProps & FavouritesModalProps> = ({ onClose, statusId }) => {
const { data: accountIds, isLoading, hasNextPage, fetchNextPage } = useStatusFavourites(statusId);
const { data: accountIds, isLoading, hasNextPage, fetchNextPage, refetch } = useStatusFavourites(statusId);
const onClickClose = () => {
onClose('FAVOURITES');
@ -28,20 +29,22 @@ const FavouritesModal: React.FC<BaseModalProps & FavouritesModalProps> = ({ onCl
const emptyMessage = <FormattedMessage id='empty_column.favourites' defaultMessage='No one has liked this post yet. When someone does, they will show up here.' />;
body = (
<ScrollableList
emptyMessage={emptyMessage}
listClassName='max-w-full'
itemClassName='pb-3'
style={{ height: 'calc(80vh - 88px)' }}
hasMore={hasNextPage}
isLoading={typeof isLoading === 'boolean' ? isLoading : true}
onLoadMore={() => fetchNextPage({ cancelRefetch: false })}
useWindowScroll={false}
>
{accountIds.map(id =>
<AccountContainer key={id} id={id} />,
)}
</ScrollableList>
<PullToRefresh onRefresh={refetch}>
<ScrollableList
emptyMessage={emptyMessage}
listClassName='max-w-full'
itemClassName='pb-3'
style={{ height: 'calc(80vh - 88px)' }}
hasMore={hasNextPage}
isLoading={typeof isLoading === 'boolean' ? isLoading : true}
onLoadMore={() => fetchNextPage({ cancelRefetch: false })}
useWindowScroll={false}
>
{accountIds.map(id =>
<AccountContainer key={id} id={id} />,
)}
</ScrollableList>
</PullToRefresh>
);
}

33
packages/pl-fe/src/modals/reactions-modal.tsx
View File

@ -2,6 +2,7 @@ import clsx from 'clsx';
import React, { useMemo, useState } from 'react';
import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
import PullToRefresh from 'pl-fe/components/pull-to-refresh';
import ScrollableList from 'pl-fe/components/scrollable-list';
import Emoji from 'pl-fe/components/ui/emoji';
import Modal from 'pl-fe/components/ui/modal';
@ -32,7 +33,7 @@ const ReactionsModal: React.FC<BaseModalProps & ReactionsModalProps> = ({ onClos
const intl = useIntl();
const [reaction, setReaction] = useState(initialReaction);
const { data: reactions, isLoading } = useStatusReactions(statusId);
const { data: reactions, isLoading, refetch } = useStatusReactions(statusId);
const onClickClose = () => {
onClose('REACTIONS');
@ -82,20 +83,22 @@ const ReactionsModal: React.FC<BaseModalProps & ReactionsModalProps> = ({ onClos
body = (<>
{reactions.length > 0 && renderFilterBar()}
<ScrollableList
emptyMessage={emptyMessage}
listClassName={clsx('max-w-full', {
'!mt-4': reactions.length > 0,
})}
itemClassName='pb-3'
style={{ height: reactions.length > 0 ? 'calc(80vh - 159px)' : 'calc(80vh - 88px)' }}
isLoading={typeof isLoading === 'boolean' ? isLoading : true}
useWindowScroll={false}
>
{accounts.map((account) =>
<AccountContainer key={`${account.id}-${account.reaction}`} id={account.id} emoji={account.reaction} emojiUrl={account.reactionUrl} />,
)}
</ScrollableList>
<PullToRefresh onRefresh={refetch}>
<ScrollableList
emptyMessage={emptyMessage}
listClassName={clsx('max-w-full', {
'!mt-4': reactions.length > 0,
})}
itemClassName='pb-3'
style={{ height: reactions.length > 0 ? 'calc(80vh - 159px)' : 'calc(80vh - 88px)' }}
isLoading={typeof isLoading === 'boolean' ? isLoading : true}
useWindowScroll={false}
>
{accounts.map((account) =>
<AccountContainer key={`${account.id}-${account.reaction}`} id={account.id} emoji={account.reaction} emojiUrl={account.reactionUrl} />,
)}
</ScrollableList>
</PullToRefresh>
</>);
}

33
packages/pl-fe/src/modals/reblogs-modal.tsx
View File

@ -1,6 +1,7 @@
import React from 'react';
import { FormattedMessage } from 'react-intl';
import PullToRefresh from 'pl-fe/components/pull-to-refresh';
import ScrollableList from 'pl-fe/components/scrollable-list';
import Modal from 'pl-fe/components/ui/modal';
import Spinner from 'pl-fe/components/ui/spinner';
@ -14,7 +15,7 @@ interface ReblogsModalProps {
}
const ReblogsModal: React.FC<BaseModalProps & ReblogsModalProps> = ({ onClose, statusId }) => {
const { data: accountIds, isLoading, hasNextPage, fetchNextPage } = useStatusReblogs(statusId);
const { data: accountIds, isLoading, hasNextPage, fetchNextPage, refetch } = useStatusReblogs(statusId);
const onClickClose = () => {
onClose('REBLOGS');
@ -28,20 +29,22 @@ const ReblogsModal: React.FC<BaseModalProps & ReblogsModalProps> = ({ onClose, s
const emptyMessage = <FormattedMessage id='status.reblogs.empty' defaultMessage='No one has reposted this post yet. When someone does, they will show up here.' />;
body = (
<ScrollableList
emptyMessage={emptyMessage}
listClassName='max-w-full'
itemClassName='pb-3'
style={{ height: 'calc(80vh - 88px)' }}
hasMore={hasNextPage}
isLoading={typeof isLoading === 'boolean' ? isLoading : true}
onLoadMore={() => fetchNextPage({ cancelRefetch: false })}
useWindowScroll={false}
>
{accountIds.map((id) =>
<AccountContainer key={id} id={id} />,
)}
</ScrollableList>
<PullToRefresh onRefresh={refetch}>
<ScrollableList
emptyMessage={emptyMessage}
listClassName='max-w-full'
itemClassName='pb-3'
style={{ height: 'calc(80vh - 88px)' }}
hasMore={hasNextPage}
isLoading={typeof isLoading === 'boolean' ? isLoading : true}
onLoadMore={() => fetchNextPage({ cancelRefetch: false })}
useWindowScroll={false}
>
{accountIds.map((id) =>
<AccountContainer key={id} id={id} />,
)}
</ScrollableList>
</PullToRefresh>
);
}

2
packages/pl-fe/src/pages/status-lists/interaction-requests.tsx
View File

@ -238,7 +238,7 @@ const InteractionRequestsPage = () => {
return (
<Column label={intl.formatMessage(messages.title)}>
<PullToRefresh onRefresh={() => refetch()}>
<PullToRefresh onRefresh={refetch}>
<ScrollableList
scrollKey='interactionRequests'
isLoading={isFetching}