import { Inertia } from '@inertiajs/inertia' ; import { useForm , usePage } from '@inertiajs/inertia-react' ; import classNames from 'classnames' ; import React , { useRef , useState } from 'react' ; import useRoute from '@/Hooks/useRoute' ; import JetActionMessage from '@/Jetstream/ActionMessage' ; import JetButton from '@/Jetstream/Button' ; import JetFormSection from '@/Jetstream/FormSection' ; import JetInput from '@/Jetstream/Input' ; import JetInputError from '@/Jetstream/InputError' ; import JetLabel from '@/Jetstream/Label' ; import JetSecondaryButton from '@/Jetstream/SecondaryButton' ; import { User } from '@/types' ; interface Props { user : User ; } export default function UpdateProfileInformationForm ( { user } ) { const form = useForm ( { _method : 'PUT' , name : user . name , email : user . email , photo : null as File | null , } ) ; const route = useRoute ( ) ; const [ photoPreview , setPhotoPreview ] = useState < string | null > ( null ) ; const photoRef = useRef < HTMLInputElement > ( null ) ; const page = usePage < any > ( ) ; function updateProfileInformation ( ) { form . post ( route ( 'user-profile-information.update' ) , { errorBag : 'updateProfileInformation' , preserveScroll : true , onSuccess : ( ) => clearPhotoFileInput ( ) , } ) ; } function selectNewPhoto ( ) { photoRef . current ?. click ( ) ; } function updatePhotoPreview ( ) { const photo = photoRef . current ?. files ?. [ 0 ] ; if ( ! photo ) { return ; } form . setData ( 'photo' , photo ) ; const reader = new FileReader ( ) ; reader . onload = e => { setPhotoPreview ( e . target ?. result as string ) ; } ; reader . readAsDataURL ( photo ) ; } function deletePhoto ( ) { Inertia . delete ( route ( 'current-user-photo.destroy' ) , { preserveScroll : true , onSuccess : ( ) => { setPhotoPreview ( null ) ; clearPhotoFileInput ( ) ; } , } ) ; } function clearPhotoFileInput ( ) { if ( photoRef . current ?. value ) { photoRef . current . value = '' ; form . setData ( 'photo' , null ) ; } } return ( < JetFormSection onSubmit = { updateProfileInformation } title = { 'Profile Information' } description = { `Update your account's profile information and email address.` } renderActions = { ( ) => ( < > < JetActionMessage on = { form . recentlySuccessful } className = "mr-3" > Saved . < /JetActionMessage> < JetButton className = { classNames ( { 'opacity-25' : form . processing } ) } disabled = { form . processing } > Save < /JetButton> < />)}> { } { page . props . jetstream . managesProfilePhotos ? ( < div className = "col-span-6 sm:col-span-4" > { } < input type = "file" className = "hidden" ref = { photoRef } onChange = { updatePhotoPreview } / > < JetLabel htmlFor = "photo" value = "Photo" / > { photoPreview ? ( < div className = "mt-2" > < span className = "block rounded-full w-20 h-20" style = { { backgroundSize : 'cover' , backgroundRepeat : 'no-repeat' , backgroundPosition : 'center center' , backgroundImage : `url('${ photoPreview } ')`, } } > < /span> < /div>) : ( < div className = "mt-2" > < img src = { user . profile_photo_url } alt = { user . name } className = "rounded-full h-20 w-20 object-cover" / > < /div>)} < JetSecondaryButton className = "mt-2 mr-2" type = "button" onClick = { selectNewPhoto } > Select A New Photo < /JetSecondaryButton> { user . profile_photo_path ? ( < JetSecondaryButton type = "button" className = "mt-2" onClick = { deletePhoto } > Remove Photo < /JetSecondaryButton>) : null} < JetInputError message = { form . errors . photo } className = "mt-2" / > < /div>) : null} { } < div className = "col-span-6 sm:col-span-4" > < JetLabel htmlFor = "name" value = "Name" / > < JetInput id = "name" type = "text" className = "mt-1 block w-full" value = { form . data . name } onChange = { e => form . setData ( 'name' , e . currentTarget . value ) } autoComplete = "name" / > < JetInputError message = { form . errors . name } className = "mt-2" / > < /div> { } < div className = "col-span-6 sm:col-span-4" > < JetLabel htmlFor = "email" value = "Email" / > < JetInput id = "email" type = "email" className = "mt-1 block w-full" value = { form . data . email } onChange = { e => form . setData ( 'email' , e . currentTarget . value ) } / > < JetInputError message = { form . errors . email } className = "mt-2" / > < /div> < /JetFormSection>); }