diff --git a/src/pages/mod/internal/comment/index.tsx b/src/pages/mod/internal/comment/index.tsx index 912911e..15894e5 100644 --- a/src/pages/mod/internal/comment/index.tsx +++ b/src/pages/mod/internal/comment/index.tsx @@ -36,13 +36,23 @@ type FilterOptions = { author: AuthorFilterEnum } +enum CommentEventStatus { + Publishing = 'Publishing comment...', + Published = 'Published!', + Failed = 'Failed to publish comment.' +} + +interface CommentEvent extends Event { + status?: CommentEventStatus +} + type Props = { modDetails: ModDetails setCommentCount: Dispatch> } export const Comments = ({ modDetails, setCommentCount }: Props) => { - const [commentEvents, setCommentEvents] = useState([]) + const [commentEvents, setCommentEvents] = useState([]) const [filterOptions, setFilterOptions] = useState({ sort: SortByEnum.Latest, author: AuthorFilterEnum.All_Comments @@ -116,7 +126,13 @@ export const Comments = ({ modDetails, setCommentCount }: Props) => { if (!signedEvent) return false - setCommentEvents((prev) => [signedEvent, ...prev]) + setCommentEvents((prev) => [ + { + ...signedEvent, + status: CommentEventStatus.Publishing + }, + ...prev + ]) const publish = async () => { const metadataController = await MetadataController.getInstance() @@ -133,7 +149,52 @@ export const Comments = ({ modDetails, setCommentCount }: Props) => { ...new Set(...modAuthorReadRelays, ...commentatorWriteRelays) ] - RelayController.getInstance().publishOnRelays(signedEvent, combinedRelays) + const publishedOnRelays = + await RelayController.getInstance().publishOnRelays( + signedEvent, + combinedRelays + ) + + if (publishedOnRelays.length === 0) { + setCommentEvents((prev) => + prev.map((event) => { + if (event.id === signedEvent.id) { + return { + ...event, + status: CommentEventStatus.Failed + } + } + + return event + }) + ) + } else { + setCommentEvents((prev) => + prev.map((event) => { + if (event.id === signedEvent.id) { + return { + ...event, + status: CommentEventStatus.Published + } + } + + return event + }) + ) + } + + // when an event is successfully published remove the status from it after 15 seconds + setTimeout(() => { + setCommentEvents((prev) => + prev.map((event) => { + if (event.id === signedEvent.id) { + delete event.status + } + + return event + }) + ) + }, 15000) } publish() @@ -291,7 +352,7 @@ const Filter = React.memo( } ) -const Comment = (props: Event) => { +const Comment = (props: CommentEvent) => { const navigate = useNavigate() const [profile, setProfile] = useState() @@ -347,7 +408,12 @@ const Comment = (props: Event) => {
-

Status: Publishing comment...

+ {props.status && ( +

+ Status: + {props.status} +

+ )}

{props.content}

diff --git a/src/styles/comments.css b/src/styles/comments.css index 9ace42d..430dfce 100644 --- a/src/styles/comments.css +++ b/src/styles/comments.css @@ -31,7 +31,7 @@ border-radius: 10px; width: 60px; height: 60px; - box-shadow: 0 0 8px 0 rgb(0,0,0,0.1); + box-shadow: 0 0 8px 0 rgb(0, 0, 0, 0.1); } .IBMSMSMBSSCL_CommentTopDetails { @@ -42,9 +42,9 @@ .IBMSMSMBSSCL_CommentBottom { padding: 20px; - color: rgba(255,255,255,0.75); + color: rgba(255, 255, 255, 0.75); background: linear-gradient(to top right, #262626, #292929, #262626); - box-shadow: 0 0 8px 0 rgb(0,0,0,0.1); + box-shadow: 0 0 8px 0 rgb(0, 0, 0, 0.1); border-radius: 10px; display: flex; flex-direction: column; @@ -66,12 +66,13 @@ flex-direction: row; grid-gap: 0px; border-radius: 4px; - border: solid 1px rgba(255,255,255,0.1); + border: solid 1px rgba(255, 255, 255, 0.1); padding: 5px 10px; } .IBMSMSMBSSCL_CBTextStatusSpan { font-weight: 600; + margin-right: 5px; } .IBMSMSMBSSCL_CommentActions { @@ -98,7 +99,7 @@ grid-gap: 10px; padding: 5px 15px; border-radius: 10px; - color: rgba(255,255,255,0.25); + color: rgba(255, 255, 255, 0.25); font-weight: bold; position: relative; cursor: pointer; @@ -133,20 +134,20 @@ left: 0; z-index: -1; border-radius: 10px; - box-shadow: 0 0 8px 0 rgb(0,0,0,0.1); + box-shadow: 0 0 8px 0 rgb(0, 0, 0, 0.1); } .IBMSMSMBSSCL_CAElementText { } .IBMSMSMBSSCL_CAElementIcon { - background: rgba(255,255,255,0); + background: rgba(255, 255, 255, 0); font-size: 14px; } .IBMSMSMBSSCL_CTD_Name { font-weight: bold; - color: rgba(255,255,255,0.5); + color: rgba(255, 255, 255, 0.5); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; @@ -154,7 +155,7 @@ } .IBMSMSMBSSCL_CTD_Address { - color: rgba(255,255,255,0.25); + color: rgba(255, 255, 255, 0.25); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; @@ -162,42 +163,42 @@ } .IBMSMSMBSSCL_CAElement.IBMSMSMBSSCL_CAEReply { - border: solid 1px rgba(255,255,255,0.05); + border: solid 1px rgba(255, 255, 255, 0.05); } .IBMSMSMBSSCL_CAElement.IBMSMSMBSSCL_CAEReply:hover { transition: ease 0.4s; - border: solid 1px rgba(255,255,255,0.05); - color: rgba(255,255,255,0.5); + border: solid 1px rgba(255, 255, 255, 0.05); + color: rgba(255, 255, 255, 0.5); } .IBMSMSMBSSCL_CAElement.IBMSMSMBSSCL_CAEReplies:hover { transition: ease 0.4s; - color: rgba(173,90,255,0.75); + color: rgba(173, 90, 255, 0.75); } .IBMSMSMBSSCL_CAElement.IBMSMSMBSSCL_CAERepost.IBMSMSMBSSCL_CAERepostActive { - color: rgba(255,255,255,0.75); + color: rgba(255, 255, 255, 0.75); } .IBMSMSMBSSCL_CAElement.IBMSMSMBSSCL_CAERepost:hover { transition: ease 0.4s; - color: rgba(255,255,255,0.75); + color: rgba(255, 255, 255, 0.75); } .IBMSMSMBSSCL_CAElement.IBMSMSMBSSCL_CAElement.IBMSMSMBSSCL_CAEDown:hover { transition: ease 0.4s; - color: rgba(255,114,54,0.85); + color: rgba(255, 114, 54, 0.85); } .IBMSMSMBSSCL_CAElement.IBMSMSMBSSCL_CAElement.IBMSMSMBSSCL_CAEUp:hover { transition: ease 0.4s; - color: rgba(255,70,70,0.85); + color: rgba(255, 70, 70, 0.85); } .IBMSMSMBSSCL_CAElement.IBMSMSMBSSCL_CAElement.IBMSMSMBSSCL_CAEBolt:hover { transition: ease 0.4s; - color: rgba(255,255,0,0.85); + color: rgba(255, 255, 0, 0.85); } .IBMSMSMBSSCL_CAElement:hover { @@ -211,15 +212,15 @@ } .IBMSMSMBSSCL_CAElement.IBMSMSMBSSCL_CAElement.IBMSMSMBSSCL_CAEUp.IBMSMSMBSSCL_CAEUpActive { - color: rgba(255,70,70,0.85); + color: rgba(255, 70, 70, 0.85); } .IBMSMSMBSSCL_CAElement.IBMSMSMBSSCL_CAElement.IBMSMSMBSSCL_CAEDown.IBMSMSMBSSCL_CAEDownActive { - color: rgba(255,114,54,0.85); + color: rgba(255, 114, 54, 0.85); } .IBMSMSMBSSCL_CAElement.IBMSMSMBSSCL_CAElement.IBMSMSMBSSCL_CAEBolt.IBMSMSMBSSCL_CAEBoltActive { - color: rgba(255,255,0,0.85); + color: rgba(255, 255, 0, 0.85); } .IBMSMSMBSSCL_CommentActionsInside { @@ -231,7 +232,7 @@ } .IBMSMSMBSSCL_CommentActionsDetails { - color: rgba(255,255,255,0.25); + color: rgba(255, 255, 255, 0.25); font-size: 16px; display: flex; flex-direction: column; @@ -252,12 +253,12 @@ .IBMSMSMBSSCL_CADDate { transition: ease 0.4s; - color: rgba(255,255,255,0.25); + color: rgba(255, 255, 255, 0.25); } .IBMSMSMBSSCL_CADTime { transition: ease 0.4s; - color: rgba(255,255,255,0.25); + color: rgba(255, 255, 255, 0.25); } .IBMSMSMBSSCL_CommentTopDetailsWrapper { @@ -296,16 +297,16 @@ .IBMSMSMBSSCC_Top_Box { transition: border, background, box-shadow ease 0.4s; width: 100%; - background: rgba(0,0,0,0.05); - border: solid 1px rgba(255,255,255,0.05); - box-shadow: inset 0 0 8px 0 rgb(0,0,0,0.1); + background: rgba(0, 0, 0, 0.05); + border: solid 1px rgba(255, 255, 255, 0.05); + box-shadow: inset 0 0 8px 0 rgb(0, 0, 0, 0.1); border-radius: 10px; min-height: 100px; height: 100px; min-width: 100%; outline: unset; padding: 15px 20px; - color: rgba(255,255,255,0.75); + color: rgba(255, 255, 255, 0.75); } @media (max-width: 576px) { @@ -315,36 +316,37 @@ } } -.IBMSMSMBSSCC_Top_Box:focus, hover { +.IBMSMSMBSSCC_Top_Box:focus, +hover { transition: border, background, box-shadow ease 0.4s; - background: rgba(0,0,0,0.1); - border: solid 1px rgba(255,255,255,0.1); - box-shadow: inset 0 0 8px 0 rgb(0,0,0,0.15); + background: rgba(0, 0, 0, 0.1); + border: solid 1px rgba(255, 255, 255, 0.1); + box-shadow: inset 0 0 8px 0 rgb(0, 0, 0, 0.15); outline: unset; } .IBMSMSMBSSCC_BottomButton { transition: ease 0.4s; text-decoration: unset; - color: rgba(255,255,255,0.25); + color: rgba(255, 255, 255, 0.25); font-weight: bold; padding: 10px 20px; border-radius: 10px; - box-shadow: 0 0 8px 0 rgba(0,0,0,0); + box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0); font-size: 16px; transform: scale(1); position: relative; cursor: pointer; - border: solid 1px rgba(255,255,255,0.1); + border: solid 1px rgba(255, 255, 255, 0.1); overflow: hidden; } .IBMSMSMBSSCC_BottomButton:hover { transition: ease 0.4s; text-decoration: unset; - color: rgba(255,255,255,0.75); + color: rgba(255, 255, 255, 0.75); border-radius: 10px; - box-shadow: 0 0 8px 0 rgb(0,0,0,0.1); + box-shadow: 0 0 8px 0 rgb(0, 0, 0, 0.1); font-size: 16px; transform: scale(1.03); /*border: solid 1px rgba(255,255,255,0);*/ @@ -389,9 +391,9 @@ display: flex; flex-direction: row; border-radius: 10px; - border: solid 1px rgba(255,255,255,0.1); + border: solid 1px rgba(255, 255, 255, 0.1); overflow: hidden; - color: rgba(255,255,255,0.25); + color: rgba(255, 255, 255, 0.25); font-size: 14px; } @@ -408,14 +410,14 @@ flex-direction: column; justify-content: center; align-items: center; - background: rgba(255,255,255,0.05); - color: rgba(255,255,255,0.25); + background: rgba(255, 255, 255, 0.05); + color: rgba(255, 255, 255, 0.25); } .IBMSMSMBSSCL_CTOLink:hover { transition: ease 0.4s; - background: rgba(255,255,255,0.1); - color: rgba(255,255,255,0.5); + background: rgba(255, 255, 255, 0.1); + color: rgba(255, 255, 255, 0.5); } .IBMSMSMBSSCL_CTOLink:active > .IBMSMSMBSSCL_CTOLinkIcon { @@ -458,7 +460,7 @@ } .btnMain.CommentsToggleBtn.CommentsToggleActive { - background: rgba(255,255,255,0.1); + background: rgba(255, 255, 255, 0.1); font-weight: bold; } @@ -469,11 +471,11 @@ } .IBMSMSMBSSTitle { - color: rgba(255,255,255,0.5); + color: rgba(255, 255, 255, 0.5); } .IBMSMSMBSSCL_CommentNoteRepliesTitle { - color: rgba(255,255,255,0.5); + color: rgba(255, 255, 255, 0.5); } .IBMSMSMBSSCL_CAElementLoadWrapper { @@ -487,7 +489,7 @@ } .IBMSMSMBSSCL_CAElementLoad { - background: rgba(255,255,255,0.5); + background: rgba(255, 255, 255, 0.5); width: 0%; } @@ -495,4 +497,3 @@ padding: 5px 10px; height: 100%; } -