Add instrument selector on the frontend

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

@@ -0,0 +1,38 @@
+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, onChange}) {
+  let { items: instruments, loaded: instrumentsLoaded } = useSelector(
+    (state) => state.instruments
+  );
+
+  if (!instrumentsLoaded) {
+    const dispatch = useDispatch();
+    instruments = dispatch(fetchInstruments());
+  }
+
+  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) => (
+          <option
+            key={instrument.id} 
+            value={instrument.id}
+          >{instrument.name}</option>
+        ))
+      )} 
+    </Form.Select>
+  ) : (
+    <Spinner 
+      size="sm"
+      variant="primary"
+    />
+  )
+}

components/student/course.js

@@ -10,7 +10,7 @@ import { PieceAssignments } from './pieceAssignments';
 // show the assignments that still need to be completed
 // show the assignments that have already been completed
 
-export default function StudentCourseView() {
+export default function StudentCourseView({canEditInstruments=False}) {
   const router = useRouter();
   const { slug } = router.query;
   const {
@@ -20,7 +20,7 @@ export default function StudentCourseView() {
   } = useQuery(['assignments',slug], getStudentAssignments(slug), {
     enabled: !!slug, staleTime: 5*60*1000
   });
-
+  
   return (
     <Row>
       <Col>
@@ -40,7 +40,11 @@ export default function StudentCourseView() {
             </Spinner>
           ) : assignments && Object.keys(assignments).length > 0 ? (
             Object.keys(assignments).map((pieceSlug) => (
-              <PieceAssignments key={`${pieceSlug}-activities`} piece={pieceSlug} />
+              <PieceAssignments 
+                key={`${pieceSlug}-activities`} 
+                piece={pieceSlug} 
+                canEditInstruments={canEditInstruments}
+              />
             ))
           ) : (
             <p>You have no assignments at this time.</p>

components/student/pieceAssignments.js

@@ -1,12 +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}) {
+
+function PieceAssignments({ piece, canEditInstruments }) {
   const router = useRouter();
 
   const { slug } = router.query;
@@ -15,10 +17,16 @@ function PieceAssignments({piece}) {
     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
       as="span"
@@ -31,17 +39,21 @@ function PieceAssignments({piece}) {
       <span className="visually-hidden">Loading...</span>
     </Spinner>
   }
-
   if (!slug || assignmentsError || !assignments || !assignments[piece]) {
     if (assignmentsError) {
       console.error(assignmentsError)
     }
     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}</Card.Header>
+    <Card.Header className="fw-bold">
+      {assignments[piece][0].piece_name}
+      {canEditInstruments && (<InstrumentSelector
+        defaultInstrument={assignments[piece][0].instrument}
+        onChange={updateInstrument}
+      />)}
+    </Card.Header>
     <ListGroup>
       {assignments[piece]
         .map((assignment) => (
@@ -66,4 +78,4 @@ function PieceAssignments({piece}) {
 
 export {
   PieceAssignments,
-}
+}

pages/courses/[slug]/index.js

@@ -16,15 +16,16 @@ export default function CourseDetails() {
   const router = useRouter();
   const { slug } = router.query;
   const currentEnrollment = enrollments && enrollments.filter((elem) => elem.course.slug === slug)[0]
-
   return (
     <Layout>
       {
         currentEnrollment && 
         <>
           <h1>{currentEnrollment?.course?.name ?? 'Details'}</h1>
           {currentEnrollment.role === 'Student' ? (
-            <StudentCourseView />
+            <StudentCourseView 
+              canEditInstruments={currentEnrollment?.course?.can_edit_instruments}
+            />
           ) : (
             <div>
               <Link href={`/courses/${slug}/edit`}>