From f4243d9cafbc59b4b9c04af08fd45ff0026781ae Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?nicole=20miko=C5=82ajczyk?= <git@mkljczk.pl>
Date: Mon, 15 Sep 2025 10:56:44 +0200
Subject: [PATCH] pl-fe: allow refetching interactions lists
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>
---
 packages/pl-fe/src/modals/dislikes-modal.tsx  | 33 ++++++++++---------
 .../src/modals/event-participants-modal.tsx   | 27 ++++++++-------
 .../pl-fe/src/modals/favourites-modal.tsx     | 33 ++++++++++---------
 packages/pl-fe/src/modals/reactions-modal.tsx | 33 ++++++++++---------
 packages/pl-fe/src/modals/reblogs-modal.tsx   | 33 ++++++++++---------
 .../status-lists/interaction-requests.tsx     |  2 +-
 6 files changed, 88 insertions(+), 73 deletions(-)

diff --git a/packages/pl-fe/src/modals/dislikes-modal.tsx b/packages/pl-fe/src/modals/dislikes-modal.tsx
index b85ce8b5e..d5e4252c2 100644
--- a/packages/pl-fe/src/modals/dislikes-modal.tsx
+++ b/packages/pl-fe/src/modals/dislikes-modal.tsx
@@ -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>
     );
   }
 
diff --git a/packages/pl-fe/src/modals/event-participants-modal.tsx b/packages/pl-fe/src/modals/event-participants-modal.tsx
index db2a7f7d0..abba633c2 100644
--- a/packages/pl-fe/src/modals/event-participants-modal.tsx
+++ b/packages/pl-fe/src/modals/event-participants-modal.tsx
@@ -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>
     );
   }
 
diff --git a/packages/pl-fe/src/modals/favourites-modal.tsx b/packages/pl-fe/src/modals/favourites-modal.tsx
index 8b9d564df..d29087ecb 100644
--- a/packages/pl-fe/src/modals/favourites-modal.tsx
+++ b/packages/pl-fe/src/modals/favourites-modal.tsx
@@ -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>
     );
   }
 
diff --git a/packages/pl-fe/src/modals/reactions-modal.tsx b/packages/pl-fe/src/modals/reactions-modal.tsx
index 4e96b0bff..73b3a82f6 100644
--- a/packages/pl-fe/src/modals/reactions-modal.tsx
+++ b/packages/pl-fe/src/modals/reactions-modal.tsx
@@ -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>
     </>);
   }
 
diff --git a/packages/pl-fe/src/modals/reblogs-modal.tsx b/packages/pl-fe/src/modals/reblogs-modal.tsx
index 5e24bf317..eaed08f3a 100644
--- a/packages/pl-fe/src/modals/reblogs-modal.tsx
+++ b/packages/pl-fe/src/modals/reblogs-modal.tsx
@@ -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>
     );
   }
 
diff --git a/packages/pl-fe/src/pages/status-lists/interaction-requests.tsx b/packages/pl-fe/src/pages/status-lists/interaction-requests.tsx
index 0e16e5407..1b3647656 100644
--- a/packages/pl-fe/src/pages/status-lists/interaction-requests.tsx
+++ b/packages/pl-fe/src/pages/status-lists/interaction-requests.tsx
@@ -238,7 +238,7 @@ const InteractionRequestsPage = () => {
 
   return (
     <Column label={intl.formatMessage(messages.title)}>
-      <PullToRefresh onRefresh={() => refetch()}>
+      <PullToRefresh onRefresh={refetch}>
         <ScrollableList
           scrollKey='interactionRequests'
           isLoading={isFetching}