From 08cc1132950daa2359bd0056599ef8be31703618 Mon Sep 17 00:00:00 2001
From: plebbitor <mottoes_recap0u@icloud.com>
Date: Tue, 28 Feb 2023 16:34:33 +0100
Subject: [PATCH] added tooltip

---
 src/App.js                             |  1 +
 src/components/Board.jsx               | 84 +++++++++++++++++++++++---
 src/components/Thread.jsx              | 81 ++++++++++++++++++++++---
 src/components/styles/Board.styled.jsx |  7 +++
 4 files changed, 154 insertions(+), 19 deletions(-)

diff --git a/src/App.js b/src/App.js
index 0b565cdb..6edc9a8a 100644
--- a/src/App.js
+++ b/src/App.js
@@ -6,6 +6,7 @@ import Board from './components/Board';
 import Thread from './components/Thread';
 import Catalog from './components/Catalog';
 import { createGlobalStyle } from 'styled-components';
+import 'react-tooltip/dist/react-tooltip.css';
 
 export const BoardContext = React.createContext();
 
diff --git a/src/components/Board.jsx b/src/components/Board.jsx
index 22415060..6996c736 100644
--- a/src/components/Board.jsx
+++ b/src/components/Board.jsx
@@ -5,6 +5,7 @@ import { Container, NavBar, Header, Break, PostFormLink, PostFormTable, PostForm
 import ImageBanner from './ImageBanner';
 import { useFeed, useAccountsActions } from '@plebbit/plebbit-react-hooks';
 import InfiniteScroll from 'react-infinite-scroller';
+import { Tooltip } from 'react-tooltip';
 
 
 const Board = ({ setBodyStyle }) => {
@@ -493,19 +494,56 @@ const Board = ({ setBodyStyle }) => {
                   <div key={`mob-po-${thread.cid}`} className="post op">
                     <div key={`mob-pi-${thread.cid}`} className="post-info-mobile">
                       <a key={`mob-pb-${thread.cid}`} className="post-menu-button-mobile" href={handleVoidClick}>...</a>
-                      <span className="name-block-mobile">
-                        <span key={`mob-n-${thread.cid}`} className="name-mobile">LongName (...)</span>
+                      <span key={`mob-nbm-${thread.cid}`} className="name-block-mobile">
+                        {thread.author.displayName
+                        ? thread.author.displayName.length > 15
+                        ? <>
+                            <Tooltip key={`mob-tt-nm-${thread.cid}`} id="tt-name-mobile" className="tooltip" />
+                            <span key={`mob-n-${thread.cid}`} className="name-mobile"
+                            data-tooltip-id="tt-name-mobile"
+                            data-tooltip-content={thread.author.displayName}
+                            data-tooltip-place="top">
+                              {thread.author.displayName.slice(0, 15) + " (...)"}
+                            </span>
+                          </> 
+                          : <span key={`mob-n-${thread.cid}`} className="name-mobile">
+                            {thread.author.displayName}</span>
+                        : <span key={`mob-n-${thread.cid}`} className="name-mobile">
+                          Anonymous</span>}
                         &nbsp;
                         <span key={`mob-pa-${thread.cid}`} className="poster-address-mobile">
                           (User:&nbsp;
-                          <span key={`mob-ha-${thread.cid}`} className="highlight-address-mobile" title="Highlight posts by this address">CCxfJWFT...</span>
-                          )
+                          {thread.author.address.length > 15 ?
+                          <>
+                            <Tooltip key={`mob-tt-am-${thread.cid}`} id="tt-address-mobile" className="tooltip" />
+                            <span key={`mob-ha-${thread.cid}`} className="highlight-address-mobile"
+                            data-tooltip-id="tt-address-mobile"
+                            data-tooltip-content={thread.author.address}
+                            data-tooltip-place="top">
+                              {thread.author.address.slice(0, 15) + "..."}
+                            </span>
+                          </>
+                          : <span key={`mob-ha-${thread.cid}`} className="highlight-address-mobile">
+                            {thread.author.address}
+                          </span>}
+                          )&nbsp;
                         </span>
                         <br key={`mob-br1-${thread.cid}`} />
-                        <span key={`mob-s-${thread.cid}`} className="subject-mobile">
-                          {/* {thread.title ? `${thread.title}` : null} */}
-                          Sometimes titles can be very lon (…)
-                        </span>
+                        {thread.title ? (
+                          thread.title.length > 30 ?
+                          <>
+                            <Tooltip key={`mob-tt-tm-${thread.cid}`} id="tt-title-mobile" className="tooltip" />
+                            <span key={`mob-t-${thread.cid}`} className="subject-mobile"
+                            data-tooltip-id="tt-title-mobile"
+                            data-tooltip-content={thread.title}
+                            data-tooltip-place="top">
+                              {thread.title.slice(0, 30) + " (...)"}
+                            </span>
+                          </>
+                        : <span key={`mob-t-${thread.cid}`} className="subject-mobile">
+                          {thread.title}
+                          </span>) 
+                        : null}
                       </span>
                       <span key={`mob-dt-${thread.cid}`} className="date-time-mobile">
                         2 weeks ago
@@ -542,11 +580,37 @@ const Board = ({ setBodyStyle }) => {
                       <div key={`mob-pi-${reply.cid}`} className="post-info-mobile">
                         <a className="post-menu-button-mobile" title="Post menu">...</a>
                         <span key={`mob-nb-${reply.cid}`} className="name-block-mobile">
-                          <span key={`mob-n-${reply.cid}`} className="name-mobile">LongName (...)</span>
+                          {reply.author.displayName
+                          ? reply.author.displayName.length > 12
+                          ? <>
+                              <Tooltip key={`mob-tt-nm-${reply.cid}`} id="tt-name-mobile" className="tooltip" />
+                              <span key={`mob-n-${reply.cid}`} className="name-mobile"
+                              data-tooltip-id="tt-name-mobile"
+                              data-tooltip-content={reply.author.displayName}
+                              data-tooltip-place="top">
+                                {reply.author.displayName.slice(0, 12) + " (...)"}
+                              </span>
+                            </>
+                            : <span key={`mob-n-${reply.cid}`} className="name-mobile">
+                              {reply.author.displayName}</span>
+                          : <span key={`mob-n-${reply.cid}`} className="name-mobile">
+                            Anonymous</span>}
                           &nbsp;
                           <span key={`mob-pa-${reply.cid}`} className="poster-address-mobile">
                             (User:&nbsp;
-                            <span key={`mob-ha-${reply.cid}`} className="highlight-address-mobile" title="Highlight posts by this address">CCxfJWFT...</span>
+                            {reply.author.address.length > 12 ?
+                            <>
+                              <Tooltip key={`mob-tt-am-${reply.cid}`} id="tt-address-mobile" className="tooltip" />
+                              <span key={`mob-ha-${reply.cid}`} className="highlight-address-mobile"
+                              data-tooltip-id="tt-address-mobile"
+                              data-tooltip-content={reply.author.address}
+                              data-tooltip-place="top">
+                                {reply.author.address.slice(0, 12) + "..."}
+                              </span>
+                            </>
+                            : <span key={`mob-ha-${reply.cid}`} className="highlight-address-mobile">
+                              {reply.author.address}
+                            </span>}
                             )
                           </span>
                           <br key={`mob-br-${reply.cid}`} />
diff --git a/src/components/Thread.jsx b/src/components/Thread.jsx
index 49db0e88..48afa880 100644
--- a/src/components/Thread.jsx
+++ b/src/components/Thread.jsx
@@ -5,6 +5,7 @@ import { ReplyFormTable, ReplyFormLink, TopBar, BottomBar } from './styles/Threa
 import { BoardContext } from '../App';
 import { useComment } from '@plebbit/plebbit-react-hooks';
 import ImageBanner from './ImageBanner';
+import { Tooltip } from 'react-tooltip';
 
 const Thread = ({ setBodyStyle }) => {
   const [defaultSubplebbits, setDefaultSubplebbits] = useState([]);
@@ -417,18 +418,54 @@ const Thread = ({ setBodyStyle }) => {
                     <div key={`mob-pi-${comment.cid}`} className="post-info-mobile">
                       <a key={`mob-pb-${comment.cid}`} className="post-menu-button-mobile" href={handleVoidClick}>...</a>
                       <span className="name-block-mobile">
-                        <span key={`mob-n-${comment.cid}`} className="name-mobile">LongName (...)</span>
+                        {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-place="top">
+                              {comment.author.displayName.slice(0, 15) + " (...)"}
+                            </span>
+                          </> 
+                          : <span key={`mob-n-${comment.cid}`} className="name-mobile">
+                            {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">
                           (User:&nbsp;
-                          <span key={`mob-ha-${comment.cid}`} className="highlight-address-mobile" title="Highlight posts by this address">CCxfJWFT...</span>
-                          )
+                          {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-place="top">
+                              {comment.author.address.slice(0, 15) + "..."}
+                            </span>
+                          </>
+                          : <span key={`mob-ha-${comment.cid}`} className="highlight-address-mobile">
+                            {comment.author.address}
+                          </span>}
+                          )&nbsp;
                         </span>
                         <br key={`mob-br1-${comment.cid}`} />
-                        <span key={`mob-s-${comment.cid}`} className="subject-mobile">
-                          {/* {thread.title ? `${thread.title}` : null} */}
-                          Sometimes titles can be very lon (…)
-                        </span>
+                        {comment.title ? (
+                            comment.title.length > 30 ?
+                            <>
+                              <Tooltip key={`mob-tt-tm-${comment.cid}`} id="tt-title-mobile" className="tooltip" />
+                              <span key={`mob-t-${comment.cid}`} className="subject-mobile"
+                              data-tooltip-id="tt-title-mobile"
+                              data-tooltip-content={comment.title}
+                              data-tooltip-place="top">
+                                {comment.title.slice(0, 30) + " (...)"}
+                              </span>
+                            </>
+                            : <span key={`mob-t-${comment.cid}`} className="subject-mobile">
+                              {comment.title}
+                            </span>) : null}
                       </span>
                       <span key={`mob-dt-${comment.cid}`} className="date-time-mobile">
                         2 weeks ago
@@ -465,11 +502,37 @@ const Thread = ({ setBodyStyle }) => {
                       <div key={`mob-pi-${reply.cid}`} className="post-info-mobile">
                         <a className="post-menu-button-mobile" title="Post menu">...</a>
                         <span key={`mob-nb-${reply.cid}`} className="name-block-mobile">
-                          <span key={`mob-n-${reply.cid}`} className="name-mobile">{reply.author.displayName || "Anonymous"}</span>
+                          {reply.author.displayName
+                          ? reply.author.displayName.length > 12
+                          ? <>
+                              <Tooltip key={`mob-tt-nm-${reply.cid}`} id="tt-name-mobile" className="tooltip" />
+                              <span key={`mob-n-${reply.cid}`} className="name-mobile"
+                              data-tooltip-id="tt-name-mobile"
+                              data-tooltip-content={reply.author.displayName}
+                              data-tooltip-place="top">
+                                {reply.author.displayName.slice(0, 12) + " (...)"}
+                              </span>
+                            </>
+                            : <span key={`mob-n-${reply.cid}`} className="name-mobile">
+                              {reply.author.displayName}</span>
+                          : <span key={`mob-n-${reply.cid}`} className="name-mobile">
+                            Anonymous</span>}
                           &nbsp;
                           <span key={`mob-pa-${reply.cid}`} className="poster-address-mobile">
                             (User:&nbsp;
-                            <span key={`mob-ha-${reply.cid}`} className="highlight-address-mobile" title="Highlight posts by this address">CCxfJWFT...</span>
+                            {reply.author.address.length > 12 ?
+                            <>
+                              <Tooltip key={`mob-tt-am-${reply.cid}`} id="tt-address-mobile" className="tooltip" />
+                              <span key={`mob-ha-${reply.cid}`} className="highlight-address-mobile"
+                              data-tooltip-id="tt-address-mobile"
+                              data-tooltip-content={reply.author.address}
+                              data-tooltip-place="top">
+                                {reply.author.address.slice(0, 12) + "..."}
+                              </span>
+                            </>
+                            : <span key={`mob-ha-${reply.cid}`} className="highlight-address-mobile">
+                              {reply.author.address}
+                            </span>}
                             )
                           </span>
                           <br key={`mob-br-${reply.cid}`} />
diff --git a/src/components/styles/Board.styled.jsx b/src/components/styles/Board.styled.jsx
index 77923399..25e2117d 100644
--- a/src/components/styles/Board.styled.jsx
+++ b/src/components/styles/Board.styled.jsx
@@ -1575,6 +1575,13 @@ export const BoardForm = styled.div`
       display: none;
     }
 
+    .tooltip {
+      border-radius: 0;
+      max-width: 80%;
+      font-size: 11px;
+      padding: 3px;
+    }
+
     ${({ selectedStyle }) => {
       switch (selectedStyle) {
         case 'Yotsuba':