upgrade nextjs, fix security vulnerability in dependency, and try not to crash so spectacularly in failing to render create grading screen

Author: hcientist

components/teacher/grade/perform.js

@@ -3,6 +3,7 @@ import ListGroupItem from 'react-bootstrap/ListGroupItem';
 import { Card, Col, Row } from 'react-bootstrap';
 import dynamic from 'next/dynamic';
 import { useRef, useState } from 'react';
+import { ErrorBoundary } from 'react-error-boundary';
 import RTE from './rte';
 
 const FlatEditor = dynamic(() => import('../../flatEditor'), {
@@ -40,6 +41,20 @@ export default function GradePerform({ submissions }) {
           submissions.map((submission, submissionIdx) => {
             let rte;
             let reflection;
+            let parsedScore;
+
+            if (
+              submission?.assignment?.activity?.activity_type?.category ===
+                'Create' &&
+              submission?.content
+            ) {
+              try {
+                parsedScore = JSON.parse(submission.content);
+              } catch (e) {
+                console.error(e, submission.content);
+              }
+            }
+
             if (
               submission?.assignment?.activity?.activity_type?.category ===
                 'Respond' &&
@@ -121,9 +136,18 @@ export default function GradePerform({ submissions }) {
                         ?.category === 'Create' &&
                         submission?.content && (
                           <ListGroupItem>
-                            <FlatEditor
-                              scoreJSON={JSON.parse(submission.content)}
-                            />
+                            {parsedScore ? (
+                              <ErrorBoundary
+                                fallback={<div>Something went wrong</div>}
+                              >
+                                <FlatEditor scoreJSON={parsedScore} />
+                              </ErrorBoundary>
+                            ) : (
+                              <div>
+                                <p>no score/erroneous score</p>
+                                <pre>{submission.content}</pre>
+                              </div>
+                            )}
                           </ListGroupItem>
                         )}
                       <ListGroupItem>

package-lock.json

@@ -14,12 +14,13 @@
     "date-fns": "^2.28.0",
     "flat-embed": "^1.4.0",
     "mic-recorder-to-mp3": "^2.2.2",
-    "next": "^14.2.3",
+    "next": "^14.2.5",
     "next-auth": "^4.2.1",
     "next-redux-wrapper": "^8.1.0",
     "react": "^18.3.1",
     "react-bootstrap": "^2.10.2",
     "react-dom": "^18.3.1",
+    "react-error-boundary": "^4.0.13",
     "react-icons": "^4.3.1",
     "react-query": "^3.34.17",
     "react-redux": "^7.1.0",