got create component working

public/assets/js/createChannelFunctions.js

@@ -8,7 +8,7 @@ function showChannelCreateInProgressDisplay () {
     createProgressBar(channelProgressBar, 12);
 }
 
-// display the content that shows channle creation is done
+// display the content that shows channel creation is done
 function showChannelCreateDoneDisplay() {
     const inProgress = document.getElementById('channel-publish-in-progress');
     inProgress.hidden=true;
@@ -35,14 +35,7 @@ function publishNewChannel (event) {
         .then(result => {
             setUserCookies(result.channelName, result.channelClaimId, result.shortChannelId);
             showChannelCreateDoneDisplay();
-            // if user is on the home page, update the needed elements without reloading
-            if (window.location.pathname === '/') {
-                replaceChannelOptionInPublishChannelSelect(result.channelName);
-                replaceChannelOptionInNavBarChannelSelect(result.channelName);
-            // if user is not on home page, redirect to home page
-            } else {
-                window.location = '/';
-            }
+            window.location = '/';
         })
         .catch(error => {
             if (error.name === 'ChannelNameError' || error.name === 'ChannelPasswordError'){

public/assets/js/loginFunctions.js

@@ -1,43 +1,3 @@
-function replaceChannelOptionInPublishChannelSelect(loggedInChannel) {
-    // remove the old channel option
-    const oldChannel = document.getElementById('publish-channel-select-channel-option')
-    if (oldChannel){
-        oldChannel.parentNode.removeChild(oldChannel);
-    }
-    // create new channel option
-    const newChannelOption = document.createElement('option');
-    newChannelOption.setAttribute('value', loggedInChannel);
-    newChannelOption.setAttribute('id', 'publish-channel-select-channel-option');
-    newChannelOption.setAttribute('selected', '');
-    newChannelOption.innerText = loggedInChannel;
-    // add the new option
-    const channelSelect = document.getElementById('channel-name-select');
-    channelSelect.insertBefore(newChannelOption, channelSelect.firstChild);
-    // carry out channel selection
-    toggleSelectedChannel(loggedInChannel);
-}
-
-function replaceChannelOptionInNavBarChannelSelect (loggedInChannel) {
-    // remove the old channel option
-    const oldChannel = document.getElementById('nav-bar-channel-select-channel-option');
-    if (oldChannel){
-        oldChannel.parentNode.removeChild(oldChannel);
-    }
-    // create new channel option & select it
-    const newChannelOption = document.createElement('option');
-    newChannelOption.setAttribute('value', loggedInChannel);
-    newChannelOption.setAttribute('id', 'nav-bar-channel-select-channel-option');
-    newChannelOption.setAttribute('selected', '');
-    newChannelOption.innerText = loggedInChannel;
-    // add the new option
-    const channelSelect = document.getElementById('nav-bar-channel-select');
-    channelSelect.style.display = 'inline-block';
-    channelSelect.insertBefore(newChannelOption, channelSelect.firstChild);
-    // hide login
-    const navBarLoginLink = document.getElementById('nav-bar-login-link');
-    navBarLoginLink.style.display = 'none';
-}
-
 function loginToChannel (event) {
     const userName = document.getElementById('channel-login-name-input').value;
     const password = document.getElementById('channel-login-password-input').value;
@@ -50,14 +10,7 @@ function loginToChannel (event) {
         .then(result => {
             setUserCookies(result.channelName, result.channelClaimId, result.shortChannelId);
             // if user is on the home page, update the needed elements without reloading
-            if (window.location.pathname === '/') {
-                replaceChannelOptionInPublishChannelSelect(result.channelName);
-                replaceChannelOptionInNavBarChannelSelect(result.channelName);
-            // if user is not on home page, redirect to home page
-            } else {
-                window.location = '/';
-            }
-
+            window.location = '/';
         })
         .catch(error => {
             const loginErrorDisplayElement = document.getElementById('login-error-display-element');

public/assets/js/publishFileFunctions.js

@@ -1,16 +1,6 @@
 var stagedFiles = null;
 
 const publishFileFunctions = {
-    cancelPublish: function () {
-        window.location.href = '/';
-    },
-
-    hidePrimaryDropzone: function () {
-        const primaryDropzone = document.getElementById('primary-dropzone');
-        const publishForm = document.getElementById('publish-form');
-        primaryDropzone.setAttribute('class', 'hidden');
-        publishForm.setAttribute('class', 'row')
-    },
     returnNullOrChannel: function () {
         const channelRadio = document.getElementById('channel-radio');
         if (channelRadio.checked) {
@@ -146,37 +136,6 @@ const publishFileFunctions = {
         // redirect the user
         window.location.href = showUrl;
     },
-    hidePublishTools: function () {
-        const publishFormWrapper = document.getElementById('publish-form');
-        publishFormWrapper.setAttribute('class', 'hidden');
-    },
-    // publish status functions
-    showPublishStatus: function () {
-        const publishStatus = document.getElementById('publish-status');
-        publishStatus.setAttribute('class', 'row row--tall flex-container--column flex-container--center-center');
-    },
-    updatePublishStatus: function (msg){
-        const publishUpdate = document.getElementById('publish-update');
-        publishUpdate.innerHTML = msg;
-    },
-    // progress bar functions
-    showPublishProgressBar: function (){
-        const publishProgressBar = document.getElementById('publish-progress-bar');
-        createProgressBar(publishProgressBar, 12);
-    },
-    hidePublishProgressBar: function (){
-        const publishProgressBar = document.getElementById('publish-progress-bar');
-        publishProgressBar.hidden = true;
-    },
-    // upload percent functions
-    updateUploadPercent: function (msg){
-        const uploadPercent = document.getElementById('upload-percent');
-        uploadPercent.innerHTML = msg;
-    },
-    hideUploadPercent: function (){
-        const uploadPercent = document.getElementById('upload-percent');
-        uploadPercent.hidden = true;
-    },
 }
 
 

public/assets/js/validationFunctions.js

@@ -65,11 +65,6 @@ const validationFunctions = {
             throw new ChannelPasswordError("You must enter a password for you channel");
         }
     },
-    cleanseClaimName: function (name) {
-        name = name.replace(/\s+/g, '-'); // replace spaces with dashes
-        name = name.replace(/[^A-Za-z0-9-]/g, '');  // remove all characters that are not A-Z, a-z, 0-9, or '-'
-        return name;
-    },
     // validation functions to check claim & channel name eligibility as the inputs change
     isNameAvailable: function (name, apiUrl) {
         const url = apiUrl + name;
@@ -116,11 +111,6 @@ const validationFunctions = {
             that.showError(errorDisplayElement, error.message);
         }
     },
-    checkClaimName: function (name) {
-        const successDisplayElement = document.getElementById('input-success-claim-name');
-        const errorDisplayElement = document.getElementById('input-error-claim-name');
-        this.checkAvailability(name, successDisplayElement, errorDisplayElement, this.validateClaimName, 'Sorry, that ending is already taken', '/api/claim-is-available/');
-    },
     checkChannelName: function (name) {
         const successDisplayElement = document.getElementById('input-success-channel-name');
         const errorDisplayElement = document.getElementById('input-error-channel-name');

react/components/channelCreateForm.jsx

@@ -1,24 +1,5 @@
 import React from 'react';
 
-function ChannelSuccess (message) {
-  return (
-    <div>
-      <p>{this.props.message}</p>
-    </div>
-  );
-}
-
-function ChannelInProgress () {
-  return (
-    <div id="channel-publish-in-progress">
-      <p>Creating your new channel.  This may take a few seconds...</p>
-      <div id="create-channel-progress-bar"></div>
-    </div>
-  );
-}
-
-
-
 class ChannelCreateForm extends React.Component {
   constructor (props) {
     super(props);
@@ -57,39 +38,75 @@ class ChannelCreateForm extends React.Component {
         that.setState({error: error.message});
       });
   }
+  validatePassword (password) {
+    if (!password || password.length < 1) {
+      throw new Error('Please provide a password');
+    }
+  }
   createChannel (event) {
     event.preventDefault();
-    // publishNewChannel(event)
+    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.props.makePostRequest(url, params)
+      .then(result => {
+        that.props.updateLoggedInChannelOutsideReact(result.channelName, result.channelClaimId, result.shortChannelId);
+        that.props.updateUploaderState('loggedInChannelName', result.channelName);
+        that.props.updateUploaderState('loggedInChannelShortId', result.shortChannelId);
+        that.props.selectOption(result.channelName);
+      })
+      .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!'});
+        }
+      });
   }
   render () {
     return (
-      <form id="publish-channel-form">
-        <p id="input-error-channel-name" className="info-message-placeholder info-message--failure">{this.state.error}</p>
-        <div className="row row--wide row--short">
-          <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">
-              <span>@</span>
-              <input type="text" name="new-channel-name" id="new-channel-name" className="input-text" placeholder="exampleChannelName" value={this.channel} onChange={this.handleChannelInput} />
+      <div>
+        { !this.state.status ? (
+          <form id="publish-channel-form">
+            <p id="input-error-channel-name" className="info-message-placeholder info-message--failure">{this.state.error}</p>
+            <div className="row row--wide row--short">
+              <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">
+                <span>@</span>
+                <input type="text" name="channel" id="new-channel-name" className="input-text" placeholder="exampleChannelName" value={this.channel} onChange={this.handleChannelInput} />
                 <span id="input-success-channel-name" className="info-message--success">{'\u2713'}</span>
+              </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">
+                <input type="password" name="password" id="new-channel-password" className="input-text"  placeholder="" value={this.password} onChange={this.handleInput} />
+              </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">
-              <input type="password" name="new-channel-password" id="new-channel-password" className="input-text"  placeholder="" value={this.password} onChange={this.handleInput} />
             </div>
-          </div>
-        </div>
 
-        <div className="row row--wide">
-          <button className="button--primary" onClick={this.createChannel}>Create</button>
-        </div>
-      </form>
+            <div className="row row--wide">
+              <button className="button--primary" onClick={this.createChannel}>Create</button>
+            </div>
+          </form>
+        ) : (
+            <p>{this.state.status}</p>
+        )}
+      </div>
     );
   }
 }

react/components/channelSelector.jsx

@@ -13,11 +13,12 @@ class ChannelSelector extends React.Component {
     };
     this.handleSelection = this.handleSelection.bind(this);
     this.selectOption = this.selectOption.bind(this);
+    this.replaceChannelSelectionInNavBar = this.replaceChannelSelectionInNavBar.bind(this);
     this.updateLoggedInChannelOutsideReact = this.updateLoggedInChannelOutsideReact.bind(this);
   }
   componentWillMount () {
     if (this.props.loggedInChannelName) {
-      this.setState({ optionState: null });
+      this.setState({ optionState: this.props.loggedInChannelName });
     }
   }
   handleSelection (event) {
@@ -27,10 +28,30 @@ class ChannelSelector extends React.Component {
   selectOption (option) {
     this.setState({optionState: option});
   }
+  replaceChannelSelectionInNavBar (loggedInChannel) {
+    // remove the old channel option
+    const oldChannel = document.getElementById('nav-bar-channel-select-channel-option');
+    if (oldChannel) {
+      oldChannel.parentNode.removeChild(oldChannel);
+    }
+    // create new channel option & select it
+    const newChannelOption = document.createElement('option');
+    newChannelOption.setAttribute('value', loggedInChannel);
+    newChannelOption.setAttribute('id', 'nav-bar-channel-select-channel-option');
+    newChannelOption.setAttribute('selected', '');
+    newChannelOption.innerText = loggedInChannel;
+    // add the new option
+    const channelSelect = document.getElementById('nav-bar-channel-select');
+    channelSelect.style.display = 'inline-block';
+    channelSelect.insertBefore(newChannelOption, channelSelect.firstChild);
+    // hide login
+    const navBarLoginLink = document.getElementById('nav-bar-login-link');
+    navBarLoginLink.style.display = 'none';
+  }
   updateLoggedInChannelOutsideReact (channelName, channelClaimId, shortChannelId) {
     // update anywhere on page that needs to be updated outside of this component
     setUserCookies(channelName, channelClaimId, shortChannelId);
-    replaceChannelOptionInNavBarChannelSelect(channelName);
+    this.replaceChannelSelectionInNavBar(channelName);
   }
   render () {
     return (
@@ -61,6 +82,7 @@ class ChannelSelector extends React.Component {
               <ChannelCreateForm
                 cleanseInput={this.props.cleanseInput}
                 makeGetRequest={this.props.makeGetRequest}
+                makePostRequest={this.props.makePostRequest}
                 updateLoggedInChannelOutsideReact={this.updateLoggedInChannelOutsideReact}
                 updateUploaderState={this.props.updateUploaderState}
                 selectOption={this.selectOption}

react/components/publishForm.jsx

@@ -104,7 +104,7 @@ class PublishForm extends React.Component {
 
             <div className="row row--padded row--wide">
               <div className="input-error" id="input-error-publish-submit" hidden="true">{this.props.inputError}</div>
-              <button id="publish-submit" className="button--primary button--large" onClick={this.publish}>Upload</button>
+              <button id="publish-submit" className="button--primary button--large" onClick={this.publish}>Publish</button>
             </div>
 
             <div className="row row--short align-content-center">