Add request to backend to change instrument. Only display instrument …

…selector if the course allows students to change instruments

api.js

@@ -242,3 +242,23 @@ export function mutateCourse(slug) {
     });
   };
 }
+
+
+export async function mutateAssignmentInstrument(slug, pieceId, instrument) {
+  const session = await getSession();
+  const token = session.djangoToken;
+  const response = await fetch(
+    `${process.env.NEXT_PUBLIC_BACKEND_HOST}/api/courses/${slug}/change_piece_instrument/`,
+    {
+      headers: {
+        Authorization: `Token ${token}`,
+        'Content-Type': 'application/json',
+      },
+      method: 'PATCH',
+      body: JSON.stringify({piece_id: pieceId ,instrument_id: instrument.id})
+    }
+  );
+
+  assertResponse(response);
+}
+

components/instrumentSelector.js

@@ -1,8 +1,10 @@
 import { fetchInstruments } from "../actions";
 import Form from "react-bootstrap/Form";
 import { useDispatch, useSelector } from 'react-redux';
+import Spinner from "react-bootstrap/Spinner";
 
-export default function InstrumentSelector({defaultInstrument}) {
+
+export default function InstrumentSelector({defaultInstrument, onChange}) {
   let { items: instruments, loaded: instrumentsLoaded } = useSelector(
     (state) => state.instruments
   );
@@ -11,15 +13,26 @@ export default function InstrumentSelector({defaultInstrument}) {
     const dispatch = useDispatch();
     instruments = dispatch(fetchInstruments());
   }
-
-  return (
-    <Form.Select size="sm">
-      {defaultInstrument && <option>{defaultInstrument}</option>}
+
+  return instrumentsLoaded ? (
+    <Form.Select 
+      size="sm"
+      onChange={(e) => onChange(instruments[e.target.value])}
+      defaultValue={Object.values(instruments).find(i => i.name === defaultInstrument).id}
+    >
       {instruments && (
-        Object.values(instruments).map((instrument, index) => (
-          <option key={index}>{instrument.name}</option>
+        Object.values(instruments).map((instrument) => (
+          <option
+            key={instrument.id} 
+            value={instrument.id}
+          >{instrument.name}</option>
         ))
       )} 
     </Form.Select>
+  ) : (
+    <Spinner 
+      size="sm"
+      variant="primary"
+    />
   )
 }

components/student/pieceAssignments.js

@@ -1,13 +1,14 @@
 import { useRouter } from "next/router";
-import { getStudentAssignments } from "../../api";
+import { getStudentAssignments, mutateAssignmentInstrument } from "../../api";
 import { Card, ListGroup, ListGroupItem, Spinner } from "react-bootstrap";
 import { useQuery } from "react-query";
 import Link from "next/link";
 import SubmissionsStatusBadge from "../submissionStatusBadge";
 import { assnToContent, assnToKey } from "./navActivityPicker";
 import InstrumentSelector from "../instrumentSelector"
 
-function PieceAssignments({piece, canEditInstruments}) {
+
+function PieceAssignments({ piece, canEditInstruments }) {
   const router = useRouter();
 
   const { slug } = router.query;
@@ -16,10 +17,15 @@ function PieceAssignments({piece, canEditInstruments}) {
     isLoading,
     error: assignmentsError,
     data: assignments,
-  } = useQuery(['assignments',slug], getStudentAssignments(slug), {
-    enabled: !!slug, staleTime: 5*60*1000
+  } = useQuery(['assignments', slug], getStudentAssignments(slug), {
+    enabled: !!slug, staleTime: 5 * 60 * 1000
   });
 
+  const updateInstrument = (newInstrument) => {
+    const pieceId = assignments[piece][0].piece_id;
+    mutateAssignmentInstrument(slug, pieceId, newInstrument);
+  }
+
 
   if (isLoading) {
     return <Spinner
@@ -39,10 +45,14 @@ function PieceAssignments({piece, canEditInstruments}) {
     }
     return <p>You have no assignments for this piece at this time.</p>
   }
+
   return <Card className="student-piece-activity-group">
     <Card.Header className="fw-bold">
       {assignments[piece][0].piece_name}
-      <InstrumentSelector defaultInstrument={assignments[piece][0].instrument}/>
+      {canEditInstruments && (<InstrumentSelector
+        defaultInstrument={assignments[piece][0].instrument}
+        onChange={updateInstrument}
+      />)}
     </Card.Header>
     <ListGroup>
       {assignments[piece]