add functional subscriptions board, fixes

src/App.js

@@ -7,12 +7,13 @@ import 'react-toastify/dist/ReactToastify.css';
 import useGeneralStore from './hooks/stores/useGeneralStore';
 import { GlobalStyle } from './components/styled/GlobalStyle.styled';
 import { Toast } from './components/styled/Toast.styled';
-import Home from './components/views/Home';
 import Board from './components/views/Board';
-import Thread from './components/views/Thread';
 import Catalog from './components/views/Catalog';
+import Home from './components/views/Home';
 import NotFound from './components/views/NotFound';
 import Pending from './components/views/Pending';
+import Subscriptions from './components/views/Subscriptions';
+import Thread from './components/views/Thread';
 import CaptchaModal from './components/CaptchaModal';
 import { importAll } from './components/ImageBanner';
 import preloadImages from './utils/preloadImages';
@@ -161,6 +162,9 @@ export default function App() {
         <Route path={`/profile/c/:index`} element={<Pending setBodyStyle={setBodyStyle} /> }>
           <Route path='settings' element={<Pending />} />
         </Route>
+        <Route path={`/profile/p/subscriptions`} element={<Subscriptions setBodyStyle={setBodyStyle} /> }>
+          <Route path='settings' element={<Subscriptions />} />
+        </Route>
         <Route path='*' element={<NotFound setBodyStyle={setBodyStyle} />} />
       </Routes>
       <Toast />

src/components/views/Board.jsx

@@ -3,7 +3,7 @@ import { Helmet } from 'react-helmet-async';
 import { Link, useNavigate, useParams } from 'react-router-dom';
 import { Tooltip } from 'react-tooltip';
 import { Virtuoso } from 'react-virtuoso';
-import { useAccount, useAccountComments, useFeed, usePublishComment } from '@plebbit/plebbit-react-hooks';
+import { useAccount, useAccountComments, useFeed, usePublishComment, useSubscribe } from '@plebbit/plebbit-react-hooks';
 import { flattenCommentsPages } from '@plebbit/plebbit-react-hooks/dist/lib/utils'
 import { debounce } from 'lodash';
 import useGeneralStore from '../../hooks/stores/useGeneralStore';
@@ -23,6 +23,7 @@ import handleQuoteClick from '../../utils/handleQuoteClick';
 import handleStyleChange from '../../utils/handleStyleChange';
 import useClickForm from '../../hooks/useClickForm';
 import useError from '../../hooks/useError';
+import useSuccess from '../../hooks/useSuccess';
 import packageJson from '../../../package.json'
 const {version} = packageJson
 
@@ -47,6 +48,8 @@ const Board = () => {
     showPostFormLink,
   } = useGeneralStore(state => state);
 
+  const account = useAccount();
+
   const nameRef = useRef();
   const subjectRef = useRef();
   const commentRef = useRef();
@@ -60,10 +63,12 @@ const Board = () => {
   const [selectedFeed, setSelectedFeed] = useState(feed);
   const { subplebbitAddress } = useParams();
 
-  const [errorMessage, setErrorMessage] = useState(null);
+  const { subscribed, subscribe, unsubscribe } = useSubscribe({subplebbitAddress: selectedAddress});
-  useError(errorMessage, [errorMessage]);
 
-  const account = useAccount();
+  const [errorMessage, setErrorMessage] = useState(null);
+  const [successMessage, setSuccessMessage] = useState(null);
+  useError(errorMessage, [errorMessage]);
+  useSuccess(successMessage, [successMessage]);
 
   const [triggerPublishComment, setTriggerPublishComment] = useState(false);
 
@@ -304,12 +309,33 @@ const Board = () => {
   // mobile navbar board select functionality
   const handleSelectChange = (event) => {
     const selected = event.target.value;
+
+    if (selected === 'subscriptions') {
+      navigate(`/profile/p/subscriptions`);
+      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);
+        setSuccessMessage(`Subscribed to ${selectedTitle ?? selectedAddress}`);
+      
+      } else if (subscribed === true) {
+        await unsubscribe(selectedAddress);
+        setSuccessMessage(`Unsubscribed from ${selectedTitle ?? selectedAddress}`);
+      }
+
+    } catch (error) {
+      setErrorMessage(error);
+    }
+  };
 
   return (
     <>
@@ -329,7 +355,7 @@ const Board = () => {
           <>
             <span className="boardList">
               [
-                <Link to="" onClick={() => {}}>Subscriptions</Link>
+                <Link to={`/profile/p/subscriptions`}>Subscriptions</Link>
               ]&nbsp;[
             </span>
             {defaultSubplebbits.map((subplebbit, index) => (
@@ -362,7 +388,7 @@ const Board = () => {
                 <strong>Board</strong>
                 &nbsp;
                 <select id="board-select-mobile" value={selectedAddress} onChange={handleSelectChange}>
-                  <option value="">Subscriptions</option>
+                  <option value="subscriptions">Subscriptions</option>
                   {defaultSubplebbits.map(subplebbit => (
                       <option key={`option-${subplebbit.address}`} value={subplebbit.address}
                       >{subplebbit.title ? subplebbit.title : subplebbit.address}</option>
@@ -467,10 +493,14 @@ const Board = () => {
             <>
               <span className="subscribe-button-desktop">
                 [
-                <button id="subscribe" style={{all: 'unset', cursor: 'pointer'}}>Subscribe</button>
+                <button id="subscribe" style={{all: 'unset', cursor: 'pointer'}}
+                  onClick={() => handleSubscribe()}>{subscribed ? "Unsubscribe" : "Subscribe"}
+                </button>
                 ]
               </span>
-              <button className="subscribe-button-mobile btn-wrap">Subscribe</button>
+              <button className="subscribe-button-mobile btn-wrap"
+                onClick={() => handleSubscribe()}>{subscribed ? "Unsubscribe" : "Subscribe"}
+              </button>
             </>
           ) : (
             <div id="stats" style={{float: "right", marginTop: "5px"}}>
@@ -595,7 +625,7 @@ const Board = () => {
                             <span key={`dt-${index}`} className="date-time" data-utc="data">{getDate(thread.timestamp)}</span>
                             &nbsp;
                             <span key={`pn-${index}`} className="post-number post-number-desktop">
-                              <span style={{cursor: 'pointer'}} id="reply-button" key={`pl1-${index}`} title="Link to this post">c/</span>
+                              <span key={`pl1-${index}`}>c/</span>
                               <Link to={`/p/${selectedAddress}/c/${thread.cid}`} id="reply-button" key={`pl2-${index}`} 
                               onClick={(e) => {
                                 if (e.button === 2) return;
@@ -667,13 +697,13 @@ const Board = () => {
                             <div key={`pi-${index}`} className="post-info">
                               <span key={`nb-${index}`} className="nameblock">
                                 {reply.author.displayName
-                                  ? reply.author.displayName.length > 12
+                                  ? reply.author.displayName.length > 20
                                   ? <Fragment key={`fragment6-${index}`}>
                                       <span key={`mob-n-${index}`} className="name"
                                       data-tooltip-id="tooltip"
                                       data-tooltip-content={reply.author.displayName}
                                       data-tooltip-place="top">
-                                        {reply.author.displayName.slice(0, 12) + " (...)"}
+                                        {reply.author.displayName.slice(0, 20) + " (...)"}
                                       </span>
                                     </Fragment>
                                     : <span key={`mob-n-${index}`} className="name">
@@ -708,7 +738,7 @@ const Board = () => {
                               <span key={`dt-${index}`} className="date-time" data-utc="data">{getDate(reply.timestamp)}</span>
                               &nbsp;
                               <span key={`pn-${index}`} className="post-number post-number-desktop">
-                                <span id="reply-button" style={{cursor: 'pointer'}} key={`pl1-${index}`} title="Link to this post">c/</span>
+                                <span key={`pl1-${index}`}>c/</span>
                                 {reply.shortCid ? (
                                   <Link to={`/p/${selectedAddress}/c/${thread.cid}`} id="reply-button" key={`pl2-${index}`} 
                                   onClick={(e) => {
@@ -831,13 +861,13 @@ const Board = () => {
                           <button key={`mob-pb-${index}`} className="post-menu-button-mobile" style={{ all: 'unset', cursor: 'pointer' }}>...</button>
                           <span key={`mob-nbm-${index}`} className="name-block-mobile">
                             {thread.author.displayName
-                            ? thread.author.displayName.length > 15
+                            ? thread.author.displayName.length > 20
                             ? <Fragment key={`fragment9-${index}`}>
                                 <span key={`mob-n-${index}`} className="name-mobile"
                                 data-tooltip-id="tooltip"
                                 data-tooltip-content={thread.author.displayName}
                                 data-tooltip-place="top">
-                                  {thread.author.displayName.slice(0, 15) + " (...)"}
+                                  {thread.author.displayName.slice(0, 20) + " (...)"}
                                 </span>
                               </Fragment> 
                               : <span key={`mob-n-${index}`} className="name-mobile">
@@ -874,7 +904,7 @@ const Board = () => {
                           <span key={`mob-dt-${index}`} className="date-time-mobile post-number-mobile">
                             {getDate(thread.timestamp)}
                             &nbsp;
-                            <span id="reply-button" style={{cursor: 'pointer'}} key={`mob-no-${index}`} title="Link to this post">c/</span>
+                            <span key={`mob-no-${index}`}>c/</span>
                             <Link to={`/p/${selectedAddress}/c/${thread.cid}`} id="reply-button" key={`mob-no2-${index}`} 
                               onClick={(e) => {
                                 if (e.button === 2) return;
@@ -972,13 +1002,13 @@ const Board = () => {
                             <button key={`pmbm-${index}`} className="post-menu-button-mobile" title="Post menu" style={{ all: 'unset', cursor: 'pointer' }}>...</button>
                             <span key={`mob-nb-${index}`} className="name-block-mobile">
                               {reply.author.displayName
-                              ? reply.author.displayName.length > 12
+                              ? reply.author.displayName.length > 20
                               ? <Fragment key={`fragment13-${index}`}>
                                   <span key={`mob-n-${index}`} className="name-mobile"
                                   data-tooltip-id="tooltip"
                                   data-tooltip-content={reply.author.displayName}
                                   data-tooltip-place="top">
-                                    {reply.author.displayName.slice(0, 12) + " (...)"}
+                                    {reply.author.displayName.slice(0, 20) + " (...)"}
                                   </span>
                                 </Fragment>
                                 : <span key={`mob-n-${index}`} className="name-mobile">
@@ -1012,7 +1042,7 @@ const Board = () => {
                             </span>
                             <span key={`mob-dt-${index}`} className="date-time-mobile post-number-mobile">
                             {getDate(reply.timestamp)}&nbsp;
-                              <span id="reply-button" style={{cursor: 'pointer'}} key={`mob-pl1-${index}`} title="Link to this post">c/</span>
+                              <span key={`mob-pl1-${index}`}>c/</span>
                               {reply.shortCid ? (
                                 <Link to={`/p/${selectedAddress}/c/${thread.cid}`} id="reply-button" key={`mob-pl2-${index}`} 
                                   onClick={(e) => {
@@ -1154,7 +1184,7 @@ const Board = () => {
             <span className="boardList">
               [
                 <Link to="" onClick={() => {}}>Subscriptions</Link>
-              ]&nbsp;[
+              ]&nbsp;
             </span>
             {defaultSubplebbits.map((subplebbit, index) => (
               <span className="boardList" key={`span-${subplebbit.address}`}>
@@ -1164,7 +1194,6 @@ const Board = () => {
                 {index !== defaultSubplebbits.length - 1 ? " /" : null}
               </span>
             ))}
-              ]
               <span className="nav">
                 [
                 <button style={{all: 'unset', cursor: 'pointer'}} onClick={

src/components/views/Catalog.jsx

@@ -218,6 +218,12 @@ const Catalog = () => {
   // mobile navbar board select functionality
   const handleSelectChange = (event) => {
     const selected = event.target.value;
+
+    if (selected === 'subscriptions') {
+      navigate(`/profile/p/subscriptions`);
+      return;
+    }
+
     const selectedTitle = defaultSubplebbits.find((subplebbit) => subplebbit.address === selected).title;
     setSelectedTitle(selectedTitle);
     setSelectedAddress(selected);
@@ -239,7 +245,7 @@ const Catalog = () => {
           <>
           <span className="boardList">
               [
-                <Link to="" onClick={() => {}}>Subscriptions</Link>
+                <Link to={`/profile/p/subscriptions`}>Subscriptions</Link>
               ]&nbsp;[
             </span>
             {defaultSubplebbits.map((subplebbit, index) => (
@@ -275,6 +281,7 @@ const Catalog = () => {
                 <strong>Board</strong>
                 &nbsp;
                 <select id="board-select-mobile" value={selectedAddress} onChange={handleSelectChange}>
+                  <option value="subscriptions">Subscriptions</option>
                   {defaultSubplebbits.map(subplebbit => (
                       <option key={`option-${subplebbit.address}`} value={subplebbit.address}
                       >{subplebbit.title ? subplebbit.title : subplebbit.address}</option>
@@ -497,7 +504,7 @@ const Catalog = () => {
             <span className="boardList">
               [
                 <Link to="" onClick={() => {}}>Subscriptions</Link>
-              ]&nbsp;[
+              ]&nbsp;
             </span>
             {defaultSubplebbits.map((subplebbit, index) => (
               <span className="boardList" key={`span-${subplebbit.address}`}>
@@ -510,7 +517,6 @@ const Catalog = () => {
                 {index !== defaultSubplebbits.length - 1 ? " /" : null}
               </span>
             ))}
-              ]
               <span className="nav">
               [
               <button style={{all: 'unset', cursor: 'pointer'}} onClick={

src/components/views/Thread.jsx

@@ -250,6 +250,12 @@ const Thread = () => {
   // mobile navbar board select functionality
   const handleSelectChange = (event) => {
     const selected = event.target.value;
+
+    if (selected === 'subscriptions') {
+      navigate(`/profile/p/subscriptions`);
+      return;
+    }
+
     const selectedTitle = defaultSubplebbits.find((subplebbit) => subplebbit.address === selected).title;
     setSelectedTitle(selectedTitle);
     setSelectedAddress(selected);
@@ -281,7 +287,7 @@ const Thread = () => {
           <>
           <span className="boardList">
               [
-                <Link to="" onClick={() => {}}>Subscriptions</Link>
+                <Link to={`/profile/p/subscriptions`}>Subscriptions</Link>
               ]&nbsp;[
             </span>
             {defaultSubplebbits.map((subplebbit, index) => (
@@ -317,6 +323,7 @@ const Thread = () => {
                 <strong>Board</strong>
                 &nbsp;
                 <select id="board-select-mobile" value={selectedAddress} onChange={handleSelectChange}>
+                  <option value="subscriptions">Subscriptions</option>
                   {defaultSubplebbits.map(subplebbit => (
                       <option key={`option-${subplebbit.address}`} value={subplebbit.address}
                       >{subplebbit.title ? subplebbit.title : subplebbit.address}</option>
@@ -564,7 +571,7 @@ const Thread = () => {
                         <span className="date-time" data-utc="data">{getDate(comment?.timestamp)}</span>
                         &nbsp;
                         <span className="post-number post-number-desktop">
-                          <span style={{cursor: 'pointer'}} id="reply-button" title="Link to this post">c/</span>
+                          <span style={{cursor: 'pointer'}}>c/</span>
                           <button id="reply-button" style={{ all: 'unset', cursor: 'pointer' }} onClick={() => {
                             setIsReplyOpen(true); setSelectedParentCid(comment.cid); setSelectedShortCid(comment.shortCid);
                             }} title="Reply to this post">{comment.shortCid}</button>
@@ -645,7 +652,7 @@ const Thread = () => {
                             <span key={`dt-${index}`} className="date-time" data-utc="data">{getDate(reply?.timestamp)}</span>
                             &nbsp;
                             <span style={{cursor: 'pointer'}} key={`pn-${index}`} className="post-number post-number-desktop">
-                              <span id="reply-button" key={`pl1-${index}`} title="Link to this post">c/</span>
+                              <span key={`pl1-${index}`}>c/</span>
                               {reply.shortCid ? (
                                 <button id="reply-button" style={{ all: 'unset', cursor: 'pointer' }} key={`pl2-${index}`} onClick={() => {
                                   setIsReplyOpen(true); setSelectedParentCid(reply.cid); setSelectedShortCid(reply.shortCid);
@@ -788,10 +795,11 @@ const Thread = () => {
                         <span key={`mob-dt-${comment.cid}`} className="date-time-mobile post-number-mobile">
                           {getDate(comment?.timestamp)}
                           &nbsp;
-                          <button id="reply-button" style={{ all: 'unset', cursor: 'pointer' }} key={`mob-no-${comment.cid}`} onClick={() => {
+                          <span key={`mob-no-${comment.cid}`}>c/</span>
+                          <span id="reply-button" style={{cursor: 'pointer'}} key={`mob-no2-${comment.cid}`} title="Reply to this post"
+                          onClick={() => {
                             setIsReplyOpen(true); setSelectedParentCid(comment.cid); setSelectedShortCid(comment.shortCid);
-                            }} title="Link to this post">c/</button>
+                            }}>{comment.shortCid}</span>
-                          <span id="reply-button" style={{cursor: 'pointer'}} key={`mob-no2-${comment.cid}`} title="Reply to this post">{comment.shortCid}</span>
                         </span>
                       </div>
                       {commentMediaInfo?.url ? (
@@ -903,7 +911,7 @@ const Thread = () => {
                           </span>
                           <span key={`mob-dt-${index}`} className="date-time-mobile post-number-mobile">
                             {getDate(reply?.timestamp)}&nbsp;
-                            <span id="reply-button" style={{cursor: 'pointer'}} key={`mob-pl1-${index}`} title="Link to this post">c/</span>
+                            <span key={`mob-pl1-${index}`}>c/</span>
                             {reply.shortCid ? (
                               <button id="reply-button" style={{ all: 'unset', cursor: 'pointer' }} key={`mob-pl2-${index}`} onClick={() => {
                                 setIsReplyOpen(true); setSelectedParentCid(reply.cid); setSelectedShortCid(reply.shortCid);
@@ -1129,7 +1137,7 @@ const Thread = () => {
             <span className="boardList">
               [
                 <Link to="" onClick={() => {}}>Subscriptions</Link>
-              ]&nbsp;[
+              ]&nbsp;
             </span>
             {defaultSubplebbits.map((subplebbit, index) => (
               <span className="boardList" key={`span-${subplebbit.address}`}>
@@ -1142,7 +1150,6 @@ const Thread = () => {
                 {index !== defaultSubplebbits.length - 1 ? " /" : null}
               </span>
             ))}
-              ]
             <span className="nav">
               [
               <button style={{all: 'unset', cursor: 'pointer'}} onClick={