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 || {};