make private routes protected

src/components/ContentList/ContentList.js

@@ -2,13 +2,13 @@ import React from 'react';
 import { arrayOf, object } from 'prop-types';
 import './contentList.scss';
 
-const ContentList = ({ contents }) => contents.map((content) => (
+const ContentList = ({ contents }) => contents.map(content => (
   <div key={content.id} className="content-item">
     <a href={content.link}>
       <p>{content.name}</p>
     </a>
-  </div>)
-)
+  </div>
+));
 
 ContentList.propTypes = {
   contents: arrayOf(object),

src/components/Header/Header.js

@@ -8,6 +8,7 @@ import { connect } from 'react-redux';
 import './header.scss';
 import Button from '../Button';
 import logo from '../../assets/images/logo.png';
+import { logoutUser } from '../../../store/actions/authActions';
 
 export class Header extends React.Component {
   constructor(props) {
@@ -27,7 +28,7 @@ export class Header extends React.Component {
   }
 
   render() {
-    const { isAuthenticated } = this.props;
+    const { isAuthenticated, logout } = this.props;
     let display = (
       <NavItem>
         <Link to="/login">
@@ -44,8 +45,8 @@ export class Header extends React.Component {
           <Link to="/profile">
             <Button type="button" text="Profile" classname="button-style" />
           </Link>
-          <Link to="/logout">
-            <Button type="button" text="Sign out" classname="button-style" />
+          <Link to="/">
+            <Button type="button" text="Sign out" classname="button-style" onClick={() => logout()} />
           </Link>
         </NavItem>
       );
@@ -78,8 +79,13 @@ Header.defaultProps = {
 
 Header.propTypes = {
   isAuthenticated: PropTypes.bool,
+  logout: PropTypes.func,
 };
 const mapStateToProps = state => ({
   isAuthenticated: state.auth.isAuthenticated,
 });
-export default connect(mapStateToProps)(Header);
+
+const mapDispatchToprops = dispatch => ({
+  logout: () => dispatch(logoutUser()),
+});
+export default connect(mapStateToProps, mapDispatchToprops)(Header);

src/components/PrivateRoute/PrivateRoute.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import { Route, Redirect } from 'react-router-dom';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+
+export class PrivateRoute extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { };
+  }
+
+  render() {
+    const { component: Component, isAuthenticated, ...rest } = this.props;
+    return (
+      <Route
+        {...rest}
+        render={props => (isAuthenticated ? <Component {...props} />
+          : <Redirect to={{ pathname: '/login', state: { referrer: props.location } }} />)}
+      />
+    );
+  }
+}
+
+
+PrivateRoute.propTypes = {
+  component: PropTypes.elementType,
+  isAuthenticated: PropTypes.bool,
+};
+const mapStateToProps = state => ({
+  isAuthenticated: state.auth.isAuthenticated,
+});
+
+export default connect(mapStateToProps)(PrivateRoute);

src/components/PublicRoute/PublicRoute.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import { Route, Redirect } from 'react-router-dom';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+
+export class PublicRoute extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { };
+  }
+
+  render() {
+    const { component: Component, isAuthenticated, ...rest } = this.props;
+    return (
+      <Route
+        {...rest}
+        render={props => (!isAuthenticated ? <Component {...props} />
+          : <Redirect to="/dashboard" />)}
+      />
+    );
+  }
+}
+
+
+PublicRoute.propTypes = {
+  component: PropTypes.elementType,
+  isAuthenticated: PropTypes.bool,
+};
+const mapStateToProps = state => ({
+  isAuthenticated: state.auth.isAuthenticated,
+});
+
+export default connect(mapStateToProps)(PublicRoute);

src/routes/routes.js

@@ -13,22 +13,24 @@ import VerifyUserPage from '../views/VerifyUser/verifyUser';
 import CommunityPage from '../views/Community/CommunityPage';
 import Test from '../views/ModuleTest/ModuleTest';
 
+import PrivateRoute from '../components/PrivateRoute/PrivateRoute';
+import PublicRoute from '../components/PublicRoute/PublicRoute';
 import About from '../views/AboutUs/AboutUs';
 
 const Routes = () => (
   <Switch>
     <Route path="/" exact component={Home} />
-    <Route path="/signup" component={signUpPage} />
-    <Route path="/login" component={Login} />
     <Route path="/aboutus" component={About} />
-    <Route path="/profile" component={Profile} />
-    <Route path="/password-reset" component={ResetPassword} />
-    <Route path="/change-password" component={changePassword} />
-    <Route path="/dashboard" component={Dashboard} />
-    <Route path="/verify" component={VerifyUserPage} />
-    <Route path="/test/:moduleId" component={Test} />
-    <Route path="/view-module/:moduleId" component={ViewModule} />
-    <Route path="/community" component={CommunityPage} />
+    <PrivateRoute path="/test/:moduleId" component={Test} />
+    <PrivateRoute path="/community" component={CommunityPage} />
+    <PrivateRoute path="/view-module/:moduleId" component={ViewModule} />
+    <PublicRoute path="/verify" component={VerifyUserPage} />
+    <PublicRoute path="/signup" component={signUpPage} />
+    <PublicRoute path="/login" component={Login} />
+    <PublicRoute path="/password-reset" component={ResetPassword} />
+    <PublicRoute path="/change-password" component={changePassword} />
+    <PrivateRoute path="/profile" component={Profile} />
+    <PrivateRoute path="/dashboard" component={Dashboard} />
     <Route component={NotFound} />
   </Switch>
 );

src/test/Home/Home.spec.js

@@ -2,13 +2,18 @@
 import React from 'react';
 import { mount } from 'enzyme';
 import { BrowserRouter as Router } from 'react-router-dom';
-
+import { Provider } from 'react-redux';
+import { createStore } from 'redux';
+import reducers from '../../../store/reducers/index';
 import Home from '../../views/Home/Home';
 
+const store = createStore(reducers);
 describe('test Landing Page component', () => {
-  const landingPage = mount(<Router>
-    <Home />
-  </Router>);
+  const landingPage = mount(<Provider store={store}>
+    <Router>
+      <Home />
+    </Router>
+  </Provider>);
   it('should ensure that home page exists,  and it includes header and footer components', () => {
     expect(landingPage.find('Header').exists()).toBe(true);
     expect(landingPage.find('Footer').exists()).toBe(true);

src/test/actions/__snapshots__/authAction.spec.js.snap

@@ -23,3 +23,11 @@ Array [
   },
 ]
 `;
+
+exports[`authAction test lougout action 1`] = `
+Array [
+  Object {
+    "type": "LOGOUT",
+  },
+]
+`;

src/test/actions/__snapshots__/profileAction.spec.js.snap

@@ -62,7 +62,7 @@ Array [
   "url": "https://freyja-ah-backend.herokuapp.com/api/profiles/4",
   "headers": {
     "accept": "application/json, text/plain, */*",
-    "authorization": {},
+    "authorization": "null",
     "user-agent": "axios/0.19.0"
   }
 }],
@@ -88,7 +88,7 @@ Array [
   "url": "https://freyja-ah-backend.herokuapp.com/api/profiles/45",
   "headers": {
     "accept": "application/json, text/plain, */*",
-    "authorization": {},
+    "authorization": "null",
     "user-agent": "axios/0.19.0"
   }
 }],

src/test/actions/authAction.spec.js

@@ -2,7 +2,7 @@
 import configureMockStore from 'redux-mock-store';
 import thunk from 'redux-thunk';
 import nock from 'nock';
-import { registerUser, loginUser } from '../../../store/actions/authActions';
+import { registerUser, loginUser, logoutUser } from '../../../store/actions/authActions';
 
 const middlewares = [thunk];
 const mockStore = configureMockStore(middlewares);
@@ -95,4 +95,9 @@ describe('authAction', () => {
         expect(actionTypes).toEqual(expectedActions);
       });
   });
+  it('test lougout action', (done) => {
+    store.dispatch(logoutUser());
+    expect(store.getActions()).toMatchSnapshot();
+    done();
+  });
 });

src/test/components/Header.spec.js

@@ -3,6 +3,9 @@ import { shallow } from 'enzyme';
 import sinon from 'sinon';
 import { Header } from '../../components/Header/Header';
 
+const props = {
+  logout: () => {},
+};
 describe('component: Header', () => {
   beforeEach(() => {
     sinon.spy(Header.prototype, 'toggle');
@@ -11,13 +14,13 @@ describe('component: Header', () => {
     Header.prototype.toggle.restore();
   });
   it('should render correctly', (done) => {
-    const wrapper = shallow(<Header />);
+    const wrapper = shallow(<Header {...props} />);
     expect(wrapper.find('Navbar').hasClass('nav-style')).toBe(true);
-    shallow(<Header />);
+    shallow(<Header {...props} />);
     done();
   });
   it('should update the isOpen state property to true when navtoggler is clicked', (done) => {
-    const wrapper = shallow(<Header />);
+    const wrapper = shallow(<Header {...props} />);
     const button = wrapper.find('NavbarToggler');
     button.simulate('click');
     expect(Header.prototype.toggle.calledOnce).toBe(true);

src/test/components/PrivateRoute.spec.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import { PrivateRoute } from '../../components/PrivateRoute/PrivateRoute';
+import { Dashboard } from '../../views/Dashboard/Dashboard';
+
+const props = {
+  component: Dashboard,
+  isAuthenticated: true,
+};
+describe('component: PrivateRoute', () => {
+  it('should render correctly', (done) => {
+    const wrapper = shallow(<PrivateRoute />);
+    expect(wrapper).toMatchSnapshot();
+    done();
+  });
+  it('should render when user is Authenticated', (done) => {
+    const wrapper = shallow(<PrivateRoute {...props} />);
+    expect(wrapper).toMatchSnapshot();
+    done();
+  });
+});

src/test/components/PublicRoute.spec.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import { PublicRoute } from '../../components/PublicRoute/PublicRoute';
+import { Dashboard } from '../../views/Dashboard/Dashboard';
+
+const props = {
+  component: Dashboard,
+  isAuthenticated: false,
+};
+describe('component: PublicRoute', () => {
+  it('should render correctly', (done) => {
+    const wrapper = shallow(<PublicRoute />);
+    expect(wrapper).toMatchSnapshot();
+    done();
+  });
+  it('should render correctly when isAuthenticated is false', (done) => {
+    const wrapper = shallow(<PublicRoute {...props} />);
+    expect(wrapper).toMatchSnapshot();
+    done();
+  });
+});

src/test/components/__snapshots__/PrivateRoute.spec.js.snap

@@ -0,0 +1,5 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`component: PrivateRoute should render correctly 1`] = `ShallowWrapper {}`;
+
+exports[`component: PrivateRoute should render when user is Authenticated 1`] = `ShallowWrapper {}`;

src/test/components/__snapshots__/PublicRoute.spec.js.snap

@@ -0,0 +1,5 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`component: PublicRoute should render correctly 1`] = `ShallowWrapper {}`;
+
+exports[`component: PublicRoute should render correctly when isAuthenticated is false 1`] = `ShallowWrapper {}`;

src/test/reducers/__snapshots__/authReducer.spec.js.snap

@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Auth Reducers should handle logout 1`] = `
+Object {
+  "errors": Object {},
+  "isAuthenticated": false,
+  "isLoading": false,
+  "passwordChangeError": "",
+  "passwordChangeSuccess": "",
+  "passwordResetError": "",
+  "passwordResetSuccess": "",
+  "user": Object {},
+  "verified": "",
+}
+`;

src/test/reducers/authReducer.spec.js

@@ -94,4 +94,8 @@ describe('Auth Reducers', () => {
       errors: { error: 'Invalid login credentials' },
     });
   });
+  it('should handle logout', (done) => {
+    expect(authReducer(initialState, { type: 'LOGOUT' })).toMatchSnapshot();
+    done();
+  });
 });

