fixed @undefined bug in channel creator
This commit is contained in:
bill bittner
parent
ac5d95f674
commit
6b51c9ebd0
6 changed files with 68 additions and 37 deletions
|
|
@ -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,
|
||||
};
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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});
|
||||
|
|
|
|||
|
|
@ -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 ? (
|
||||
<div id="dropzone-instructions">
|
||||
<p className="info-message-placeholder info-message--failure" id="input-error-file-selection">{this.state.fileError}</p>
|
||||
<p className="info-message-placeholder info-message--failure" id="input-error-file-selection">{this.props.fileError}</p>
|
||||
<p>Drag & drop image or video here to publish</p>
|
||||
<p className="fine-print">OR</p>
|
||||
<p className="blue--underlined">CHOOSE FILE</p>
|
||||
|
|
@ -128,7 +126,7 @@ class Dropzone extends React.Component {
|
|||
</div>
|
||||
) : (
|
||||
<div id="dropzone-instructions">
|
||||
<p className="info-message-placeholder info-message--failure" id="input-error-file-selection">{this.state.fileError}</p>
|
||||
<p className="info-message-placeholder info-message--failure" id="input-error-file-selection">{this.props.fileError}</p>
|
||||
<p>Drag & drop image or video here to publish</p>
|
||||
<p className="fine-print">OR</p>
|
||||
<p className="blue--underlined">CHOOSE FILE</p>
|
||||
|
|
@ -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));
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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 {
|
|||
</div>
|
||||
|
||||
<div className="row row--padded row--wide align-content-center">
|
||||
<p className="info-message-placeholder info-message--failure">{this.state.publishRequestError}</p>
|
||||
<p className="info-message-placeholder info-message--failure">{this.props.publishRequestError}</p>
|
||||
<button id="publish-submit" className="button--primary button--large" onClick={this.publish}>Publish</button>
|
||||
</div>
|
||||
|
||||
|
|
@ -205,6 +204,9 @@ const mapStateToProps = state => {
|
|||
nsfw : state.metadata.nsfw,
|
||||
loggedInChannel : state.loggedInChannel,
|
||||
publishInChannel : state.publishInChannel,
|
||||
fileError : state.error.file,
|
||||
urlError : state.error.url,
|
||||
publishRequestError: state.error.publishRequest,
|
||||
};
|
||||
};
|
||||
|
||||
|
|
@ -222,6 +224,9 @@ const mapDispatchToProps = dispatch => {
|
|||
onPublishStatusChange: (status, message) => {
|
||||
dispatch(updatePublishStatus(status, message));
|
||||
},
|
||||
onPublishRequestError: (value) => {
|
||||
dispatch(updateError('publishRequest', value));
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -3,12 +3,12 @@ import { updateClaim } from '../actions/index';
|
|||
import { connect } from 'react-redux';
|
||||
import { makeGetRequest } from '../utils/xhr.js';
|
||||
import UrlMiddle from '../components/PublishUrlMiddle.jsx';
|
||||
import {updateError} from '../actions';
|
||||
|
||||
class UrlChooser extends React.Component {
|
||||
constructor (props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
error : null,
|
||||
host : 'spee.ch',
|
||||
urlMiddle: null,
|
||||
};
|
||||
|
|
@ -27,7 +27,7 @@ class UrlChooser extends React.Component {
|
|||
if (newClaim) {
|
||||
this.checkClaimIsAvailable(newClaim);
|
||||
} else {
|
||||
this.setState({error: 'Please enter a URL'});
|
||||
this.props.onUrlError('Please enter a URL');
|
||||
}
|
||||
}
|
||||
handleInput (event) {
|
||||
|
|
@ -53,19 +53,19 @@ class UrlChooser extends React.Component {
|
|||
makeGetRequest(`/api/claim-is-available/${claim}`)
|
||||
.then(response => {
|
||||
if (response) {
|
||||
that.setState({'error': null});
|
||||
this.props.onUrlError(null);
|
||||
} else {
|
||||
that.setState({'error': 'That url has already been claimed'});
|
||||
this.props.onUrlError('That url has already been claimed');
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
that.setState({'error': error.message});
|
||||
this.props.onUrlError(error.message);
|
||||
});
|
||||
}
|
||||
render () {
|
||||
return (
|
||||
<div>
|
||||
<p id="input-error-claim-name" className="info-message-placeholder info-message--failure">{this.state.error}</p>
|
||||
<p id="input-error-claim-name" className="info-message-placeholder info-message--failure">{this.props.urlError}</p>
|
||||
<div className="column column--3 column--sml-10">
|
||||
<label className="label">URL:</label>
|
||||
</div><div className="column column--7 column--sml-10 input-text--primary span--relative">
|
||||
|
|
@ -75,7 +75,7 @@ class UrlChooser extends React.Component {
|
|||
<UrlMiddle publishInChannel={this.props.publishInChannel} loggedInChannelName={this.props.loggedInChannelName} loggedInChannelShortId={this.props.loggedInChannelShortId}/>
|
||||
|
||||
<input type="text" id="claim-name-input" className="input-text" name='claim' placeholder="your-url-here" onChange={this.handleInput} value={this.props.claim}/>
|
||||
{ (this.props.claim && !this.state.error) && <span id="input-success-claim-name" className="info-message--success span--absolute">{'\u2713'}</span> }
|
||||
{ (this.props.claim && !this.props.urlError) && <span id="input-success-claim-name" className="info-message--success span--absolute">{'\u2713'}</span> }
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
@ -89,6 +89,7 @@ const mapStateToProps = state => {
|
|||
loggedInChannelShortId: state.loggedInChannel.shortId,
|
||||
publishInChannel : state.publishInChannel,
|
||||
claim : state.claim,
|
||||
urlError : state.error.url,
|
||||
};
|
||||
};
|
||||
|
||||
|
|
@ -97,6 +98,9 @@ const mapDispatchToProps = dispatch => {
|
|||
onClaimChange: (value) => {
|
||||
dispatch(updateClaim(value));
|
||||
},
|
||||
onUrlError: (value) => {
|
||||
dispatch(updateError('url', value));
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import {
|
||||
CHANNEL_UPDATE, CLAIM_UPDATE, FILE_CLEAR, FILE_SELECTED, METADATA_UPDATE, PUBLISH_STATUS_UPDATE,
|
||||
CHANNEL_UPDATE, CLAIM_UPDATE, ERROR_UPDATE, FILE_CLEAR, FILE_SELECTED, METADATA_UPDATE, PUBLISH_STATUS_UPDATE,
|
||||
SET_PUBLISH_IN_CHANNEL,
|
||||
} from '../actions';
|
||||
|
||||
|
|
@ -14,7 +14,11 @@ const initialState = {
|
|||
status : null,
|
||||
message: null,
|
||||
},
|
||||
error : null,
|
||||
error: {
|
||||
file : null,
|
||||
url : null,
|
||||
publishRequest: null,
|
||||
},
|
||||
file : null,
|
||||
claim : '',
|
||||
metadata: {
|
||||
|
|
@ -62,11 +66,17 @@ export default function (state = initialState, action) {
|
|||
});
|
||||
case PUBLISH_STATUS_UPDATE:
|
||||
return Object.assign({}, state, {
|
||||
status: Object.assign({}, state.metadata, {
|
||||
status: Object.assign({}, state.status, {
|
||||
status : action.status,
|
||||
message: action.message,
|
||||
}),
|
||||
});
|
||||
case ERROR_UPDATE:
|
||||
return Object.assign({}, state, {
|
||||
error: Object.assign({}, state.error, {
|
||||
[action.name]: action.value,
|
||||
}),
|
||||
});
|
||||
default:
|
||||
return state;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue