From 73419b09ff8895344aab77c60d48097a436d9b0d Mon Sep 17 00:00:00 2001
From: "P. Reis" <patrickpereirareal1@gmail.com>
Date: Mon, 2 Dec 2024 21:34:10 -0300
Subject: [PATCH] refactor(Bookmarks): remove all dispatch actions, use hooks
 returned by useBookmarks

---
 src/features/bookmarks/index.tsx | 31 +++++++++----------------------
 1 file changed, 9 insertions(+), 22 deletions(-)

diff --git a/src/features/bookmarks/index.tsx b/src/features/bookmarks/index.tsx
index 2cb4d7c71..54e8dd631 100644
--- a/src/features/bookmarks/index.tsx
+++ b/src/features/bookmarks/index.tsx
@@ -2,13 +2,10 @@ import { debounce } from 'es-toolkit';
 import { useEffect } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
-import { fetchBookmarkedStatuses, expandBookmarkedStatuses } from 'soapbox/actions/bookmarks.ts';
 import { useBookmarks } from 'soapbox/api/hooks/index.ts';
 import PullToRefresh from 'soapbox/components/pull-to-refresh.tsx';
 import PureStatusList from 'soapbox/components/pure-status-list.tsx';
 import { Column } from 'soapbox/components/ui/column.tsx';
-import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
-import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
 import { useIsMobile } from 'soapbox/hooks/useIsMobile.ts';
 import { useTheme } from 'soapbox/hooks/useTheme.ts';
 
@@ -16,34 +13,24 @@ const messages = defineMessages({
   heading: { id: 'column.bookmarks', defaultMessage: 'Bookmarks' },
 });
 
-const handleLoadMore = debounce((dispatch) => {
-  dispatch(expandBookmarkedStatuses());
-}, 300, { edges: ['leading'] });
-
-interface IBookmarks {
-  params?: {
-    id?: string;
-  };
-}
-
-const Bookmarks: React.FC<IBookmarks> = ({ params }) => {
+const Bookmarks: React.FC = () => {
   const intl = useIntl();
 
-  const dispatch = useAppDispatch();
   const theme = useTheme();
   const isMobile = useIsMobile();
 
-  const { bookmarks } = useBookmarks();
+  const handleLoadMore = debounce(() => {
+    fetchNextPage();
+  }, 300, { edges: ['leading'] });
 
-  const isLoading = useAppSelector((state) => state.status_lists.get('bookmarks')?.isLoading === true);
-  const hasMore = useAppSelector((state) => !!state.status_lists.get('bookmarks')?.next);
+  const { bookmarks, isLoading, hasNextPage, fetchEntities, fetchNextPage } = useBookmarks();
 
   useEffect(() => {
-    dispatch(fetchBookmarkedStatuses());
+    fetchEntities();
   }, []);
 
   const handleRefresh = () => {
-    return dispatch(fetchBookmarkedStatuses());
+    return fetchEntities();
   };
 
   const emptyMessage = <FormattedMessage id='empty_column.bookmarks' defaultMessage="You don't have any bookmarks yet. When you add one, it will show up here." />;
@@ -55,9 +42,9 @@ const Bookmarks: React.FC<IBookmarks> = ({ params }) => {
           className='black:p-4 black:sm:p-5'
           statuses={bookmarks}
           scrollKey='bookmarked_statuses'
-          hasMore={hasMore}
+          hasMore={hasNextPage}
           isLoading={typeof isLoading === 'boolean' ? isLoading : true}
-          onLoadMore={() => handleLoadMore(dispatch)}
+          onLoadMore={() => handleLoadMore()}
           emptyMessage={emptyMessage}
           divideType={(theme === 'black' || isMobile) ? 'border' : 'space'}
         />