Create redux for session

Use redux containers in displaying sign in form and sign out button

Author: rickyhurtado

api/src/seeders/20180209100520-users-redirect.js

@@ -3,8 +3,8 @@
 module.exports = {
   up: (queryInterface, Sequelize) => {
     return Promise.all([
-      userRedirect(queryInterface, 'referrer@email.com', { url: '/about' }),
-      userRedirect(queryInterface, 'redirect@email.com', { external: true, url: 'https://fb.com/Ironcoder' })
+      userRedirect(queryInterface, 'referrer@email.com', { url: '/redux' }),
+      userRedirect(queryInterface, 'redirect@email.com', { external: true, url: 'https://github.com/rickyhurtado/node-api-and-client-boilerplate' })
     ])
   },
 

client/src/Components/Button/SignOut.js

@@ -1,33 +1,35 @@
 import React, { Component } from 'react'
+import { Redirect } from 'react-router-dom'
 import Axios from '../../Lib/Common/Axios'
 import * as Session from '../../Lib/Helpers/Session'
+import { closeNavbar } from '../../Lib/Common/Views'
 
 export default class SignOut extends Component {
   signOut() {
     Axios
       .post(process.env.REACT_APP_API_SIGN_OUT_URL)
       .then(response => {
         Session.deleteToken()
-
-        const referrer = this.props.referrer.split('/')[1]
-
-        if (referrer === 'admin') {
-          window.location.reload()
-        } else {
-          window.location.href = '/sign-in'
-        }
+        closeNavbar()
+        this.props.auth(false)
       })
   }
 
   render() {
-    if (Session.isSignedIn()) {
+    const props = this.props
+
+    if (props.isSignedIn) {
       return (
         <li>
           <button className="sign-out-btn" onClick={this.signOut.bind(this)}>Sign Out</button>
         </li>
       )
     }
 
-    return null
+    if (['*', '/admin/*'].indexOf(props.referrer) > -1) {
+      return null
+    }
+
+    return <Redirect to={props.referrer} />
   }
 }

client/src/Components/Forms/SignIn.js

@@ -18,9 +18,8 @@ export default class SignIn extends Component {
       alertMessage: {},
       showAlertMessage: false,
       isSigningIn: false,
-      isSignedIn: Session.isSignedIn(),
       redirect: { url: '/' },
-      locationState:  props.location.state
+      locationState: props.location.state
     }
   }
 
@@ -62,9 +61,9 @@ export default class SignIn extends Component {
         setTimeout(function(){
           _this.setState({
             formData: initFormData,
-            isSignedIn: true,
             isSigningIn: false
           })
+          _this.props.auth(true);
         }, 500)
       })
       .catch(error => {
@@ -88,7 +87,7 @@ export default class SignIn extends Component {
   }
 
   render() {
-    if (this.state.isSignedIn) {
+    if (this.props.isSignedIn) {
       const referrer = this.state.locationState
         ? this.state.locationState.from.pathname
         : this.state.redirect.url

client/src/Components/Layout/Admin/Header.js

@@ -2,7 +2,7 @@ import React, { Component } from 'react'
 import { Link, withRouter } from 'react-router-dom'
 import { Navbar } from 'react-bootstrap'
 import { NavLink } from '../../../Lib/Common/Views'
-import Button from '../../Button'
+import SignOutButton from '../../../Redux/Containers/Sessions/SignOut'
 import ReactLogo from '../../../Assets/Images/react-logo.svg'
 
 class Header extends Component {
@@ -23,7 +23,7 @@ class Header extends Component {
             <ul className="navbar-nav nav navbar-right">
               <NavLink title="Home" to="/" />
               <NavLink title="Redux" to="/redux" />
-              <Button.SignOut referrer={path} />
+              <SignOutButton referrer={path} />
             </ul>
           </Navbar.Collapse>
         </Navbar>

client/src/Components/Layout/Admin/Sidebar.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react'
 import { withRouter } from 'react-router-dom'
 import { AuthNavLink } from '../../../Lib/Common/Views'
-import Button from '../../Button'
+import SignOutButton from '../../../Redux/Containers/Sessions/SignOut'
 
 class Sidebar extends Component {
   render() {
@@ -12,7 +12,7 @@ class Sidebar extends Component {
         <ul className="nav nav-sidebar">
           <AuthNavLink title="Dashboard" to="/admin/dashboard" path={path} />
           <AuthNavLink title="Settings" to="/admin/settings" path={path} />
-          <Button.SignOut referrer={path} />
+          <SignOutButton referrer={path} />
         </ul>
       </nav>
     )

client/src/Components/Layout/Basic/Header.js

@@ -2,7 +2,7 @@ import React, { Component } from 'react'
 import { Link, withRouter } from 'react-router-dom'
 import { Navbar } from 'react-bootstrap'
 import { NavLink, AuthNavLink } from '../../../Lib/Common/Views'
-import Button from '../../Button'
+import SignOutButton from '../../../Redux/Containers/Sessions/SignOut'
 
 class Header extends Component {
   render() {
@@ -20,7 +20,7 @@ class Header extends Component {
               <NavLink title="Redux" to="/redux" path={path} />
               <NavLink title="Sign In" to="/sign-in" path={path} isSignedOut />
               <AuthNavLink title="Admin" to="/admin/dashboard" />
-              <Button.SignOut referrer={path} />
+              <SignOutButton referrer={path} />
             </ul>
           </Navbar.Collapse>
         </Navbar>

client/src/Lib/Common/Views.js

@@ -44,6 +44,14 @@ export const AuthNavLink = ({...props}) => {
   ) : null
 }
 
+export function closeNavbar() {
+  const { width } = viewportDimension()
+
+  if (width < 768) {
+    document.getElementById('js-navbar-toggle-btn').click()
+  }
+}
+
 export function viewportDimension() {
   const w = window,
         d = document,
@@ -58,11 +66,3 @@ export function viewportDimension() {
 function navLinkIsActive({...props}) {
   return props.path === props.to ? 'active' : ''
 }
-
-function closeNavbar() {
-  const { width } = viewportDimension()
-
-  if (width < 768) {
-    document.getElementById('js-navbar-toggle-btn').click()
-  }
-}

client/src/Redux/Actions/Sessions/Types.js

@@ -0,0 +1 @@
+export const AUTH = 'AUTH'

client/src/Redux/Actions/Sessions/index.js

@@ -0,0 +1,5 @@
+import { AUTH } from  '../../Actions/Sessions/Types'
+
+export function auth(isSignedIn) {
+  return { type: AUTH, isSignedIn }
+}

client/src/Redux/Containers/Sessions/SignIn.js

@@ -0,0 +1,14 @@
+import { bindActionCreators } from 'redux'
+import { connect } from 'react-redux'
+import { auth } from '../../Actions/Sessions'
+import SignInForm from '../../../Components/Forms/SignIn'
+
+function mapStateToProps({ isSignedIn }) {
+  return { isSignedIn }
+}
+
+function mapDispatchToProps(dispatch) {
+  return bindActionCreators({ auth }, dispatch)
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(SignInForm)