Implement login redirect for dashboard page

src/actions/session/index.js

@@ -3,6 +3,8 @@ import { CLIENT_ID, OAUTH_TOKEN, REDIRECT_URI } from '../../constants/authentica
 import * as actionTypes from '../../constants/actionTypes';
 import { apiUrl } from '../../services/api';
 import { fetchFollowings, fetchActivities, fetchFollowers, fetchFavorites } from '../../actions/user';
+import { setRequestInProcess } from '../../actions/request';
+import * as requestTypes from '../../constants/requestTypes';
 
 function setSession(session) {
   return {
@@ -18,6 +20,13 @@ function setUser(user) {
   };
 }
 
+function setLoginError(error) {
+  return {
+    type: actionTypes.SET_LOGIN_ERROR,
+    error
+  };
+}
+
 export function resetSession() {
   return {
     type: actionTypes.RESET_SESSION
@@ -40,12 +49,17 @@ export const login = () => (dispatch) => {
   const client_id = CLIENT_ID;
   const redirect_uri = REDIRECT_URI;
   /* eslint-disable no-undef */
+  dispatch(setRequestInProcess(true, requestTypes.AUTH));
   SC.initialize({ client_id, redirect_uri });
-
   SC.connect().then((session) => {
     Cookies.set(OAUTH_TOKEN, session.oauth_token);
     dispatch(setSession(session));
     dispatch(fetchUser());
+  }).catch((err) => {
+    // Login failed or cancelled by user
+    dispatch(setLoginError(err));
+  }).finally(() => {
+    dispatch(setRequestInProcess(false, requestTypes.AUTH));
   });
   /* eslint-enable no-undef */
 };

src/components/App/index.js

@@ -6,7 +6,6 @@ import { DEFAULT_GENRE } from '../../constants/genre';
 import Browse from '../../components/Browse';
 import Callback from '../../components/Callback';
 import Dashboard from '../../components/Dashboard';
-
 import Header from '../../components/Header';
 import Player from '../../components/Player';
 import Playlist from '../../components/Playlist';

src/components/Dashboard/index.js

@@ -1,22 +1,42 @@
 import React from 'react';
+import { Redirect } from 'react-router-dom';
+import { connect } from 'react-redux';
+import { resetSession } from '../../actions/session';
+import * as requestTypes from '../../constants/requestTypes';
 import StreamActivities from '../../components/StreamActivities';
 import FollowersList from '../../components/FollowersList';
 import FollowingsList from '../../components/FollowingsList';
 import FavoritesList from '../../components/FavoritesList';
 
-function Dashboard() {
-  return (
-    <div className="dashboard">
-      <div className="dashboard-main">
-        <StreamActivities />
-      </div>
-      <div className="dashboard-side">
-        <FollowingsList />
-        <FollowersList />
-        <FavoritesList />
+class Dashboard extends React.Component {
+  componentWillUnmount() {
+    this.props.resetSession();
+  }
+
+  render() {
+    const { isAuthInProgress, isAuthed, loginError } = this.props;
+    if ((!isAuthInProgress && !isAuthed) || loginError) {
+      return <Redirect to="/" />;
+    }
+    return (
+      <div className="dashboard">
+        <div className="dashboard-main">
+          <StreamActivities />
+        </div>
+        <div className="dashboard-side">
+          <FollowingsList />
+          <FollowersList />
+          <FavoritesList />
+        </div>
       </div>
-    </div>
-  );
+    );
+  }
 }
 
-export default Dashboard;
+const mapStateToProps = state => ({
+  isAuthed: state.session.session,
+  isAuthInProgress: state.request[requestTypes.AUTH],
+  loginError: state.session.loginError,
+});
+
+export default connect(mapStateToProps, { resetSession })(Dashboard);

src/constants/actionTypes.js

@@ -1,5 +1,6 @@
 export const SET_SESSION = 'SET_SESSION';
 export const SET_USER = 'SET_USER';
+export const SET_LOGIN_ERROR = 'SET_LOGIN_ERROR';
 export const RESET_SESSION = 'RESET_SESSION';
 
 export const MERGE_ENTITIES = 'MERGE_ENTITIES';

src/constants/requestTypes.js

@@ -4,3 +4,4 @@ export const FOLLOWERS = 'FOLLOWERS';
 export const FAVORITES = 'FAVORITES';
 export const GENRES = 'GENRES';
 export const COMMENTS = 'COMMENTS';
+export const AUTH = 'AUTH';

src/reducers/session/index.js

@@ -2,7 +2,8 @@ import * as actionTypes from '../../constants/actionTypes';
 
 const initialState = {
   session: null,
-  user: null
+  user: null,
+  loginError: null
 };
 
 export default function(state = initialState, action) {
@@ -11,6 +12,8 @@ export default function(state = initialState, action) {
       return setSession(state, action.session);
     case actionTypes.SET_USER:
       return setUser(state, action.user);
+    case actionTypes.SET_LOGIN_ERROR:
+      return setLoginError(state, action.error);
     case actionTypes.RESET_SESSION:
       return initialState;
   }
@@ -24,3 +27,7 @@ function setSession(state, session) {
 function setUser(state, user) {
   return { ...state, user };
 }
+
+function setLoginError(state, error) {
+  return { ...state, loginError: error };
+}