diff --git a/react/components/AnonymousOrChannelSelect.jsx b/react/components/AnonymousOrChannelSelect.jsx index a90a6ceb..b956887a 100644 --- a/react/components/AnonymousOrChannelSelect.jsx +++ b/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)); }, }; diff --git a/react/components/ChannelCreateForm.jsx b/react/components/ChannelCreateForm.jsx index e30f2ff4..c4cef7a4 100644 --- a/react/components/ChannelCreateForm.jsx +++ b/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); diff --git a/react/components/ChannelLoginForm.jsx b/react/components/ChannelLoginForm.jsx index 376d7308..0c06fc58 100644 --- a/react/components/ChannelLoginForm.jsx +++ b/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); diff --git a/react/components/ChannelSelector.jsx b/react/components/ChannelSelector.jsx index 256bd20b..f93bf0ba 100644 --- a/react/components/ChannelSelector.jsx +++ b/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 (
- { this.props.publishToChannel && ( + { this.props.publishInChannel && (

{this.props.channelError}

@@ -73,16 +75,12 @@ class ChannelSelector extends React.Component { { (this.state.optionState === LOGIN) && } { (this.state.optionState === CREATE) && { + return { + loggedInChannelName: state.loggedInChannel.name, + publishInChannel : state.publishInChannel, + }; +}; + +export default connect(mapStateToProps, null)(ChannelSelector); diff --git a/react/components/PublishForm.jsx b/react/components/PublishForm.jsx index 9421c24c..27a97fcf 100644 --- a/react/components/PublishForm.jsx +++ b/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 { - + {this.state.host} / - + { (this.props.claim && !this.state.error) && {'\u2713'} } @@ -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, }; }; diff --git a/react/components/UrlMiddle.jsx b/react/components/UrlMiddle.jsx index 11f7afb8..71a730c4 100644 --- a/react/components/UrlMiddle.jsx +++ b/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 {loggedInChannelName}:{loggedInChannelShortId} /; } diff --git a/react/utils/cookies.js b/react/utils/cookies.js index e7d0df84..37811c20 100644 --- a/react/utils/cookies.js +++ b/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); + }, }