Add save chosen and final comment feature

Comment selector can now handle selecting multiple suggestions

Author: EugeneOYZ1203n

src/commons/sagas/RequestsSaga.ts

@@ -1350,7 +1350,33 @@ export const postGenerateComments = async (
   return await resp.json();
 };
 
+export const saveFinalComment = async (
+  tokens: Tokens,
+  submission_id: integer,
+  question_id: integer,
+  comment: string
+): Promise<Response | null> => {
+  const resp = await request(`${courseId()}/admin/save-final-comment/${submission_id}/${question_id}`, 'POST', {
+    body: {"comment": comment},
+    ...tokens
+  })
+  
+  return resp
+}
 
+export const saveChosenComments = async (
+  tokens: Tokens,
+  submission_id: integer,
+  question_id: integer,
+  comments: string[]
+): Promise<Response | null> => {
+  const resp = await request(`${courseId()}/admin/save-chosen-comments/${submission_id}/${question_id}`, 'POST', {
+    body: {"comments": comments},
+    ...tokens
+  })
+  
+  return resp
+}
 
 /**
  * GET /courses/{courseId}/admin/users

src/pages/academy/grading/subcomponents/GradingCommentSelector.tsx

@@ -2,7 +2,7 @@ import React from "react";
 
 type Props = {
     comments: string[],
-    setEditor: React.Dispatch<React.SetStateAction<string>>
+    onSelect: (comment: string) => void
 };
 
 const GradingCommentSelector : React.FC<Props> = (prop) => {
@@ -15,7 +15,7 @@ const GradingCommentSelector : React.FC<Props> = (prop) => {
             {prop.comments.map(el => {
                 return <div 
                     className="grading-comment-selector-item"
-                    onClick={() => {prop.setEditor(el)}}
+                    onClick={() => {prop.onSelect(el)}}
                 >
                     {el}
                 </div>

src/pages/academy/grading/subcomponents/GradingEditor.tsx

@@ -29,6 +29,8 @@ import GradingCommentSelector from './GradingCommentSelector';
 
 import { useTokens } from 'src/commons/utils/Hooks';
 import { postGenerateComments } from '../../../../commons/sagas/RequestsSaga';
+import { saveFinalComment } from '../../../../commons/sagas/RequestsSaga';
+import { saveChosenComments } from '../../../../commons/sagas/RequestsSaga';
 
 type GradingSaveFunction = (
   submissionId: number,
@@ -109,13 +111,38 @@ const GradingEditor: React.FC<Props> = props => {
 
   const getCommentSuggestions = async () => {
     const resp = await postGenerateComments(
-      tokens,props.submissionId,props.questionId
+      tokens, props.submissionId, props.questionId
     )
     return resp
   }
 
+  const onSelectGeneratedComments = (comment: string) => {
+    if (!selectedSuggestions.includes(comment)) {
+      setSelectedSuggestions([comment, ...selectedSuggestions])
+    }
+
+    setEditorValue(editorValue + comment)
+  }
+
+  const postSaveFinalComment = async (comment : string) => {
+    const resp = await saveFinalComment(
+      tokens, props.submissionId, props.questionId, comment
+    )
+    return resp
+  }
+
+  const postSaveChosenComments = async (comments : string[]) => {
+    const resp = await saveChosenComments(
+      tokens, props.submissionId, props.questionId, comments
+    )
+
+    return resp
+  }
+
   const [suggestions, setSuggestions] = useState<string[]>([])
 
+  const [selectedSuggestions, setSelectedSuggestions] = useState<string[]>([])
+
   const makeInitialState = () => {
     setXpAdjustmentInput(props.xpAdjustment.toString());
     setEditorValue(props.comments);
@@ -144,6 +171,8 @@ const GradingEditor: React.FC<Props> = props => {
     () => {
       const newXpAdjustmentInput = convertParamToInt(xpAdjustmentInput || undefined) || undefined;
       const xp = props.initialXp + (newXpAdjustmentInput || 0);
+      postSaveFinalComment(editorValue);
+      postSaveChosenComments(selectedSuggestions);
       if (xp < 0 || xp > props.maxXp) {
         showWarningMessage(
           `XP ${xp.toString()} is out of bounds. Maximum xp is ${props.maxXp.toString()}.`
@@ -322,13 +351,12 @@ const GradingEditor: React.FC<Props> = props => {
       {props.is_llm && 
       <div>
         <GradingCommentSelector 
-          setEditor={setEditorValue}
+          onSelect={onSelectGeneratedComments}
           comments={suggestions}
         />
         <Button
           onClick={async ()=>{
             const resp = await getCommentSuggestions();
-            console.log(resp!.comments)
             setSuggestions(resp!.comments);
           }}>
           Get comments