diff --git a/react/components/channelLoginForm.jsx b/react/components/channelLoginForm.jsx index b9f3eba0..376d7308 100644 --- a/react/components/channelLoginForm.jsx +++ b/react/components/channelLoginForm.jsx @@ -19,6 +19,24 @@ class ChannelLoginForm extends React.Component { } loginToChannel (event) { event.preventDefault(); + const params = `username=${this.state.name}&password=${this.state.password}`; + const url = '/login'; + const that = this; + 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('login error', error); + if (error.message) { + that.setState({'error': error.message}); + } else { + that.setState({'error': 'There was an error logging into your channel'}); + } + }); } render () { return ( diff --git a/react/components/channelSelector.jsx b/react/components/channelSelector.jsx index c3168984..dbc5f169 100644 --- a/react/components/channelSelector.jsx +++ b/react/components/channelSelector.jsx @@ -9,24 +9,28 @@ class ChannelSelector extends React.Component { constructor (props) { super(props); this.state = { - displayCreateOrLogin: LOGIN, + optionState: LOGIN, }; - this.toggleCreateOrLogin = this.toggleCreateOrLogin.bind(this); + this.handleSelection = this.handleSelection.bind(this); + this.selectOption = this.selectOption.bind(this); + this.updateLoggedInChannelOutsideReact = this.updateLoggedInChannelOutsideReact.bind(this); } componentWillMount () { if (this.props.loggedInChannelName) { - this.setState({ displayCreateOrLogin: null }); + this.setState({ optionState: null }); } } - toggleCreateOrLogin (event) { + handleSelection (event) { const selectedOption = event.target.selectedOptions[0].value; - if (selectedOption === 'login') { - this.setState({ displayCreateOrLogin: LOGIN }); - } else if (selectedOption === 'create') { - this.setState({ displayCreateOrLogin: CREATE }); - } else { - this.setState({ displayCreateOrLogin: null }); - } + this.selectOption(selectedOption); + } + selectOption (option) { + this.setState({optionState: option}); + } + updateLoggedInChannelOutsideReact (channelName, channelClaimId, shortChannelId) { + // update anywhere on page that needs to be updated outside of this component + setUserCookies(channelName, channelClaimId, shortChannelId); + replaceChannelOptionInNavBarChannelSelect(channelName); } render () { return ( @@ -39,19 +43,28 @@ class ChannelSelector extends React.Component {
- { this.props.loggedInChannelName && }
- { (this.state.displayCreateOrLogin === LOGIN) && } - { (this.state.displayCreateOrLogin === CREATE) && - } + { (this.state.optionState === LOGIN) && + } + { (this.state.optionState === CREATE) && + } )} diff --git a/react/components/publishForm.jsx b/react/components/publishForm.jsx index 61f3a734..5721bc44 100644 --- a/react/components/publishForm.jsx +++ b/react/components/publishForm.jsx @@ -91,12 +91,13 @@ class PublishForm extends React.Component { updateUploaderState={this.props.updateUploaderState} /> diff --git a/react/uploader.js b/react/uploader.js index 37b28a5c..7b8d004a 100644 --- a/react/uploader.js +++ b/react/uploader.js @@ -14,7 +14,6 @@ const initialState = { publishToChannel : false, file : null, title : '', - channel : null, claim : '', thumbnail : '', description : '', @@ -122,13 +121,13 @@ class Uploader extends React.Component { updateUploaderState={this.updateUploaderState} clearUploaderState={this.clearUploaderState} makeGetRequest={this.makeGetRequest} + makePostRequest={this.makePostRequest} cleanseInput={this.cleanseInput} loggedInChannelName={this.state.loggedInChannelName} loggedInChannelShortId={this.state.loggedInChannelShortId} publishToChannel={this.state.publishToChannel} file={this.state.file} title={this.state.title} - channel={this.state.channel} claim={this.state.claim} thumbnail={this.state.thumbnail} description={this.state.description}