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
}
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'>

View File

@ -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%;
}