From 981f049811ae46cfce078ce8f8d5ee480516cdbf Mon Sep 17 00:00:00 2001
From: plebbitor <mottoes_recap0u@icloud.com>
Date: Sat, 22 Apr 2023 18:02:47 +0200
Subject: [PATCH] fixed undefined values and tooltips

---
 src/components/views/Board.jsx   | 16 ++++++++--------
 src/components/views/Pending.jsx | 19 ++++++++++++++-----
 2 files changed, 22 insertions(+), 13 deletions(-)

diff --git a/src/components/views/Board.jsx b/src/components/views/Board.jsx
index 90fa6d3f..9d985ff4 100644
--- a/src/components/views/Board.jsx
+++ b/src/components/views/Board.jsx
@@ -501,10 +501,10 @@ const Board = () => {
                             </div>
                           </span>
                           {thread.content ? (
-                            thread.content.length > 1000 ?
+                            thread.content?.length > 1000 ?
                             <Fragment key={`fragment5-${thread.cid}`}>
                               <blockquote key={`bq-${thread.cid}`}>
-                              <Post content={thread.content.slice(0, 1000)} key={`post-${thread.cid}`} />
+                              <Post content={thread.content?.slice(0, 1000)} key={`post-${thread.cid}`} />
                                 <span key={`ttl-s-${thread.cid}`} className="ttl"> (...) 
                                 <br key={`ttl-s-br1-${thread.cid}`} /><br key={`ttl-s-br2${thread.cid}`} />
                                 Post too long.&nbsp;
@@ -642,13 +642,13 @@ const Board = () => {
                               </div>
                             ) : null}
                             {reply.content ? (
-                              reply.content.length > 500 ?
+                              reply.content?.length > 500 ?
                               <Fragment key={`fragment8-${reply.cid}`}>
                                 <blockquote key={`pm-${reply.cid}`} comment={reply} className="post-message">
                                   <Link to={() => {}} key={`r-pm-${reply.cid}`} className="quotelink" onClick={(event) => handleQuoteClick(reply, shortParentCid, thread.shortCid, event)}>
                                       {`c/${shortParentCid}`}{shortParentCid === thread.shortCid ? " (OP)" : null}
                                   </Link>
-                                  <Post content={reply.content.slice(0, 500)} key={`post-${reply.cid}`} />
+                                  <Post content={reply.content?.slice(0, 500)} key={`post-${reply.cid}`} />
                                   <span key={`ttl-s-${reply.cid}`} className="ttl"> (...)
                                   <br key={`ttl-s-br1-${reply.cid}`} /><br key={`ttl-s-br2${reply.cid}`} />
                                   Comment too long.&nbsp;
@@ -766,10 +766,10 @@ const Board = () => {
                           </div>
                         ) : null}
                         {thread.content ? (
-                          thread.content.length > 500 ?
+                          thread.content?.length > 500 ?
                           <Fragment key={`fragment12-${thread.cid}`}>
                             <blockquote key={`mob-bq-${thread.cid}`} className="post-message-mobile">
-                              <Post content={thread.content.slice(0, 500)} key={`post-mobile-${thread.cid}`} />
+                              <Post content={thread.content?.slice(0, 500)} key={`post-mobile-${thread.cid}`} />
                               <span key={`mob-ttl-s-${thread.cid}`} className="ttl"> (...)
                               <br key={`mob-ttl-s-br1-${thread.cid}`} /><br key={`mob-ttl-s-br2${thread.cid}`} />
                               Post too long.&nbsp;
@@ -879,13 +879,13 @@ const Board = () => {
                             </div>
                           ) : null}
                           {reply.content ? (
-                            reply.content.length > 500 ?
+                            reply.content?.length > 500 ?
                             <Fragment key={`fragment15-${reply.cid}`}>
                               <blockquote key={`mob-pm-${reply.cid}`} className="post-message">
                                 <Link to={() => {}} key={`mob-r-pm-${reply.cid}`} className="quotelink" onClick={(event) => handleQuoteClick(reply, shortParentCid, thread.shortCid, event)}>
                                   {`c/${shortParentCid}`}{shortParentCid === thread.shortCid ? " (OP)" : null}
                                 </Link>
-                                <Post content={reply.content.slice(0, 500)} key={`post-mobile-${reply.cid}`} comment={reply} />
+                                <Post content={reply.content?.slice(0, 500)} key={`post-mobile-${reply.cid}`} comment={reply} />
                                 <span key={`mob-ttl-s-${reply.cid}`} className="ttl"> (...)
                                 <br key={`mob-ttl-s-br1-${reply.cid}`} /><br key={`mob-ttl-s-br2${reply.cid}`} />
                                 Comment too long.&nbsp;
diff --git a/src/components/views/Pending.jsx b/src/components/views/Pending.jsx
index dd2f38e9..378a80e4 100644
--- a/src/components/views/Pending.jsx
+++ b/src/components/views/Pending.jsx
@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
 import { Helmet } from 'react-helmet-async';
 import { Link, useNavigate, useParams } from 'react-router-dom';
 import { Tooltip } from 'react-tooltip';
-import { useAccountComment } from '@plebbit/plebbit-react-hooks';
+import { useAccount, useAccountComment } from '@plebbit/plebbit-react-hooks';
 import useGeneralStore from '../../hooks/stores/useGeneralStore';
 import { Container, NavBar, Header, Break, PostForm, BoardForm } from '../styled/Board.styled';
 import { ReplyFormLink, TopBar, BottomBar } from '../styled/Thread.styled';
@@ -31,6 +31,7 @@ const Pending = () => {
 
   const { index } = useParams();
 
+  const account = useAccount();
   const comment = useAccountComment({commentIndex: index});
   
   const [visible] = useState(true);
@@ -258,8 +259,12 @@ const Pending = () => {
                         &nbsp;
                         <span className="poster-address">
                           (u/
-                            <span key={`pa-${"pending"}`} className="poster-address">
-                            {comment.author?.address}
+                            <span key={`pa-${"pending"}`} className="poster-address"
+                              data-tooltip-id="tooltip"
+                              data-tooltip-content={account?.author?.address}
+                              data-tooltip-place="top"
+                            >
+                            {account?.author?.address.slice(0, 10) + "(...)"}
                           </span>)
                         </span>
                         &nbsp;
@@ -302,8 +307,12 @@ const Pending = () => {
                           &nbsp;
                           <span key={`mob-pa-${"pending"}`} className="poster-address-mobile">
                             (u/
-                            <span key={`mob-ha-${"pending"}`} className="highlight-address-mobile">
-                              {comment.author?.address}
+                            <span key={`mob-ha-${"pending"}`} className="poster-address-mobile"
+                              data-tooltip-id="tooltip"
+                              data-tooltip-content={account?.author?.address}
+                              data-tooltip-place="top"
+                            >
+                              {account?.author?.address.slice(0, 10) + "(...)"}
                             </span>
                             )&nbsp;
                           </span>