diff --git a/api.js b/api.js index 37022ee..ccdaf8a 100644 --- a/api.js +++ b/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); +} + diff --git a/components/instrumentSelector.js b/components/instrumentSelector.js index 2223fc4..f7f0b42 100644 --- a/components/instrumentSelector.js +++ b/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 ( - - {defaultInstrument && } + + return instrumentsLoaded ? ( + onChange(instruments[e.target.value])} + defaultValue={Object.values(instruments).find(i => i.name === defaultInstrument).id} + > {instruments && ( - Object.values(instruments).map((instrument, index) => ( - + Object.values(instruments).map((instrument) => ( + )) )} + ) : ( + ) } diff --git a/components/student/pieceAssignments.js b/components/student/pieceAssignments.js index d79cd57..eaa5721 100644 --- a/components/student/pieceAssignments.js +++ b/components/student/pieceAssignments.js @@ -1,5 +1,5 @@ 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"; @@ -7,7 +7,8 @@ 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 You have no assignments for this piece at this time.

} + return {assignments[piece][0].piece_name} - + {canEditInstruments && ()} {assignments[piece]