import { useAuthState } from "@kobra-dev/react-firebase-auth-hooks/auth" ; import { Typography , CircularProgress , makeStyles } from "@material-ui/core" ; import { Adjust , Check } from "@material-ui/icons" ; import { useAutosaveStatus } from "./AutosaverProvider" ; import firebase from "../utils/firebase" ; const useStyles = makeStyles ( ( theme ) => ( { root : { display : "flex" , alignItems : "center" } , indicator : { height : "1.5rem" , marginRight : theme . spacing ( 1 ) } } ) ) ; export default function AutosaveIndicator ( props ) { const styles = useStyles ( ) ; const status = useAutosaveStatus ( ) ; const [ user ] = useAuthState ( firebase . auth ( ) ) ; return ! status . haveAttemptedToSave ? null : ( < div className = { props . className } > < Typography variant = "body2" className = { styles . root } > { status . loading && user ?. uid ? ( < CircularProgress className = { styles . indicator } size = "1.5rem" color = "inherit" / > ) : ! status . lastSaveTime ? ( < Adjust className = { styles . indicator } / > ) : ( < Check className = { styles . indicator } / > ) } { status . haveAttemptedToSave && ! status . lastSaveTime ? ! status . loading || ! user ?. uid ? `Unsaved${ ! user ?. uid ? " - sign in to save" : "" }` : "" : `Last saved at ${ dateToString ( status . lastSaveTime ) }` } < /Typography> < /div>); } function dateToString ( date ) { const hours = date . getHours ( ) ; const minutes = date . getMinutes ( ) ; const seconds = date . getSeconds ( ) ; return `${ hours < 10 ? "0" + hours : hours }:${ minutes < 10 ? "0" + minutes : minutes }:${ seconds < 10 ? "0" + seconds : seconds }` ; }