From e482c5f2f818670c270f32686658c18390078603 Mon Sep 17 00:00:00 2001 From: bill bittner Date: Fri, 19 Jan 2018 10:16:55 -0800 Subject: [PATCH] fixed channel-select to not have internal state --- react/actions/publish.js | 7 +++++ react/constants/action_types.js | 1 + react/constants/channel_select_states.js | 2 ++ react/constants/publishing_states.js | 1 - react/containers/ChannelCreateForm/index.js | 2 ++ react/containers/ChannelLoginForm/index.js | 2 ++ react/containers/ChannelSelect/index.js | 5 ++++ react/containers/ChannelSelect/view.jsx | 33 +++++---------------- react/containers/NavBar/index.js | 2 ++ react/containers/NavBar/view.jsx | 4 ++- react/reducers/publish.js | 6 ++++ 11 files changed, 37 insertions(+), 28 deletions(-) create mode 100644 react/constants/channel_select_states.js diff --git a/react/actions/publish.js b/react/actions/publish.js index 39d333b8..f2cb6dea 100644 --- a/react/actions/publish.js +++ b/react/actions/publish.js @@ -51,3 +51,10 @@ export function updateError (name, value) { value, }; }; + +export function updateSelectedChannel (value) { + return { + type: actions.SELECTED_CHANNEL_UPDATE, + value, + }; +}; diff --git a/react/constants/action_types.js b/react/constants/action_types.js index 4078b7ab..64dbb8bd 100644 --- a/react/constants/action_types.js +++ b/react/constants/action_types.js @@ -9,3 +9,4 @@ export const CLAIM_UPDATE = 'CLAIM_UPDATE'; export const SET_PUBLISH_IN_CHANNEL = 'SET_PUBLISH_IN_CHANNEL'; export const PUBLISH_STATUS_UPDATE = 'PUBLISH_STATUS_UPDATE'; export const ERROR_UPDATE = 'ERROR_UPDATE'; +export const SELECTED_CHANNEL_UPDATE = 'SELECTED_CHANNEL_UPDATE'; diff --git a/react/constants/channel_select_states.js b/react/constants/channel_select_states.js new file mode 100644 index 00000000..fe2bf0ec --- /dev/null +++ b/react/constants/channel_select_states.js @@ -0,0 +1,2 @@ +export const LOGIN = 'Existing'; +export const CREATE = 'New'; diff --git a/react/constants/publishing_states.js b/react/constants/publishing_states.js index c845bfcd..b8f87f1d 100644 --- a/react/constants/publishing_states.js +++ b/react/constants/publishing_states.js @@ -1,4 +1,3 @@ -// publishing states export const LOAD_START = 'LOAD_START'; export const LOADING = 'LOADING'; export const PUBLISHING = 'PUBLISHING'; diff --git a/react/containers/ChannelCreateForm/index.js b/react/containers/ChannelCreateForm/index.js index 72b3ccb7..e91719f6 100644 --- a/react/containers/ChannelCreateForm/index.js +++ b/react/containers/ChannelCreateForm/index.js @@ -1,11 +1,13 @@ import { connect } from 'react-redux'; import { updateLoggedInChannel } from 'actions/channel'; import View from './view'; +import {updateSelectedChannel} from '../../actions/publish'; const mapDispatchToProps = dispatch => { return { onChannelLogin: (name, shortId, longId) => { dispatch(updateLoggedInChannel(name, shortId, longId)); + dispatch(updateSelectedChannel(name)); }, }; }; diff --git a/react/containers/ChannelLoginForm/index.js b/react/containers/ChannelLoginForm/index.js index 72b3ccb7..e91719f6 100644 --- a/react/containers/ChannelLoginForm/index.js +++ b/react/containers/ChannelLoginForm/index.js @@ -1,11 +1,13 @@ import { connect } from 'react-redux'; import { updateLoggedInChannel } from 'actions/channel'; import View from './view'; +import {updateSelectedChannel} from '../../actions/publish'; const mapDispatchToProps = dispatch => { return { onChannelLogin: (name, shortId, longId) => { dispatch(updateLoggedInChannel(name, shortId, longId)); + dispatch(updateSelectedChannel(name)); }, }; }; diff --git a/react/containers/ChannelSelect/index.js b/react/containers/ChannelSelect/index.js index d0b8b005..c36e5e2c 100644 --- a/react/containers/ChannelSelect/index.js +++ b/react/containers/ChannelSelect/index.js @@ -1,11 +1,13 @@ import {connect} from 'react-redux'; import {setPublishInChannel} from 'actions/publish'; import View from './view.jsx'; +import {updateSelectedChannel} from '../../actions/publish'; const mapStateToProps = ({ channel, publish }) => { return { loggedInChannelName: channel.loggedInChannel.name, publishInChannel : publish.publishInChannel, + selectedChannel : publish.selectedChannel, }; }; @@ -14,6 +16,9 @@ const mapDispatchToProps = dispatch => { onPublishInChannelChange: (value) => { dispatch(setPublishInChannel(value)); }, + onChannelSelect: (value) => { + dispatch(updateSelectedChannel(value)); + }, }; } diff --git a/react/containers/ChannelSelect/view.jsx b/react/containers/ChannelSelect/view.jsx index dbab4316..a6fa340a 100644 --- a/react/containers/ChannelSelect/view.jsx +++ b/react/containers/ChannelSelect/view.jsx @@ -1,29 +1,13 @@ import React from 'react'; import ChannelLoginForm from 'containers/ChannelLoginForm'; import ChannelCreateForm from 'containers/ChannelCreateForm'; - -const LOGIN = 'Existing'; -const CREATE = 'New'; +import * as states from 'constants/channel_select_states'; class ChannelSelect extends React.Component { constructor (props) { super(props); - this.state = { - selectedOption: LOGIN, - }; this.toggleAnonymousPublish = this.toggleAnonymousPublish.bind(this); this.handleSelection = this.handleSelection.bind(this); - this.selectOption = this.selectOption.bind(this); - } - componentDidMount () { - if (this.props.loggedInChannelName) { - this.selectOption(this.props.loggedInChannelName); - } - } - componentWillReceiveProps ({ loggedInChannelName }) { - if (loggedInChannelName && (loggedInChannelName !== this.props.loggedInChannelName)) { - this.selectOption(loggedInChannelName); - } } toggleAnonymousPublish (event) { const value = event.target.value; @@ -35,10 +19,7 @@ class ChannelSelect extends React.Component { } handleSelection (event) { const selectedOption = event.target.selectedOptions[0].value; - this.selectOption(selectedOption); - } - selectOption (option) { - this.setState({selectedOption: option}); + this.props.onChannelSelect(selectedOption); } render () { return ( @@ -59,14 +40,14 @@ class ChannelSelect extends React.Component {
- { this.props.loggedInChannelName && } - - + +
- { (this.state.selectedOption === LOGIN) && } - { (this.state.selectedOption === CREATE) && } + { (this.props.selectedChannel === states.LOGIN) && } + { (this.props.selectedChannel === states.CREATE) && } )} diff --git a/react/containers/NavBar/index.js b/react/containers/NavBar/index.js index 6f8b5664..82a6080d 100644 --- a/react/containers/NavBar/index.js +++ b/react/containers/NavBar/index.js @@ -1,6 +1,7 @@ import { connect } from 'react-redux'; import { updateLoggedInChannel } from 'actions/channel'; import View from './view'; +import {updateSelectedChannel} from '../../actions/publish'; const mapStateToProps = ({ channel }) => { return { @@ -14,6 +15,7 @@ const mapDispatchToProps = dispatch => { return { onChannelLogin: (name, shortId, longId) => { dispatch(updateLoggedInChannel(name, shortId, longId)); + dispatch(updateSelectedChannel(name)); }, }; }; diff --git a/react/containers/NavBar/view.jsx b/react/containers/NavBar/view.jsx index 07094daf..46c663d1 100644 --- a/react/containers/NavBar/view.jsx +++ b/react/containers/NavBar/view.jsx @@ -43,7 +43,9 @@ class NavBar extends React.Component { let channelName, channelShortId, channelLongId; ({ channelName, channelShortId, channelLongId } = getUserCookies()); console.log(`cookies found for channel: ${channelName} ${channelShortId} ${channelLongId}`); - this.props.onChannelLogin(channelName, channelShortId, channelLongId); + if (channelName) { + this.props.onChannelLogin(channelName, channelShortId, channelLongId); + } } handleSelection (event) { const value = event.target.selectedOptions[0].value; diff --git a/react/reducers/publish.js b/react/reducers/publish.js index 9977401e..77d70c94 100644 --- a/react/reducers/publish.js +++ b/react/reducers/publish.js @@ -1,7 +1,9 @@ import * as actions from 'constants/action_types'; +import * as channelSelectStates from 'constants/channel_select_states'; const initialState = { publishInChannel: false, + selectedChannel : channelSelectStates.LOGIN, status : { status : null, message: null, @@ -61,6 +63,10 @@ export default function (state = initialState, action) { [action.name]: action.value, }), }); + case actions.SELECTED_CHANNEL_UPDATE: + return Object.assign({}, state, { + selectedChannel: action.value, + }); default: return state; }