fix anon mode replymodal logic

src/components/views/All.jsx

@@ -32,9 +32,11 @@ import handleQuoteClick from '../../utils/handleQuoteClick';
 import handleQuoteHover from '../../utils/handleQuoteHover';
 import handleStyleChange from '../../utils/handleStyleChange';
 import removeHighlight from '../../utils/removeHighlight';
+import useAnonModeRef from '../../hooks/useAnonModeRef';
 import useError from '../../hooks/useError';
 import useFeedStateString from '../../hooks/useFeedStateString';
 import useSuccess from '../../hooks/useSuccess';
+import useAnonModeStore from '../../hooks/stores/useAnonModeStore';
 import useGeneralStore from '../../hooks/stores/useGeneralStore';
 import packageJson from '../../../package.json'
 const {version} = packageJson
@@ -62,6 +64,7 @@ const All = () => {
     setSelectedTitle,
   } = useGeneralStore(state => state);
   
+  const { anonymousMode } = useAnonModeStore();
 
   const account = useAccount();
   const navigate = useNavigate();
@@ -76,6 +79,7 @@ const All = () => {
   const backlinkRefsMobile = useRef({});
   const quoteRefsMobile = useRef({});
   const postOnHoverRef = useRef(null);
+  const selectedThreadCidRef = useRef(null);
 
   const [isReplyOpen, setIsReplyOpen] = useState(false);
   const [isEditModalOpen, setIsEditModalOpen] = useState(false);
@@ -92,6 +96,13 @@ const All = () => {
   const [postOnHoverHeight, setPostOnHoverHeight] = useState(0);
   const [deletePost, setDeletePost] = useState(false);
   const [moderatorPermissions, setModeratorPermissions] = useState({});
+  const [executeAnonMode, setExecuteAnonMode] = useState(false);
+
+  const setSelectedThreadCid = (cid) => {
+    selectedThreadCidRef.current = cid;
+  }
+
+  useAnonModeRef(selectedThreadCidRef, anonymousMode && executeAnonMode);
 
   const addresses = defaultSubplebbits.map(subplebbit => subplebbit.address);
   const { feed, hasMore, loadMore } = useFeed({subplebbitAddresses: addresses, sortType: 'active'});
@@ -303,6 +314,14 @@ const All = () => {
     });
   };
 
