Comment system on mods implemented #35

Merged
freakoverse merged 9 commits from staging into master 2024-09-11 13:15:44 +00:00
2 changed files with 120 additions and 53 deletions
Showing only changes of commit b808157352 - Show all commits

View File

@ -36,13 +36,23 @@ type FilterOptions = {
author: AuthorFilterEnum author: AuthorFilterEnum
} }
enum CommentEventStatus {
Publishing = 'Publishing comment...',
Published = 'Published!',
Failed = 'Failed to publish comment.'
}
interface CommentEvent extends Event {
status?: CommentEventStatus
}
type Props = { type Props = {
modDetails: ModDetails modDetails: ModDetails
setCommentCount: Dispatch<SetStateAction<number>> setCommentCount: Dispatch<SetStateAction<number>>
} }
export const Comments = ({ modDetails, setCommentCount }: Props) => { export const Comments = ({ modDetails, setCommentCount }: Props) => {
const [commentEvents, setCommentEvents] = useState<Event[]>([]) const [commentEvents, setCommentEvents] = useState<CommentEvent[]>([])
const [filterOptions, setFilterOptions] = useState<FilterOptions>({ const [filterOptions, setFilterOptions] = useState<FilterOptions>({
sort: SortByEnum.Latest, sort: SortByEnum.Latest,
author: AuthorFilterEnum.All_Comments author: AuthorFilterEnum.All_Comments
@ -116,7 +126,13 @@ export const Comments = ({ modDetails, setCommentCount }: Props) => {
if (!signedEvent) return false if (!signedEvent) return false
setCommentEvents((prev) => [signedEvent, ...prev]) setCommentEvents((prev) => [
{
...signedEvent,
status: CommentEventStatus.Publishing
},
...prev
])
const publish = async () => { const publish = async () => {
const metadataController = await MetadataController.getInstance() const metadataController = await MetadataController.getInstance()
@ -133,7 +149,52 @@ export const Comments = ({ modDetails, setCommentCount }: Props) => {
...new Set(...modAuthorReadRelays, ...commentatorWriteRelays) ...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() publish()
@ -291,7 +352,7 @@ const Filter = React.memo(
} }
) )
const Comment = (props: Event) => { const Comment = (props: CommentEvent) => {
const navigate = useNavigate() const navigate = useNavigate()
const [profile, setProfile] = useState<UserProfile>() const [profile, setProfile] = useState<UserProfile>()
@ -347,7 +408,12 @@ const Comment = (props: Event) => {
</div> </div>
</div> </div>
<div className='IBMSMSMBSSCL_CommentBottom'> <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> <p className='IBMSMSMBSSCL_CBText'>{props.content}</p>
</div> </div>
<div className='IBMSMSMBSSCL_CommentActions'> <div className='IBMSMSMBSSCL_CommentActions'>

View File

@ -72,6 +72,7 @@
.IBMSMSMBSSCL_CBTextStatusSpan { .IBMSMSMBSSCL_CBTextStatusSpan {
font-weight: 600; font-weight: 600;
margin-right: 5px;
} }
.IBMSMSMBSSCL_CommentActions { .IBMSMSMBSSCL_CommentActions {
@ -315,7 +316,8 @@
} }
} }
.IBMSMSMBSSCC_Top_Box:focus, hover { .IBMSMSMBSSCC_Top_Box:focus,
hover {
transition: border, background, box-shadow ease 0.4s; transition: border, background, box-shadow ease 0.4s;
background: rgba(0, 0, 0, 0.1); background: rgba(0, 0, 0, 0.1);
border: solid 1px rgba(255, 255, 255, 0.1); border: solid 1px rgba(255, 255, 255, 0.1);
@ -495,4 +497,3 @@
padding: 5px 10px; padding: 5px 10px;
height: 100%; height: 100%;
} }