test new hooks

src/components/views/Board.jsx

@@ -7,7 +7,7 @@ import ImageBanner from '../ImageBanner';
 import PostLoader from '../PostLoader';
 import ReplyModal from '../ReplyModal';
 import SettingsModal from '../SettingsModal';
-import { useFeed, useAccountsActions } from '@plebbit/plebbit-react-hooks';
+import { useFeed, usePublishComment } from '@plebbit/plebbit-react-hooks';
 import InfiniteScroll from 'react-infinite-scroller';
 import { Tooltip } from 'react-tooltip';
 import handleStyleChange from '../../utils/handleStyleChange';
@@ -34,7 +34,7 @@ const Board = () => {
   const [name, setName] = useState('');
   const [subject, setSubject] = useState('');
   const [comment, setComment] = useState('');
-  const { publishComment } = useAccountsActions();
+  const { publishComment } = usePublishComment();
   const [isCaptchaOpen, setIsCaptchaOpen] = useState(false);
   const [isReplyOpen, setIsReplyOpen] = useState(false);
   const [captchaImage, setCaptchaImage] = useState('');
@@ -42,7 +42,7 @@ const Board = () => {
   const [prevScrollPos, setPrevScrollPos] = useState(0);
   const [visible, setVisible] = useState(true);
   const [endIndex, setEndIndex] = useState(2);
-  const { feed, hasMore, loadMore } = useFeed([`${selectedAddress}`], 'new');
+  const { feed, hasMore, loadMore } = useFeed({subplebbitAddresses: ['test2'], sortType: 'new'});
   const [selectedFeed, setSelectedFeed] = useState(feed);
   const renderedFeed = selectedFeed.slice(0, endIndex);
   const { subplebbitAddress } = useParams();  

src/components/views/Catalog.jsx

@@ -4,7 +4,7 @@ import useAppStore from '../../useAppStore';
 import { Container, NavBar, Header, Break, PostForm, PostFormLink, PostFormTable } from './styles/Board.styled';
 import { TopBar } from './styles/Thread.styled';
 import { Threads } from './styles/Catalog.styled';
-import { useFeed, useAccountsActions } from '@plebbit/plebbit-react-hooks';
+import { useFeed, usePublishComment } from '@plebbit/plebbit-react-hooks';
 import ImageBanner from '../ImageBanner';
 import CaptchaModal from '../CaptchaModal';
 import CatalogLoader from '../CatalogLoader';
@@ -32,13 +32,13 @@ const Catalog = () => {
   const [name, setName] = useState('');
   const [subject, setSubject] = useState('');
   const [comment, setComment] = useState('');
-  const { publishComment } = useAccountsActions();
+  const { publishComment } = usePublishComment();
   const [isCaptchaOpen, setIsCaptchaOpen] = useState(false);
   const [captchaImage, setCaptchaImage] = useState('');
   const navigate = useNavigate();
   const [prevScrollPos, setPrevScrollPos] = useState(0);
   const [visible, setVisible] = useState(true);
-  const { feed, hasMore, loadMore } = useFeed([`${selectedAddress}`], 'new');
+  const { feed, hasMore, loadMore } = useFeed({subplebbitAddresses: [`thisIsATest`], sortType: 'new'});
   const { subplebbitAddress } = useParams();
   const handleClickForm = useClickForm();
 

src/components/views/Home.jsx

@@ -66,7 +66,7 @@ const Home = () => {
               {defaultSubplebbits.map(subplebbit => (
                 <div className="board" key={subplebbit.address}>
                   <div className="board-title">{subplebbit.title}</div>
-                  <Link to={`/${subplebbit.address}`} onClick={() => {
+                  <Link to={`/test2`} onClick={() => {
                     handleClick(subplebbit.title, subplebbit.address);
                   }} >
                     <img alt="board logo" src="/assets/plebchan.png" />

src/components/views/Thread.jsx

@@ -3,7 +3,7 @@ import { Link, useNavigate, useParams } from 'react-router-dom';
 import useAppStore from '../../useAppStore';
 import { Container, NavBar, Header, Break, PostForm, PostFormTable, BoardForm } from './styles/Board.styled';
 import { ReplyFormLink, TopBar, BottomBar } from './styles/Thread.styled';
-import { useComment, useAccountsActions } from '@plebbit/plebbit-react-hooks';
+import { useComment, usePublishComment } from '@plebbit/plebbit-react-hooks';
 import { Tooltip } from 'react-tooltip';
 import CaptchaModal from '../CaptchaModal';
 import ImageBanner from '../ImageBanner';
@@ -35,17 +35,21 @@ const Thread = () => {
   const [name, setName] = useState('');
   const [subject, setSubject] = useState('');
   const [commentContent, setCommentContent] = useState('');
-  const { publishComment } = useAccountsActions();
+  const { publishComment } = usePublishComment();
   const [isCaptchaOpen, setIsCaptchaOpen] = useState(false);
   const [isReplyOpen, setIsReplyOpen] = useState(false);
   const [captchaImage, setCaptchaImage] = useState('');
   const navigate = useNavigate();
   const [prevScrollPos, setPrevScrollPos] = useState(0);
   const [visible, setVisible] = useState(true);
-  const comment = useComment(`${selectedThread}`);
+  const comment = useComment({selectedThread});
   const { subplebbitAddress, threadCid } = useParams();
   const handleClickForm = useClickForm();
 
+  useEffect(() => {
+    console.log(comment);
+  }, [comment]);
+
 
   // temporary title from JSON, gets subplebbitAddress and threadCid from URL
   useEffect(() => {
@@ -418,37 +422,37 @@ const Thread = () => {
                           </span>) 
                         : null}
                       &nbsp;
-                      {comment.author.displayName
-                        ? comment.author.displayName.length > 20
+                      {comment.author?.displayName
+                        ? comment.author?.displayName.length > 20
                         ? <>
                             <Tooltip key={`mob-tt-nm-${comment.cid}`} id="tt-name-mobile" className="tooltip" />
                             <span key={`n-${comment.cid}`} className="name"
                             data-tooltip-id="tt-name-mobile"
-                            data-tooltip-content={comment.author.displayName}
+                            data-tooltip-content={comment.author?.displayName}
                             data-tooltip-place="top">
-                              {comment.author.displayName.slice(0, 20) + " (...)"}
+                              {comment.author?.displayName.slice(0, 20) + " (...)"}
                             </span>
                           </> 
                           : <span key={`n-${comment.cid}`} className="name">
-                            {comment.author.displayName}</span>
+                            {comment.author?.displayName}</span>
                         : <span key={`n-${comment.cid}`} className="name">
                           Anonymous</span>}
                         &nbsp;
                       &nbsp;
                       <span className="poster-address">
                         (u/
-                          {comment.author.address.length > 20 ?
+                          {comment.author?.address.length > 20 ?
                         <>
                           <Tooltip key={`mob-tt-am-${comment.cid}`} id="tt-address-mobile" className="tooltip" />
                           <span key={`pa-${comment.cid}`} className="poster-address"
                           data-tooltip-id="tt-address-mobile"
-                          data-tooltip-content={comment.author.address}
+                          data-tooltip-content={comment.author?.address}
                           data-tooltip-place="top">
-                            {comment.author.address.slice(0, 20) + "..."}
+                            {comment.author?.address.slice(0, 20) + "..."}
                           </span>
                         </>
                         : <span key={`pa-${comment.cid}`} className="poster-address">
-                          {comment.author.address}
+                          {comment.author?.address}
                         </span>})
                       </span>
                       &nbsp;
@@ -456,7 +460,7 @@ const Thread = () => {
                       &nbsp;
                       <span className="post-number">
                         <Link to="" onClick={handleVoidClick} title="Link to this post">c/</Link>
-                        <button id="reply-button" style={{ all: 'unset', cursor: 'pointer' }} onClick={handleReplyOpen} title="Reply to this post">{comment.cid.slice(0, 8)}</button>
+                        <button id="reply-button" style={{ all: 'unset', cursor: 'pointer' }} onClick={handleReplyOpen} title="Reply to this post">{comment.cid?.slice(0, 8)}</button>
                       </span>&nbsp;&nbsp;
                       <button key={`pmb-${comment.cid}`} className="post-menu-button" onClick={handleVoidClick} title="Post menu" style={{ all: 'unset', cursor: 'pointer' }}>▶</button>
                       <div id="backlink-id" className="backlink">
@@ -568,36 +572,36 @@ const Thread = () => {
                     <div key={`mob-pi-${comment.cid}`} className="post-info-mobile">
                       <button style={{ all: 'unset', cursor: 'pointer' }} key={`mob-pb-${comment.cid}`} className="post-menu-button-mobile" onClick={handleVoidClick}>...</button>
                       <span className="name-block-mobile">
-                        {comment.author.displayName
-                        ? comment.author.displayName.length > 15
+                        {comment.author?.displayName
+                        ? comment.author?.displayName.length > 15
                         ? <>
                             <Tooltip key={`mob-tt-nm-${comment.cid}`} id="tt-name-mobile" className="tooltip" />
                             <span key={`mob-n-${comment.cid}`} className="name-mobile"
                             data-tooltip-id="tt-name-mobile"
-                            data-tooltip-content={comment.author.displayName}
+                            data-tooltip-content={comment.author?.displayName}
                             data-tooltip-place="top">
-                              {comment.author.displayName.slice(0, 15) + " (...)"}
+                              {comment.author?.displayName.slice(0, 15) + " (...)"}
                             </span>
                           </> 
                           : <span key={`mob-n-${comment.cid}`} className="name-mobile">
-                            {comment.author.displayName}</span>
+                            {comment.author?.displayName}</span>
                         : <span key={`mob-n-${comment.cid}`} className="name-mobile">
                           Anonymous</span>}
                         &nbsp;
                         <span key={`mob-pa-${comment.cid}`} className="poster-address-mobile">
                           (u/
-                          {comment.author.address.length > 15 ?
+                          {comment.author?.address.length > 15 ?
                           <>
                             <Tooltip key={`mob-tt-am-${comment.cid}`} id="tt-address-mobile" className="tooltip" />
                             <span key={`mob-ha-${comment.cid}`} className="highlight-address-mobile"
                             data-tooltip-id="tt-address-mobile"
-                            data-tooltip-content={comment.author.address}
+                            data-tooltip-content={comment.author?.address}
                             data-tooltip-place="top">
-                              {comment.author.address.slice(0, 15) + "..."}
+                              {comment.author?.address.slice(0, 15) + "..."}
                             </span>
                           </>
                           : <span key={`mob-ha-${comment.cid}`} className="highlight-address-mobile">
-                            {comment.author.address}
+                            {comment.author?.address}
                           </span>}
                           )&nbsp;
                         </span>
@@ -621,7 +625,7 @@ const Thread = () => {
                         {getDate(comment.timestamp)}
                         &nbsp;
                         <button id="reply-button" style={{ all: 'unset', cursor: 'pointer' }} key={`mob-no-${comment.cid}`} onClick={handleReplyOpen} title="Link to this post">c/</button>
-                        <Link to="" key={`mob-no2-${comment.cid}`} onClick={handleVoidClick} title="Reply to this post">{comment.cid.slice(0, 8)}</Link>
+                        <Link to="" key={`mob-no2-${comment.cid}`} onClick={handleVoidClick} title="Reply to this post">{comment.cid?.slice(0, 8)}</Link>
                       </span>
                     </div>
                     <div key={`mob-f-${comment.cid}`} className="file-mobile">

src/useAppStore.js

@@ -23,7 +23,6 @@ const useAppStore = create((set) => ({
   selectedAddress: '',
   setSelectedAddress: (address) => set({ selectedAddress: address }),
   
-  
   selectedStyle: localStorage.getItem('selectedStyle') || 'Yotsuba',
   setSelectedStyle: (style) => {
     localStorage.setItem('selectedStyle', style);

src/utils/getDate.js

@@ -1,6 +1,6 @@
 const getDate = (commentTimestamp) => {
   const locale = Intl.DateTimeFormat().resolvedOptions().locale;
-  const string = new Intl.DateTimeFormat(locale, {
+  const string = /*new Intl.DateTimeFormat(locale, {
     hour12: false,
     year: '2-digit',
     month: '2-digit',
@@ -9,7 +9,7 @@ const getDate = (commentTimestamp) => {
     hour: '2-digit',
     minute: '2-digit',
     second: '2-digit'
-  }).format(new Date(commentTimestamp * 1000));
+  }).format(new Date(commentTimestamp * 1000))*/ "";
   if (locale.startsWith('ar')) {
     return string
   }