import { changeCoverPhoto, updateUser, UPDATE_COVER_PHOTO, UPDATE_COVER_PHOTO_FAILURE, updateCoverPhotoFailure, removeCoverPhoto } from '../actions/settings'; import { Field, reduxForm } from 'redux-form'; import React, { Component } from 'react'; import FormField from '../components/FormField'; import LoadingSpinner from '../components/LoadingSpinner'; import PropTypes from 'prop-types'; class SettingsCover extends Component { constructor(props) { super(props); this.state = { mustBlock: false } this.handleCoverSubmit = this.handleCoverSubmit.bind(this); this.onDeleteCover = this.onDeleteCover.bind(this); } onDeleteCover () { const { dispatch, user } = this.props; dispatch(removeCoverPhoto(user.uid)) } base64(file, callback) { const fileObj = {} const readerOnload = e => { const base64 = btoa(e.target.result); fileObj.base64 = base64; callback(fileObj); } const reader = new FileReader(); reader.onload = readerOnload; fileObj.filetype = file.type; fileObj.size = file.size; fileObj.filename = file.name; reader.readAsBinaryString(file); } handleCoverSubmit(values) { const { dispatch } = this.props; if (values.settingsCover.length > 0) { const coverFile = values.settingsCover[0]; this.setState({ mustBlock: true }); this.base64(coverFile, data => { if (data.filetype === 'image/jpeg' || data.filetype === 'image/png') { dispatch(changeCoverPhoto({encodedFile: data.base64 })) .then(response => { if (response.type === UPDATE_COVER_PHOTO || response.type === UPDATE_COVER_PHOTO_FAILURE) { // this.setState({ mustBlock: false }) const delay = response.type === UPDATE_COVER_PHOTO ? 1500 : response.type === UPDATE_COVER_PHOTO_FAILURE ? 200 : 50; setTimeout(() => this.setState({ mustBlock: false }), delay) } }) } else { dispatch(updateCoverPhotoFailure('Please upload a valid image file – png or jpg.')) .then(this.setState({ mustBlock: false })) } }); } } render() { const { coverUrl, user } = this.props; const { mustBlock } = this.state; return (