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}`)
+    const channelWithAtSymbol = `@${channel}`
-      .then(() => {
+    makeGetRequest(`/api/channel-is-available/${channelWithAtSymbol}`)
-        that.setState({urlError: null});
+      .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) {
+  checkIsChannelAvailable (channel) {
-    if (!password || password.length < 1) {
+    const channelWithAtSymbol = `@${channel}`;
-      throw new Error('Please provide a password');
+    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...'});
+    this.checkIsPasswordProvided()
-    makePostRequest(url, params)
+      .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 => {
+      .catch((error) => {
-        console.log('create channel failure:', error);
+        that.setState({'error': error.message, status: null});
-        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!'});
-        }
       });
   }
   render () {
@@ -91,29 +132,29 @@ class ChannelCreateForm extends React.Component {
               <div className="column column--3 column--sml-10">
                 <label className="label" htmlFor="new-channel-name">Name:</label>
               </div><div className="column column--6 column--sml-10">
-              <div className="input-text--primary flex-container--row flex-container--left-bottom">
+                <div className="input-text--primary flex-container--row flex-container--left-bottom">
-                <span>@</span>
+                  <span>@</span>
-                <input type="text" name="channel" id="new-channel-name" className="input-text" placeholder="exampleChannelName" value={this.state.channel} onChange={this.handleChannelInput} />
+                  <input type="text" name="channel" id="new-channel-name" className="input-text" placeholder="exampleChannelName" value={this.state.channel} onChange={this.handleChannelInput} />
-                <span id="input-success-channel-name" className="info-message--success">{'\u2713'}</span>
+                  <span id="input-success-channel-name" className="info-message--success">{'\u2713'}</span>
+                </div>
               </div>
             </div>
-            </div>
             <div className="row row--wide row--short">
               <div className="column column--3 column--sml-10">
                 <label className="label" htmlFor="new-channel-password">Password:</label>
               </div><div className="column column--6 column--sml-10">
-              <div className="input-text--primary">
+                <div className="input-text--primary">
-                <input type="password" name="password" id="new-channel-password" className="input-text"  placeholder="" value={this.state.password} onChange={this.handleInput} />
+                  <input type="password" name="password" id="new-channel-password" className="input-text"  placeholder="" value={this.state.password} onChange={this.handleInput} />
+                </div>
               </div>
             </div>
-            </div>
 
             <div className="row row--wide">
               <button className="button--primary" onClick={this.createChannel}>Create Channel</button>
             </div>
           </form>
         ) : (
-            <p>{this.state.status}</p>
+            <p className="label">{this.state.status}</p>
         )}
       </div>
     );

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(() => {
+      .then(response => {
-        that.setState({'error': null});
+        if (response) {
+          that.setState({'error': null});
+        } else {
+          that.setState({'error': 'That url has already been claimed'});
+        }
       })
       .catch((error) => {
         that.setState({'error': error.message});

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) {
+          } if (xhttp.status === 401) {
-            reject('Wrong channel name or password');
+            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) {
+          } if (xhttp.status === 401) {
-            reject('Wrong channel name or password');
+            reject(new Error('Wrong username or password'));
           } else {
-            reject('request failed with status:' + xhttp.status);
+            reject(new Error(xhttp.response));
-          };
+          }
         }
       };
       xhttp.send(params);

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);
         }
       })