add edit label and original comment modal

src/components/EditLabel.jsx

@@ -0,0 +1,40 @@
+import React from "react";
+import { useComment, useEditedComment } from "@plebbit/plebbit-react-hooks";
+import { Link } from "react-router-dom";
+import OriginalCommentModal from "./modals/OriginalCommentModal";
+import getDate from "../utils/getDate";
+
+
+const EditLabel = ({ commentCid, className }) => {
+  const [isOriginalCommentModalOpen, setIsOriginalCommentModalOpen] = React.useState(false);
+  const comment = useComment({commentCid});
+  const timestamp = getDate(comment.edit?.timestamp);
+  const {state: editedCommentState, editedComment} = useEditedComment({comment});
+  
+  return (
+    <>
+      <OriginalCommentModal 
+      isOpen={isOriginalCommentModalOpen}
+      closeModal={() => setIsOriginalCommentModalOpen(false)}
+      comment={comment}/> 
+      {editedComment && (
+        <>
+          <br />
+          <span className={className}>
+            {editedCommentState === 'succeeded' && (
+              <>
+              (Edited at {timestamp}, <Link className="ttl-link" onClick={
+                () => setIsOriginalCommentModalOpen(true)
+              }>show original</Link>)
+              </>
+              )}
+            {editedCommentState === 'pending' && ("(Pending Edit)")}
+            {editedCommentState === 'failed' && ("(Failed Edit)")}
+          </span>
+        </>
+      )}
+    </>
+  );
+};
+
+export default EditLabel;

src/components/modals/EditModal.jsx

