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

refactor(Bookmarks): remove all dispatch actions, use hooks returned by useBookmarks

This commit is contained in:
P. Reis 2024-12-02 21:34:10 -03:00
parent b9ca1c7866
commit 73419b09ff
1 changed files with 9 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
src/features/bookmarks/index.tsx
View File

@ -2,13 +2,10 @@ import { debounce } from 'es-toolkit';
import { useEffect } from 'react'; import { useEffect } from 'react';
import { defineMessages, FormattedMessage, useIntl } from 'react-intl'; import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
import { fetchBookmarkedStatuses, expandBookmarkedStatuses } from 'soapbox/actions/bookmarks.ts';
import { useBookmarks } from 'soapbox/api/hooks/index.ts'; import { useBookmarks } from 'soapbox/api/hooks/index.ts';
import PullToRefresh from 'soapbox/components/pull-to-refresh.tsx'; import PullToRefresh from 'soapbox/components/pull-to-refresh.tsx';
import PureStatusList from 'soapbox/components/pure-status-list.tsx'; import PureStatusList from 'soapbox/components/pure-status-list.tsx';
import { Column } from 'soapbox/components/ui/column.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 { useIsMobile } from 'soapbox/hooks/useIsMobile.ts';
import { useTheme } from 'soapbox/hooks/useTheme.ts'; import { useTheme } from 'soapbox/hooks/useTheme.ts';
@ -16,34 +13,24 @@ const messages = defineMessages({
heading: { id: 'column.bookmarks', defaultMessage: 'Bookmarks' }, heading: { id: 'column.bookmarks', defaultMessage: 'Bookmarks' },
}); });
const handleLoadMore = debounce((dispatch) => { const Bookmarks: React.FC = () => {
dispatch(expandBookmarkedStatuses());
}, 300, { edges: ['leading'] });
interface IBookmarks {
params?: {
id?: string;
};
}
const Bookmarks: React.FC<IBookmarks> = ({ params }) => {
const intl = useIntl(); const intl = useIntl();
const dispatch = useAppDispatch();
const theme = useTheme(); const theme = useTheme();
const isMobile = useIsMobile(); 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 { bookmarks, isLoading, hasNextPage, fetchEntities, fetchNextPage } = useBookmarks();
const hasMore = useAppSelector((state) => !!state.status_lists.get('bookmarks')?.next);
useEffect(() => { useEffect(() => {
dispatch(fetchBookmarkedStatuses()); fetchEntities();
}, []); }, []);
const handleRefresh = () => { 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." />; 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' className='black:p-4 black:sm:p-5'
statuses={bookmarks} statuses={bookmarks}
scrollKey='bookmarked_statuses' scrollKey='bookmarked_statuses'
hasMore={hasMore} hasMore={hasNextPage}
isLoading={typeof isLoading === 'boolean' ? isLoading : true} isLoading={typeof isLoading === 'boolean' ? isLoading : true}
onLoadMore={() => handleLoadMore(dispatch)} onLoadMore={() => handleLoadMore()}
emptyMessage={emptyMessage} emptyMessage={emptyMessage}
divideType={(theme === 'black' || isMobile) ? 'border' : 'space'} divideType={(theme === 'black' || isMobile) ? 'border' : 'space'}
/> />