add edit label and original comment modal

2026-08-03 07:41:04 +02:00 · 2023-05-31 15:44:15 +02:00
parent 4e3dfc4844
commit d790961a5d
5 changed files with 167 additions and 16 deletions
@@ -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;
@@ -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}
@@ -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;
@@ -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}`} />
-                                Post too long.&nbsp;
+                                  <br key={`ttl-s-br1-${index}`} />
+                                  <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}`}>
-                          {omittedCount} post{omittedCount > 1 ? "s" : ""} omitted. Click&nbsp;
-                          <Link key={`oc2-${index}`} to={`/p/${selectedAddress}/c/${thread.cid}`} onClick={() => setSelectedThread(thread.cid)} className="ttl-link">here</Link>
-                          &nbsp;to view.
-                        </span>
-                      </span>) : null}
+                        <>
+                          {thread.content ? null : <br />}
+                          <span key={`oc-${index}`} className="ttl">
+                            <span key={`oc1-${index}`}>
+                              {omittedCount} post{omittedCount > 1 ? "s" : ""} omitted. Click&nbsp;
+                              <Link key={`oc2-${index}`} to={`/p/${selectedAddress}/c/${thread.cid}`} onClick={() => setSelectedThread(thread.cid)} className="ttl-link">here</Link>
+                              &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 ? (
@@ -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'>