diff --git a/react/actions/index.js b/react/actions/index.js index 3c730282..1ba9bfff 100644 --- a/react/actions/index.js +++ b/react/actions/index.js @@ -6,6 +6,7 @@ export const CLAIM_UPDATE = 'CLAIM_UPDATE'; export const CHANNEL_UPDATE = 'CHANNEL_UPDATE'; export const SET_PUBLISH_IN_CHANNEL = 'SET_PUBLISH_IN_CHANNEL'; export const PUBLISH_STATUS_UPDATE = 'PUBLISH_STATUS_UPDATE'; +export const ERROR_UPDATE = 'ERROR_UPDATE'; // export action creators export function selectFile (file) { @@ -59,3 +60,11 @@ export function updatePublishStatus (status, message) { message, }; }; + +export function updateError (name, value) { + return { + type: ERROR_UPDATE, + name, + value, + }; +}; diff --git a/react/containers/ChannelCreateForm.jsx b/react/containers/ChannelCreateForm.jsx index b742e559..f8a0923f 100644 --- a/react/containers/ChannelCreateForm.jsx +++ b/react/containers/ChannelCreateForm.jsx @@ -20,6 +20,7 @@ class ChannelCreateForm extends React.Component { this.updateIsChannelAvailable = this.updateIsChannelAvailable.bind(this); this.checkIsChannelAvailable = this.checkIsChannelAvailable.bind(this); this.checkIsPasswordProvided = this.checkIsPasswordProvided.bind(this); + this.makePublishChannelRequest = this.makePublishChannelRequest.bind(this); this.createChannel = this.createChannel.bind(this); } cleanseChannelInput (input) { @@ -88,12 +89,12 @@ class ChannelCreateForm extends React.Component { resolve(); }); } - makeCreateChannelRequest (channel, password) { + makePublishChannelRequest (channel, password) { const params = `username=${channel}&password=${password}`; return new Promise((resolve, reject) => { makePostRequest('/signup', params) .then(result => { - resolve(result); + return resolve(result); }) .catch(error => { console.log('create channel request failed:', error); @@ -110,7 +111,7 @@ class ChannelCreateForm extends React.Component { }) .then(() => { that.setState({status: 'We are publishing your new channel. Sit tight...'}); - return that.makeCreateChannelRequest(); + return that.makePublishChannelRequest(that.state.channel, that.state.password); }) .then(result => { that.setState({status: null}); diff --git a/react/containers/Dropzone.jsx b/react/containers/Dropzone.jsx index 16dbeb53..5f477625 100644 --- a/react/containers/Dropzone.jsx +++ b/react/containers/Dropzone.jsx @@ -1,16 +1,14 @@ import React from 'react'; // import PropTypes from 'prop-types'; -import { selectFile } from '../actions/index'; +import { selectFile, updateError } from '../actions'; import { connect } from 'react-redux'; import Preview from '../components/Preview.jsx'; - import { validateFile } from '../utils/file.js'; class Dropzone extends React.Component { constructor (props) { super(props); this.state = { - fileError : null, dragOver : false, mouseOver : false, dimPreview: false, @@ -79,10 +77,10 @@ class Dropzone extends React.Component { try { validateFile(file); // validate the file's name, type, and size } catch (error) { - return this.setState({fileError: error.message}); + return this.props.onFileError(error.message); } // stage it so it will be ready when the publish button is clicked - this.setState({fileError: null}); + this.props.onFileError(null); this.props.onFileSelect(file); } } @@ -110,7 +108,7 @@ class Dropzone extends React.Component { )} { this.state.mouseOver ? (
{this.state.fileError}
+{this.props.fileError}
Drag & drop image or video here to publish
OR
CHOOSE FILE
@@ -128,7 +126,7 @@ class Dropzone extends React.Component {{this.state.fileError}
+{this.props.fileError}
Drag & drop image or video here to publish
OR
CHOOSE FILE
@@ -146,6 +144,7 @@ const mapStateToProps = state => { return { file : state.file, thumbnail: state.metadata.thumbnail, + fileError: state.error.file, }; }; @@ -154,6 +153,9 @@ const mapDispatchToProps = dispatch => { onFileSelect: (file) => { dispatch(selectFile(file)); }, + onFileError: (value) => { + dispatch(updateError('file', value)); + }, }; } diff --git a/react/containers/PublishForm.jsx b/react/containers/PublishForm.jsx index 89cea2ec..6926484c 100644 --- a/react/containers/PublishForm.jsx +++ b/react/containers/PublishForm.jsx @@ -8,7 +8,7 @@ import PublishMetadataInputs from './PublishMetadataInputs.jsx'; import AnonymousOrChannelSelect from './AnonymousOrChannelSelect.jsx'; import { connect } from 'react-redux'; import { getCookie } from '../utils/cookies.js'; -import { selectFile, clearFile, updateLoggedInChannel, updatePublishStatus } from '../actions'; +import {selectFile, clearFile, updateLoggedInChannel, updatePublishStatus, updateError} from '../actions'; const LOAD_START = 'LOAD_START'; const LOADING = 'LOADING'; @@ -19,10 +19,6 @@ const FAILED = 'FAILED'; class PublishForm extends React.Component { constructor (props) { super(props); - // set defaults - this.state = { - publishRequestError: null, - }; this.validatePublishRequest = this.validatePublishRequest.bind(this); this.makePublishRequest = this.makePublishRequest.bind(this); this.publish = this.publish.bind(this); @@ -46,11 +42,14 @@ class PublishForm extends React.Component { if (!this.props.claim) { return reject(new Error('Please enter a URL')); } + if (this.props.urlError) { + return reject(new Error('Fix the url')); + } // if publishInChannel is true, is a channel logged in (or selected) if (this.props.publishInChannel && !this.props.loggedInChannel.name) { return reject(new Error('Select "Anonymous" or log in to a channel')); } - // tbd: is the claim available? + // is the claim available? resolve(); }); } @@ -131,7 +130,7 @@ class PublishForm extends React.Component { that.props.onPublishStatusChange('publish request made'); }) .catch((error) => { - that.setState({publishRequestError: error.message}); + that.props.onPublishRequestError(error.message); }); } render () { @@ -175,7 +174,7 @@ class PublishForm extends React.Component {{this.state.publishRequestError}
+{this.props.publishRequestError}
{this.state.error}
+{this.props.urlError}