Firebase and Firestore and Dropzone

import React, { Fragment, useState, useEffect } from "react";
import { Segment, Header, Divider, Grid, Button } from "semantic-ui-react";
import { connect } from "react-redux";
import { compose } from "redux";
import { toastr } from "react-redux-toastr";
import DropzoneInput from "./DropzoneInputs";
import CropperInput from "./CropperInput";

import { firestoreConnect, withFirestore } from "react-redux-firebase";

import {
  uploadProfileImage,
  deletePhoto,
  setMainPhoto
} from "../../userActions";
import UserPhotos from "./UserPhotos";

import * as MiscConstants from "../../../../app/common/constants/misc";

const query = ({ auth }) => {
  return [
    {
      collection: "users",
      doc: auth.uid,
      subcollections: [{ collection: "photos" }],
      storeAs: "photos"
    }
  ];
};

const actions = {
  uploadProfileImage,
  deletePhoto,
  setMainPhoto
};

const mapState = state => ({
  auth: state.firebase.auth,
  profile: state.firebase.profile,
  photos: state.firestore.ordered.photos,
  loading: state.async.loading
});

const PhotosPage = ({
  uploadProfileImage,
  photos,
  profile,
  loading,
  deletePhoto,
  setMainPhoto,
  firebase,
  firestore
}) => {
  const [files, setFiles] = useState([]);
  const [image, setImage] = useState(null);

  useEffect(() => {
    return () => {
      files.forEach(file => URL.revokeObjectURL(file.preview));
    };
  }, [files]);

  const handleUploadImage = async () => {
    try {
      await uploadProfileImage(firebase, firestore, image, files[0].name);
      handleCancelCrop();
      toastr.success(
        MiscConstants.LABEL_SUCCESS,
        MiscConstants.LABEL_PHOTO_UPLOADED
      );
    } catch (error) {
      console.log(error);
      toastr.error(
        MiscConstants.LABEL_OOPS,
        MiscConstants.LABEL_SOMETHING_WENT_WRONG
      );
    }
  };

  const handleCancelCrop = () => {
    setFiles([]);
    setImage(null);
  };

  const handleDeletePhoto = async photo => {
    try {
      await deletePhoto(photo);
    } catch (error) {
      toastr.error(MiscConstants.LABEL_OOPS, error.message);
    }
  };

  const handleSetMainPhoto = async photo => {
    try {
      await setMainPhoto(photo);
    } catch (error) {
      toastr.error(MiscConstants.LABEL_OOPS, error.message);
    }
  };

  return (
    <Segment>
      <Header dividing size='large' content='Your Photos' />
      <Grid>
        <Grid.Row />
        <Grid.Column width={4}>
          <Header
            color='teal'
            sub
            content={MiscConstants.LABEL_STEP1_ADD_PHOTO}
          />
          <DropzoneInput setFiles={setFiles} />
        </Grid.Column>
        <Grid.Column width={1} />
        <Grid.Column width={4}>
          <Header
            sub
            color='teal'
            content={MiscConstants.LABEL_STEP2_RESIZE_PHOTO}
          />
          {files.length > 0 && (
            <CropperInput setImage={setImage} imagePreview={files[0].preview} />
          )}
        </Grid.Column>
        <Grid.Column width={1} />
        <Grid.Column width={4}>
          <Header
            sub
            color='teal'
            content={MiscConstants.LABEL_STEP3_PREVIEW_AND_UPLOAD}
          />
          {files.length > 0 && (
            <Fragment>
              <div
                className='img-preview'
                style={{
                  minHeight: "200px",
                  minWidth: "200px",
                  overflow: "hidden"
                }}
              />
              <Button.Group>
                <Button
                  loading={loading}
                  onClick={handleUploadImage}
                  style={{ width: "100px" }}
                  positive
                  icon='check'
                />
                <Button
                  disabled={loading}
                  onClick={handleCancelCrop}
                  style={{ width: "100px" }}
                  icon='close'
                />
              </Button.Group>
            </Fragment>
          )}
        </Grid.Column>
      </Grid>

      <Divider />
      <UserPhotos
        photos={photos}
        profile={profile}
        deletePhoto={handleDeletePhoto}
        setMainPhoto={handleSetMainPhoto}
        loading={loading}
      />
    </Segment>
  );
};

export default withFirestore(compose(
  connect(mapState, actions),
  firestoreConnect(auth => query(auth))
)(PhotosPage));


//
// AND THIS CODE COMES FROM ../../userActions.js
//
export const uploadProfileImage = (firebase, firestore, file, fileName) => async (
  dispatch,
  getState,
  { getFirebase, getFirestore }
) => {
  const imageName = cuid();
  const user = firebase.auth().currentUser;
  const path = `${user.uid}/user_images`;
  const options = {
    name: imageName
  };
  try {
    dispatch(asyncActionStart());

    // upload the file to firebase storage
    let uploadedFile = await firebase.uploadFile(path, file, null, options);

    // get URL of the image
    let downloadURL = await uploadedFile.uploadTaskSnapshot.ref.getDownloadURL();

    // get the "document" for the user record
    let userDoc = await firestore.get(`users/${user.uid}`);

    // check if user has photo, if not update profile
    if (!userDoc.data().photoURL) {
      await firebase.updateProfile({
        photoURL: downloadURL
      });
      await user.updateProfile({
        photoURL: downloadURL
      });
    }

    // add image to firestore
    await firestore.add(
      {
        collection: "users",
        doc: user.uid,
        subcollections: [{ collection: "photos" }]
      },
      {
        name: imageName,
        url: downloadURL
      }
    );

    dispatch(asyncActionFinish());
  } catch (error) {
    console.log(error);
    dispatch(asyncActionError());
  }
};