implement virtuoso in catalog views

src/components/views/AllCatalog.jsx

@@ -5,7 +5,7 @@ import { Link, useNavigate} from 'react-router-dom';
 import { confirmAlert } from 'react-confirm-alert';
 import { Tooltip } from 'react-tooltip';
 import { Virtuoso } from 'react-virtuoso';
-import { useAccount, useFeed, usePublishCommentEdit, useSubplebbits } from '@plebbit/plebbit-react-hooks';
+import { useAccount, useFeed, usePublishCommentEdit, useSubplebbit, useSubplebbits } from '@plebbit/plebbit-react-hooks';
 import { debounce } from 'lodash';
 import { Container, NavBar, Header, Break, PostMenu, BoardForm } from '../styled/views/Board.styled';
 import { Threads, PostMenuCatalog } from '../styled/views/Catalog.styled';
@@ -32,237 +32,26 @@ const {version} = packageJson
 let lastVirtuosoStates = {}
 
 
-const AllCatalog = () => {
+const CatalogPost = ({post}) => {
   const {
-    setCaptchaResponse,
-    setChallengesArray,
-    defaultSubplebbits,
     editedComment,
+    setDeletePost,
     setIsAuthorDelete,
+    captchaResponse, setCaptchaResponse,
+    setIsModerationOpen,
+    setChallengesArray,
     setIsAuthorEdit,
     setIsCaptchaOpen,
-    isModerationOpen, setIsModerationOpen,
+    setIsEditModalOpen,
-    isSettingsOpen, setIsSettingsOpen,
     setModeratingCommentCid,
+    setOriginalCommentContent,
+    setPendingComment,
     setResolveCaptchaPromise,
     selectedAddress, setSelectedAddress,
     selectedStyle,
     setSelectedThread,
-    setSelectedTitle,
   } = useGeneralStore(state => state);
 
-
-  const threadMenuRefs = useRef({});
-  const postMenuRef = useRef(null);
-  const postMenuCatalogRef = useRef(null);
-  const virtuosoRef = useRef();
-
-  const account = useAccount();
-  const navigate = useNavigate();
-  const [, setNewErrorMessage] = useError();
-  const [, setNewSuccessMessage] = useSuccess();
-  
-  const [prevScrollPos, setPrevScrollPos] = useState(0);
-  const [visible, setVisible] = useState(true);
-
-  const [isEditModalOpen, setIsEditModalOpen] = useState(false);
-  const [originalCommentContent, setOriginalCommentContent] = useState(null);
-  const [triggerPublishCommentEdit, setTriggerPublishCommentEdit] = useState(false);
-  const [deletePost, setDeletePost] = useState(false);
-  const [isImageSearchOpen, setIsImageSearchOpen] = useState(false);
-  const [commentCid, setCommentCid] = useState(null);
-  const [moderatorPermissions, setModeratorPermissions] = useState({});
-  const [isCreateBoardOpen, setIsCreateBoardOpen] = useState(false);
-
-  const addresses = defaultSubplebbits.map(subplebbit => subplebbit.address);
-  const { feed, hasMore, loadMore } = useFeed({subplebbitAddresses: addresses, sortType: 'active'});
-  const {subplebbits} = useSubplebbits({subplebbitAddresses: addresses, sortType: 'active'});
-  const [selectedFeed, setSelectedFeed] = useState(feed.sort((a, b) => b.timestamp - a.timestamp));
-
-  const stateString = useFeedStateString(subplebbits);
-
-  const columnWidth = 180;
-  const windowWidth = useWindowWidth();
-  const columnCount = Math.floor(windowWidth / columnWidth);
-  const rows = useFeedRows(selectedFeed, columnCount);
-
-
-  useEffect(() => {
-    let permissions = {};
-  
-    selectedFeed.forEach(thread => {
-      const subplebbit = subplebbits.find(s => s && s.address === thread.subplebbitAddress);
-  
-      if (subplebbit && subplebbit.roles) { 
-        const role = subplebbit.roles[account?.author.address]?.role;
-    
-        if (role === 'moderator' || role === 'admin' || role === 'owner') {
-          permissions[thread.subplebbitAddress] = true;
-        } else {
-          permissions[thread.subplebbitAddress] = false;
-        }
-      }
-    });
-  
-    setModeratorPermissions(permissions);
-  }, [account?.author.address, selectedFeed, subplebbits]);  
-
-
-  // mobile navbar scroll effect
-  useEffect(() => {
-    const debouncedHandleScroll = debounce(() => {
-      const currentScrollPos = window.pageYOffset;
-      setVisible(prevScrollPos > currentScrollPos || currentScrollPos < 10);
-      setPrevScrollPos(currentScrollPos);
-    }, 50);
-  
-    window.addEventListener('scroll', debouncedHandleScroll);
-  
-    return () => window.removeEventListener('scroll', debouncedHandleScroll);
-  }, [prevScrollPos, visible]);
-
-
-  const tryLoadMore = async () => {
-    try {loadMore()} 
-    catch (e)
-    {await new Promise(resolve => setTimeout(resolve, 1000))}
-  };
-
-
-  const onChallengeVerification = (challengeVerification) => {
-    if (challengeVerification.challengeSuccess === true) {
-        setNewSuccessMessage('Challenge Success');
-    } 
-    else if (challengeVerification.challengeSuccess === false) {
-      setNewErrorMessage(`Challenge Failed, reason: ${challengeVerification.reason}. Errors: ${challengeVerification.errors}`);
-      console.log('challenge failed', challengeVerification);
-    }
-  };
-
-
-  const onChallenge = async (challenges, comment) => {
-    let challengeAnswers = [];
-    try {
-      challengeAnswers = await getChallengeAnswersFromUser(challenges)
-    }
-    catch (error) {
-      setNewErrorMessage(error.message); console.log(error);
-    }
-    if (challengeAnswers) {
-      await comment.publishChallengeAnswers(challengeAnswers)
-    }
-  };
-
-
-  const getChallengeAnswersFromUser = async (challenges) => {
-    setChallengesArray(challenges);
-    
-    return new Promise((resolve, reject) => {
-      const imageString = challenges?.challenges[0].challenge;
-      const imageSource = `data:image/png;base64,${imageString}`;
-      const challengeImg = new Image();
-      challengeImg.src = imageSource;
-  
-      challengeImg.onload = () => {
-        setIsCaptchaOpen(true);
-  
-        const handleKeyDown = async (event) => {
-          if (event.key === 'Enter') {
-            const currentCaptchaResponse = useGeneralStore.getState().captchaResponse;
-            resolve(currentCaptchaResponse);
-            setIsCaptchaOpen(false);
-            document.removeEventListener('keydown', handleKeyDown);
-            event.preventDefault();
-          }
-        };
-
-        setCaptchaResponse('');
-        document.addEventListener('keydown', handleKeyDown);
-
-        setResolveCaptchaPromise(resolve);
-      };
-  
-      challengeImg.onerror = () => {
-        reject(setNewErrorMessage('Could not load challenges'));
-      };
-    });
-  };
-
-  const [publishCommentEditOptions, setPublishCommentEditOptions] = useState({
-    commentCid: commentCid,
-    content: editedComment || undefined,
-    subplebbitAddress: selectedAddress,
-    onChallenge,
-    onChallengeVerification,
-    onError: (error) => {
-      setNewErrorMessage(error.message); console.log(error);
-    },
-  });
-  
-  
-  const { publishCommentEdit } = usePublishCommentEdit(publishCommentEditOptions);
-
-  
-  useEffect(() => {
-    setPublishCommentEditOptions((prevOptions) => ({
-      ...prevOptions,
-      commentCid: commentCid,
-      content: editedComment || undefined,
-    }));
-  }, [commentCid, editedComment]);
-
-
-  useEffect(() => {
-    if (editedComment !== '') {
-      setTriggerPublishCommentEdit(true);
-    }
-  }, [editedComment, setIsAuthorEdit]);
-
-  
-  useEffect(() => {
-    let isActive = true;
-    if (publishCommentEditOptions && triggerPublishCommentEdit) {
-      (async () => {
-        await publishCommentEdit();
-        if (isActive) {
-          setTriggerPublishCommentEdit(false);
-        }
-      })();
-    }
-
-    return () => {
-      isActive = false;
-    };
-  }, [triggerPublishCommentEdit, publishCommentEdit, publishCommentEditOptions]);
-
-
-  // mobile navbar board select functionality
-  const handleSelectChange = (event) => {
-    const selected = event.target.value;
-
-    if (selected === 'subscriptions') {
-      navigate(`/p/subscriptions`);
-      return;
-    } else if (selected === 'all') {
-      navigate(`/p/all`);
-      return;
-    }
-
-    const selectedTitle = defaultSubplebbits.find((subplebbit) => subplebbit.address === selected).title;
-    setSelectedTitle(selectedTitle);
-    setSelectedAddress(selected);
-    navigate(`/p/${selected}`);
-  };
-
-  // desktop navbar board select functionality
-  const handleClickTitle = (title, address) => {
-    setSelectedTitle(title);
-    setSelectedAddress(address);
-    setSelectedFeed(feed.filter(feed => feed.title === title));
-  };
-
-
-  const CatalogPost = ({post}) => {
   const thread = post;
   const commentMediaInfo = getCommentMediaInfo(thread);
   const linkCount = countLinks(thread);
@@ -270,7 +59,33 @@ const AllCatalog = () => {
   const [isHoveringOnThread, setIsHoveringOnThread] = useState(false);
   const [menuPosition, setMenuPosition] = useState({top: 0, left: 0});
   const [openMenuCid, setOpenMenuCid] = useState(null);
-    const isModerator = moderatorPermissions[thread.subplebbitAddress];
+  const [triggerPublishCommentEdit, setTriggerPublishCommentEdit] = useState(false);
+  const [isImageSearchOpen, setIsImageSearchOpen] = useState(false);
+  const [commentCid, setCommentCid] = useState(null);
+  const [isModerator, setIsModerator] = useState(false);
+
+  const [, setNewErrorMessage] = useError();
+  const [, setNewSuccessMessage] = useSuccess();
+
+  const account = useAccount();
+  const subplebbit = useSubplebbit({subplebbitAddress: thread.subplebbitAddress});
+  const threadMenuRefs = useRef({});
+  const postMenuRef = useRef(null);
+  const postMenuCatalogRef = useRef(null);
+
+
+  useEffect(() => {
+    if (subplebbit.roles !== undefined) { 
+      const role = subplebbit.roles[account?.author.address]?.role;
+  
+      if (role === 'moderator' || role === 'admin' || role === 'owner') {
+        setIsModerator(true);
+      } else {
+        setIsModerator(false);
+      }
+    }
+  }, [account?.author.address, subplebbit.roles]);
+
 
   const handleOutsideClick = useCallback((e) => {
     if (openMenuCid !== null && !postMenuRef.current.contains(e.target) && !postMenuCatalogRef.current.contains(e.target)) {
@@ -339,6 +154,116 @@ const AllCatalog = () => {
     setIsEditModalOpen(true);
   }
 
+
+
+  const onChallengeVerification = (challengeVerification) => {
+    if (challengeVerification.challengeSuccess === true) {
+        setNewSuccessMessage('Challenge Success');
+    } 
+    else if (challengeVerification.challengeSuccess === false) {
+      setNewErrorMessage(`Challenge Failed, reason: ${challengeVerification.reason}. Errors: ${challengeVerification.errors}`);
+      console.log('challenge failed', challengeVerification);
+    }
+  };
+
+
+  const onChallenge = async (challenges, comment) => {
+    setPendingComment(comment);
+    let challengeAnswers = [];
+    try {
+      challengeAnswers = await getChallengeAnswersFromUser(challenges)
+    }
+    catch (error) {
+      setNewErrorMessage(error.message); console.log(error);
+    }
+    if (challengeAnswers) {
+      await comment.publishChallengeAnswers(challengeAnswers)
+    }
+  };
+
+
+  const getChallengeAnswersFromUser = async (challenges) => {
+    setChallengesArray(challenges);
+    
+    return new Promise((resolve, reject) => {
+      const imageString = challenges?.challenges[0].challenge;
+      const imageSource = `data:image/png;base64,${imageString}`;
+      const challengeImg = new Image();
+      challengeImg.src = imageSource;
+  
+      challengeImg.onload = () => {
+        setIsCaptchaOpen(true);
+  
+        const handleKeyDown = async (event) => {
+          if (event.key === 'Enter') {
+            const currentCaptchaResponse = captchaResponse;
+            resolve(currentCaptchaResponse);
+            setIsCaptchaOpen(false);
+            document.removeEventListener('keydown', handleKeyDown);
+            event.preventDefault();
+          }
+        };
+
+        setCaptchaResponse('');
+        document.addEventListener('keydown', handleKeyDown);
+
+        setResolveCaptchaPromise(resolve);
+      };
+  
+      challengeImg.onerror = () => {
+        reject(setNewErrorMessage('Could not load challenges'));
+      };
+    });
+  };
+
+  const [publishCommentEditOptions, setPublishCommentEditOptions] = useState({
+    commentCid: commentCid,
+    content: editedComment || undefined,
+    subplebbitAddress: selectedAddress,
+    onChallenge,
+    onChallengeVerification,
+    onError: (error) => {
+      setNewErrorMessage(error.message); console.log(error);
+    },
+  });
+  
+  
+  const { publishCommentEdit } = usePublishCommentEdit(publishCommentEditOptions);
+
+
+  useEffect(() => {
+    setPublishCommentEditOptions((prevOptions) => ({
+      ...prevOptions,
+      commentCid: commentCid,
+      content: editedComment || undefined,
+    }));
+  }, [commentCid, editedComment]);
+
+
+  useEffect(() => {
+    if (editedComment !== '') {
+      setTriggerPublishCommentEdit(true);
+    }
+  }, [editedComment, setIsAuthorEdit]);
+
+  
+  useEffect(() => {
+    let isActive = true;
+    if (publishCommentEditOptions && triggerPublishCommentEdit) {
+      (async () => {
+        await publishCommentEdit();
+        if (isActive) {
+          setTriggerPublishCommentEdit(false);
+        }
+      })();
+    }
+
+    return () => {
+      isActive = false;
+    };
+  }, [triggerPublishCommentEdit, publishCommentEdit, publishCommentEditOptions]);
+
+
   return (
     <div key={`thread-`} className="thread" 
     onMouseOver={() => {setIsHoveringOnThread(thread.cid)}} 
@@ -524,17 +449,91 @@ const AllCatalog = () => {
       </Link>
     </div>
   );
-  };
+};
 
 
-  const CatalogRow = ({row}) => {
+const CatalogRow = ({row}) => {
   const posts = []
   for (const post of row) {
     posts.push(<CatalogPost key={post?.cid} post={post} />)
   }
   return <div>{posts}</div>
+}
+
+
+const AllCatalog = () => {
+  const {
+    defaultSubplebbits,
+    isModerationOpen, setIsModerationOpen,
+    isSettingsOpen, setIsSettingsOpen,
+    originalCommentContent,
+    selectedAddress, setSelectedAddress,
+    selectedStyle,
+    setSelectedTitle,
+  } = useGeneralStore(state => state);
+
+  const virtuosoRef = useRef();
+
+  const navigate = useNavigate();
+
+  const [prevScrollPos, setPrevScrollPos] = useState(0);
+  const [visible, setVisible] = useState(true);
+
+  const [isEditModalOpen, setIsEditModalOpen] = useState(false);
+  const [deletePost, setDeletePost] = useState(false);
+  const [isCreateBoardOpen, setIsCreateBoardOpen] = useState(false);
+
+  const addresses = defaultSubplebbits.map(subplebbit => subplebbit.address);
+  const { feed, hasMore, loadMore } = useFeed({subplebbitAddresses: addresses, sortType: 'active'});
+  const {subplebbits} = useSubplebbits({subplebbitAddresses: addresses, sortType: 'active'});
+  const [selectedFeed, setSelectedFeed] = useState(feed.sort((a, b) => b.timestamp - a.timestamp));
+
+  const stateString = useFeedStateString(subplebbits);
+
+  const columnWidth = 180;
+  const windowWidth = useWindowWidth();
+  const columnCount = Math.floor(windowWidth / columnWidth);
+  const rows = useFeedRows(selectedFeed, columnCount);
+
+  // mobile navbar scroll effect
+  useEffect(() => {
+    const debouncedHandleScroll = debounce(() => {
+      const currentScrollPos = window.pageYOffset;
+      setVisible(prevScrollPos > currentScrollPos || currentScrollPos < 10);
+      setPrevScrollPos(currentScrollPos);
+    }, 50);
+  
+    window.addEventListener('scroll', debouncedHandleScroll);
+  
+    return () => window.removeEventListener('scroll', debouncedHandleScroll);
+  }, [prevScrollPos, visible]);
+
+  // mobile navbar board select functionality
+  const handleSelectChange = (event) => {
+    const selected = event.target.value;
+
+    if (selected === 'subscriptions') {
+      navigate(`/p/subscriptions`);
+      return;
+    } else if (selected === 'all') {
+      navigate(`/p/all`);
+      return;
     }
 
+    const selectedTitle = defaultSubplebbits.find((subplebbit) => subplebbit.address === selected).title;
+    setSelectedTitle(selectedTitle);
+    setSelectedAddress(selected);
+    navigate(`/p/${selected}`);
+  };
+
+  // desktop navbar board select functionality
+  const handleClickTitle = (title, address) => {
+    setSelectedTitle(title);
+    setSelectedAddress(address);
+    setSelectedFeed(feed.filter(feed => feed.title === title));
+  };
+
+
   useEffect(() => {
     const setLastVirtuosoState = () => {
       virtuosoRef.current?.getState((snapshot) => {
@@ -702,7 +701,7 @@ const AllCatalog = () => {
               itemContent={(index, row) => <CatalogRow index={index} row={row} />}
               useWindowScroll={true}
               components={{ Footer: () => hasMore ? <CatalogLoader /> : null}}
-              endReached={tryLoadMore}
+              endReached={loadMore}
               ref={virtuosoRef}
               restoreStateFrom={lastVirtuosoState}
               initialScrollTop={lastVirtuosoState?.scrollTop}

src/components/views/Catalog.jsx

@@ -35,411 +35,27 @@ const {version} = packageJson
 let lastVirtuosoStates = {}
 
 
-const Catalog = () => {
+const CatalogPost = ({post}) => {
   const {
-    captchaResponse, setCaptchaResponse,
-    setChallengesArray,
-    defaultSubplebbits,
     editedComment,
+    setDeletePost,
     setIsAuthorDelete,
+    captchaResponse, setCaptchaResponse,
+    selectedAddress,
+    setIsModerationOpen,
+    setChallengesArray,
     setIsAuthorEdit,
     setIsCaptchaOpen,
-    isModerationOpen, setIsModerationOpen,
+    setIsEditModalOpen,
-    isSettingsOpen, setIsSettingsOpen,
+    isModerator,
     setModeratingCommentCid,
+    setOriginalCommentContent,
     setPendingComment,
-    setPendingCommentIndex,
     setResolveCaptchaPromise,
-    selectedAddress, setSelectedAddress,
     selectedStyle,
     setSelectedThread,
-    selectedTitle, setSelectedTitle,
-    showPostForm,
-    showPostFormLink,
   } = useGeneralStore(state => state);
 
-  const { anonymousMode } = useAnonModeStore();
-  
-  const nameRef = useRef();
-  const subjectRef = useRef();
-  const commentRef = useRef();
-  const linkRef = useRef();
-  const threadMenuRefs = useRef({});
-  const postMenuRef = useRef(null);
-  const postMenuCatalogRef = useRef(null);
-  const selectedThreadCidRef = useRef(null);
-  const virtuosoRef = useRef();
-
-  const navigate = useNavigate();
-  
-  const [, setNewErrorMessage] = useError();
-  const [, setNewSuccessMessage] = useSuccess();
-  
-  const [triggerPublishComment, setTriggerPublishComment] = useState(false);
-  const [prevScrollPos, setPrevScrollPos] = useState(0);
-  const [visible, setVisible] = useState(true);
-  const [isModerator, setIsModerator] = useState(false);
-  const [isEditModalOpen, setIsEditModalOpen] = useState(false);
-  const [originalCommentContent, setOriginalCommentContent] = useState(null);
-  const [triggerPublishCommentEdit, setTriggerPublishCommentEdit] = useState(false);
-  const [deletePost, setDeletePost] = useState(false);
-  const [isImageSearchOpen, setIsImageSearchOpen] = useState(false);
-  const [commentCid, setCommentCid] = useState(null);
-  const [executeAnonMode, setExecuteAnonMode] = useState(false);
-  const [isCreateBoardOpen, setIsCreateBoardOpen] = useState(false);
-
-  useAnonModeRef(selectedThreadCidRef, anonymousMode && executeAnonMode);
-
-  const account = useAccount();
-  const { feed, hasMore, loadMore } = useFeed({subplebbitAddresses: [`${selectedAddress}`], sortType: 'active'});
-  const { subplebbitAddress } = useParams();
-  const subplebbit = useSubplebbit({subplebbitAddress: selectedAddress});
-  const stateString = useStateString(subplebbit);
-  let feedWithDescriptionAndRules = [...feed];
-
-  if (subplebbit.rules) {
-    feedWithDescriptionAndRules.unshift({ type: 'rules', content: subplebbit.rules });
-  }
-
-  if (subplebbit.description) {
-    feedWithDescriptionAndRules.unshift({ type: 'description', content: subplebbit.description });
-  }
-
-  const columnWidth = 180;
-  const windowWidth = useWindowWidth();
-  const columnCount = Math.floor(windowWidth / columnWidth);
-  const rows = useFeedRows(feedWithDescriptionAndRules, columnCount);
-
-  useEffect(() => {
-    if (subplebbit.roles !== undefined) { 
-      const role = subplebbit.roles[account?.author.address]?.role;
-  
-      if (role === 'moderator' || role === 'admin' || role === 'owner') {
-        setIsModerator(true);
-      } else {
-        setIsModerator(false);
-      }
-    }
-  }, [account?.author.address, subplebbit.roles]);
-
-
-  useEffect(() => {
-    setSelectedAddress(subplebbitAddress);
-  }, [subplebbitAddress, setSelectedAddress]);
-
-
-  const errorString = useMemo(() => {
-    if (subplebbit?.state === 'failed') {
-      let errorString = 'Failed fetching board "' + selectedAddress + '".';
-      if (subplebbit.error) {
-        errorString += `: ${subplebbit.error.toString().slice(0, 300)}`
-      }
-      return errorString
-    }
-  }, [subplebbit?.state, subplebbit?.error, selectedAddress])
-
-
-  useEffect(() => {
-    if (errorString) {
-      setNewErrorMessage(errorString);
-    }
-  }, [errorString, setNewErrorMessage]);
-
-  
-  const { subscribed, subscribe, unsubscribe } = useSubscribe({subplebbitAddress: selectedAddress});
-
-
-  useEffect(() => {
-    const selectedSubplebbit = defaultSubplebbits.find((subplebbit) => subplebbit.address === subplebbitAddress);
-    if (subplebbitAddress) {
-      setSelectedAddress(subplebbitAddress);
-    } else if (subplebbit?.address) {
-      setSelectedAddress(subplebbit.address)
-    }
-    if (selectedSubplebbit) {
-      setSelectedTitle(selectedSubplebbit.title);
-    } else if (subplebbit?.title) {
-      setSelectedTitle(subplebbit.title);
-    }
-  }, [subplebbitAddress, setSelectedAddress, setSelectedTitle, defaultSubplebbits, subplebbit?.address, subplebbit?.title]);
-
-  // mobile navbar scroll effect
-  useEffect(() => {
-    const debouncedHandleScroll = debounce(() => {
-      const currentScrollPos = window.pageYOffset;
-      setVisible(prevScrollPos > currentScrollPos || currentScrollPos < 10);
-      setPrevScrollPos(currentScrollPos);
-    }, 50);
-  
-    window.addEventListener('scroll', debouncedHandleScroll);
-  
-    return () => window.removeEventListener('scroll', debouncedHandleScroll);
-  }, [prevScrollPos, visible]);
-
-
-  const onChallengeVerification = (challengeVerification) => {
-    if (challengeVerification.challengeSuccess === true) {
-      if (challengeVerification.publication?.cid !== undefined) {
-        navigate(`/p/${subplebbitAddress}/c/${challengeVerification.publication?.cid}`);
-        console.log('challenge success');
-      } else {
-        setNewSuccessMessage('Challenge Success');
-      }
-    }
-    else if (challengeVerification.challengeSuccess === false) {
-      setNewErrorMessage(`Challenge Failed, reason: ${challengeVerification.reason}. Errors: ${challengeVerification.errors}`);
-      console.log('challenge failed', challengeVerification);
-    }
-  };
-
-
-  const onChallenge = async (challenges, comment) => {
-    setPendingComment(comment);
-    let challengeAnswers = [];
-    
-    try {
-      challengeAnswers = await getChallengeAnswersFromUser(challenges)
-    }
-    catch (error) {
-      setNewErrorMessage(error.message); console.log(error);
-    }
-    if (challengeAnswers) {
-      await comment.publishChallengeAnswers(challengeAnswers)
-    }
-  };
-  
-
-  useEffect(() => {
-    setPublishCommentOptions((prevPublishCommentOptions) => ({
-      ...prevPublishCommentOptions,
-      subplebbitAddress: selectedAddress,
-    }));
-  }, [selectedAddress]);
-  
-
-  const [publishCommentOptions, setPublishCommentOptions] = useState({
-    subplebbitAddress: selectedAddress,
-    onChallenge,
-    onChallengeVerification,
-    onError: (error) => {
-      setNewErrorMessage(error.message); console.log(error);
-    },
-  });
-  
-
-  const { publishComment, index } = usePublishComment(publishCommentOptions);
-
-  useEffect(() => {
-    if (index !== undefined) {
-      setPendingCommentIndex(index);
-      navigate(`/profile/c/`);
-    }
-  }, [index, navigate, setPendingCommentIndex]);
-
-  
-  const resetFields = useCallback(() => {
-    if (nameRef.current) {
-      nameRef.current.value = '';
-    }
-    if (subjectRef.current) {
-      subjectRef.current.value = '';
-    }
-    if (commentRef.current) {
-      commentRef.current.value = '';
-    }
-    if (linkRef.current) {
-      linkRef.current.value = '';
-    }
-  }, []);
-
-
-  const handleSubmit = async (event) => {
-    event.preventDefault();
-    
-    if (subjectRef.current.value === "") {
-      setNewErrorMessage('Subject field is mandatory');
-      return;
-    }
-
-    setPublishCommentOptions((prevPublishCommentOptions) => ({
-      ...prevPublishCommentOptions,
-      author: {
-        displayName: nameRef.current.value || undefined,
-        address: account?.author.address,
-      },
-      title: subjectRef.current.value || undefined,
-      content: commentRef.current.value || undefined,
-      link: linkRef.current.value || undefined,
-    }));
-
-    setTriggerPublishComment(true);
-  };
-
-
-  const updateSigner = useCallback(async () => {
-    if (anonymousMode) {
-      setExecuteAnonMode(true);
-  
-      let storedSigners = JSON.parse(localStorage.getItem('storedSigners')) || {};
-      let signer;
-  
-      if (!storedSigners[selectedThreadCidRef]) {
-        signer = await account?.plebbit.createSigner();
-        storedSigners[selectedThreadCidRef] = { privateKey: signer?.privateKey, address: signer?.address };
-        localStorage.setItem('storedSigners', JSON.stringify(storedSigners));
-      } else {
-        const signerPrivateKey = storedSigners[selectedThreadCidRef].privateKey;
-          
-        try {
-          signer = await account?.plebbit.createSigner({type: 'ed25519', privateKey: signerPrivateKey});
-        } catch (error) {
-          console.log(error);
-        }
-      }
-        
-      setPublishCommentOptions(prevPublishCommentOptions => {
-        const newPublishCommentOptions = {
-          ...prevPublishCommentOptions,
-          signer,
-          author: {
-            ...prevPublishCommentOptions.author,
-            address: signer?.address,
-          },
-        };
-  
-        if (JSON.stringify(prevPublishCommentOptions) !== JSON.stringify(newPublishCommentOptions)) {
-          return newPublishCommentOptions;
-        }
-  
-        return prevPublishCommentOptions;
-      });
-    }
-  }, [selectedThreadCidRef, anonymousMode, account]);
-  
-  useEffect(() => {
-    updateSigner();
-  }, [updateSigner]);
-
-
-  useEffect(() => {
-    if (publishCommentOptions && triggerPublishComment) {
-      (async () => {
-        await publishComment();
-        resetFields();
-      })();
-      setTriggerPublishComment(false);
-      setExecuteAnonMode(false);
-    }
-  }, [publishCommentOptions, triggerPublishComment, publishComment, resetFields]);
-  
-  
-  const getChallengeAnswersFromUser = async (challenges) => {
-    setChallengesArray(challenges);
-    
-    return new Promise((resolve, reject) => {
-      const imageString = challenges?.challenges[0].challenge;
-      const imageSource = `data:image/png;base64,${imageString}`;
-      const challengeImg = new Image();
-      challengeImg.src = imageSource;
-  
-      challengeImg.onload = () => {
-        setIsCaptchaOpen(true);
-  
-        const handleKeyDown = async (event) => {
-          if (event.key === 'Enter') {
-            const currentCaptchaResponse = captchaResponse;
-            resolve(currentCaptchaResponse);
-            setIsCaptchaOpen(false);
-            document.removeEventListener('keydown', handleKeyDown);
-            event.preventDefault();
-          }
-        };
-
-        setCaptchaResponse('');
-        document.addEventListener('keydown', handleKeyDown);
-        
-        setResolveCaptchaPromise(resolve);
-      };
-  
-      challengeImg.onerror = () => {
-        reject(setNewErrorMessage('Could not load challenges'));
-      };
-    });
-  };
-
-
-  const [publishCommentEditOptions, setPublishCommentEditOptions] = useState({
-    commentCid: commentCid,
-    content: editedComment || undefined,
-    subplebbitAddress: selectedAddress || subplebbitAddress,
-    onChallenge,
-    onChallengeVerification,
-    onError: (error) => {
-      setNewErrorMessage(error.message); console.log(error);
-    },
-  });
-  
-  
-  const { publishCommentEdit } = usePublishCommentEdit(publishCommentEditOptions);
-
-
-  useEffect(() => {
-    setPublishCommentEditOptions((prevOptions) => ({
-      ...prevOptions,
-      commentCid: commentCid,
-      content: editedComment || undefined,
-    }));
-  }, [commentCid, editedComment]);
-
-
-  useEffect(() => {
-    if (editedComment !== '') {
-      setTriggerPublishCommentEdit(true);
-    }
-  }, [editedComment]);
-
-  
-  useEffect(() => {
-    if (publishCommentEditOptions && triggerPublishCommentEdit) {
-      (async () => {
-        await publishCommentEdit();
-        setTriggerPublishCommentEdit(false);
-      })();
-    }
-  }, [publishCommentEditOptions, triggerPublishCommentEdit, publishCommentEdit]);
-
-  // mobile navbar board select functionality
-  const handleSelectChange = (event) => {
-    const selected = event.target.value;
-
-    if (selected === 'subscriptions') {
-      navigate(`/p/subscriptions`);
-      return;
-    } else if (selected === 'all') {
-      navigate(`/p/all`);
-      return;
-    }
-
-    const selectedTitle = defaultSubplebbits.find((subplebbit) => subplebbit.address === selected).title;
-    setSelectedTitle(selectedTitle);
-    setSelectedAddress(selected);
-    navigate(`/p/${selected}`);
-  };
-
-  const handleSubscribe = async () => {
-    try {
-      if (subscribed === false) {
-        await subscribe(selectedAddress);
-      } else if (subscribed === true) {
-        await unsubscribe(selectedAddress);
-      }
-    } catch (error) {
-      setNewErrorMessage(error.message); console.log(error);
-    }
-  };
-
-
-  const CatalogPost = ({post}) => {
   const thread = post;
   const commentMediaInfo = getCommentMediaInfo(thread);
   const linkCount = countLinks(thread);
@@ -447,6 +63,22 @@ const Catalog = () => {
   const [isHoveringOnThread, setIsHoveringOnThread] = useState(false);
   const [menuPosition, setMenuPosition] = useState({top: 0, left: 0});
   const [openMenuCid, setOpenMenuCid] = useState(null);
+  const [triggerPublishCommentEdit, setTriggerPublishCommentEdit] = useState(false);
+  const [isImageSearchOpen, setIsImageSearchOpen] = useState(false);
+  const [commentCid, setCommentCid] = useState(null);
+
+  const threadMenuRefs = useRef({});
+  const postMenuRef = useRef(null);
+  const postMenuCatalogRef = useRef(null);
+  const { subplebbitAddress } = useParams();
+
+  const [, setNewErrorMessage] = useError();
+  const [, setNewSuccessMessage] = useSuccess();
+
+  const subplebbit = useSubplebbit({subplebbitAddress: selectedAddress});
+
+  const account = useAccount();
+
 
   const handleOutsideClick = useCallback((e) => {
     if (openMenuCid !== null && !postMenuRef.current.contains(e.target) && !postMenuCatalogRef.current.contains(e.target)) {
@@ -458,6 +90,7 @@ const Catalog = () => {
     setOpenMenuCid(null);
   };
 
+
   useEffect(() => {
     if (openMenuCid !== null) {
       document.addEventListener('click', handleOutsideClick);
@@ -470,6 +103,7 @@ const Catalog = () => {
     };
   }, [openMenuCid, handleOutsideClick]);
 
+
   const handleAuthorDeleteClick = (comment) => {
     handleOptionClick(comment.cid);
 
@@ -516,6 +150,110 @@ const Catalog = () => {
   }
 
 
+  const onChallengeVerification = (challengeVerification) => {
+    if (challengeVerification.challengeSuccess === true) {
+        setNewSuccessMessage('Challenge Success');
+    }
+    else if (challengeVerification.challengeSuccess === false) {
+      setNewErrorMessage(`Challenge Failed, reason: ${challengeVerification.reason}. Errors: ${challengeVerification.errors}`);
+      console.log('challenge failed', challengeVerification);
+    }
+  };
+
+
+  const onChallenge = async (challenges, comment) => {
+    setPendingComment(comment);
+    let challengeAnswers = [];
+    
+    try {
+      challengeAnswers = await getChallengeAnswersFromUser(challenges)
+    }
+    catch (error) {
+      setNewErrorMessage(error.message); console.log(error);
+    }
+    if (challengeAnswers) {
+      await comment.publishChallengeAnswers(challengeAnswers)
+    }
+  };
+
+
+  const [publishCommentEditOptions, setPublishCommentEditOptions] = useState({
+    commentCid: commentCid,
+    content: editedComment || undefined,
+    subplebbitAddress: selectedAddress || subplebbitAddress,
+    onChallenge,
+    onChallengeVerification,
+    onError: (error) => {
+      setNewErrorMessage(error.message); console.log(error);
+    },
+  });
+  
+  
+  const { publishCommentEdit } = usePublishCommentEdit(publishCommentEditOptions);
+
+
+  useEffect(() => {
+    setPublishCommentEditOptions((prevOptions) => ({
+      ...prevOptions,
+      commentCid: commentCid,
+      content: editedComment || undefined,
+    }));
+  }, [commentCid, editedComment]);
+
+
+  useEffect(() => {
+    if (editedComment !== '') {
+      setTriggerPublishCommentEdit(true);
+    }
+  }, [editedComment]);
+
+  
+  useEffect(() => {
+    if (publishCommentEditOptions && triggerPublishCommentEdit) {
+      (async () => {
+        await publishCommentEdit();
+        setTriggerPublishCommentEdit(false);
+      })();
+    }
+  }, [publishCommentEditOptions, triggerPublishCommentEdit, publishCommentEdit]);
+
+  
+  const getChallengeAnswersFromUser = async (challenges) => {
+    setChallengesArray(challenges);
+    
+    return new Promise((resolve, reject) => {
+      const imageString = challenges?.challenges[0].challenge;
+      const imageSource = `data:image/png;base64,${imageString}`;
+      const challengeImg = new Image();
+      challengeImg.src = imageSource;
+  
+      challengeImg.onload = () => {
+        setIsCaptchaOpen(true);
+  
+        const handleKeyDown = async (event) => {
+          if (event.key === 'Enter') {
+            const currentCaptchaResponse = captchaResponse;
+            resolve(currentCaptchaResponse);
+            setIsCaptchaOpen(false);
+            document.removeEventListener('keydown', handleKeyDown);
+            event.preventDefault();
+          }
+        };
+
+        setCaptchaResponse('');
+        document.addEventListener('keydown', handleKeyDown);
+        
+        setResolveCaptchaPromise(resolve);
+      };
+  
+      challengeImg.onerror = () => {
+        reject(setNewErrorMessage('Could not load challenges'));
+      };
+    });
+  };
+  
+
+
   if (post.type === 'rules') {
     return (
       <div className='thread'
@@ -580,7 +318,7 @@ const Catalog = () => {
         <Link style={{all: "unset", cursor: "pointer"}} to={`/p/${selectedAddress}/rules`}>
             <div className="teaser">
               <b>Rules</b>
-                {": " + subplebbit.rules.map((rule, index) => `${index + 1}. ${rule}`).join(' ')}
+              {": " + subplebbit.rules?.map((rule, index) => `${index + 1}. ${rule}`).join(' ')}
             </div>
           </Link>
       </div>
@@ -908,17 +646,373 @@ const Catalog = () => {
       </div>
     )
   }
-  };
+};
 
 
-  const CatalogRow = ({row}) => {
+const CatalogRow = ({row}) => {
   const posts = []
   for (const post of row) {
     posts.push(<CatalogPost key={post?.cid} post={post} />)
   }
   return <div>{posts}</div>
+}
+
+
+const Catalog = () => {
+  const {
+    captchaResponse, setCaptchaResponse,
+    setChallengesArray,
+    defaultSubplebbits,
+    setIsCaptchaOpen,
+    isModerationOpen, setIsModerationOpen,
+    setIsModerator,
+    isSettingsOpen, setIsSettingsOpen,
+    originalCommentContent,
+    setPendingComment,
+    setPendingCommentIndex,
+    setResolveCaptchaPromise,
+    selectedAddress, setSelectedAddress,
+    selectedStyle,
+    selectedTitle, setSelectedTitle,
+    showPostForm,
+    showPostFormLink,
+  } = useGeneralStore(state => state);
+
+  const { anonymousMode } = useAnonModeStore();
+  
+  const nameRef = useRef();
+  const subjectRef = useRef();
+  const commentRef = useRef();
+  const linkRef = useRef();
+  const selectedThreadCidRef = useRef(null);
+  const virtuosoRef = useRef();
+
+  const navigate = useNavigate();
+  
+  const [, setNewErrorMessage] = useError();
+  const [, setNewSuccessMessage] = useSuccess();
+  
+  const [triggerPublishComment, setTriggerPublishComment] = useState(false);
+  const [prevScrollPos, setPrevScrollPos] = useState(0);
+  const [visible, setVisible] = useState(true);
+  const [isEditModalOpen, setIsEditModalOpen] = useState(false);
+  const [deletePost, setDeletePost] = useState(false);
+  const [executeAnonMode, setExecuteAnonMode] = useState(false);
+  const [isCreateBoardOpen, setIsCreateBoardOpen] = useState(false);
+
+  useAnonModeRef(selectedThreadCidRef, anonymousMode && executeAnonMode);
+
+  const account = useAccount();
+  const { feed, hasMore, loadMore } = useFeed({subplebbitAddresses: [`${selectedAddress}`], sortType: 'active'});
+  const { subplebbitAddress } = useParams();
+  const subplebbit = useSubplebbit({subplebbitAddress: selectedAddress});
+  const stateString = useStateString(subplebbit);
+  let feedWithDescriptionAndRules = [...feed];
+
+  
+  if (subplebbit.rules) {
+    feedWithDescriptionAndRules.unshift({ type: 'rules', content: subplebbit.rules });
   }
   
+  if (subplebbit.description) {
+    feedWithDescriptionAndRules.unshift({ type: 'description', content: subplebbit.description });
+  }
+  
+
+  const columnWidth = 180;
+  const windowWidth = useWindowWidth();
+  const columnCount = Math.floor(windowWidth / columnWidth);
+  const rows = useFeedRows(feedWithDescriptionAndRules, columnCount);
+
+  useEffect(() => {
+    if (subplebbit.roles !== undefined) { 
+      const role = subplebbit.roles[account?.author.address]?.role;
+  
+      if (role === 'moderator' || role === 'admin' || role === 'owner') {
+        setIsModerator(true);
+      } else {
+        setIsModerator(false);
+      }
+    }
+  }, [account?.author.address, subplebbit.roles, setIsModerator]);
+
+
+  useEffect(() => {
+    setSelectedAddress(subplebbitAddress);
+  }, [subplebbitAddress, setSelectedAddress]);
+
+
+  const errorString = useMemo(() => {
+    if (subplebbit?.state === 'failed') {
+      let errorString = 'Failed fetching board "' + selectedAddress + '".';
+      if (subplebbit.error) {
+        errorString += `: ${subplebbit.error.toString().slice(0, 300)}`
+      }
+      return errorString
+    }
+  }, [subplebbit?.state, subplebbit?.error, selectedAddress])
+
+
+  useEffect(() => {
+    if (errorString) {
+      setNewErrorMessage(errorString);
+    }
+  }, [errorString, setNewErrorMessage]);
+
+  
+  const { subscribed, subscribe, unsubscribe } = useSubscribe({subplebbitAddress: selectedAddress});
+
+
+  useEffect(() => {
+    const selectedSubplebbit = defaultSubplebbits.find((subplebbit) => subplebbit.address === subplebbitAddress);
+    if (subplebbitAddress) {
+      setSelectedAddress(subplebbitAddress);
+    } else if (subplebbit?.address) {
+      setSelectedAddress(subplebbit.address)
+    }
+    if (selectedSubplebbit) {
+      setSelectedTitle(selectedSubplebbit.title);
+    } else if (subplebbit?.title) {
+      setSelectedTitle(subplebbit.title);
+    }
+  }, [subplebbitAddress, setSelectedAddress, setSelectedTitle, defaultSubplebbits, subplebbit?.address, subplebbit?.title]);
+
+  // mobile navbar scroll effect
+  useEffect(() => {
+    const debouncedHandleScroll = debounce(() => {
+      const currentScrollPos = window.pageYOffset;
+      setVisible(prevScrollPos > currentScrollPos || currentScrollPos < 10);
+      setPrevScrollPos(currentScrollPos);
+    }, 50);
+  
+    window.addEventListener('scroll', debouncedHandleScroll);
+  
+    return () => window.removeEventListener('scroll', debouncedHandleScroll);
+  }, [prevScrollPos, visible]);
+
+
+  const onChallengeVerification = (challengeVerification) => {
+    if (challengeVerification.challengeSuccess === true) {
+      if (challengeVerification.publication?.cid !== undefined) {
+        navigate(`/p/${subplebbitAddress}/c/${challengeVerification.publication?.cid}`);
+        console.log('challenge success');
+      } else {
+        setNewSuccessMessage('Challenge Success');
+      }
+    }
+    else if (challengeVerification.challengeSuccess === false) {
+      setNewErrorMessage(`Challenge Failed, reason: ${challengeVerification.reason}. Errors: ${challengeVerification.errors}`);
+      console.log('challenge failed', challengeVerification);
+    }
+  };
+
+
+  const onChallenge = async (challenges, comment) => {
+    setPendingComment(comment);
+    let challengeAnswers = [];
+    
+    try {
+      challengeAnswers = await getChallengeAnswersFromUser(challenges)
+    }
+    catch (error) {
+      setNewErrorMessage(error.message); console.log(error);
+    }
+    if (challengeAnswers) {
+      await comment.publishChallengeAnswers(challengeAnswers)
+    }
+  };
+  
+
+  useEffect(() => {
+    setPublishCommentOptions((prevPublishCommentOptions) => ({
+      ...prevPublishCommentOptions,
+      subplebbitAddress: selectedAddress,
+    }));
+  }, [selectedAddress]);
+  
+
+  const [publishCommentOptions, setPublishCommentOptions] = useState({
+    subplebbitAddress: selectedAddress,
+    onChallenge,
+    onChallengeVerification,
+    onError: (error) => {
+      setNewErrorMessage(error.message); console.log(error);
+    },
+  });
+  
+
+  const { publishComment, index } = usePublishComment(publishCommentOptions);
+
+  useEffect(() => {
+    if (index !== undefined) {
+      setPendingCommentIndex(index);
+      navigate(`/profile/c/${index}`);
+    }
+  }, [index, navigate, setPendingCommentIndex]);
+
+  
+  const resetFields = useCallback(() => {
+    if (nameRef.current) {
+      nameRef.current.value = '';
+    }
+    if (subjectRef.current) {
+      subjectRef.current.value = '';
+    }
+    if (commentRef.current) {
+      commentRef.current.value = '';
+    }
+    if (linkRef.current) {
+      linkRef.current.value = '';
+    }
+  }, []);
+
+
+  const handleSubmit = async (event) => {
+    event.preventDefault();
+    
+    if (subjectRef.current.value === "") {
+      setNewErrorMessage('Subject field is mandatory');
+      return;
+    }
+
+    setPublishCommentOptions((prevPublishCommentOptions) => ({
+      ...prevPublishCommentOptions,
+      author: {
+        displayName: nameRef.current.value || undefined,
+        address: account?.author.address,
+      },
+      title: subjectRef.current.value || undefined,
+      content: commentRef.current.value || undefined,
+      link: linkRef.current.value || undefined,
+    }));
+
+    setTriggerPublishComment(true);
+  };
+
+
+  const updateSigner = useCallback(async () => {
+    if (anonymousMode) {
+      setExecuteAnonMode(true);
+  
+      let storedSigners = JSON.parse(localStorage.getItem('storedSigners')) || {};
+      let signer;
+  
+      if (!storedSigners[selectedThreadCidRef]) {
+        signer = await account?.plebbit.createSigner();
+        storedSigners[selectedThreadCidRef] = { privateKey: signer?.privateKey, address: signer?.address };
+        localStorage.setItem('storedSigners', JSON.stringify(storedSigners));
+      } else {
+        const signerPrivateKey = storedSigners[selectedThreadCidRef].privateKey;
+          
+        try {
+          signer = await account?.plebbit.createSigner({type: 'ed25519', privateKey: signerPrivateKey});
+        } catch (error) {
+          console.log(error);
+        }
+      }
+        
+      setPublishCommentOptions(prevPublishCommentOptions => {
+        const newPublishCommentOptions = {
+          ...prevPublishCommentOptions,
+          signer,
+          author: {
+            ...prevPublishCommentOptions.author,
+            address: signer?.address,
+          },
+        };
+  
+        if (JSON.stringify(prevPublishCommentOptions) !== JSON.stringify(newPublishCommentOptions)) {
+          return newPublishCommentOptions;
+        }
+  
+        return prevPublishCommentOptions;
+      });
+    }
+  }, [selectedThreadCidRef, anonymousMode, account]);
+  
+  useEffect(() => {
+    updateSigner();
+  }, [updateSigner]);
+
+
+  useEffect(() => {
+    if (publishCommentOptions && triggerPublishComment) {
+      (async () => {
+        await publishComment();
+        resetFields();
+      })();
+      setTriggerPublishComment(false);
+      setExecuteAnonMode(false);
+    }
+  }, [publishCommentOptions, triggerPublishComment, publishComment, resetFields]);
+  
+  
+  const getChallengeAnswersFromUser = async (challenges) => {
+    setChallengesArray(challenges);
+    
+    return new Promise((resolve, reject) => {
+      const imageString = challenges?.challenges[0].challenge;
+      const imageSource = `data:image/png;base64,${imageString}`;
+      const challengeImg = new Image();
+      challengeImg.src = imageSource;
+  
+      challengeImg.onload = () => {
+        setIsCaptchaOpen(true);
+  
+        const handleKeyDown = async (event) => {
+          if (event.key === 'Enter') {
+            const currentCaptchaResponse = captchaResponse;
+            resolve(currentCaptchaResponse);
+            setIsCaptchaOpen(false);
+            document.removeEventListener('keydown', handleKeyDown);
+            event.preventDefault();
+          }
+        };
+
+        setCaptchaResponse('');
+        document.addEventListener('keydown', handleKeyDown);
+        
+        setResolveCaptchaPromise(resolve);
+      };
+  
+      challengeImg.onerror = () => {
+        reject(setNewErrorMessage('Could not load challenges'));
+      };
+    });
+  };
+
+
+  // mobile navbar board select functionality
+  const handleSelectChange = (event) => {
+    const selected = event.target.value;
+
+    if (selected === 'subscriptions') {
+      navigate(`/p/subscriptions`);
+      return;
+    } else if (selected === 'all') {
+      navigate(`/p/all`);
+      return;
+    }
+
+    const selectedTitle = defaultSubplebbits.find((subplebbit) => subplebbit.address === selected).title;
+    setSelectedTitle(selectedTitle);
+    setSelectedAddress(selected);
+    navigate(`/p/${selected}`);
+  };
+
+  const handleSubscribe = async () => {
+    try {
+      if (subscribed === false) {
+        await subscribe(selectedAddress);
+      } else if (subscribed === true) {
+        await unsubscribe(selectedAddress);
+      }
+    } catch (error) {
+      setNewErrorMessage(error.message); console.log(error);
+    }
+  };
+
+
   useEffect(() => {
     const setLastVirtuosoState = () => {
       virtuosoRef.current?.getState((snapshot) => {

src/components/views/SubscriptionsCatalog.jsx

@@ -5,7 +5,7 @@ import { Link, useNavigate} from 'react-router-dom';
 import { confirmAlert } from 'react-confirm-alert';
 import { Tooltip } from 'react-tooltip';
 import { Virtuoso } from 'react-virtuoso';
-import { useAccount, useFeed, usePublishCommentEdit, useSubplebbits } from '@plebbit/plebbit-react-hooks';
+import { useAccount, useFeed, usePublishCommentEdit, useSubplebbit, useSubplebbits } from '@plebbit/plebbit-react-hooks';
 import { debounce } from 'lodash';
 import { Container, NavBar, Header, Break, PostMenu, BoardForm } from '../styled/views/Board.styled';
 import { Threads, PostMenuCatalog } from '../styled/views/Catalog.styled';
@@ -32,227 +32,26 @@ const {version} = packageJson
 let lastVirtuosoStates = {}
 
 
-const SubscriptionsCatalog = () => {
+const CatalogPost = ({post}) => {
   const {
-    setCaptchaResponse,
-    setChallengesArray,
-    defaultSubplebbits,
     editedComment,
+    setDeletePost,
     setIsAuthorDelete,
+    captchaResponse, setCaptchaResponse,
+    setIsModerationOpen,
+    setChallengesArray,
     setIsAuthorEdit,
     setIsCaptchaOpen,
-    isModerationOpen, setIsModerationOpen,
+    setIsEditModalOpen,
-    isSettingsOpen, setIsSettingsOpen,
     setModeratingCommentCid,
+    setOriginalCommentContent,
+    setPendingComment,
     setResolveCaptchaPromise,
     selectedAddress, setSelectedAddress,
     selectedStyle,
     setSelectedThread,
-    setSelectedTitle,
   } = useGeneralStore(state => state);
 
-  const threadMenuRefs = useRef({});
-  const postMenuRef = useRef(null);
-  const postMenuCatalogRef = useRef(null);
-  const virtuosoRef = useRef();
-
-  const account = useAccount();
-  const navigate = useNavigate();
-  const [, setNewErrorMessage] = useError();
-  const [, setNewSuccessMessage] = useSuccess();
-
-  const [prevScrollPos, setPrevScrollPos] = useState(0);
-  const [visible, setVisible] = useState(true);
-
-  const [isEditModalOpen, setIsEditModalOpen] = useState(false);
-  const [originalCommentContent, setOriginalCommentContent] = useState(null);
-  const [triggerPublishCommentEdit, setTriggerPublishCommentEdit] = useState(false);
-  const [deletePost, setDeletePost] = useState(false);
-  const [isImageSearchOpen, setIsImageSearchOpen] = useState(false);
-  const [commentCid, setCommentCid] = useState(null);
-  const [moderatorPermissions, setModeratorPermissions] = useState({});
-  const [isCreateBoardOpen, setIsCreateBoardOpen] = useState(false);
-
-  const { feed, hasMore, loadMore } = useFeed({subplebbitAddresses: account?.subscriptions, sortType: 'active'});
-  const [selectedFeed, setSelectedFeed] = useState(feed.sort((a, b) => b.timestamp - a.timestamp));
-  const {subplebbits} = useSubplebbits({subplebbitAddresses: account?.subscriptions, sortType: 'active'});
-
-  const stateString = useFeedStateString(subplebbits);
-
-  const columnWidth = 180;
-  const windowWidth = useWindowWidth();
-  const columnCount = Math.floor(windowWidth / columnWidth);
-  const rows = useFeedRows(feed, columnCount);
-
-
-  useEffect(() => {
-    let permissions = {};
-  
-    selectedFeed.forEach(thread => {
-      const subplebbit = subplebbits.find(s => s && s.address === thread.subplebbitAddress);
-  
-      if (subplebbit && subplebbit.roles) { 
-        const role = subplebbit.roles[account?.author.address]?.role;
-    
-        if (role === 'moderator' || role === 'admin' || role === 'owner') {
-          permissions[thread.subplebbitAddress] = true;
-        } else {
-          permissions[thread.subplebbitAddress] = false;
-        }
-      }
-    });
-  
-    setModeratorPermissions(permissions);
-  }, [account?.author.address, selectedFeed, subplebbits]);  
-
-
-  // mobile navbar scroll effect
-  useEffect(() => {
-    const debouncedHandleScroll = debounce(() => {
-      const currentScrollPos = window.pageYOffset;
-      setVisible(prevScrollPos > currentScrollPos || currentScrollPos < 10);
-      setPrevScrollPos(currentScrollPos);
-    }, 50);
-  
-    window.addEventListener('scroll', debouncedHandleScroll);
-  
-    return () => window.removeEventListener('scroll', debouncedHandleScroll);
-  }, [prevScrollPos, visible]);
-
-
-  const onChallengeVerification = (challengeVerification) => {
-    if (challengeVerification.challengeSuccess === true) {
-        setNewSuccessMessage('Challenge Success');
-    } 
-    else if (challengeVerification.challengeSuccess === false) {
-      setNewErrorMessage(`Challenge Failed, reason: ${challengeVerification.reason}. Errors: ${challengeVerification.errors}`);
-      console.log('challenge failed', challengeVerification);
-    }
-  };
-
-
-  const onChallenge = async (challenges, comment) => {
-    let challengeAnswers = [];
-    try {
-      challengeAnswers = await getChallengeAnswersFromUser(challenges)
-    }
-    catch (error) {
-      setNewErrorMessage(error.message); console.log(error);
-    }
-    if (challengeAnswers) {
-      await comment.publishChallengeAnswers(challengeAnswers)
-    }
-  };
-
-
-  const getChallengeAnswersFromUser = async (challenges) => {
-    setChallengesArray(challenges);
-    
-    return new Promise((resolve, reject) => {
-      const imageString = challenges?.challenges[0].challenge;
-      const imageSource = `data:image/png;base64,${imageString}`;
-      const challengeImg = new Image();
-      challengeImg.src = imageSource;
-  
-      challengeImg.onload = () => {
-        setIsCaptchaOpen(true);
-  
-        const handleKeyDown = async (event) => {
-          if (event.key === 'Enter') {
-            const currentCaptchaResponse = useGeneralStore.getState().captchaResponse;
-            resolve(currentCaptchaResponse);
-            setIsCaptchaOpen(false);
-            document.removeEventListener('keydown', handleKeyDown);
-            event.preventDefault();
-          }
-        };
-
-        setCaptchaResponse('');
-        document.addEventListener('keydown', handleKeyDown);
-
-        setResolveCaptchaPromise(resolve);
-      };
-  
-      challengeImg.onerror = () => {
-        reject(setNewErrorMessage('Could not load challenges'));
-      };
-    });
-  };
-
-  const [publishCommentEditOptions, setPublishCommentEditOptions] = useState({
-    commentCid: commentCid,
-    content: editedComment || undefined,
-    subplebbitAddress: selectedAddress,
-    onChallenge,
-    onChallengeVerification,
-    onError: (error) => {
-      setNewErrorMessage(error.message); console.log(error);
-    },
-  });
-  
-  
-  const { publishCommentEdit } = usePublishCommentEdit(publishCommentEditOptions);
-
-
-  useEffect(() => {
-    setPublishCommentEditOptions((prevOptions) => ({
-      ...prevOptions,
-      commentCid: commentCid,
-      content: editedComment || undefined,
-    }));
-  }, [commentCid, editedComment]);
-
-
-  useEffect(() => {
-    if (editedComment !== '') {
-      setTriggerPublishCommentEdit(true);
-    }
-  }, [editedComment, setIsAuthorEdit]);
-
-  
-  useEffect(() => {
-    let isActive = true;
-    if (publishCommentEditOptions && triggerPublishCommentEdit) {
-      (async () => {
-        await publishCommentEdit();
-        if (isActive) {
-          setTriggerPublishCommentEdit(false);
-        }
-      })();
-    }
-
-    return () => {
-      isActive = false;
-    };
-  }, [triggerPublishCommentEdit, publishCommentEdit, publishCommentEditOptions]);
-
-  // desktop navbar board select functionality
-  const handleClickTitle = (title, address) => {
-    setSelectedTitle(title);
-    setSelectedAddress(address);
-    setSelectedFeed(feed.filter(feed => feed.title === title));
-  };
-
-  // mobile navbar board select functionality
-  const handleSelectChange = (event) => {
-    const selected = event.target.value;
-
-    if (selected === 'subscriptions') {
-      navigate(`/p/subscriptions`);
-      return;
-    } else if (selected === 'all') {
-      navigate(`/p/all`);
-      return;
-    }
-
-    const selectedTitle = defaultSubplebbits.find((subplebbit) => subplebbit.address === selected).title;
-    setSelectedTitle(selectedTitle);
-    setSelectedAddress(selected);
-    navigate(`/p/${selected}`);
-  };
-
-
-  const CatalogPost = ({post}) => {
   const thread = post;
   const commentMediaInfo = getCommentMediaInfo(thread);
   const linkCount = countLinks(thread);
@@ -260,7 +59,33 @@ const SubscriptionsCatalog = () => {
   const [isHoveringOnThread, setIsHoveringOnThread] = useState(false);
   const [menuPosition, setMenuPosition] = useState({top: 0, left: 0});
   const [openMenuCid, setOpenMenuCid] = useState(null);
-    const isModerator = moderatorPermissions[thread.subplebbitAddress];
+  const [triggerPublishCommentEdit, setTriggerPublishCommentEdit] = useState(false);
+  const [isImageSearchOpen, setIsImageSearchOpen] = useState(false);
+  const [commentCid, setCommentCid] = useState(null);
+  const [isModerator, setIsModerator] = useState(false);
+
+  const [, setNewErrorMessage] = useError();
+  const [, setNewSuccessMessage] = useSuccess();
+
+  const account = useAccount();
+  const subplebbit = useSubplebbit({subplebbitAddress: thread.subplebbitAddress});
+  const threadMenuRefs = useRef({});
+  const postMenuRef = useRef(null);
+  const postMenuCatalogRef = useRef(null);
+
+
+  useEffect(() => {
+    if (subplebbit.roles !== undefined) { 
+      const role = subplebbit.roles[account?.author.address]?.role;
+  
+      if (role === 'moderator' || role === 'admin' || role === 'owner') {
+        setIsModerator(true);
+      } else {
+        setIsModerator(false);
+      }
+    }
+  }, [account?.author.address, subplebbit.roles]);
+
 
   const handleOutsideClick = useCallback((e) => {
     if (openMenuCid !== null && !postMenuRef.current.contains(e.target) && !postMenuCatalogRef.current.contains(e.target)) {
@@ -329,6 +154,116 @@ const SubscriptionsCatalog = () => {
     setIsEditModalOpen(true);
   }
 
+
+
+  const onChallengeVerification = (challengeVerification) => {
+    if (challengeVerification.challengeSuccess === true) {
+        setNewSuccessMessage('Challenge Success');
+    } 
+    else if (challengeVerification.challengeSuccess === false) {
+      setNewErrorMessage(`Challenge Failed, reason: ${challengeVerification.reason}. Errors: ${challengeVerification.errors}`);
+      console.log('challenge failed', challengeVerification);
+    }
+  };
+
+
+  const onChallenge = async (challenges, comment) => {
+    setPendingComment(comment);
+    let challengeAnswers = [];
+    try {
+      challengeAnswers = await getChallengeAnswersFromUser(challenges)
+    }
+    catch (error) {
+      setNewErrorMessage(error.message); console.log(error);
+    }
+    if (challengeAnswers) {
+      await comment.publishChallengeAnswers(challengeAnswers)
+    }
+  };
+
+
+  const getChallengeAnswersFromUser = async (challenges) => {
+    setChallengesArray(challenges);
+    
+    return new Promise((resolve, reject) => {
+      const imageString = challenges?.challenges[0].challenge;
+      const imageSource = `data:image/png;base64,${imageString}`;
+      const challengeImg = new Image();
+      challengeImg.src = imageSource;
+  
+      challengeImg.onload = () => {
+        setIsCaptchaOpen(true);
+  
+        const handleKeyDown = async (event) => {
+          if (event.key === 'Enter') {
+            const currentCaptchaResponse = captchaResponse;
+            resolve(currentCaptchaResponse);
+            setIsCaptchaOpen(false);
+            document.removeEventListener('keydown', handleKeyDown);
+            event.preventDefault();
+          }
+        };
+
+        setCaptchaResponse('');
+        document.addEventListener('keydown', handleKeyDown);
+
+        setResolveCaptchaPromise(resolve);
+      };
+  
+      challengeImg.onerror = () => {
+        reject(setNewErrorMessage('Could not load challenges'));
+      };
+    });
+  };
+
+  const [publishCommentEditOptions, setPublishCommentEditOptions] = useState({
+    commentCid: commentCid,
+    content: editedComment || undefined,
+    subplebbitAddress: selectedAddress,
+    onChallenge,
+    onChallengeVerification,
+    onError: (error) => {
+      setNewErrorMessage(error.message); console.log(error);
+    },
+  });
+  
+  
+  const { publishCommentEdit } = usePublishCommentEdit(publishCommentEditOptions);
+
+
+  useEffect(() => {
+    setPublishCommentEditOptions((prevOptions) => ({
+      ...prevOptions,
+      commentCid: commentCid,
+      content: editedComment || undefined,
+    }));
+  }, [commentCid, editedComment]);
+
+
+  useEffect(() => {
+    if (editedComment !== '') {
+      setTriggerPublishCommentEdit(true);
+    }
+  }, [editedComment, setIsAuthorEdit]);
+
+  
+  useEffect(() => {
+    let isActive = true;
+    if (publishCommentEditOptions && triggerPublishCommentEdit) {
+      (async () => {
+        await publishCommentEdit();
+        if (isActive) {
+          setTriggerPublishCommentEdit(false);
+        }
+      })();
+    }
+
+    return () => {
+      isActive = false;
+    };
+  }, [triggerPublishCommentEdit, publishCommentEdit, publishCommentEditOptions]);
+
+
   return (
     <div key={`thread-`} className="thread" 
     onMouseOver={() => {setIsHoveringOnThread(thread.cid)}} 
@@ -514,17 +449,93 @@ const SubscriptionsCatalog = () => {
       </Link>
     </div>
   );
-  };
+};
 
 
-  const CatalogRow = ({row}) => {
+const CatalogRow = ({row}) => {
   const posts = []
   for (const post of row) {
     posts.push(<CatalogPost key={post?.cid} post={post} />)
   }
   return <div>{posts}</div>
+}
+
+
+const SubscriptionsCatalog = () => {
+  const {
+    defaultSubplebbits,
+    isModerationOpen, setIsModerationOpen,
+    isSettingsOpen, setIsSettingsOpen,
+    originalCommentContent,
+    selectedAddress, setSelectedAddress,
+    selectedStyle,
+    setSelectedTitle,
+  } = useGeneralStore(state => state);
+
+  const virtuosoRef = useRef();
+
+  const account = useAccount();
+  const navigate = useNavigate();
+
+  const [prevScrollPos, setPrevScrollPos] = useState(0);
+  const [visible, setVisible] = useState(true);
+
+  const [isEditModalOpen, setIsEditModalOpen] = useState(false);
+  const [deletePost, setDeletePost] = useState(false);
+  const [isCreateBoardOpen, setIsCreateBoardOpen] = useState(false);
+
+  const { feed, hasMore, loadMore } = useFeed({subplebbitAddresses: account?.subscriptions, sortType: 'active'});
+  const [selectedFeed, setSelectedFeed] = useState(feed.sort((a, b) => b.timestamp - a.timestamp));
+  const {subplebbits} = useSubplebbits({subplebbitAddresses: account?.subscriptions, sortType: 'active'});
+
+  const stateString = useFeedStateString(subplebbits);
+
+  const columnWidth = 180;
+  const windowWidth = useWindowWidth();
+  const columnCount = Math.floor(windowWidth / columnWidth);
+  const rows = useFeedRows(selectedFeed, columnCount);
+
+
+  // mobile navbar scroll effect
+  useEffect(() => {
+    const debouncedHandleScroll = debounce(() => {
+      const currentScrollPos = window.pageYOffset;
+      setVisible(prevScrollPos > currentScrollPos || currentScrollPos < 10);
+      setPrevScrollPos(currentScrollPos);
+    }, 50);
+  
+    window.addEventListener('scroll', debouncedHandleScroll);
+  
+    return () => window.removeEventListener('scroll', debouncedHandleScroll);
+  }, [prevScrollPos, visible]);
+
+
+  // desktop navbar board select functionality
+  const handleClickTitle = (title, address) => {
+    setSelectedTitle(title);
+    setSelectedAddress(address);
+    setSelectedFeed(feed.filter(feed => feed.title === title));
+  };
+
+  // mobile navbar board select functionality
+  const handleSelectChange = (event) => {
+    const selected = event.target.value;
+
+    if (selected === 'subscriptions') {
+      navigate(`/p/subscriptions`);
+      return;
+    } else if (selected === 'all') {
+      navigate(`/p/all`);
+      return;
     }
 
+    const selectedTitle = defaultSubplebbits.find((subplebbit) => subplebbit.address === selected).title;
+    setSelectedTitle(selectedTitle);
+    setSelectedAddress(selected);
+    navigate(`/p/${selected}`);
+  };
+
+
   useEffect(() => {
     const setLastVirtuosoState = () => {
       virtuosoRef.current?.getState((snapshot) => {

src/hooks/stores/useGeneralStore.js

@@ -20,6 +20,9 @@ const useGeneralStore = create((set) => ({
   defaultSubplebbits: [],
   setDefaultSubplebbits: (subplebbits) => set({ defaultSubplebbits: subplebbits }),
 
+  deletePost: false,
+  setDeletePost: (deletePost) => set({ deletePost }),
+
   editedComment: '',
   setEditedComment: (comment) => set({ editedComment: comment }),
 
@@ -40,6 +43,12 @@ const useGeneralStore = create((set) => ({
   isCaptchaOpen: false,
   setIsCaptchaOpen: (isOpen) => set({ isCaptchaOpen: isOpen }),
 
+  isEditModalOpen: false,
+  setIsEditModalOpen: (isOpen) => set({ isEditModalOpen: isOpen }),
+
+  isModerator: false,
+  setIsModerator: (isModerator) => set({ isModerator }),
+
   isModerationOpen: false,
   setIsModerationOpen: (isOpen) => set({ isModerationOpen: isOpen }),
 
@@ -52,6 +61,9 @@ const useGeneralStore = create((set) => ({
   moderatingCommentCid: '',
   setModeratingCommentCid: (cid) => set({ moderatingCommentCid: cid }),
 
+  originalCommentContent: null,
+  setOriginalCommentContent: (content) => set({ originalCommentContent: content }),
+
   pendingComment: '',
   setPendingComment: (comment) => set({ pendingComment: comment }),