import React , { useState } from "react" ; import { Button , Alert } from "react-bootstrap" ; import { GATEWAY_URL } from "../config.json" ; import { navigate } from "@reach/router" ; import { ButtonSpinner } from "../components" ; const SaveNoteButton = ( props ) => { const [ isSaving , setIsSaving ] = useState ( false ) ; const [ errorMsg , setErrorMsg ] = useState ( "" ) ; const handleSave = async ( event ) => { event . preventDefault ( ) ; setIsSaving ( true ) ; const { noteId , noteContent } = props ; const updateNoteURL = `${ GATEWAY_URL }notes/${ noteId }` ; try { await fetch ( updateNoteURL , { method : "PUT" , body : JSON . stringify ( { content : noteContent } ) , } ) ; navigate ( "/" ) ; } catch ( error ) { console . log ( error ) ; setErrorMsg ( `${ error . toString ( ) } - ${ updateNoteURL } - ${ noteContent }` ) ; } finally { setIsSaving ( false ) ; } } ; return ( < > { errorMsg && < Alert variant = "danger" > { errorMsg } < /Alert>} < Button disabled = { isSaving } onClick = { handleSave } block > { isSaving ? < ButtonSpinner / > : "" } { isSaving ? "Saving..." : "Save" } < /Button> < />); } ; export { SaveNoteButton } ;