@@ -79,6 +79,10 @@ const ModalButton = styled.button`
7979 padding: 0.25rem 0.5rem;
8080 color: white;
8181 border: none;
82+ &:disabled {
83+ opacity: 0.6;
84+ cursor: not-allowed;
85+ }
8286` ;
8387
8488const ButtonRow = styled . div < { $center ?: boolean } > `
@@ -205,14 +209,22 @@ const ModalInterior = ({
205209
206210 if ( ! modalKey && ! modalObject ) return < div > </ div > ;
207211
212+ const [ isAddingDegree , setIsAddingDegree ] = useState ( false ) ;
208213 const add_degree = async ( degreeplanId : number , degreeId : number ) => {
209214 // const { mutate } = useSWR(`/api/degree/degreeplans/${degreeplanId}/degrees`, getFetcher);
210- const updated = await postFetcher (
211- `/api/degree/degreeplans/${ degreeplanId } /degrees` ,
212- { degree_ids : [ degreeId ] }
213- ) ;
214- await mutate ( `/api/degree/degreeplans/${ degreeplanId } ` ) ; // use updated degree plan returned
215- await mutate ( `/api/degree/degreeplans/${ degreeplanId } /fulfillments` ) ;
215+ setIsAddingDegree ( true ) ;
216+ try {
217+ const updated = await postFetcher (
218+ `/api/degree/degreeplans/${ degreeplanId } /degrees` ,
219+ { degree_ids : [ degreeId ] }
220+ ) ;
221+ await mutate ( `/api/degree/degreeplans/${ degreeplanId } ` ) ; // use updated degree plan returned
222+ await mutate ( `/api/degree/degreeplans/${ degreeplanId } /fulfillments` ) ;
223+ } catch ( error ) {
224+ console . error ( error ) ;
225+ } finally {
226+ setIsAddingDegree ( false ) ;
227+ }
216228 } ;
217229
218230 const remove_degree = async ( degreeplanId : number , degreeId : number ) => {
@@ -334,13 +346,14 @@ const ModalInterior = ({
334346 </ SelectList >
335347 < ButtonRow $center = { true } >
336348 < ModalButton
337- onClick = { ( ) => {
349+ disabled = { isAddingDegree }
350+ onClick = { async ( ) => {
338351 if ( ! major ?. value . id ) return ;
339- add_degree ( ( modalObject as Degree ) . id , major ?. value . id ) ;
352+ await add_degree ( ( modalObject as Degree ) . id , major ?. value . id ) ;
340353 close ( ) ;
341354 } }
342355 >
343- Add
356+ { isAddingDegree ? "Adding..." : " Add" }
344357 </ ModalButton >
345358 </ ButtonRow >
346359 </ DegreeAddInterior >
0 commit comments