diff --git a/react/containers/ChannelCreateForm.jsx b/react/containers/ChannelCreateForm.jsx index 1e2326ad..b742e559 100644 --- a/react/containers/ChannelCreateForm.jsx +++ b/react/containers/ChannelCreateForm.jsx @@ -17,7 +17,9 @@ class ChannelCreateForm extends React.Component { this.cleanseChannelInput = this.cleanseChannelInput.bind(this); this.handleChannelInput = this.handleChannelInput.bind(this); this.handleInput = this.handleInput.bind(this); - this.checkChannelIsAvailable = this.checkChannelIsAvailable.bind(this); + this.updateIsChannelAvailable = this.updateIsChannelAvailable.bind(this); + this.checkIsChannelAvailable = this.checkIsChannelAvailable.bind(this); + this.checkIsPasswordProvided = this.checkIsPasswordProvided.bind(this); this.createChannel = this.createChannel.bind(this); } cleanseChannelInput (input) { @@ -30,7 +32,12 @@ class ChannelCreateForm extends React.Component { let value = event.target.value; value = this.cleanseChannelInput(value); this.setState({channel: value}); - this.checkChannelIsAvailable(value); + if (value) { + this.updateIsChannelAvailable(value); + } else { + this.setState({error: 'Please enter a channel name'}); + } + console.log('end of handlechannelinput'); } handleInput (event) { event.preventDefault(); @@ -38,47 +45,81 @@ class ChannelCreateForm extends React.Component { const value = event.target.value; this.setState({[name]: value}); } - checkChannelIsAvailable (channel) { + updateIsChannelAvailable (channel) { const that = this; - makeGetRequest(`/api/channel-is-available/${channel}`) - .then(() => { - that.setState({urlError: null}); + const channelWithAtSymbol = `@${channel}` + makeGetRequest(`/api/channel-is-available/${channelWithAtSymbol}`) + .then(isAvailable => { + if (isAvailable) { + that.setState({'error': null}); + } else { + that.setState({'error': 'That channel has already been claimed'}); + } }) .catch((error) => { - that.setState({error: error.message}); + that.setState({'error': error.message}); }); } - validatePassword (password) { - if (!password || password.length < 1) { - throw new Error('Please provide a password'); - } + checkIsChannelAvailable (channel) { + const channelWithAtSymbol = `@${channel}`; + return new Promise((resolve, reject) => { + makeGetRequest(`/api/channel-is-available/${channelWithAtSymbol}`) + .then(isAvailable => { + if (!isAvailable) { + console.log('channel is not available'); + return reject(new Error('That channel has already been claimed')); + } + console.log('channel is available'); + resolve(); + }) + .catch((error) => { + reject(error); + }); + }); + } + checkIsPasswordProvided () { + const password = this.state.password; + return new Promise((resolve, reject) => { + if (!password || password.length < 1) { + console.log('password not provided'); + return reject(new Error('Please provide a password')); + } + console.log('password provided'); + resolve(); + }); + } + makeCreateChannelRequest (channel, password) { + const params = `username=${channel}&password=${password}`; + return new Promise((resolve, reject) => { + makePostRequest('/signup', params) + .then(result => { + resolve(result); + }) + .catch(error => { + console.log('create channel request failed:', error); + reject(new Error('Unfortunately, we encountered an error while creating your channel. Please let us know in Discord!')); + }); + }); } createChannel (event) { event.preventDefault(); - const params = `username=${this.state.channel}&password=${this.state.password}`; - const url = '/signup'; - // validate submission data - try { - this.validatePassword(this.state.password); - } catch (error) { - return this.setState({error: error.message}); - } - // publish the channel const that = this; - this.setState({status: 'We are publishing your new channel. Sit tight...'}); - makePostRequest(url, params) + this.checkIsPasswordProvided() + .then(() => { + return that.checkIsChannelAvailable(that.state.channel, that.state.password); + }) + .then(() => { + that.setState({status: 'We are publishing your new channel. Sit tight...'}); + return that.makeCreateChannelRequest(); + }) .then(result => { - that.props.onChannelLogin(result.channelName, result.shortChannelId, result.channelClaimId); + that.setState({status: null}); setUserCookies(result.channelName, result.shortChannelId, result.channelClaimId); replaceChannelSelectionInNavBar(result.channelName); + that.props.onChannelLogin(result.channelName, result.shortChannelId, result.channelClaimId); }) - .catch(error => { - console.log('create channel failure:', error); - if (error.message) { - this.setState({'error': error.message}); - } else { - this.setState({'error': 'Unfortunately, we encountered an error while creating your channel. Please let us know in Discord!'}); - } + .catch((error) => { + that.setState({'error': error.message, status: null}); }); } render () { @@ -91,29 +132,29 @@ class ChannelCreateForm extends React.Component {
-
- @ - - {'\u2713'} +
+ @ + + {'\u2713'} +
-
-
- +
+ +
-
) : ( -

{this.state.status}

+

{this.state.status}

)} ); diff --git a/react/containers/PublishUrlInput.jsx b/react/containers/PublishUrlInput.jsx index c0a59d54..dbf1f1fc 100644 --- a/react/containers/PublishUrlInput.jsx +++ b/react/containers/PublishUrlInput.jsx @@ -22,14 +22,20 @@ class UrlChooser extends React.Component { this.setClaimNameFromFileName(); } } + componentWillReceiveProps ({claim: newClaim}) { + console.log('PublishUrlInput will receive new props (claim)', newClaim); + if (newClaim) { + this.checkClaimIsAvailable(newClaim); + } else { + this.setState({error: 'Please enter a URL'}); + } + } handleInput (event) { event.preventDefault(); let value = event.target.value; value = this.cleanseInput(value); // update the state this.props.onClaimChange(value); - // check to make sure claim name is available - this.checkClaimIsAvailable(value); } cleanseInput (input) { input = input.replace(/\s+/g, '-'); // replace spaces with dashes @@ -38,7 +44,6 @@ class UrlChooser extends React.Component { } setClaimNameFromFileName () { const fileName = this.props.fileName; - console.log('setClaimNameFromFileName', fileName); const fileNameWithoutEnding = fileName.substring(0, fileName.lastIndexOf('.')); const cleanClaimName = this.cleanseInput(fileNameWithoutEnding); this.props.onClaimChange(cleanClaimName); @@ -46,8 +51,12 @@ class UrlChooser extends React.Component { checkClaimIsAvailable (claim) { const that = this; makeGetRequest(`/api/claim-is-available/${claim}`) - .then(() => { - that.setState({'error': null}); + .then(response => { + if (response) { + that.setState({'error': null}); + } else { + that.setState({'error': 'That url has already been claimed'}); + } }) .catch((error) => { that.setState({'error': error.message}); diff --git a/react/utils/xhr.js b/react/utils/xhr.js index 2faae14a..b4f8a7c3 100644 --- a/react/utils/xhr.js +++ b/react/utils/xhr.js @@ -8,11 +8,11 @@ module.exports = { if (xhttp.readyState === 4) { if (xhttp.status === 200) { resolve(xhttp.response); - } else if (xhttp.status === 401) { - reject('Wrong channel name or password'); + } if (xhttp.status === 401) { + reject(new Error('Wrong username or password')); } else { - reject('request failed with status:' + xhttp.status); - }; + reject(new Error(xhttp.response)); + } } }; xhttp.send(); @@ -28,11 +28,11 @@ module.exports = { if (xhttp.readyState === 4) { if (xhttp.status === 200) { resolve(xhttp.response); - } else if (xhttp.status === 401) { - reject('Wrong channel name or password'); + } if (xhttp.status === 401) { + reject(new Error('Wrong username or password')); } else { - reject('request failed with status:' + xhttp.status); - }; + reject(new Error(xhttp.response)); + } } }; xhttp.send(params); diff --git a/routes/api-routes.js b/routes/api-routes.js index bd9ac3e1..88512b70 100644 --- a/routes/api-routes.js +++ b/routes/api-routes.js @@ -90,7 +90,6 @@ module.exports = (app) => { if (result === true) { res.status(200).json(true); } else { - // logger.debug(`Rejecting '${params.name}' because that name has already been claimed by this site`); res.status(200).json(false); } }) @@ -105,7 +104,6 @@ module.exports = (app) => { if (result === true) { res.status(200).json(true); } else { - // logger.debug(`Rejecting '${params.name}' because that channel has already been claimed`); res.status(200).json(false); } })