Merge 0d5f3af into 98cc04a

src/ActionCreators/AuthActionCreators.js

@@ -1,16 +1,47 @@
 // Action type
 const AUTHENTICATED = 'loggedin_user';
 const AUTHENTICATION_FAILED = 'login_failed';
+const AUTHENTICATION_IN_PROGRESS = 'login-progess';
+const LOGGED_OUT = 'logout';
+const LOGOUT_FAILED = 'logout_failed';
 
 // Action creator
 const Login = response => ({
   type: AUTHENTICATED,
   payload: response.data,
+  loading: false,
 });
 
 const LoginFailed = errorMessage => ({
   type: AUTHENTICATION_FAILED,
   payload: { errorMessage },
+  loading: false,
 });
 
-export { AUTHENTICATED, AUTHENTICATION_FAILED, Login, LoginFailed };
+const LoginStarted = () => ({
+  type: AUTHENTICATION_IN_PROGRESS,
+  loading: true,
+});
+
+const Logout = () => ({
+  type: LOGGED_OUT,
+  payload: {},
+});
+
+const LogoutFailed = errorMessage => ({
+  type: LOGOUT_FAILED,
+  payload: { errorMessage },
+});
+
+export {
+  AUTHENTICATED,
+  AUTHENTICATION_FAILED,
+  AUTHENTICATION_IN_PROGRESS,
+  LOGGED_OUT,
+  LOGOUT_FAILED,
+  Login,
+  LoginFailed,
+  LoginStarted,
+  Logout,
+  LogoutFailed,
+};

src/Actions/AuthActions.js

@@ -1,27 +1,38 @@
-import axios from "axios";
-import { Login, LoginFailed } from "../ActionCreators/AuthActionCreators";
+import axios from 'axios';
+import {
+  Login,
+  LoginFailed,
+  LoginStarted,
+  Logout,
+} from '../ActionCreators/AuthActionCreators';
 
-const BASE_URL = "https://api.openconceptlab.org/";
+const BASE_URL = 'https://api.openconceptlab.org/';
 
 // login action
-const LoginAction = ({ username, token }) => {
-  return async dispatch => {
-    try {
-      const url = `${BASE_URL}/users/${username}/`,
-        headers = { Authorization: `Token ${token}` };
-      // dispatch login sent
-      const response = await axios.post(url, null, { headers });
-      dispatch(Login(response));
-      localStorage.setItem("token", `Token ${token}`);
-      localStorage.setItem("username", `${username}`);
-    } catch (error) {
-      if (error.response) {
-        dispatch(LoginFailed(error.response.data.detail));
-      } else if (error.request) {
-        dispatch(LoginFailed("Request can't be made"));
-      }
+const LoginAction = ({ username, token }) => async (dispatch) => {
+  try {
+    const url = `${BASE_URL}/users/${username}/`;
+    const headers = { Authorization: `Token ${token}` };
+    // dispatch request sent
+    dispatch(LoginStarted());
+    const response = await axios.post(url, null, { headers });
+    dispatch(Login(response));
+    localStorage.setItem('token', `Token ${token}`);
+    localStorage.setItem('username', `${username}`);
+  } catch (error) {
+    if (error.response) {
+      dispatch(LoginFailed(error.response.data.detail));
+    } else if (error.request) {
+      dispatch(LoginFailed("Request can't be made"));
     }
-  };
+  }
 };
 
-export { LoginAction };
+// logout action
+const LogoutAction = () => (dispatch) => {
+  dispatch(LoginStarted());
+  dispatch(Logout());
+  localStorage.clear();
+};
+
+export { LoginAction, LogoutAction };

src/App.css

@@ -32,63 +32,7 @@
     transform: rotate(360deg);
   }
 }
-.login {
-  display: block;
-  background-color: white;
-  width: 350px;
-  height: 400px;
-  margin: 10px;
-}
-.inputs {
-  width: 300px !important;
-  margin-left: 20px;
-  margin-right: 20px;
-}
-.label {
-  margin-left: 10px;
-}
-.modal-title {
-  text-align: center !important;
-}
-.checkbox {
-  margin-left: 20px;
-}
-.footer {
-  background-color: #c4c4c4;
-  height: 70px;
-}
-.signin {
-  float: right !important;
-}
-#signinModal {
-  margin-top: 70px;
-}
-
-.navbar-brand {
-  color: white !important;
-}
-
-.nav-item.nav-link:hover {
-  color: black !important;
-  background-color: white;
-}
-.nav-link {
-  line-height: 2.2 !important;
-}
-.navbar {
-  padding: 0 1rem !important;
-  line-height: 2 !important;
-}
-
-@media only screen and (max-width: 992px) {
-  .nav-item.nav-link:hover {
-    color: #ccc !important;
-    background: none;
-  }
 
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
-}
 
 .sidenav {
   height: 100%;
@@ -108,28 +52,6 @@
   font-size: 20px;
 }
 
