Wrap pages within common sidebar and navigation bar (#185)

* chore(commonWrapper): wrap components under common  sidebar and navbar

 - redirect to login if not authenticated
 - remove hero, navbar and sidebar component from dashboard component

* chore(commonWrapper): add user's society in state

* chore(commonWrapper): add user's society image in society stats component

 - pass down user's society as props to society stats component
 - add society images

* chore(commonWrapper): refactor tests to add society

src/app/Authentication/components/AuthenticateRoute.js

@@ -4,6 +4,14 @@ import {
   withRouter,
 } from 'react-router-dom';
 
+import {
+  HeroComponent,
+  NavbarComponent,
+  SidebarComponent,
+} from '../../common/components';
+import LoginComponent from '../../Login/components';
+
+
 /**
  * @name _Authenticate
  * Authenticates routes. If not authenticated returns a message
@@ -16,13 +24,20 @@ export const Authenticate = ({ component: Component, isAuthenticated, ...rest })
     render={
       (props) => {
         if (isAuthenticated) {
-          return <Component {...props} />;
+          return (
+            <div className='wrapper'>
+              <HeroComponent />
+              <div className='main-content'>
+                <SidebarComponent className='sidebar' />
+                <div className='sub-content'>
+                  <NavbarComponent />
+                  <Component {...props} />
+                </div>
+              </div>
+            </div>
+          );
         }
-        return (
-          <div>
-            <h1> PLEASE LOGIN. NOT AUTHORIZED </h1>
-          </div>
-        );
+        return (<LoginComponent />);
       }
     }
   />

src/app/Authentication/components/tests/AuthenticateRoute.test.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { shallow } from 'enzyme';
 
 import { Authenticate } from '../AuthenticateRoute';
+import LoginComponent from '../../../Login/components';
 
 describe('<AuthenticateRoute />', () => {
   const setUpWrapper = ({
@@ -20,9 +21,9 @@ describe('<AuthenticateRoute />', () => {
     expect(wrapper.find('Route').exists()).toBe(true);
   });
 
-  it('renders error message when component is not authenticated', () => {
+  it('renders Login component when component is not authenticated', () => {
     const wrapper = setUpWrapper({ isAuthenticated: false});
     wrapper.props().render({ isAuthenticated: false });
-    expect(wrapper.props().render({ isAuthenticated: false })).toEqual(<div><h1> PLEASE LOGIN. NOT AUTHORIZED </h1></div>);
+    expect(wrapper.props().render({ isAuthenticated: false })).toEqual(<LoginComponent />);
   });
 });

src/app/Dashboard/components/DashboardComponent.js

@@ -2,9 +2,7 @@ import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 
-import {
-  HeroComponent, NavbarComponent, SidebarComponent, ButtonComponent,
-} from '../../common/components';
+import { ButtonComponent } from '../../common/components';
 import MyStatsComponent from './MyStatsComponent';
 import SocietyStatsComponent from './SocietyStatsComponent';
 
@@ -24,6 +22,7 @@ export class DashboardComponent extends Component {
    */
   static defaultProps = {
     error: {},
+    society: '',
     loading: false,
     pointsEarned: 0,
     activitiesLogged: 0,
@@ -38,6 +37,7 @@ export class DashboardComponent extends Component {
    */
   static propTypes = {
     loading: PropTypes.bool,
+    society: PropTypes.string,
     error: PropTypes.shape({}),
     pointsEarned: PropTypes.number,
     activitiesLogged: PropTypes.number,
@@ -54,7 +54,7 @@ export class DashboardComponent extends Component {
 
   render() {
     const {
-      error, loading, pointsEarned, activitiesLogged,
+      error, society, loading, pointsEarned, activitiesLogged,
     } = this.props;
     const { user } = this.state;
     let dashboardHtml;
@@ -64,36 +64,27 @@ export class DashboardComponent extends Component {
       dashboardHtml = <p>The was an error while fetching your data. Please try again later.</p>;
     } else {
       dashboardHtml = (
-        <div className='wrapper'>
-          <HeroComponent />
-          <div className='main-content'>
-            <SidebarComponent className='sidebar' />
-            <div className='sub-content'>
-              <NavbarComponent />
-              <div className='user-dashboard'>
-                <h2 className='user-dashboard__name col-sm-12'>{user.name}</h2>
-                <div className='col-sm-12'>
-                  <h3 className='user-dashboard__level'>D2</h3>
-                </div>
-                <div className='profile-overview col-sm-12'>
-                  <div className='profile-overview__image' />
-                  <MyStatsComponent points={pointsEarned} activities={activitiesLogged} />
-                  <SocietyStatsComponent usedPoints={1508} remainingPoints={326} />
-                </div>
-                <div className='user-dashboard__actions col-sm-12'>
-                  <h3 className='user-dashboard__title'>My Activities</h3>
-                  <div>
-                    <ButtonComponent className='user-dashboard__button button__add'>
-                      <span className='fa fa-plus' />
-                      <span>Log Points</span>
-                    </ButtonComponent>
-                    <ButtonComponent className='user-dashboard__button button__filter'>
-                      <span>Filter</span>
-                      <span className='fa fa-filter' />
-                    </ButtonComponent>
-                  </div>
-                </div>
-              </div>
+        <div className='user-dashboard'>
+          <h2 className='user-dashboard__name col-sm-12'>{user.name}</h2>
+          <div className='col-sm-12'>
+            <h3 className='user-dashboard__level'>D2</h3>
+          </div>
+          <div className='profile-overview col-sm-12'>
+            <div className='profile-overview__image' />
+            <MyStatsComponent points={pointsEarned} activities={activitiesLogged} />
+            <SocietyStatsComponent society={society} usedPoints={1508} remainingPoints={326} />
+          </div>
+          <div className='user-dashboard__actions col-sm-12'>
+            <h3 className='user-dashboard__title'>My Activities</h3>
+            <div>
+              <ButtonComponent className='button__add'>
+                <span className='fa fa-plus' />
+                <span>Log Points</span>
+              </ButtonComponent>
+              <ButtonComponent className='button__filter'>
+                <span>Filter</span>
+                <span className='fa fa-filter' />
+              </ButtonComponent>
             </div>
           </div>
         </div>
@@ -105,6 +96,7 @@ export class DashboardComponent extends Component {
 
 const mapStateToProps = ({ dashboard }) => ({
   error: null,
+  society: dashboard.society,
   loading: dashboard.loading,
   pointsEarned: dashboard.pointsEarned,
   userActivities: dashboard.userActivities,

src/app/Dashboard/components/SocietyStatsComponent.js

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import { societyStats } from '../constants';
 
 const SocietyStatsComponent = (props) => {
-  const { usedPoints, remainingPoints } = props;
+  const { society, usedPoints, remainingPoints } = props;
   return (
     <div className='society-stats'>
       <div className='progress'>
@@ -44,19 +44,21 @@ const SocietyStatsComponent = (props) => {
           {remainingPoints}
           <span className='stats__description__figure-subsc '>Points</span>
         </p>
-        <span className='society-stats__desc__logo' />
+        <span className={`society-stats__desc__logo ${society.toLowerCase()}`} />
       </div>
     </div>
   );
 };
 
 
 SocietyStatsComponent.defaultProps = {
+  society: societyStats.society,
   usedPoints: societyStats.usedPoints,
   remainingPoints: societyStats.remainingPoints,
 };
 
 SocietyStatsComponent.propTypes = {
+  society: PropTypes.string,
   usedPoints: PropTypes.number,
   remainingPoints: PropTypes.number,
 };

src/app/Dashboard/constants.js

@@ -4,6 +4,7 @@ export const myStats = {
 };
 
 export const societyStats = {
+  society: '',
   usedPoints: 0,
   remainingPoints: 0,
 };

src/app/Dashboard/operations/actions.js

@@ -5,7 +5,8 @@ const fetchUserActivitiesRequest = userId => ({
   userId,
 });
 
-const fetchUserActivitiesSuccess = (activites, pointsEarned, activitiesLogged) => ({
+const fetchUserActivitiesSuccess = (activites, pointsEarned, activitiesLogged, society) => ({
+  society,
   activites,
   pointsEarned,
   activitiesLogged,

src/app/Dashboard/operations/dashboard.data.js

@@ -7,7 +7,9 @@ import { get } from '../../utils/api';
 export function* fetchUserActivities(action) {
   try {
     const result = yield call(get, `users/${action.userId}/logged-activities`);
-    yield put(actions.fetchUserActivitiesSuccess(result.data, result.pointsEarned, result.activitiesLogged));
+    yield put(
+      actions.fetchUserActivitiesSuccess(result.data, result.pointsEarned, result.activitiesLogged, result.society),
+    );
   } catch (error) {
     yield put(actions.fetchUserActivitiesError(error));
   }

src/app/Dashboard/operations/reducer.js

@@ -12,6 +12,7 @@ const dashboard = (state = initialState.dashboard, action) => {
     return {
       ...state,
       loading: false,
+      society: action.society,
       pointsEarned: action.pointsEarned,
       userActivities: action.activities,
       activitiesLogged: action.activitiesLogged,

src/app/Dashboard/operations/tests/fixtures.js

@@ -58,6 +58,7 @@ export const myloggedActivities = {
   activitiesLogged: 4,
   data: activities,
   pointsEarned: 300,
+  society: 'Phoenix',
 }
 
 export default activities;

src/app/Dashboard/operations/tests/reducer.test.js

@@ -21,6 +21,7 @@ describe('Dashboard reducer', () => {
         }),
       ).toEqual({
         error: null,
+        society: '',
         loading: true,
         pointsEarned: 0,
         userActivities: [],
@@ -39,6 +40,7 @@ describe('Dashboard reducer', () => {
         }),
       ).toEqual({
         error,
+        society: '',
         loading: false,
         pointsEarned: 0,
         userActivities: [],
@@ -49,13 +51,15 @@ describe('Dashboard reducer', () => {
 
   describe('handles case FETCH_USER_ACTIVITIES_SUCCESS', () => {
     it('returns poinstEarned, activitiesLogged and userActivities', () => {
-      const { data, pointsEarned, activitiesLogged } = myloggedActivities;
+      const { data, society, pointsEarned, activitiesLogged } = myloggedActivities;
       expect(dashboard(defaultState, {
         type: types.FETCH_USER_ACTIVITIES_SUCCESS,
+        society,
         activities: data,
         pointsEarned,
         activitiesLogged,
       })).toEqual({
+        society,
         error: null,
         pointsEarned,
         loading: false,

src/app/Dashboard/styles/societyStats.scss

@@ -79,7 +79,18 @@
   background-position: center;
   background-size: contain;
   background-repeat: no-repeat;
-  background-image: url(../../../images/societyLogos/istelle.png);
+  &.phoenix {
+    background-image: url(../../../images/societyLogos/phoenix.png);
+  }
+  &.istelle {
+    background-image: url(../../../images/societyLogos/istelle.png);
+  }
+  &.invictus {
+    background-image: url(../../../images/societyLogos/invictus.jpg);
+  }
+  &.sparks {
+    background-image: url(../../../images/societyLogos/sparks.png);
+  }
 }
 
 // Large devices (desktops/mac, 992px and up)

src/reducers/initialState.js

@@ -1,6 +1,7 @@
 const initialState = {
   dashboard: {
     error: null,
+    society: '',
     loading: false,
     pointsEarned: 0,
     userActivities: [],