From 99a219733c65138616976fd3f3f71a6b90199909 Mon Sep 17 00:00:00 2001
From: "Tom (plebeius.eth)" <tom@plebbit.com>
Date: Mon, 12 Aug 2024 18:11:18 +0200
Subject: [PATCH] feat(post): add button to show full comment when it's too
 long

---
 src/components/post-desktop/post-desktop.tsx | 14 +++++---------
 src/components/post-mobile/post-mobile.tsx   | 14 +++++---------
 src/views/post/post.module.css               | 10 ++++++----
 3 files changed, 16 insertions(+), 22 deletions(-)

diff --git a/src/components/post-desktop/post-desktop.tsx b/src/components/post-desktop/post-desktop.tsx
index 556c9860..96bdff11 100644
--- a/src/components/post-desktop/post-desktop.tsx
+++ b/src/components/post-desktop/post-desktop.tsx
@@ -239,8 +239,7 @@ const PostMedia = ({ post }: PostProps) => {
 };
 
 const PostMessage = ({ post }: PostProps) => {
-  const { cid, content, deleted, edit, original, parentCid, postCid, reason, removed, state, subplebbitAddress } = post || {};
-  const { isDescription, isRules } = post || {}; // custom properties, not from api
+  const { cid, content, deleted, edit, original, parentCid, postCid, reason, removed, state } = post || {};
   // TODO: commentAuthor is not available outside of editedComment, update when available
   // const banned = !!post?.commentAuthor?.banExpiresAt;
   const { t } = useTranslation();
@@ -249,7 +248,8 @@ const PostMessage = ({ post }: PostProps) => {
   const isInPostView = isPostPageView(location.pathname, params);
   const [showOriginal, setShowOriginal] = useState(false);
 
-  const displayContent = content && !isInPostView && content.length > 1000 ? content?.slice(0, 1000) + '(...)' : content;
+  const [showFullComment, setShowFullComment] = useState(false);
+  const displayContent = content && !isInPostView && content.length > 1000 && !showFullComment ? content.slice(0, 1000) : content;
 
   const quotelinkReply = useComment({ commentCid: parentCid });
   const isReply = parentCid;
@@ -318,14 +318,10 @@ const PostMessage = ({ post }: PostProps) => {
           />
         </span>
       )} */}
-      {!isReply && content.length > 1000 && !isInPostView && (
+      {content?.length > 1000 && !isInPostView && !showFullComment && (
         <span className={styles.abbr}>
           <br />
-          <Trans
-            i18nKey={'comment_too_long'}
-            shouldUnescape={true}
-            components={{ 1: <Link to={`/p/${subplebbitAddress}/${isDescription ? 'description' : isRules ? 'rules' : `c/${cid}`}`} /> }}
-          />
+          <Trans i18nKey={'comment_too_long'} shouldUnescape={true} components={{ 1: <span onClick={() => setShowFullComment(true)} /> }} />
         </span>
       )}
       {!cid && state === 'pending' && stateString !== 'Failed' && (
diff --git a/src/components/post-mobile/post-mobile.tsx b/src/components/post-mobile/post-mobile.tsx
index 025b65e5..81f07724 100644
--- a/src/components/post-mobile/post-mobile.tsx
+++ b/src/components/post-mobile/post-mobile.tsx
@@ -163,8 +163,7 @@ const ReplyBacklinks = ({ post }: PostProps) => {
 
 const PostMessageMobile = ({ post }: PostProps) => {
   const { t } = useTranslation();
-  const { cid, content, deleted, edit, original, parentCid, postCid, reason, removed, state, subplebbitAddress } = post || {};
-  const { isDescription, isRules } = post || {}; // custom properties, not from api
+  const { cid, content, deleted, edit, original, parentCid, postCid, reason, removed, state } = post || {};
   // TODO: commentAuthor is not available outside of editedComment, update when available
   // const banned = !!post?.commentAuthor?.banExpiresAt;
   const [showOriginal, setShowOriginal] = useState(false);
@@ -173,7 +172,8 @@ const PostMessageMobile = ({ post }: PostProps) => {
   const location = useLocation();
   const isInPostView = isPostPageView(location.pathname, params);
 
-  const displayContent = content && !isInPostView && content.length > 1000 ? content?.slice(0, 1000) : content;
+  const [showFullComment, setShowFullComment] = useState(false);
+  const displayContent = content && !isInPostView && content.length > 1000 && !showFullComment ? content.slice(0, 1000) : content;
 
   const quotelinkReply = useComment({ commentCid: parentCid });
   const isReply = parentCid;
@@ -242,14 +242,10 @@ const PostMessageMobile = ({ post }: PostProps) => {
           />
         </span>
       )} */}
-      {!isReply && content.length > 1000 && !isInPostView && (
+      {content?.length > 1000 && !isInPostView && !showFullComment && (
         <span className={styles.abbr}>
           <br />
-          <Trans
-            i18nKey={'comment_too_long'}
-            shouldUnescape={true}
-            components={{ 1: <Link to={`/p/${subplebbitAddress}/${isDescription ? 'description' : isRules ? 'rules' : `c/${cid}`}`} /> }}
-          />
+          <Trans i18nKey={'comment_too_long'} shouldUnescape={true} components={{ 1: <span onClick={() => setShowFullComment(true)} /> }} />
         </span>
       )}
       {!cid && state === 'pending' && stateString !== 'Failed' && (
diff --git a/src/views/post/post.module.css b/src/views/post/post.module.css
index 5c9e6bb0..14e78581 100644
--- a/src/views/post/post.module.css
+++ b/src/views/post/post.module.css
@@ -164,12 +164,13 @@
   font-size: var(--post-mobile-abbr-font-size);
 }
 
-.postDesktop .abbr a {
+.postDesktop .abbr a, .postDesktop .abbr span {
   color: var(--post-link-text-color);
   text-decoration: var(--post-content-link-text-decoration);
 }
 
-.postDesktop .abbr a:hover {
+.postDesktop .abbr a:hover, .postDesktop .abbr span:hover {
+  cursor: pointer;
   color: var(--post-link-text-color-hover);
   text-decoration: var(--post-content-link-text-decoration-hover);
 }
@@ -344,13 +345,14 @@
   font-size: var(--post-mobile-abbr-font-size);
 }
 
-.postMobile .abbr a {
+.postMobile .abbr a, .postMobile .abbr span {
   color: var(--post-link-text-color);
   text-decoration: var(--post-content-link-text-decoration);
 
 }
 
-.postMobile .abbr a:hover {
+.postMobile .abbr a:hover, .postMobile .abbr span:hover {
+  cursor: pointer;
   color: var(--post-link-text-color-hover);
   text-decoration: var(--post-content-link-text-decoration-hover);
 }