feat[frontend]: shift send in topic overview to instantly mark solution

darmiel · Oct 20, 2023 · e604be7 · e604be7
1 parent 57d5652
commit e604be7
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 12 deletions.
diff --git a/frontend/src/api/functions.ts b/frontend/src/api/functions.ts
@@ -168,6 +168,7 @@ export type priorityDeleteVars = {
 // Comment Types
 // ======================
 export type sendCommentVars = {
+  __shift?: boolean
   comment: string
 }
 

diff --git a/frontend/src/components/comment/CommentSendNewBox.tsx b/frontend/src/components/comment/CommentSendNewBox.tsx
@@ -2,7 +2,7 @@ import { Button, Kbd, Textarea } from "@nextui-org/react"
 import { useState } from "react"
 import { toast } from "sonner"
 
-import { CommentEntityType } from "@/api/types"
+import { Comment, CommentEntityType } from "@/api/types"
 import { extractErrorMessage } from "@/api/util"
 import { useAuth } from "@/contexts/AuthContext"
 
@@ -11,11 +11,13 @@ export default function CommentSendNewBox({
   commentType,
   commentEntityID,
   className = "",
+  onShiftSend,
 }: {
   projectID: number
   commentType: CommentEntityType
   commentEntityID: number
   className?: string
+  onShiftSend?: (comment: Comment) => void
 }) {
   const [commentBoxText, setCommentBoxText] = useState("")
 
@@ -25,17 +27,20 @@ export default function CommentSendNewBox({
     projectID,
     commentType,
     commentEntityID,
-    () => {
+    ({ data }, { __shift }) => {
       setCommentBoxText("")
-      toast.success("Comment sent!")
+      toast.success(`Comment sent! (#${data.ID})`)
+      if (__shift) {
+        onShiftSend?.(data)
+      }
     },
   )
 
-  function send() {
+  function send(shift: boolean) {
     if (sendCommentMutation.isLoading) {
       return
     }
-    sendCommentMutation.mutate({ comment: commentBoxText })
+    sendCommentMutation.mutate({ comment: commentBoxText, __shift: shift })
   }
 
   const error = extractErrorMessage(sendCommentMutation.error)
@@ -50,12 +55,8 @@ export default function CommentSendNewBox({
         value={commentBoxText}
         onValueChange={setCommentBoxText}
         onKeyDown={(e) => {
-          if (
-            e.key === "Enter" &&
-            e.getModifierState("Meta") &&
-            !e.getModifierState("Shift")
-          ) {
-            send()
+          if (e.key === "Enter" && e.getModifierState("Meta")) {
+            send(e.getModifierState("Shift"))
           }
         }}
         variant="bordered"
@@ -68,7 +69,7 @@ export default function CommentSendNewBox({
         <Button
           color="primary"
           isLoading={sendCommentMutation.isLoading}
-          onClick={() => send()}
+          onClick={() => send(false)}
           startContent={<Kbd keys={["command", "enter"]} />}
         >
           Send

diff --git a/frontend/src/components/comment/CommentSuite.tsx b/frontend/src/components/comment/CommentSuite.tsx
@@ -14,6 +14,7 @@ export default function CommentSuite({
   listClassName = "",
   onSolutionClick,
   isSolutionMutLoading,
+  onShiftSend,
 }: {
   projectID: number
   commentType: CommentEntityType
@@ -22,6 +23,7 @@ export default function CommentSuite({
   listClassName?: string
   onSolutionClick?: (mark: boolean, comment: Comment) => void
   isSolutionMutLoading?: boolean
+  onShiftSend?: (comment: Comment) => void
 }) {
   const { comments: comment } = useAuth()
 
@@ -72,6 +74,7 @@ export default function CommentSuite({
         projectID={projectID}
         commentType={commentType}
         commentEntityID={commentEntityID}
+        onShiftSend={onShiftSend}
       />
     </>
   )

diff --git a/frontend/src/components/topic/TopicOverview.tsx b/frontend/src/components/topic/TopicOverview.tsx
@@ -379,6 +379,12 @@ export default function TopicOverview({
             commentSolutionID={topic.solution_id}
             onSolutionClick={onSolutionClick}
             isSolutionMutLoading={markSolutionMutation.isLoading}
+            onShiftSend={(comment) => {
+              markSolutionMutation.mutate({
+                commentID: comment.ID,
+                mark: true,
+              })
+            }}
           />
         </OverviewContent>
         <OverviewSide>