Merge pull request #293 from plebbit/development

Development

package.json

@@ -9,7 +9,7 @@
     "@capacitor/android": "3.6.0",
     "@capacitor/app": "1.1.1",
     "@capacitor/core": "3.6.0",
-    "@plebbit/plebbit-react-hooks": "https://github.com/plebbit/plebbit-react-hooks.git#b6477148191a501aa0b0c11acfc4761aca0dcc1e",
+    "@plebbit/plebbit-react-hooks": "https://github.com/plebbit/plebbit-react-hooks.git#30095e763d80e29168dc6ee1fe7515fd91065489",
     "@testing-library/dom": "9.0.1",
     "@testing-library/jest-dom": "5.14.1",
     "@testing-library/react": "14.0.0",

src/components/DisplayName.jsx

@@ -0,0 +1,9 @@
+import { useComment } from '@plebbit/plebbit-react-hooks';
+
+const DisplayName = ({ commentCid }) => {
+  const comment = useComment({ commentCid });
+
+  return <span>{comment?.author?.displayName ?? 'Anonymous'}</span>;
+};
+
+export default DisplayName;

src/components/Embed.jsx

@@ -72,7 +72,7 @@ const TwitterEmbed = ({ parsedUrl }) => {
       allow='accelerometer; encrypted-media; gyroscope; picture-in-picture; web-share'
       title={parsedUrl.href}
       srcdoc={`
-      <blockquote className="twitter-tweet" data-theme="dark">
+      <blockquote class="twitter-tweet" data-theme="dark">
         <a href="${parsedUrl.href.replace('x.com', 'twitter.com')}"></a>
       </blockquote>
       <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
@@ -101,7 +101,7 @@ const RedditEmbed = ({ parsedUrl }) => {
           margin: 0!important;
         }
       </style>
-      <blockquote className="reddit-embed-bq" style="height:240px" data-embed-theme="dark">
+      <blockquote class="reddit-embed-bq" style="height:240px" data-embed-theme="dark">
         <a href="${parsedUrl.href}"></a>    
       </blockquote>
       <script async src="https://embed.reddit.com/widgets.js" charset="UTF-8"></script>
@@ -152,7 +152,7 @@ const TiktokEmbed = ({ parsedUrl }) => {
       allow='accelerometer; encrypted-media; gyroscope; picture-in-picture; web-share'
       title={parsedUrl.href}
       srcdoc={`
-      <blockquote className="tiktok-embed" data-video-id="${videoId}">
+      <blockquote class="tiktok-embed" data-video-id="${videoId}">
         <a></a>
       </blockquote> 
       <script async src="https://www.tiktok.com/embed.js"></script>
@@ -177,7 +177,7 @@ const InstagramEmbed = ({ parsedUrl }) => {
       allow='accelerometer; encrypted-media; gyroscope; picture-in-picture; web-share'
       title={parsedUrl.href}
       srcdoc={`
-      <blockquote className="instagram-media">
+      <blockquote class="instagram-media">
         <a href="https://www.instagram.com/p/${id}/"></a>
       </blockquote>
       <script async src="//www.instagram.com/embed.js"></script>

src/components/PostOnHover.jsx

@@ -36,8 +36,8 @@ const PostOnHover = ({ cid, feed }) => {
       }}
     >
       <BoardForm selectedStyle={selectedStyle} style={{ margin: '0', padding: '0' }}>
-        <div className='board' style={{ margin: '0', padding: '0' }}>
+        <div className='board'>
-          <div className='thread' style={{ margin: '0', padding: '0' }}>
+          <div className='thread'>
             {reply.state === 'succeeded' ? (
               <div className='reply-container'>
                 <div className='post-reply post-reply-desktop'>

src/components/modals/SettingsModal.jsx

@@ -343,7 +343,7 @@ const SettingsModal = ({ isOpen, closeModal }) => {
 
       if (!oldData.account?.author?.address.endsWith('.eth') && parsedJson.account?.author?.address.endsWith('.eth') && anonymousMode === true) {
         setAnonymousMode(false);
-        localStorage.setitem('successToast', 'Account data saved successfully. ENS address detected, Anon mode disabled.');
+        localStorage.setItem('successToast', 'Account data saved successfully. ENS address detected, Anon mode disabled.');
         window.location.reload();
       } else {
         setNewSuccessMessage('Account data saved successfully.');

src/components/views/AllCatalog.jsx

@@ -12,6 +12,7 @@ import { Threads, PostPreview, PostMenuCatalog } from '../styled/views/Catalog.s
 import { TopBar, Footer } from '../styled/views/Thread.styled';
 import { AlertModal } from '../styled/modals/AlertModal.styled';
 import CatalogLoader from '../CatalogLoader';
+import DisplayName from '../DisplayName';
 import EditModal from '../modals/EditModal';
 import ImageBanner from '../ImageBanner';
 import VerifiedAuthor from '../VerifiedAuthor';
@@ -376,14 +377,17 @@ const CatalogPost = ({ post }) => {
                   top: popupPosition.top + 5,
                 }}
               >
-                <span className='post-subject'>{thread.title ? `${thread.title} ` : 'Posted '}</span>
+                {thread.title ? <span className='post-subject'>{thread.title} </span> : 'Posted '}
                 by
                 <span className='post-author'>{thread.author.displayName ? ` ${thread.author.displayName} ` : ' Anonymous '}</span>
                 <span className='post-ago'>{thread.timestamp ? getFormattedTime(thread.timestamp) : null}</span>
                 {thread.replyCount > 0 ? (
                   <div className='post-last'>
                     Last reply by
-                    <span className='post-author'> Anonymous </span>
+                    <span className='post-author'>
+                      {' '}
+                      <DisplayName commentCid={thread.lastChildCid} />{' '}
+                    </span>
                     <span className='post-ago'>{getFormattedTime(thread.lastReplyTimestamp)}</span>
                   </div>
                 ) : null}
@@ -684,8 +688,8 @@ const CatalogPost = ({ post }) => {
               }}
               onMouseLeave={() => setIsHoveringForMenu(false)}
             >
-              <b key={`b2-`}>{thread.title ? `${thread.title}` : null}</b>
+              <b key={`b2-`}>{thread.title ? `${thread.title}${thread.content ? ': ' : ''}` : null}</b>
-              {thread.content ? `: ${thread.content}` : null}
+              {thread.content ? `${thread.content}` : null}
             </span>
           </div>
         </Link>

src/components/views/Catalog.jsx

@@ -18,6 +18,7 @@ import SettingsModal from '../modals/SettingsModal';
 import BoardSettings from '../BoardSettings';
 import BoardStats from '../BoardStats';
 import CatalogLoader from '../CatalogLoader';
+import DisplayName from '../DisplayName';
 import ImageBanner from '../ImageBanner';
 import OfflineIndicator from '../OfflineIndicator';
 import VerifiedAuthor from '../VerifiedAuthor';
@@ -762,14 +763,17 @@ const CatalogPost = ({ post }) => {
                     top: popupPosition.top + 5,
                   }}
                 >
-                  <span className='post-subject'>{thread.title ? `${thread.title} ` : 'Posted '}</span>
+                  {thread.title ? <span className='post-subject'>{thread.title} </span> : 'Posted '}
                   by
                   <span className='post-author'>{thread.author.displayName ? ` ${thread.author.displayName} ` : ' Anonymous '}</span>
                   <span className='post-ago'>{thread.timestamp ? getFormattedTime(thread.timestamp) : null}</span>
                   {thread.replyCount > 0 ? (
                     <div className='post-last'>
                       Last reply by
-                      <span className='post-author'> Anonymous </span>
+                      <span className='post-author'>
+                        {' '}
+                        <DisplayName commentCid={thread.lastChildCid} />{' '}
+                      </span>
                       <span className='post-ago'>{getFormattedTime(thread.lastReplyTimestamp)}</span>
                     </div>
                   ) : null}
@@ -1104,8 +1108,8 @@ const CatalogPost = ({ post }) => {
                   }}
                   onMouseLeave={() => setIsHoveringForMenu(false)}
                 >
-                  <b key={`b2-`}>{thread.title ? `${thread.title}` : null}</b>
+                  <b key={`b2-`}>{thread.title ? `${thread.title}${thread.content ? ': ' : ''}` : null}</b>
-                  {thread.content ? `: ${thread.content}` : null}
+                  {thread.content ? `${thread.content}` : null}
                 </span>
               </div>
             </div>

src/components/views/SubscriptionsCatalog.jsx

@@ -12,6 +12,7 @@ import { Threads, PostPreview, PostMenuCatalog } from '../styled/views/Catalog.s
 import { TopBar, Footer } from '../styled/views/Thread.styled';
 import { AlertModal } from '../styled/modals/AlertModal.styled';
 import CatalogLoader from '../CatalogLoader';
+import DisplayName from '../DisplayName';
 import EditModal from '../modals/EditModal';
 import ImageBanner from '../ImageBanner';
 import VerifiedAuthor from '../VerifiedAuthor';
@@ -376,14 +377,17 @@ const CatalogPost = ({ post }) => {
                   top: popupPosition.top + 5,
                 }}
               >
-                <span className='post-subject'>{thread.title ? `${thread.title} ` : 'Posted '}</span>
+                {thread.title ? <span className='post-subject'>{thread.title} </span> : 'Posted '}
                 by
                 <span className='post-author'>{thread.author.displayName ? ` ${thread.author.displayName} ` : ' Anonymous '}</span>
                 <span className='post-ago'>{thread.timestamp ? getFormattedTime(thread.timestamp) : null}</span>
                 {thread.replyCount > 0 ? (
                   <div className='post-last'>
                     Last reply by
-                    <span className='post-author'> Anonymous </span>
+                    <span className='post-author'>
+                      {' '}
+                      <DisplayName commentCid={thread.lastChildCid} />{' '}
+                    </span>
                     <span className='post-ago'>{getFormattedTime(thread.lastReplyTimestamp)}</span>
                   </div>
                 ) : null}
@@ -684,8 +688,8 @@ const CatalogPost = ({ post }) => {
               }}
               onMouseLeave={() => setIsHoveringForMenu(false)}
             >
-              <b key={`b2-`}>{thread.title ? `${thread.title}` : null}</b>
+              <b key={`b2-`}>{thread.title ? `${thread.title}${thread.content ? ': ' : ''}` : null}</b>
-              {thread.content ? `: ${thread.content}` : null}
+              {thread.content ? `${thread.content}` : null}
             </span>
           </div>
         </Link>

yarn.lock

@@ -2817,9 +2817,24 @@
   dependencies:
     debug "4.3.3"
 
-"@plebbit/plebbit-react-hooks@https://github.com/plebbit/plebbit-react-hooks.git#b6477148191a501aa0b0c11acfc4761aca0dcc1e":
+"@plebbit/plebbit-react-hooks@https://github.com/plebbit/plebbit-react-hooks.git#30095e763d80e29168dc6ee1fe7515fd91065489":
   version "0.0.1"
-  resolved "https://github.com/plebbit/plebbit-react-hooks.git#b6477148191a501aa0b0c11acfc4761aca0dcc1e"
+  resolved "https://github.com/plebbit/plebbit-react-hooks.git#30095e763d80e29168dc6ee1fe7515fd91065489"
+  dependencies:
+    "@plebbit/plebbit-js" "https://github.com/plebbit/plebbit-js.git#6985b2a4194328752c6d76e80470c8079c562869"
+    "@plebbit/plebbit-logger" "https://github.com/plebbit/plebbit-logger.git"
+    assert "2.0.0"
+    ethers "5.6.9"
+    localforage "1.10.0"
+    lodash.isequal "4.5.0"
+    memoizee "0.4.15"
+    quick-lru "5.1.1"
+    uuid "8.3.2"
+    zustand "4.0.0"
+
+"@plebbit/plebbit-react-hooks@https://github.com/plebbit/plebbit-react-hooks.git#f6bbd8a323e8ba13618da7b64b852f10d93688d0":
+  version "0.0.1"
+  resolved "https://github.com/plebbit/plebbit-react-hooks.git#f6bbd8a323e8ba13618da7b64b852f10d93688d0"
   dependencies:
     "@plebbit/plebbit-js" "https://github.com/plebbit/plebbit-js.git#6985b2a4194328752c6d76e80470c8079c562869"
     "@plebbit/plebbit-logger" "https://github.com/plebbit/plebbit-logger.git"