feat(catalog): add refresh button

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 (
+    <button className='button' onClick={() => reset && reset()}>
+      Refresh
+    </button>
+  );
+};
+
 export const DesktopBoardButtons = () => {
   const params = useParams();
   const location = useLocation();
@@ -118,13 +129,22 @@ export const DesktopBoardButtons = () => {
         </>
       ) : (
         <>
-          [<OptionsButton />] [
-          <CatalogButton address={subplebbitAddress} isInAllView={isInAllView} isInCatalogView={isInCatalogView} isInSubscriptionsView={isInSubscriptionsView} />]
+          [
+          <OptionsButton />
+          ] [
+          <CatalogButton address={subplebbitAddress} isInAllView={isInAllView} isInCatalogView={isInCatalogView} isInSubscriptionsView={isInSubscriptionsView} />]{' '}
           {!(isInAllView || isInSubscriptionsView) && (
             <span className={styles.subscribeButton}>
-              [<SubscribeButton address={subplebbitAddress} />]
+              [
+              <SubscribeButton address={subplebbitAddress} />]
             </span>
           )}
+          {isInCatalogView && (
+            <>
+              [
+              <RefreshButton />]
+            </>
+          )}
         </>
       )}
     </div>

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<FeedResetState>((set) => ({
+  reset: null,
+  setResetFunction: (resetFunction) => set({ reset: resetFunction }),
+}));
+
+export default useFeedResetStore;

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