Update avatar using react-avatar-edit

AvatarEditor.js

import React, {useState} from 'react';
import dynamic from 'next/dynamic';
import {message, Modal} from 'antd';
import {auth, db, storage} from '../../../firebase/clientApp';
import isEmpty from 'lodash/isEmpty';

const Avatar = dynamic(() => import('react-avatar-edit'), {ssr: false});

function AvatarEditor({show, setShow, user}) {
  const [data, setData] = useState(null);
  const [meta, setMeta] = useState({});
  const [uploading, setUploading] = useState(false);

  let onFileLoad = (file) => {
    setMeta(file);
  };

  function onCrop(preview) {
    setData(preview);
  }

  function onUpload() {
    if (isEmpty(data) || isEmpty(meta)) {
      message.warn(`Chưa có ảnh.`);
      return;
    }

    try {
      setUploading(true);
      const {name, size, type} = meta;
      const metadata = {
        contentType: type,
        cacheControl: 'public,max-age=31536000',//1 year
      };
      const uploadTask = storage.ref().
          child(`users/${user.uid}/avatar/${name}`).
          putString(data, 'data_url', metadata);

      // Register three observers:
      // 1. 'state_changed' observer, called any time the state changes
      // 2. Error observer, called on failure
      // 3. Completion observer, called on successful completion
      uploadTask.on('state_changed',
          (snapshot) => {
            // Observe state change events such as progress, pause, and resume
            // Get task progress, including the number of bytes uploaded and the total number of bytes to be uploaded
            // var progress = (snapshot.bytesTransferred / snapshot.totalBytes) *
            //     100;
            // console.log('Upload is ' + progress + '% done');
            // switch (snapshot.state) {
            //   case firebase.storage.TaskState.PAUSED: // or 'paused'
            //     console.log('Upload is paused');
            //     break;
            //   case firebase.storage.TaskState.RUNNING: // or 'running'
            //     console.log('Upload is running');
            //     break;
            // }
          },
          (error) => {
            // Handle unsuccessful uploads
            message.error(error.message);

          },
          () => {
            // Handle successful uploads on complete
            // For instance, get the download URL: https://firebasestorage.googleapis.com/...
            uploadTask.snapshot.ref.getDownloadURL().
                then(async (downloadURL) => {
                  // console.log(`users/${user.uid}`);
                  try {
                    // console.log('File available at', downloadURL);
                    await auth.currentUser.updateProfile(
                        {photoURL: downloadURL},
                    );
                    await db.doc(`users/${user.uid}`).
                        set({photoURL: downloadURL}, {merge: true});
                    setShow(false);
                  } catch (e) {
                    // console.log(e);
                    message.error(e.message);
                  } finally {
                    setUploading(false);
                  }
                });
          },
      );

    } catch (e) {
      message.error(e.message);
    } finally {
      setUploading(false);
    }

  }

  return (
      <Modal
          title={`Change Avatar`}
          visible={show}
          onCancel={() => setShow(false)}
          okText={'Update'}
          onOk={onUpload}
          confirmLoading={uploading}
      >
        <div className={['avatarUploader']}>
          <Avatar
              width={400}
              height={200}
              onCrop={onCrop}
              onFileLoad={onFileLoad}
          />
        </div>
        <style jsx>{
          `
            .avatarUploader {
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
            }
          `
        }
        </style>
      </Modal>
  );
}

export default AvatarEditor;