Work on comments

Author: Tkaixiang

src/commons/sagas/RequestsSaga.ts

@@ -1056,7 +1056,7 @@ export const getGrading = async (
         xpAdjustment: grade.xpAdjustment,
         comments: grade.comments
       },
-      ai_comments: gradingQuestion.ai_comments?.response.split('|||') || []
+      ai_comments: gradingQuestion.ai_comments?.response?.split('|||') || []
     } as GradingQuestion;
 
     if (gradingQuestion.grade.grader !== null) {
@@ -1559,8 +1559,8 @@ export const removeAssessmentConfig = async (
  */
 export const postGenerateComments = async (
   tokens: Tokens,
-  submission_id: integer,
-  question_id: integer
+  submission_id: number,
+  question_id: number
 ): Promise<{ comments: string[] } | null> => {
   const resp = await request(
     `${courseId()}/admin/generate-comments/${submission_id}/${question_id}`,
@@ -1578,8 +1578,8 @@ export const postGenerateComments = async (
 
 export const saveFinalComment = async (
   tokens: Tokens,
-  submission_id: integer,
-  question_id: integer,
+  submission_id: number,
+  question_id: number,
   comment: string
 ): Promise<Response | null> => {
   const resp = await request(

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

@@ -18,16 +18,17 @@ const GradingCommentSelector: React.FC<Props> = props => {
         <div>
           {' '}
           {props.comments.length > 0 ? (
-            props.comments.map(el => {
+            props.comments.map((el, index) => {
               return (
-                <div
+                <button
+                  key={index}
                   className="grading-comment-selector-item"
                   onClick={() => {
                     props.onSelect(el);
                   }}
                 >
                   {el}
-                </div>
+                </button>
               );
             })
           ) : (

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

@@ -167,10 +167,10 @@ const GradingEditor: React.FC<Props> = props => {
    */
   const validateXpBeforeSave =
     (handleSaving: GradingSaveFunction): (() => void) =>
-    () => {
+    async () => {
       const newXpAdjustmentInput = convertParamToInt(xpAdjustmentInput || undefined) || undefined;
       const xp = props.initialXp + (newXpAdjustmentInput || 0);
-      postSaveFinalComment(editorValue);
+      await postSaveFinalComment(editorValue);
       if (xp < 0 || xp > props.maxXp) {
         showWarningMessage(
           `XP ${xp.toString()} is out of bounds. Maximum xp is ${props.maxXp.toString()}.`

src/styles/_workspace.scss

@@ -358,8 +358,8 @@ $code-color-notification: #f9f0d7;
       }
 
       .grading-comment-selector-item {
-        margin: 4px;
-        padding: 4px;
+        margin: 3px;
+        padding: 7px;
         background-color: $cadet-color-2;
         border: 1px solid $cadet-color-3;
         cursor: pointer;