From adda267b5b440401eba19b6490f207624d8afc6a Mon Sep 17 00:00:00 2001 From: Sinclair Chen Date: Wed, 3 Aug 2022 16:15:34 -0700 Subject: [PATCH] Insert at mention on reply --- .../feed/feed-answer-comment-group.tsx | 25 ++++++------ web/components/feed/feed-comments.tsx | 38 +++++++++++-------- web/components/groups/group-chat.tsx | 8 ++-- 3 files changed, 39 insertions(+), 32 deletions(-) diff --git a/web/components/feed/feed-answer-comment-group.tsx b/web/components/feed/feed-answer-comment-group.tsx index 9e54e5a6..a2afe771 100644 --- a/web/components/feed/feed-answer-comment-group.tsx +++ b/web/components/feed/feed-answer-comment-group.tsx @@ -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>() const [showReply, setShowReply] = useState(false) - const [inputRef, setInputRef] = useState(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)} /> )} diff --git a/web/components/feed/feed-comments.tsx b/web/components/feed/feed-comments.tsx index a53d1ce7..07a5db6d 100644 --- a/web/components/feed/feed-comments.tsx +++ b/web/components/feed/feed-comments.tsx @@ -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)} /> )} @@ -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: { 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 ( <> diff --git a/web/components/groups/group-chat.tsx b/web/components/groups/group-chat.tsx index 98a2e267..4039b6b9 100644 --- a/web/components/groups/group-chat.tsx +++ b/web/components/groups/group-chat.tsx @@ -36,7 +36,7 @@ export function GroupChat(props: { const [scrollToMessageId, setScrollToMessageId] = useState('') const [scrollToMessageRef, setScrollToMessageRef] = useState(null) - const [replyToUsername, setReplyToUsername] = useState('') + const [replyToUser, setReplyToUser] = useState() 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} />