diff --git a/src/components/board-buttons/board-buttons.tsx b/src/components/board-buttons/board-buttons.tsx index 45b401ba..c5609a63 100644 --- a/src/components/board-buttons/board-buttons.tsx +++ b/src/components/board-buttons/board-buttons.tsx @@ -1,8 +1,9 @@ import { useTranslation } from 'react-i18next'; import { Link, useLocation, useParams } from 'react-router-dom'; import { useAccountComment, useSubscribe } from '@plebbit/plebbit-react-hooks'; -import styles from './board-buttons.module.css'; import { isAllView, isCatalogView, isPendingPostView, isPostPageView, isSubscriptionsView } from '../../lib/utils/view-utils'; +import useFeedResetStore from '../../stores/use-feed-reset-store'; +import styles from './board-buttons.module.css'; interface BoardButtonsProps { isInAllView?: boolean; @@ -94,6 +95,16 @@ export const MobileBoardButtons = () => { ); }; +const RefreshButton = () => { + const reset = useFeedResetStore((state) => state.reset); + + return ( + + ); +}; + export const DesktopBoardButtons = () => { const params = useParams(); const location = useLocation(); @@ -118,13 +129,22 @@ export const DesktopBoardButtons = () => { ) : ( <> - [] [ - ] + [ + + ] [ + ]{' '} {!(isInAllView || isInSubscriptionsView) && ( - [] + [ + ] )} + {isInCatalogView && ( + <> + [ + ] + + )} )} diff --git a/src/stores/use-feed-reset-store.ts b/src/stores/use-feed-reset-store.ts new file mode 100644 index 00000000..f6c6ddd9 --- /dev/null +++ b/src/stores/use-feed-reset-store.ts @@ -0,0 +1,13 @@ +import { create } from 'zustand'; + +interface FeedResetState { + reset: (() => void) | null; + setResetFunction: (resetFunction: () => void) => void; +} + +const useFeedResetStore = create((set) => ({ + reset: null, + setResetFunction: (resetFunction) => set({ reset: resetFunction }), +})); + +export default useFeedResetStore; diff --git a/src/views/catalog/catalog.tsx b/src/views/catalog/catalog.tsx index 0f8fc447..60d71c55 100644 --- a/src/views/catalog/catalog.tsx +++ b/src/views/catalog/catalog.tsx @@ -8,6 +8,7 @@ import { useDefaultSubplebbitAddresses } from '../../hooks/use-default-subplebbi import useFeedStateString from '../../hooks/use-feed-state-string'; import { useMultisubMetadata } from '../../hooks/use-default-subplebbits'; import useWindowWidth from '../../hooks/use-window-width'; +import useFeedResetStore from '../../stores/use-feed-reset-store'; import CatalogRow from '../../components/catalog-row'; import LoadingEllipsis from '../../components/loading-ellipsis'; import SettingsModal from '../../components/settings-modal'; @@ -101,7 +102,12 @@ const Catalog = () => { // eslint-disable-next-line const postsPerPage = useMemo(() => (columnCount <= 2 ? 10 : columnCount === 3 ? 15 : columnCount === 4 ? 20 : 25), []); - const { feed, hasMore, loadMore } = useFeed({ subplebbitAddresses, sortType: 'active', postsPerPage }); + const { feed, hasMore, loadMore, reset } = useFeed({ subplebbitAddresses, sortType: 'active', postsPerPage }); + + const setResetFunction = useFeedResetStore((state) => state.setResetFunction); + useEffect(() => { + setResetFunction(reset); + }, [reset, setResetFunction]); const subplebbit = useSubplebbit({ subplebbitAddress }); const { shortAddress, state, title } = subplebbit || {};