+  
+  useEffect(() => {
+    if (anonymousMode) {
+      setExecuteAnonMode(true);
+    }
+  }, [anonymousMode, selectedThreadCidRef]);
+
+
   const [publishCommentEditOptions, setPublishCommentEditOptions] = useState({
     commentCid: commentCid,
     content: editedComment || undefined,
@@ -668,6 +687,7 @@ const All = () => {
                               onClick={(e) => {
                                 if (e.button === 2) return;
                                 e.preventDefault();
+                                  setSelectedThreadCid(thread.cid);
                                 setIsReplyOpen(true);  
                                 setSelectedShortCid(thread.shortCid); 
                                 setSelectedParentCid(thread.cid);
@@ -947,6 +967,7 @@ const All = () => {
                                   onClick={(e) => {
                                     if (e.button === 2) return;
                                     e.preventDefault();
+                                    setSelectedThreadCid(thread.cid);
                                     setIsReplyOpen(true);  
                                     setSelectedShortCid(reply.shortCid); 
                                     setSelectedParentCid(reply.cid);
@@ -1380,6 +1401,7 @@ const All = () => {
                               onClick={(e) => {
                                 if (e.button === 2) return;
                                 e.preventDefault();
+                                setSelectedThreadCid(thread.cid);
                                 setIsReplyOpen(true);  
                                 setSelectedShortCid(thread.shortCid); 
                                 setSelectedParentCid(thread.cid);
@@ -1552,6 +1574,7 @@ const All = () => {
                                   onClick={(e) => {
                                     if (e.button === 2) return;
                                     e.preventDefault();
+                                    setSelectedThreadCid(thread.cid);
                                     setIsReplyOpen(true);  
                                     setSelectedShortCid(reply.shortCid); 
                                     setSelectedParentCid(reply.cid);

src/components/views/Board.jsx

@@ -32,10 +32,12 @@ import handleQuoteClick from '../../utils/handleQuoteClick';
 import handleQuoteHover from '../../utils/handleQuoteHover';
 import handleStyleChange from '../../utils/handleStyleChange';
 import removeHighlight from '../../utils/removeHighlight';
+import useAnonModeRef from '../../hooks/useAnonModeRef';
 import useClickForm from '../../hooks/useClickForm';
 import useError from '../../hooks/useError';
 import useStateString from '../../hooks/useStateString';
 import useSuccess from '../../hooks/useSuccess';
+import useAnonModeStore from '../../hooks/stores/useAnonModeStore';
 import useGeneralStore from '../../hooks/stores/useGeneralStore';
 import packageJson from '../../../package.json'
 const {version} = packageJson
@@ -65,7 +67,8 @@ const Board = () => {
     showPostForm,
     showPostFormLink,
   } = useGeneralStore(state => state);
-  
+
+  const { anonymousMode } = useAnonModeStore();
   
   const account = useAccount();
   const navigate = useNavigate();
@@ -86,6 +89,7 @@ const Board = () => {
   const backlinkRefsMobile = useRef({});
   const quoteRefsMobile = useRef({});
   const postOnHoverRef = useRef(null);
+  const selectedThreadCidRef = useRef(null);
 
   const { feed, hasMore, loadMore } = useFeed({subplebbitAddresses: [`${selectedAddress}`], sortType: 'active'});
   const subplebbit = useSubplebbit({subplebbitAddress: selectedAddress});
@@ -109,6 +113,13 @@ const Board = () => {
   const [outOfViewCid, setOutOfViewCid] = useState(null);
   const [outOfViewPosition, setOutOfViewPosition] = useState({top: 0, left: 0});
   const [postOnHoverHeight, setPostOnHoverHeight] = useState(0);
+  const [executeAnonMode, setExecuteAnonMode] = useState(false);
+
+  const setSelectedThreadCid = (cid) => {
+    selectedThreadCidRef.current = cid;
+  }
+
+  useAnonModeRef(selectedThreadCidRef, anonymousMode && executeAnonMode);
 
 
   useEffect(() => {
@@ -351,9 +362,17 @@ const Board = () => {
     }));
 
     setTriggerPublishComment(true);
+    setExecuteAnonMode(false);
   };
 
 
+  useEffect(() => {
+    if (anonymousMode) {
+      setExecuteAnonMode(true);
+    }
+  }, [anonymousMode, selectedThreadCidRef]);
+
+
   useEffect(() => {
     if (publishCommentOptions && triggerPublishComment) {
       (async () => {
@@ -1115,6 +1134,7 @@ const Board = () => {
                                 onClick={(e) => {
                                   if (e.button === 2) return;
                                   e.preventDefault();
+                                  setSelectedThreadCid(thread.cid);
                                   setIsReplyOpen(true); 
                                   setSelectedShortCid(thread.shortCid); 
                                   setSelectedParentCid(thread.cid);
@@ -1392,6 +1412,7 @@ const Board = () => {
                                     onClick={(e) => {
                                       if (e.button === 2) return;
                                       e.preventDefault();
+                                      setSelectedThreadCid(thread.cid);
                                       setIsReplyOpen(true);  
                                       setSelectedShortCid(reply.shortCid); 
                                       setSelectedParentCid(reply.cid);
@@ -1796,6 +1817,7 @@ const Board = () => {
                                 onClick={(e) => {
                                   if (e.button === 2) return;
                                   e.preventDefault();
+                                  setSelectedThreadCid(thread.cid);
                                   setIsReplyOpen(true);  
                                   setSelectedShortCid(thread.shortCid); 
                                   setSelectedParentCid(thread.cid);
@@ -1946,6 +1968,7 @@ const Board = () => {
                                     onClick={(e) => {
                                       if (e.button === 2) return;
                                       e.preventDefault();
+                                      setSelectedThreadCid(thread.cid);
                                       setIsReplyOpen(true);  
                                       setSelectedShortCid(reply.shortCid); 
                                       setSelectedParentCid(reply.cid);

src/components/views/Subscriptions.jsx

@@ -33,9 +33,11 @@ import handleQuoteClick from '../../utils/handleQuoteClick';
 import handleQuoteHover from '../../utils/handleQuoteHover';
 import handleStyleChange from '../../utils/handleStyleChange';
 import removeHighlight from '../../utils/removeHighlight';
+import useAnonModeRef from '../../hooks/useAnonModeRef';
 import useError from '../../hooks/useError';
 import useFeedStateString from '../../hooks/useFeedStateString';
 import useSuccess from '../../hooks/useSuccess';
+import useAnonModeStore from '../../hooks/stores/useAnonModeStore';
 import packageJson from '../../../package.json'
 const {version} = packageJson
 
@@ -62,6 +64,8 @@ const Subscriptions = () => {
     setSelectedTitle,
   } = useGeneralStore(state => state);
 
+  const { anonymousMode } = useAnonModeStore();
+
   const account = useAccount();
   const navigate = useNavigate();
   const [, setNewErrorMessage] = useError();
@@ -75,6 +79,7 @@ const Subscriptions = () => {
   const backlinkRefsMobile = useRef({});
   const quoteRefsMobile = useRef({});
   const postOnHoverRef = useRef(null);
+  const selectedThreadCidRef = useRef(null);
 
   const [isReplyOpen, setIsReplyOpen] = useState(false);
   const [isEditModalOpen, setIsEditModalOpen] = useState(false);
@@ -91,6 +96,13 @@ const Subscriptions = () => {
   const [postOnHoverHeight, setPostOnHoverHeight] = useState(0);
   const [deletePost, setDeletePost] = useState(false);
   const [moderatorPermissions, setModeratorPermissions] = useState({});
+  const [executeAnonMode, setExecuteAnonMode] = useState(false);
+
+  const setSelectedThreadCid = (cid) => {
+    selectedThreadCidRef.current = cid;
+  }
+
+  useAnonModeRef(selectedThreadCidRef, anonymousMode && executeAnonMode);
 
   const { feed, hasMore, loadMore } = useFeed({subplebbitAddresses: account?.subscriptions, sortType: 'active'});
   const [selectedFeed, setSelectedFeed] = useState(feed.sort((a, b) => b.timestamp - a.timestamp));
@@ -316,6 +328,13 @@ const Subscriptions = () => {
   });
 
 
+  useEffect(() => {
+    if (anonymousMode) {
+      setExecuteAnonMode(true);
+    }
+  }, [anonymousMode, selectedThreadCidRef]);
+
+
   const { publishCommentEdit } = usePublishCommentEdit(publishCommentEditOptions);
 
 
@@ -678,6 +697,7 @@ const Subscriptions = () => {
                               onClick={(e) => {
                                 if (e.button === 2) return;
                                 e.preventDefault();
+                                setSelectedThreadCid(thread.cid);
                                 setIsReplyOpen(true);  
                                 setSelectedShortCid(thread.shortCid); 
                                 setSelectedParentCid(thread.cid);
@@ -957,6 +977,7 @@ const Subscriptions = () => {
                                   onClick={(e) => {
                                     if (e.button === 2) return;
                                     e.preventDefault();
+                                    setSelectedThreadCid(thread.cid);
                                     setIsReplyOpen(true);  
                                     setSelectedShortCid(reply.shortCid); 
                                     setSelectedParentCid(reply.cid);
@@ -1390,6 +1411,7 @@ const Subscriptions = () => {
                               onClick={(e) => {
                                 if (e.button === 2) return;
                                 e.preventDefault();
+                                setSelectedThreadCid(thread.cid);
                                 setIsReplyOpen(true);  
                                 setSelectedShortCid(thread.shortCid); 
                                 setSelectedParentCid(thread.cid);
@@ -1562,6 +1584,7 @@ const Subscriptions = () => {
                                   onClick={(e) => {
                                     if (e.button === 2) return;
                                     e.preventDefault();
+                                    setSelectedThreadCid(thread.cid);
                                     setIsReplyOpen(true);  
                                     setSelectedShortCid(reply.shortCid); 
                                     setSelectedParentCid(reply.cid);

src/hooks/useAnonModeRef.js

@@ -0,0 +1,32 @@
+import { useEffect } from "react";
+import { createAccount, setActiveAccount, useAccounts } from "@plebbit/plebbit-react-hooks";
+import useAnonModeStore from "./stores/useAnonModeStore";
+
+const useAnonModeRef = (threadCidRef, execute) => {
+  const {accounts} = useAccounts();
+  const { anonymousMode } = useAnonModeStore();
+
+  useEffect(() => {
+    const handleAnonMode = async () => {
+      let storedAccounts = JSON.parse(localStorage.getItem('storedAccounts')) || {};
+
+      if (!anonymousMode) return;
+
+      if (!storedAccounts[threadCidRef.current] && execute) {
+        await createAccount();
+        const lastAccount = accounts[accounts.length - 1];
+        await setActiveAccount(lastAccount.name);
+        storedAccounts[threadCidRef.current] = lastAccount.name;
+
+        localStorage.setItem('storedAccounts', JSON.stringify(storedAccounts));
+      } else {
+        await setActiveAccount(storedAccounts[threadCidRef.current]);
+      }
+    }
+
+    handleAnonMode();
+  }, [threadCidRef, execute, accounts, anonymousMode]);
+
+  return;
+}
+export default useAnonModeRef;