Comment system on mods implemented #35
@ -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<SetStateAction<number>>
|
||||
}
|
||||
|
||||
export const Comments = ({ modDetails, setCommentCount }: Props) => {
|
||||
const [commentEvents, setCommentEvents] = useState<Event[]>([])
|
||||
const [commentEvents, setCommentEvents] = useState<CommentEvent[]>([])
|
||||
const [filterOptions, setFilterOptions] = useState<FilterOptions>({
|
||||
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<UserProfile>()
|
||||
@ -347,7 +408,12 @@ const Comment = (props: Event) => {
|
||||
</div>
|
||||
</div>
|
||||
<div className='IBMSMSMBSSCL_CommentBottom'>
|
||||
<p className='IBMSMSMBSSCL_CBTextStatus'><span className='IBMSMSMBSSCL_CBTextStatusSpan'>Status: </span> Publishing comment...</p>
|
||||
{props.status && (
|
||||
<p className='IBMSMSMBSSCL_CBTextStatus'>
|
||||
<span className='IBMSMSMBSSCL_CBTextStatusSpan'>Status:</span>
|
||||
{props.status}
|
||||
</p>
|
||||
)}
|
||||
<p className='IBMSMSMBSSCL_CBText'>{props.content}</p>
|
||||
</div>
|
||||
<div className='IBMSMSMBSSCL_CommentActions'>
|
||||
|
@ -72,6 +72,7 @@
|
||||
|
||||
.IBMSMSMBSSCL_CBTextStatusSpan {
|
||||
font-weight: 600;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.IBMSMSMBSSCL_CommentActions {
|
||||
@ -315,7 +316,8 @@
|
||||
}
|
||||
}
|
||||
|
||||
.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);
|
||||
@ -495,4 +497,3 @@
|
||||
padding: 5px 10px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user