Merge branch 'JMU-CIME:main' into main

README.md

@@ -18,14 +18,16 @@
 1. `pm2 stop fe-dev`
 1. change the symlink for live in fe-dev to the newly readied version
     * cd /home/ec2-user/fe-dev-versions
+    * ls -al
     * rm live
     * ln -s /home/ec2-user/fe-dev-versions/<v0.2.2> live
 1. cd /home/ec2-user/fe-dev-versions/live #WARNING: you must have cd'ed into the current version first because the start script is just running `next start` which expects to find package.json and etc in the current dir.
 1. `pm2 start npm --name "fe-dev" -- start`
-    `pm2 start npm --name "fe-prod" -- start``
+    `pm2 start npm --name "fe-prod" -- start`
 1. `pm2 save`
 
 ## Deploying PROD
 
 1. package.json needs to specify the different port
+    * change the `start` line in package.json to `"start": "next start -p 3003"`
 1. .env files may need to be copied from prior versions 

components/student/create/aural.js

@@ -122,6 +122,7 @@ export default function CreativityAuralActivity() {
             }}
             orig={json}
             colors={currentAssignment?.part?.chord_scale_pattern}
+            instrumentName={currentAssignment?.instrument}
           />
         </>
       )}

components/student/create/explore.js

@@ -146,6 +146,7 @@ export default function CreativityActivity() {
             trim={1}
             onUpdate={handleTonicUpdate}
             colors='tonic'
+            instrumentName={currentAssignment?.instrument}
           />    
         </div>
       </div>
@@ -169,6 +170,7 @@ export default function CreativityActivity() {
             trim={1}
             onUpdate={handleSubdominantUpdate}
             colors='subdominant'
+            instrumentName={currentAssignment?.instrument}
           />
         </div>
       </div>
@@ -192,6 +194,7 @@ export default function CreativityActivity() {
             trim={1}
             onUpdate={handleDominantUpdate}
             colors='dominant'
+            instrumentName={currentAssignment?.instrument}
           />
         </div>
       </div>
@@ -255,6 +258,7 @@ export default function CreativityActivity() {
           colors={currentAssignment?.part?.chord_scale_pattern}
           selectedMeasure={selectedMeasure}
           debugMsg='final explore composition flateditor instance'
+          instrumentName={currentAssignment?.instrument}
         />
         <Recorder
           submit={submitCreativity}

components/student/create/theoretical.js

@@ -183,7 +183,7 @@ export default function CreativityActivity() {
             }
             <Button onClick={()=>{setIsDoneComposing(true)}}>Done Composing</Button>
             <h2>Step {subScores.length + 1} - Combined</h2>
-            {scoreDataRef.current && scoreDataRef.current.length > 0 && isDoneComposing && <MergingScore giveJSON={onMerged} scores={scoreDataRef} />}
+            {scoreDataRef.current && scoreDataRef.current.length > 0 && isDoneComposing && <MergingScore giveJSON={onMerged} scores={scoreDataRef} instrumentName={currentAssignment?.instrument} />}
             <Recorder
               submit={submitCreativity}
               accompaniment={currentAssignment?.part?.piece?.accompaniment}

components/teacher/grade/rte.js

@@ -18,15 +18,15 @@ export default function RTE({ submission, submitAction, autoFocus = false }) {
   const userInfo = useSelector((state) => state.currentUser);
   const { slug } = router.query;
   const [isFormFocused, setFormFocus] = useState(false);
-  const [rhythm, setRhythm] = useState(0);
-  const [tone, setTone] = useState(0);
-  const [expression, setExpression] = useState(0);
+  const [rhythm, setRhythm] = useState(submission?.grade?.rhythm ?? 0);
+  const [tone, setTone] = useState(submission?.grade?.tone ?? 0);
+  const [expression, setExpression] = useState(submission?.grade?.expression ?? 0);
   const audioRef = useRef();
   const dispatch = useDispatch();
   const queryClient = useQueryClient();
   const gradeMutation = useMutation(mutateGradeSubmission(slug), {
     onMutate: async (newGrade) => {
-      dispatch(beginUpload('grade'));
+      dispatch(beginUpload(`grade-${submission.id}`));
       // Cancel any outgoing refetches (so they don't overwrite our optimistic update)
       await queryClient.cancelQueries('gradeableSubmissions');
       // Snapshot the previous value
@@ -51,14 +51,14 @@ export default function RTE({ submission, submitAction, autoFocus = false }) {
     },
     // If the mutation fails, use the context returned from onMutate to roll back
     onError: (err, newGrade, context) => {
-      dispatch(uploadFailed('grade'));
+      dispatch(uploadFailed(`grade-${submission.id}`));
       queryClient.setQueryData(
         'gradeableSubmissions',
         context.previousSubmissions
       );
     },
     onSuccess: () => {
-      dispatch(uploadSucceeded('grade'));
+      dispatch(uploadSucceeded(`grade-${submission.id}`));
     },
     // Always refetch after error or success:
     onSettled: () => {
@@ -105,6 +105,7 @@ export default function RTE({ submission, submitAction, autoFocus = false }) {
         >
           <Form.Control
             type="number"
+            defaultValue={rhythm}
             onChange={(ev) => {
               setRhythm(ev.target.value);
             }}
@@ -121,6 +122,7 @@ export default function RTE({ submission, submitAction, autoFocus = false }) {
         <FloatingLabel controlId="floatingInput" label="Tone" className="mb-3">
           <Form.Control
             type="number"
+            defaultValue={tone}
             onChange={(ev) => {
               setTone(ev.target.value);
             }}
@@ -140,6 +142,7 @@ export default function RTE({ submission, submitAction, autoFocus = false }) {
         >
           <Form.Control
             type="number"
+            defaultValue={expression}
             onChange={(ev) => {
               setExpression(ev.target.value);
             }}
@@ -154,7 +157,7 @@ export default function RTE({ submission, submitAction, autoFocus = false }) {
       <Button variant="primary" type="submit" className="mb-3">
         Submit
       </Button>{' '}
-      <StatusIndicator statusId={submission?.id ?? 'respond'} />
+      <StatusIndicator statusId={(!!submitAction ? submission?.id : `grade-${submission.id}`) ?? 'respond'} />
     </Form>
   );
 }

pages/courses/[slug]/[piece]/[actCategory]/[partType]/grade.js

@@ -3,20 +3,30 @@ import { useQuery } from 'react-query';
 import { getRecentSubmissions } from '../../../../../../api';
 import Layout from "../../../../../../components/layout";
 import GradePerform from "../../../../../../components/teacher/grade/perform";
+import { Spinner } from "react-bootstrap";
 
 export default function GradeActivity() {
   const router = useRouter();
   const { slug, piece, partType } = router.query;
-  
+
   // TODO: should't render this thing if not a teacher
-  const { isLoading, error, data: submissions } = useQuery(['gradeableSubmissions', slug, piece, partType], getRecentSubmissions({ slug, piece, partType }))
+  const { isLoading, error, data: submissions } = useQuery(['gradeableSubmissions', slug, piece, partType], getRecentSubmissions({ slug, piece, partType }), { enabled: !!slug && !!piece && !!partType })
 
+  if (error) return `An error has occurred: ${error.message}`
 
-
-  if (isLoading || !submissions) return 'Loading...'
-  if (error) return `An error has occurred: ${  error.message}`
-
   return <Layout>
-    <GradePerform submissions={submissions} />
+    { !slug || !piece || !partType || isLoading || !submissions ? 
+      <Spinner
+        as="span"
+        animation="border"
+        size="sm"
+        role="status"
+        aria-hidden="true"
+        variant="primary"
+      >
+        <span className="visually-hidden">Loading...</span>
+      </Spinner> :
+      <GradePerform submissions={submissions} />
+    }
   </Layout>
 }