react/components/AnonymousOrChannelSelect.jsx

@@ -10,9 +10,9 @@ class AnonymousOrChannelSelect extends React.Component {
   toggleAnonymousPublish (event) {
     const value = event.target.value;
     if (value === 'anonymous') {
-      this.props.onPublishToChannelChange(false);
+      this.props.onPublishInChannelChange(false);
     } else {
-      this.props.onPublishToChannelChange(true);
+      this.props.onPublishInChannelChange(true);
     }
   }
   render () {
@@ -43,7 +43,7 @@ const mapStateToProps = state => {
 
 const mapDispatchToProps = dispatch => {
   return {
-    onPublishToChannelChange: (value) => {
+    onPublishInChannelChange: (value) => {
       dispatch(setPublishInChannel(value));
     },
   };

react/components/ChannelCreateForm.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { makeGetRequest, makePostRequest } from '../utils/xhr.js';
 
 class ChannelCreateForm extends React.Component {
   constructor (props) {
@@ -11,6 +12,7 @@ class ChannelCreateForm extends React.Component {
     };
     this.handleChannelInput = this.handleChannelInput.bind(this);
     this.handleInput = this.handleInput.bind(this);
+    this.cleanseInput = this.cleanseInput.bind(this);
     this.checkChannelIsAvailable = this.checkChannelIsAvailable.bind(this);
     this.createChannel = this.createChannel.bind(this);
   }
@@ -18,10 +20,15 @@ class ChannelCreateForm extends React.Component {
     event.preventDefault();
     const name = event.target.name;
     let value = event.target.value;
-    value = this.props.cleanseInput(value);
+    value = this.cleanseInput(value);
     this.setState({[name]: value});
     this.checkChannelIsAvailable(value);
   }
+  cleanseInput (input) {
+    input = input.replace(/\s+/g, '-'); // replace spaces with dashes
+    input = input.replace(/[^A-Za-z0-9-]/g, '');  // remove all characters that are not A-Z, a-z, 0-9, or '-'
+    return input;
+  }
   handleInput (event) {
     event.preventDefault();
     const name = event.target.name;
@@ -30,7 +37,7 @@ class ChannelCreateForm extends React.Component {
   }
   checkChannelIsAvailable (channel) {
     const that = this;
-    this.props.makeGetRequest(`/api/channel-is-available/${channel}`)
+    makeGetRequest(`/api/channel-is-available/${channel}`)
       .then(() => {
         that.setState({urlError: null});
       })
@@ -56,7 +63,7 @@ class ChannelCreateForm extends React.Component {
     // publish the channel
     const that = this;
     this.setState({status: 'We are publishing your new channel.  Sit tight...'});
-    this.props.makePostRequest(url, params)
+    makePostRequest(url, params)
       .then(result => {
         that.props.updateLoggedInChannelOutsideReact(result.channelName, result.channelClaimId, result.shortChannelId);
         that.props.updateUploaderState('loggedInChannelName', result.channelName);

react/components/ChannelLoginForm.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { makePostRequest } from '../utils/xhr.js';
 
 class ChannelLoginForm extends React.Component {
   constructor (props) {
@@ -22,7 +23,7 @@ class ChannelLoginForm extends React.Component {
     const params = `username=${this.state.name}&password=${this.state.password}`;
     const url = '/login';
     const that = this;
-    this.props.makePostRequest(url, params)
+    makePostRequest(url, params)
       .then(result => {
         that.props.updateLoggedInChannelOutsideReact(result.channelName, result.channelClaimId, result.shortChannelId);
         that.props.updateUploaderState('loggedInChannelName', result.channelName);

react/components/ChannelSelector.jsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import ChannelLoginForm from './ChannelLoginForm.jsx';
 import ChannelCreateForm from './ChannelCreateForm.jsx';
+import { connect } from 'react-redux';
+import { setUserCookies } from '../utils/cookies.js';
 
 const LOGIN = 'login';
 const CREATE = 'create';
@@ -56,7 +58,7 @@ class ChannelSelector extends React.Component {
   render () {
     return (
       <div>
-        { this.props.publishToChannel && (
+        { this.props.publishInChannel && (
           <div className="row row--padded row--no-top row--no-bottom row--wide">
 
             <p id="input-error-channel-select" className="info-message-placeholder info-message--failure">{this.props.channelError}</p>
@@ -73,16 +75,12 @@ class ChannelSelector extends React.Component {
 
             { (this.state.optionState === LOGIN) &&
               <ChannelLoginForm
-                makePostRequest={this.props.makePostRequest}
                 updateLoggedInChannelOutsideReact={this.updateLoggedInChannelOutsideReact}
                 updateUploaderState={this.props.updateUploaderState}
                 selectOption={this.selectOption}
               /> }
             { (this.state.optionState === CREATE) &&
               <ChannelCreateForm
-                cleanseInput={this.props.cleanseInput}
-                makeGetRequest={this.props.makeGetRequest}
-                makePostRequest={this.props.makePostRequest}
                 updateLoggedInChannelOutsideReact={this.updateLoggedInChannelOutsideReact}
                 updateUploaderState={this.props.updateUploaderState}
                 selectOption={this.selectOption}
@@ -95,4 +93,11 @@ class ChannelSelector extends React.Component {
   }
 }
 
-module.exports = ChannelSelector;
+const mapStateToProps = state => {
+  return {
+    loggedInChannelName: state.loggedInChannel.name,
+    publishInChannel   : state.publishInChannel,
+  };
+};
+
+export default connect(mapStateToProps, null)(ChannelSelector);

react/components/PublishForm.jsx

@@ -7,7 +7,7 @@ import PublishThumbnailInput from './PublishThumbnailInput.jsx';
 import PublishMetadataInputs from './PublishMetadataInputs.jsx';
 import AnonymousOrChannelSelect from './AnonymousOrChannelSelect.jsx';
 
-import {selectFile, clearFile, updateLoggedInChannel} from '../actions';
+import { selectFile, clearFile, updateLoggedInChannel } from '../actions';
 import { connect } from 'react-redux';
 import { getCookie } from '../utils/cookies.js';
 
@@ -53,14 +53,7 @@ class PublishForm extends React.Component {
 
             <PublishUrlInput />
             <AnonymousOrChannelSelect />
-            <ChannelSelector
-              loggedInChannelName={this.props.loggedInChannelName}
-              publishToChannel={this.props.publishToChannel}
-              cleanseInput={this.props.cleanseInput}
-              updateUploaderState={this.props.updateUploaderState}
-              makeGetRequest={this.props.makeGetRequest}
-              makePostRequest={this.props.makePostRequest}
-            />
+            <ChannelSelector />
 
             <PublishMetadataInputs
               updateUploaderState={this.props.updateUploaderState}

react/components/PublishUrlInput.jsx

@@ -66,7 +66,7 @@ class UrlChooser extends React.Component {
 
             <span className="url-text--secondary">{this.state.host} / </span>
 
-            <UrlMiddle publishToChannel={this.props.publishToChannel} loggedInChannelName={this.props.loggedInChannelName} loggedInChannelShortId={this.props.loggedInChannelShortId}/>
+            <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> }
@@ -84,7 +84,7 @@ const mapStateToProps = state => {
     fileName              : state.file.name,
     loggedInChannelName   : state.loggedInChannel.name,
     loggedInChannelShortId: state.loggedInChannel.shortId,
-    publishToChannel      : state.publishToChannel,
+    publishInChannel      : state.publishInChannel,
     claim                 : state.claim,
   };
 };

react/components/UrlMiddle.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
-function UrlMiddle ({publishToChannel, loggedInChannelName, loggedInChannelShortId}) {
-  if (publishToChannel) {
+function UrlMiddle ({publishInChannel, loggedInChannelName, loggedInChannelShortId}) {
+  if (publishInChannel) {
     if (loggedInChannelName) {
       return <span id="url-channel" className="url-text--secondary">{loggedInChannelName}:{loggedInChannelShortId} /</span>;
     }

react/utils/cookies.js

@@ -14,5 +14,12 @@ module.exports = {
     }
     return '';
   },
-
+  setCookie (key, value) {
+    document.cookie = `${key}=${value}`;
+  },
+  setUserCookies (channelName, channelClaimId, shortChannelId) {
+    module.exports.setCookie('channel_name', channelName)
+    module.exports.setCookie('channel_claim_id', channelClaimId);
+    module.exports.setCookie('short_channel_id', shortChannelId);
+  },
 }