-.navbar{
-  position: fixed;
-  border-bottom-right-radius: 1em;
-  border-bottom:solid;
-  width:100%;
-  background-color: #495056;
-}
-
-.navbar-brand{
-  font-family: 'Open Sans Condensed', sans-serif;
-  font-size:2.25em;
-  margin-left:40%;
-}
-
-.bgcolor{
-  background-color: #495056
-}
-
-from { transform: rotate(0deg); }
-to { transform: rotate(360deg); }
-
-
 p{
   text-align: center;
   color: white;
@@ -138,38 +60,6 @@ p{
   padding-top: 20px;
   margin-left: auto;
 }
-
-.sidenav {
-  height: 100%;
-  width: 8%;
-  position: fixed; 
-  padding-top: 20px;
-  background-color: #343a40; 
-  font-family: 'Open Sans Condensed', sans-serif;
-  border-top-right-radius: 2em;
-  border-right:solid;
-}
-
-.sidenav a {
-  display: block; 
-  text-align: center;
-  color: white;
-  font-size: 20px;
-}
-
-.navbar{
-  position: fixed;
-  border-bottom-right-radius: 1em;
-  border-bottom:solid;
-  width:100%;
-}
-
-.navbar-brand{
-  font-family: 'Open Sans Condensed', sans-serif;
-  font-size:2.25em;
-  margin-left:9%;
-}
-
 .button {
   width: 100px;
   height: 45px;
@@ -191,4 +81,3 @@ p{
 .bgcolor{
   background-color: #495056
 }
-

src/App.js

@@ -5,6 +5,7 @@ import { BrowserRouter, Route, Switch } from 'react-router-dom';
 import Navbar from './components/Navbar';
 import store from './Reducers/Index';
 import './App.css';
+import '../src/styles/index.css';
 import Login from './components/Login';
 import Dashboard from './components/Dashboard';
 

src/Reducers/AuthReducers.js

@@ -1,6 +1,8 @@
 import {
   AUTHENTICATED,
   AUTHENTICATION_FAILED,
+  AUTHENTICATION_IN_PROGRESS,
+  LOGGED_OUT,
 } from '../ActionCreators/AuthActionCreators';
 
 const initialState = {
@@ -9,18 +11,28 @@ const initialState = {
 
 export default (state = initialState, action) => {
   switch (action.type) {
+    case AUTHENTICATION_IN_PROGRESS:
+      return {
+        ...state,
+        loggedIn: false,
+        loading: true,
+      };
     case AUTHENTICATED:
       return {
         ...state,
         payload: action.payload,
         loggedIn: true,
+        loading: false,
       };
     case AUTHENTICATION_FAILED:
       return {
         ...state,
         payload: action.payload,
         loggedIn: false,
+        loading: false,
       };
+    case LOGGED_OUT:
+      return {};
     default:
       return state;
   }

src/Reducers/Index.js

@@ -37,7 +37,7 @@ const store = createStoreWithMiddleware(rootReducer, persistedState);
 
 store.subscribe(() => {
   saveState({
-    users: { loggedIn: store.getState().users },
+    users: { loggedIn: store.getState().users.loggedIn },
   });
 });
 

src/__tests__/AuthActions.test.js

@@ -7,6 +7,7 @@ describe('Login', () => {
   const responseData = {
     type: AUTHENTICATED,
     payload: response.data,
+    loading: false,
   };
 
   it('should return action type and payload', () => {

src/__tests__/AuthReducers.test.js

@@ -29,6 +29,7 @@ describe('AuthReducer', () => {
     };
     action = {
       type: AUTHENTICATED,
+      loading: false,
       payload: { ...responseData },
     };
 
@@ -37,6 +38,7 @@ describe('AuthReducer', () => {
 
     expect(authReducer(state, action)).toEqual({
       loggedIn: true,
+      loading: false,
       payload: { ...responseData },
     });
   });
@@ -48,6 +50,7 @@ describe('AuthReducer', () => {
     };
     action = {
       type: AUTHENTICATION_FAILED,
+      loading: false,
       payload: { ...response },
     };
 
@@ -56,6 +59,7 @@ describe('AuthReducer', () => {
 
     expect(authReducer(state, action)).toEqual({
       loggedIn: false,
+      loading: false,
       payload: { ...response },
     });
   });

src/__tests__/Loader.test.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import Loader from '../components/Loader';
+
+const wrapper = mount(<Loader />);
+
+describe('Loader Component', () => {
+  it('should render without crashing', () => {
+    expect(wrapper).toMatchSnapshot();
+  });
+});

src/components/Dashboard.js

@@ -1,5 +1,4 @@
 import React, { Component } from 'react';
-import { Link } from 'react-router-dom';
 import SideNavigation from './SideNavigation';
 /**
  * Component for rendering the main page

src/components/Loader.js

@@ -0,0 +1,7 @@
+import React from 'react';
+
+const Loader = () => (
+  <div className="loader" />
+);
+
+export default Loader;