src/test/views/__snapshots__/aboutus.spec.js.snap

@@ -2,9 +2,7 @@
 
 exports[`Aboutus component should render without errors 1`] = `
 <Fragment>
-  <Header
-    isAuthenticated={false}
-  />
+  <Connect(Header) />
   <div
     className="wrapper"
   >

src/test/views/login.spec.js

@@ -15,6 +15,8 @@ function shallowSetup() {
       },
     },
     loginUser,
+    location: { state: { referrer: '/' } },
+    socialSignOn: () => {},
   };
   const enzymeWrapper = shallow(<Login {...props} />);
 

src/views/AboutUs/AboutUs.js

@@ -2,7 +2,7 @@ import React, { Fragment } from 'react';
 import { Link } from 'react-router-dom';
 import { Button, Form, FormGroup, Input } from 'reactstrap';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Header } from '../../components/Header/Header';
+import Header from '../../components/Header/Header';
 import Footer from '../../components/Footer/Footer';
 import './aboutus.scss';
 

src/views/Home/Home.js

@@ -3,7 +3,7 @@ import React, { Fragment } from 'react';
 import { Link } from 'react-router-dom';
 import { HashLink } from 'react-router-hash-link';
 import { Card, CardTitle, CardText, CardBody, CardImg } from 'reactstrap';
-import { Header } from '../../components/Header/Header';
+import Header from '../../components/Header/Header';
 import Button from '../../components/Button';
 import Footer from '../../components/Footer/Footer';
 import './home.scss';