@@ -21,7 +21,6 @@ const EditModal = ({ isOpen, closeModal, originalCommentContent }) => {
     const handleResize = () => setIsMobile(window.innerWidth <= 480);
     window.addEventListener('resize', handleResize);
 
-    // Cleanup function
     return () => {
       window.removeEventListener('resize', handleResize);
     };
@@ -33,6 +32,7 @@ const EditModal = ({ isOpen, closeModal, originalCommentContent }) => {
     closeModal();
   };
 
+  
   return (
     <StyledModal
     isOpen={isOpen}

src/components/modals/OriginalCommentModal.jsx

@@ -0,0 +1,64 @@
+import React, {useState, useEffect} from "react";
+import { StyledModal } from '../styled/modals/ReplyModal.styled';
+import useGeneralStore from "../../hooks/stores/useGeneralStore";
+import Modal from "react-modal";
+import Draggable from "react-draggable";
+import getDate from "../../utils/getDate";
+
+
+const OriginalCommentModal = ({ isOpen, closeModal, comment }) => {
+  const {
+    selectedStyle,
+  } = useGeneralStore(state => state);
+
+  const [isMobile, setIsMobile] = useState(window.innerWidth <= 480);
+  const nodeRef = React.useRef(null);
+  const originalCommentContent = comment.original?.content;
+  const timestamp = getDate(comment.timestamp);
+
+
+  useEffect(() => {
+    const handleResize = () => setIsMobile(window.innerWidth <= 480);
+    window.addEventListener('resize', handleResize);
+
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, [setIsMobile]);
+
+
+  return (
+    <StyledModal
+      isOpen={isOpen}
+      onRequestClose={closeModal}
+      contentLabel="Original Comment"
+      shouldCloseOnEsc={false}
+      shouldCloseOnOverlayClick={isMobile}
+      selectedStyle={selectedStyle}
+      style={isMobile ? ({ overlay: { backgroundColor: "rgba(0,0,0,.25)" }}) : ({ overlay: { backgroundColor: "rgba(0,0,0,0)" }})}>
+      <Draggable handle=".modal-header" nodeRef={nodeRef} disabled={isMobile}>
+        <div className="modal-content" ref={nodeRef}>
+          <div className="modal-header">
+            Original at {timestamp}
+            <button className="icon" onClick={() => closeModal()} title="close" />
+          </div>
+          <div id="form">
+            <div className="textarea-wrapper">
+              <textarea className="textarea"
+                rows="4"
+                style={{ paddingTop: '0' }}
+                placeholder="Comment"
+                defaultValue={originalCommentContent}
+                wrap="soft"
+                readOnly={true} />
+            </div>
+          </div>
+        </div>
+      </Draggable>
+    </StyledModal>
+  );
+};
+
+Modal.setAppElement('#root');
+
+export default OriginalCommentModal;

src/components/views/Board.jsx

@@ -13,6 +13,7 @@ import { Container, NavBar, Header, Break, PostFormLink, PostFormTable, PostForm
 import { Footer, AuthorDeleteAlert } from '../styled/views/Thread.styled';
 import { PostMenuCatalog } from '../styled/views/Catalog.styled';
 import EditModal from '../modals/EditModal';
+import EditLabel from '../EditLabel';
 import ImageBanner from '../ImageBanner';
 import ModerationModal from '../modals/ModerationModal';
 import OfflineIndicator from '../OfflineIndicator';
@@ -978,16 +979,24 @@ const Board = () => {
                             thread.content?.length > 1000 ?
                             <Fragment key={`fragment5-${index}`}>
                               <blockquote key={`bq-${index}`}>
-                              <Post content={thread.content?.slice(0, 1000)} key={`post-${index}`} />
+                                <Post content={thread.content?.slice(0, 1000)} key={`post-${index}`} />
                                 <span key={`ttl-s-${index}`} className="ttl"> (...) 
-                                <br key={`ttl-s-br1-${index}`} /><br key={`ttl-s-br2${thread.cid}`} />
+                                  <br key={`ttl-s-br1-${index}`} />
-                                Post too long.&nbsp;
+                                  <EditLabel key={`edit-label-thread-${index}`} 
+                                  commentCid={thread.cid}
+                                  className="ttl"/>
+                                  <br key={`ttl-s-br2${index}`} />
+                                  Post too long.&nbsp;
                                   <Link key={`ttl-l-${index}`} to={`/p/${selectedAddress}/c/${thread.cid}`} onClick={() => setSelectedThread(thread.cid)} className="ttl-link">Click here</Link>
-                                  &nbsp;to view. </span>
+                                  &nbsp;to view. 
+                                </span>
                               </blockquote>
                             </Fragment>
                           : <blockquote key={`bq-${index}`}>
                               <Post content={thread.content} key={`post-${index}`} />
+                              <EditLabel key={`edit-label-thread-${index}`} 
+                              commentCid={thread.cid}
+                              className="ttl"/>
                             </blockquote>)
                           : null}
                         </div>
@@ -995,13 +1004,17 @@ const Board = () => {
                     </div>
                     <span key={`summary-${index}`} className="summary">
                       {omittedCount > 0 ? (
-                      <span key={`oc-${index}`} className="ttl">
+                        <>
-                        <span key={`oc1-${index}`}>
+                          {thread.content ? null : <br />}
-                          {omittedCount} post{omittedCount > 1 ? "s" : ""} omitted. Click&nbsp;
+                          <span key={`oc-${index}`} className="ttl">
-                          <Link key={`oc2-${index}`} to={`/p/${selectedAddress}/c/${thread.cid}`} onClick={() => setSelectedThread(thread.cid)} className="ttl-link">here</Link>
+                            <span key={`oc1-${index}`}>
-                          &nbsp;to view.
+                              {omittedCount} post{omittedCount > 1 ? "s" : ""} omitted. Click&nbsp;
-                        </span>
+                              <Link key={`oc2-${index}`} to={`/p/${selectedAddress}/c/${thread.cid}`} onClick={() => setSelectedThread(thread.cid)} className="ttl-link">here</Link>
-                      </span>) : null}
+                              &nbsp;to view.
+                            </span>
+                          </span>
+                        </>
+                      ) : null}
                     </span>
                     {displayedReplies?.map((reply, index) => {
                       const replyMediaInfo = getCommentMediaInfo(reply);
@@ -1239,7 +1252,11 @@ const Board = () => {
                                   </Link>
                                   <Post content={reply.content?.slice(0, 500)} key={`post-${index}`} />
                                   <span key={`ttl-s-${index}`} className="ttl"> (...)
-                                  <br key={`ttl-s-br1-${index}`} /><br key={`ttl-s-br2${reply.cid}`} />
+                                  <br key={`ttl-s-br1-${index}`} />
+                                  <EditLabel key={`edit-label-reply-${index}`} 
+                                  commentCid={reply.cid}
+                                  className="ttl"/>
+                                  <br key={`ttl-s-br2${index}`} />
                                   Comment too long.&nbsp;
                                     <Link key={`ttl-l-${index}`} to={`/p/${selectedAddress}/c/${thread.cid}`} onClick={() => setSelectedThread(thread.cid)} className="ttl-link">Click here</Link>
                                   &nbsp;to view. </span>
@@ -1250,6 +1267,9 @@ const Board = () => {
                                     {`c/${shortParentCid}`}{shortParentCid === thread.shortCid ? " (OP)" : null}
                                 </Link>
                                 <Post content={reply.content} key={`post-${index}`} comment={reply} />
+                                <EditLabel key={`edit-label-reply-${index}`} 
+                                  commentCid={reply.cid}
+                                  className="ttl"/>
                               </blockquote>)
                             : null}
                           </div>
@@ -1386,7 +1406,11 @@ const Board = () => {
                             <blockquote key={`mob-bq-${index}`} className="post-message-mobile">
                               <Post content={thread.content?.slice(0, 500)} key={`post-mobile-${index}`} />
                               <span key={`mob-ttl-s-${index}`} className="ttl"> (...)
-                              <br key={`mob-ttl-s-br1-${index}`} /><br key={`mob-ttl-s-br2${thread.cid}`} />
+                              <br key={`mob-ttl-s-br1-${index}`} />
+                              <EditLabel key={`edit-label-thread-mob-${index}`} 
+                              commentCid={thread.cid}
+                              className="ttl"/>
+                              <br key={`mob-ttl-s-br2${thread.cid}`} />
                               Post too long.&nbsp;
                                 <Link key={`mob-ttl-l-${index}`} to={`/p/${selectedAddress}/c/${thread.cid}`} onClick={() => setSelectedThread(thread.cid)} className="ttl-link">Click here</Link>
                                 &nbsp;to view. </span>
@@ -1394,6 +1418,9 @@ const Board = () => {
                           </Fragment>
                         : <blockquote key={`mob-bq-${index}`} className="post-message-mobile">
                             <Post content={thread.content} key={`post-mobile-${index}`} />
+                            <EditLabel key={`edit-label-thread-mob-${index}`} 
+                            commentCid={thread.cid}
+                            className="ttl"/>
                           </blockquote>)
                         : null}
                       </div>
@@ -1529,7 +1556,11 @@ const Board = () => {
                                 </Link>
                                 <Post content={reply.content?.slice(0, 500)} key={`post-mobile-${index}`} comment={reply} />
                                 <span key={`mob-ttl-s-${index}`} className="ttl"> (...)
-                                <br key={`mob-ttl-s-br1-${index}`} /><br key={`mob-ttl-s-br2${reply.cid}`} />
+                                <br key={`mob-ttl-s-br1-${index}`} />
+                                <EditLabel key={`edit-label-reply-mob-${index}`} 
+                                commentCid={reply.cid}
+                                className="ttl"/>
+                                <br key={`mob-ttl-s-br2${reply.cid}`} />
                                 Comment too long.&nbsp;
                                   <Link key={`mob-ttl-l-${index}`} to={`/p/${selectedAddress}/c/${thread.cid}`} onClick={() => setSelectedThread(thread.cid)} className="ttl-link">Click here</Link>
                                 &nbsp;to view. </span>
@@ -1540,6 +1571,9 @@ const Board = () => {
                                 {`c/${shortParentCid}`}{shortParentCid === thread.shortCid ? " (OP)" : null}
                               </Link>
                               <Post content={reply.content} key={`post-mobile-${index}`} comment={reply} />
+                              <EditLabel key={`edit-label-reply-mob-${index}`} 
+                              commentCid={reply.cid}
+                              className="ttl"/>
                             </blockquote>)
                           : null}
                             {reply.replyCount > 0 ? (

src/components/views/Thread.jsx

@@ -12,6 +12,7 @@ import { Container, NavBar, Header, Break, PostForm, PostFormTable, PostMenu } f
 import { ReplyFormLink, TopBar, BottomBar, BoardForm, Footer, AuthorDeleteAlert } from '../styled/views/Thread.styled';
 import { PostMenuCatalog } from '../styled/views/Catalog.styled';
 import EditModal from '../modals/EditModal';
+import EditLabel from '../EditLabel';
 import ImageBanner from '../ImageBanner';
 import ModerationModal from '../modals/ModerationModal';
 import OfflineIndicator from '../OfflineIndicator';
@@ -931,6 +932,9 @@ const Thread = () => {
                       </span>
                       <blockquote key={`blockquote-${comment.cid}`}>
                         <Post content={comment.content} comment={comment} key={`post-${comment.cid}`} />
+                        <EditLabel key={`edit-label-thread-${index}`} 
+                        commentCid={comment.cid}
+                        className="ttl"/>
                       </blockquote>
                     </div>
                   </div>
@@ -1167,6 +1171,9 @@ const Thread = () => {
                               {`c/${shortParentCid}`}{shortParentCid === comment.shortCid ? " (OP)" : null}
                             </span>
                             <Post content={reply.content} comment={reply} key={`post-${index}`} />
+                            <EditLabel key={`edit-label-reply-${index}`} 
+                            commentCid={reply.cid}
+                            className="ttl"/>
                           </blockquote>
                         </div>
                       </div>
@@ -1283,7 +1290,10 @@ const Thread = () => {
                       <blockquote key={`mob-bq-${comment.cid}`} className="post-message-mobile">
                         {comment.content ? (
                           <>
-                            <Post content={comment.content} comment={comment} key={`post-mobile-${comment.cid}`} /> 
+                            <Post content={comment.content} comment={comment} key={`post-mobile-${comment.cid}`} />
+                            <EditLabel key={`edit-label-thread-mob-${index}`} 
+                            commentCid={comment.cid}
+                            className="ttl"/>
                           </>
                         ) : null}
                       </blockquote>
@@ -1398,6 +1408,9 @@ const Thread = () => {
                             {`c/${shortParentCid}`}{shortParentCid === comment.shortCid ? " (OP)" : null}
                           </span>
                           <Post content={reply.content} comment={reply} key={`post-mobile-${index}`} />
+                          <EditLabel key={`edit-label-reply-mob-${index}`} 
+                          commentCid={reply.cid}
+                          className="ttl"/>
                         </blockquote>
                         {reply.replyCount > 0 ? (
                           <div key={`back-mob-${index}`} className='backlink backlink-mobile'>