import { useRef, useState } from 'react' import AvatarEditor from 'react-avatar-editor' import Button from 'react-bootstrap/Button' import BootstrapForm from 'react-bootstrap/Form' import EditImage from '@/svgs/image-edit-fill.svg' import Moon from '@/svgs/moon-fill.svg' import { useShowModal } from './modal' import { FileUpload } from './file-upload' import { gql, useMutation } from '@apollo/client' export default function Avatar ({ onSuccess }) { const [cropPhoto] = useMutation(gql` mutation cropPhoto($photoId: ID!, $cropData: CropData) { cropPhoto(photoId: $photoId, cropData: $cropData) } `) const [uploading, setUploading] = useState() const showModal = useShowModal() const Body = ({ onClose, file, onSave }) => { const [scale, setScale] = useState(1) const ref = useRef() return (
setScale(parseFloat(e.target.value))} min={1} max={2} step='0.05' // defaultValue={scale} />
) } const startCrop = async (file, upload) => { return new Promise((resolve, reject) => showModal(onClose => ( { onClose() resolve() }} file={file} onSave={async (cropData) => { setUploading(true) try { // upload original to S3 const photoId = await upload(file) // crop it const { data } = await cropPhoto({ variables: { photoId, cropData } }) const res = await fetch(data.cropPhoto) const blob = await res.blob() // create a file from the blob const croppedImage = new File([blob], 'avatar.jpg', { type: 'image/jpeg' }) // upload the imgproxy cropped image const croppedPhotoId = await upload(croppedImage) onSuccess?.(croppedPhotoId) setUploading(false) } catch (e) { console.error(e) setUploading(false) reject(e) } }} /> )) ) } return ( { console.log(e) setUploading(false) }} onSelect={startCrop} onUpload={() => { setUploading(true) }} >
{uploading ? : }
) }