Handling Views

client/coral-framework/actions/auth.js

@@ -52,7 +52,7 @@ const logoutSuccess = () => ({
   type: actions.USER_LOGOUT_SUCCESS,
 });
 
-const logoutFailure = (error) => ({
+const logoutFailure = error => ({
   type: actions.USER_LOGOUT_SUCCESS,
   error
 });
@@ -65,27 +65,9 @@ export const loginRequest = () => ({
   type: actions.USER_SIGNIN_REQUEST
 });
 
-const showSignInForm = () => ({
-  type: actions.SHOW_SIGNIN_FORM
-});
+export const changeView = view => dispatch =>
+  dispatch({
+    type: actions.CHANGE_VIEW,
+    view
+  });
 
-const showSignUpForm = () => ({
-  type: actions.SHOW_SIGNUP_FORM
-});
-
-const newStep = (step) => ({
-  type: actions.NEW_STEP,
-  step
-});
-
-export const goTo = (step) => dispatch => {
-  dispatch(newStep(step));
-  switch (step) {
-  case 1 :
-    return dispatch(showSignInForm());
-  case 2 :
-    return dispatch(showSignUpForm());
-  default :
-    return dispatch(showSignInForm());
-  }
-};

client/coral-framework/constants/auth.js

@@ -7,9 +7,8 @@ export const USER_FACEBOOK_FAILURE = 'USER_FACEBOOK_FAILURE';
 export const USER_LOGOUT_REQUEST = 'USER_LOGOUT_REQUEST';
 export const USER_LOGOUT_SUCCESS = 'USER_LOGOUT_SUCCESS';
 export const USER_LOGOUT_FAILURE = 'USER_LOGOUT_FAILURE';
+
 export const SHOW_SIGNIN_DIALOG = 'SHOW_SIGNIN_DIALOG';
 export const HIDE_SIGNIN_DIALOG = 'HIDE_SIGNIN_DIALOG';
 
-export const NEW_STEP = 'NEW_STEP';
-export const SHOW_SIGNIN_FORM = 'SHOW_SIGNIN_FORM';
-export const SHOW_SIGNUP_FORM = 'SHOW_SIGNUP_FORM';
+export const CHANGE_VIEW = 'CHANGE_VIEW';

client/coral-framework/reducers/auth.js

@@ -3,7 +3,7 @@ import {Map} from 'immutable';
 import {
   SHOW_SIGNIN_DIALOG,
   HIDE_SIGNIN_DIALOG,
-  NEW_STEP
+  CHANGE_VIEW
 } from '../constants/auth';
 
 const initialState = Map({
@@ -12,7 +12,7 @@ const initialState = Map({
   error: '',
   user: {},
   showSignInDialog: false,
-  step: 1
+  view: 'SIGNIN'
 });
 
 export default function community (state = initialState, action) {
@@ -23,9 +23,9 @@ export default function community (state = initialState, action) {
   case HIDE_SIGNIN_DIALOG :
     return state
       .set('showSignInDialog', false);
-  case NEW_STEP :
+  case CHANGE_VIEW :
     return state
-      .set('step', action.step);
+      .set('view', action.view);
   default :
     return state;
   }

client/coral-sign-in/components/SignDialog.js

@@ -5,10 +5,10 @@ import styles from './styles.css';
 import SignInContent from './SignInContent';
 import SingUpContent from './SignUpContent';
 
-const SignDialog = ({open, step, ...props}) => (
+const SignDialog = ({open, view, ...props}) => (
   <Dialog className={styles.dialog} open={open}>
-    {step === 1 && <SignInContent {...props} />}
-    {step === 2 && <SingUpContent {...props} />}
+    {view === 'SIGNIN' && <SignInContent {...props} />}
+    {view === 'SIGNUP' && <SingUpContent {...props} />}
   </Dialog>
 );
 

client/coral-sign-in/components/SignInContent.js

@@ -5,7 +5,7 @@ import I18n from 'coral-framework/modules/i18n/i18n';
 import translations from '../translations';
 const lang = new I18n(translations);
 
-const SignInContent = ({openFacebookWindow, goTo}) => (
+const SignInContent = ({openFacebookWindow, changeView}) => (
   <div>
     <div className={styles.header}>
       <h1>{lang.t('signIn.signIn')}</h1>
@@ -33,7 +33,7 @@ const SignInContent = ({openFacebookWindow, goTo}) => (
     </form>
     <div className={styles.footer}>
       <span><a>{lang.t('signIn.forgotYourPass')}</a></span>
-      <span>{lang.t('signIn.needAnAccount')} <a onClick={() => goTo(2)}>{lang.t('signIn.register')}</a></span>
+      <span>{lang.t('signIn.needAnAccount')} <a onClick={() => changeView('SIGNUP')}>{lang.t('signIn.register')}</a></span>
     </div>
   </div>
 );

client/coral-sign-in/components/SignUpContent.js

@@ -5,7 +5,7 @@ import I18n from 'coral-framework/modules/i18n/i18n';
 import translations from '../translations';
 const lang = new I18n(translations);
 
-const SignUpContent = ({goTo, openFacebookWindow}) => (
+const SignUpContent = ({changeView, openFacebookWindow}) => (
   <div>
     <div className={styles.header}>
       <h1>{lang.t('signIn.signUp')}</h1>
@@ -40,7 +40,7 @@ const SignUpContent = ({goTo, openFacebookWindow}) => (
       </Button>
     </form>
     <div className={styles.footer}>
-      <span>{lang.t('signIn.alreadyHaveAnAccount')} <a onClick={() => goTo(1)}>{lang.t('signIn.signIn')}</a></span>
+      <span>{lang.t('signIn.alreadyHaveAnAccount')} <a onClick={() => changeView('SIGNIN')}>{lang.t('signIn.signIn')}</a></span>
     </div>
   </div>
 );

client/coral-sign-in/containers/SignInContainer.js

@@ -9,7 +9,7 @@ import {
   loginFacebook,
   logout,
   showSignInDialog,
-  goTo,
+  changeView,
 } from '../../coral-framework/actions/auth';
 
 class SignInContainer extends Component {
@@ -19,7 +19,7 @@ class SignInContainer extends Component {
     this.openFacebookWindow = this.openFacebookWindow.bind(this);
     this.openSignInDialog = this.openSignInDialog.bind(this);
     this.logout = this.logout.bind(this);
-    this.goTo = this.goTo.bind(this);
+    this.changeView = this.changeView.bind(this);
   }
 
   componentDidMount() {
@@ -38,8 +38,8 @@ class SignInContainer extends Component {
     this.props.dispatch(showSignInDialog());
   }
 
-  goTo(step = 1) {
-    this.props.dispatch(goTo(step));
+  changeView(view) {
+    this.props.dispatch(changeView(view));
   }
 
   render() {
@@ -52,8 +52,8 @@ class SignInContainer extends Component {
         <SignDialog
           openFacebookWindow={this.openFacebookWindow}
           open={auth.get('showSignInDialog')}
-          step={auth.get('step')}
-          goTo={this.goTo}
+          view={auth.get('view')}
+          changeView={this.changeView}
         />
       </div>
     );