Insert at mention on reply

This commit is contained in:
Sinclair Chen 2022-08-03 16:15:34 -07:00
parent 5a811b417d
commit adda267b5b
3 changed files with 39 additions and 32 deletions

View File

@ -31,9 +31,9 @@ export function FeedAnswerCommentGroup(props: {
const { answer, contract, comments, tips, bets, user } = props
const { username, avatarUrl, name, text } = answer
const [replyToUsername, setReplyToUsername] = useState('')
const [replyToUser, setReplyToUser] =
useState<Pick<User, 'id' | 'username'>>()
const [showReply, setShowReply] = useState(false)
const [inputRef, setInputRef] = useState<HTMLTextAreaElement | null>(null)
const [highlighted, setHighlighted] = useState(false)
const router = useRouter()
@ -70,9 +70,15 @@ export function FeedAnswerCommentGroup(props: {
const scrollAndOpenReplyInput = useEvent(
(comment?: Comment, answer?: Answer) => {
setReplyToUsername(comment?.userUsername ?? answer?.username ?? '')
setReplyToUser(
comment ?? answer
? {
id: comment?.userId ?? (answer as Answer).userId,
username: comment?.userUsername ?? (answer as Answer).username,
}
: undefined
)
setShowReply(true)
// TODO: focus
}
)
@ -89,10 +95,6 @@ export function FeedAnswerCommentGroup(props: {
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [betsByCurrentUser.length, user, answer.number])
useEffect(() => {
if (showReply && inputRef) inputRef.focus()
}, [inputRef, showReply])
useEffect(() => {
if (router.asPath.endsWith(`#${answerElementId}`)) {
setHighlighted(true)
@ -171,11 +173,8 @@ export function FeedAnswerCommentGroup(props: {
betsByCurrentUser={betsByCurrentUser}
commentsByCurrentUser={commentsByCurrentUser}
parentAnswerOutcome={answer.number.toString()}
replyToUsername={replyToUsername}
onSubmitComment={() => {
setShowReply(false)
setReplyToUsername('')
}}
replyToUser={replyToUser}
onSubmitComment={() => setShowReply(false)}
/>
</div>
)}

View File

@ -40,7 +40,8 @@ export function FeedCommentThread(props: {
}) {
const { contract, comments, bets, tips, smallAvatar, parentComment } = props
const [showReply, setShowReply] = useState(false)
const [replyToUsername, setReplyToUsername] = useState('')
const [replyToUser, setReplyToUser] =
useState<{ id: string; username: string }>()
const betsByUserId = groupBy(bets, (bet) => bet.userId)
const user = useUser()
const commentsList = comments.filter(
@ -50,9 +51,8 @@ export function FeedCommentThread(props: {
commentsList.unshift(parentComment)
function scrollAndOpenReplyInput(comment: Comment) {
setReplyToUsername(comment.userUsername)
setReplyToUser({ id: comment.userId, username: comment.userUsername })
setShowReply(true)
//TODO focus
}
return (
@ -83,12 +83,9 @@ export function FeedCommentThread(props: {
(c) => c.userId === user?.id
)}
parentCommentId={parentComment.id}
replyToUsername={replyToUsername}
replyToUser={replyToUser}
parentAnswerOutcome={comments[0].answerOutcome}
onSubmitComment={() => {
setShowReply(false)
setReplyToUsername('')
}}
onSubmitComment={() => setShowReply(false)}
/>
</Col>
)}
@ -323,7 +320,7 @@ export function CommentInput(props: {
contract: Contract
betsByCurrentUser: Bet[]
commentsByCurrentUser: Comment[]
replyToUsername?: string
replyToUser?: { id: string; username: string }
// Reply to a free response answer
parentAnswerOutcome?: string
// Reply to another comment
@ -336,7 +333,7 @@ export function CommentInput(props: {
commentsByCurrentUser,
parentAnswerOutcome,
parentCommentId,
replyToUsername,
replyToUser,
onSubmitComment,
} = props
const user = useUser()
@ -430,7 +427,7 @@ export function CommentInput(props: {
<CommentInputTextArea
editor={editor}
upload={upload}
replyToUsername={replyToUsername ?? ''}
replyToUser={replyToUser}
user={user}
submitComment={submitComment}
isSubmitting={isSubmitting}
@ -445,7 +442,7 @@ export function CommentInput(props: {
export function CommentInputTextArea(props: {
user: User | undefined | null
replyToUsername: string
replyToUser?: { id: string; username: string }
editor: Editor | null
upload: any
submitComment: (id?: string) => void
@ -459,7 +456,7 @@ export function CommentInputTextArea(props: {
submitComment,
presetId,
isSubmitting,
replyToUsername,
replyToUser,
} = props
const isMobile = (useWindowSize().width ?? 0) < 768 // TODO: base off input device (keybord vs touch)
@ -473,7 +470,11 @@ export function CommentInputTextArea(props: {
}
useEffect(() => {
editor?.setOptions({
if (!editor) {
return
}
// submit on Enter key
editor.setOptions({
editorProps: {
handleKeyDown: (view, event) => {
if (
@ -491,10 +492,17 @@ export function CommentInputTextArea(props: {
},
},
})
// insert at mention
if (replyToUser) {
editor.commands.insertContentAt(0, {
type: 'mention',
attrs: { label: replyToUser.username, id: replyToUser.id },
})
editor.commands.focus()
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [editor])
// TODO: make at mention show up at beginning
return (
<>
<Row className="gap-1.5 text-gray-700">

View File

@ -36,7 +36,7 @@ export function GroupChat(props: {
const [scrollToMessageId, setScrollToMessageId] = useState('')
const [scrollToMessageRef, setScrollToMessageRef] =
useState<HTMLDivElement | null>(null)
const [replyToUsername, setReplyToUsername] = useState('')
const [replyToUser, setReplyToUser] = useState<any>()
const router = useRouter()
const isMember = user && group.memberIds.includes(user?.id)
@ -80,7 +80,7 @@ export function GroupChat(props: {
}, [messages, router.asPath])
function onReplyClick(comment: Comment) {
setReplyToUsername(comment.userUsername)
setReplyToUser({ id: comment.userId, username: comment.userUsername })
}
async function submitMessage() {
@ -93,7 +93,7 @@ export function GroupChat(props: {
await createCommentOnGroup(group.id, editor.getJSON(), user)
editor.commands.clearContent()
setIsSubmitting(false)
setReplyToUsername('')
setReplyToUser(undefined)
focusInput()
}
function focusInput() {
@ -159,7 +159,7 @@ export function GroupChat(props: {
editor={editor}
upload={upload}
user={user}
replyToUsername={replyToUsername}
replyToUser={replyToUser}
submitComment={submitMessage}
isSubmitting={isSubmitting}
/>