Update EditLabel.jsx

This commit is contained in:
plebeius.eth
2023-06-08 21:41:27 +02:00
parent 90693c6f75
commit 604ebac472
+16 -8
View File
@@ -1,4 +1,4 @@
import React from "react"; import React, { useState } from "react";
import { useComment, useEditedComment } from "@plebbit/plebbit-react-hooks"; import { useComment, useEditedComment } from "@plebbit/plebbit-react-hooks";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import OriginalCommentModal from "./modals/OriginalCommentModal"; import OriginalCommentModal from "./modals/OriginalCommentModal";
@@ -6,7 +6,7 @@ import getDate from "../utils/getDate";
const EditLabel = ({ commentCid, className }) => { const EditLabel = ({ commentCid, className }) => {
const [isOriginalCommentModalOpen, setIsOriginalCommentModalOpen] = React.useState(false); const [isOriginalCommentModalOpen, setIsOriginalCommentModalOpen] = useState(false);
const comment = useComment({commentCid}); const comment = useComment({commentCid});
const timestamp = getDate(comment.edit?.timestamp); const timestamp = getDate(comment.edit?.timestamp);
const {state: editedCommentState, editedComment} = useEditedComment({comment}); const {state: editedCommentState, editedComment} = useEditedComment({comment});
@@ -17,22 +17,30 @@ const EditLabel = ({ commentCid, className }) => {
isOpen={isOriginalCommentModalOpen} isOpen={isOriginalCommentModalOpen}
closeModal={() => setIsOriginalCommentModalOpen(false)} closeModal={() => setIsOriginalCommentModalOpen(false)}
comment={comment}/> comment={comment}/>
{editedComment && ( {editedComment || comment.edit ? (
<> <>
<br /> <br />
<span className={className}> <span className={className}>
{editedCommentState === 'succeeded' && ( {comment.removed ? (
<>
(This post has been removed)
</>
) : (
<>
{comment.edit ? (
<> <>
(Edited at {timestamp}, <Link className="ttl-link" onClick={ (Edited at {timestamp}, <Link className="ttl-link" onClick={
() => setIsOriginalCommentModalOpen(true) () => setIsOriginalCommentModalOpen(true)
}>show original</Link>) }>show original</Link>)
</> </>
)} ) : null}
{editedCommentState === 'pending' && ("(Pending Edit)")} {editedCommentState === 'pending' && ("(Pending edit)")}
{editedCommentState === 'failed' && ("(Failed Edit)")} {editedCommentState === 'failed' && ("(Failed edit)")}
</span>
</> </>
)} )}
</span>
</>
) : null}
</> </>
); );
}; };