Merge branch 'develop' of https://github.com/andela/pippin-ah-frontend …

…into feature/162727528/bookmark-articles

package.json

@@ -44,17 +44,18 @@
     "file-loader": "^3.0.1",
     "html-webpack-plugin": "^3.2.0",
     "lodash": "^4.17.11",
+    "jwt-decode": "^2.2.0",
     "materialize-css": "^1.0.0-rc.2",
     "node-sass": "^4.11.0",
     "prop-types": "^15.7.2",
     "react": "^16.7.0",
     "react-dom": "^16.7.0",
+    "react-materialize": "^2.5.0",
     "react-pure-lifecycle": "^3.0.0",
     "react-redux": "^6.0.0",
     "react-router-dom": "^4.3.1",
     "react-toastify": "^4.5.2",
     "redux": "^4.0.1",
-    "redux-mock-store": "^1.5.3",
     "redux-thunk": "^2.3.0",
     "sass-loader": "^7.1.0",
     "sinon": "^7.2.4",
@@ -69,6 +70,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.2.2",
+    "@babel/plugin-proposal-class-properties": "^7.3.0",
     "@babel/preset-env": "^7.3.1",
     "@babel/preset-react": "^7.0.0",
     "babel-eslint": "^10.0.1",
@@ -88,8 +90,10 @@
     "html-webpack-plugin": "^3.2.0",
     "husky": "^1.3.1",
     "jest": "^24.0.0",
+    "moxios": "^0.4.0",
     "prettier": "1.16.4",
     "pretty-quick": "^1.10.0",
+    "redux-mock-store": "^1.5.3",
     "stylelint": "^9.10.1",
     "stylelint-config-standard": "^18.2.0",
     "stylelint-webpack-plugin": "^0.10.5",

public/index.html

@@ -41,12 +41,7 @@
         const instances = M.Sidenav.init(elems);
       });
     </script>
-    <script>
-      document.addEventListener('DOMContentLoaded', function() {
-        const elems = document.querySelectorAll('.modal');
-        const instances = M.Modal.init(elems);
-      });
-    </script>
+
     <script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.5.6/tinymce.min.js"></script>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.5.6/jquery.tinymce.min.js"></script>

server.js

@@ -1,6 +1,9 @@
+const dotenv = require('dotenv');
 const path = require('path');
 const express = require('express');
 
+dotenv.config();
+
 const app = express();
 
 app.use(express.static(path.join(__dirname, 'webpack/dist')));

src/app/App.jsx

@@ -6,7 +6,7 @@ import { Login } from './login';
 import { Article, CreateArticle, ListArticle } from './article';
 import Footer from './footer';
 import Navbar from './navBar/NavbarComponent';
-import ProfileComponent from './profile';
+import ProfileContainer from './profile';
 import { ResetPassword } from './resetPassword';
 import { NewPassword } from './newPassword';
 
@@ -17,7 +17,7 @@ const App = () => (
       <Switch>
         <Route path="/" component={Home} exact />
         <Route path="/signup" component={Signup} exact />
-        <Route path="/profile" component={ProfileComponent} exact />
+        <Route path="/profile" component={ProfileContainer} exact />
         <Route path="/login" component={Login} exact />
         <Route path="/article/:slug" component={Article} exact />
         <Route path="/articles/:category" component={ListArticle} exact />

src/app/article/create-article.scss

@@ -47,23 +47,23 @@
   align-items: center;
 }
 
-.card-image {
+.author-cover .card-image {
   display: flex;
   flex-direction: column;
   align-items: center;
   align-content: center;
   justify-content: center;
 }
 
-.card-image img {
+.author-cover .card-image img {
   display: block;
   max-height: 150px;
   max-width: 150px;
   height: auto;
   width: auto;
 }
 
-.card-image .fa-upload {
+.author-cover .card-image .fa-upload {
   font-size: 30px;
   cursor: pointer;
 }

src/app/login/duck/actions.js

@@ -1,8 +1,9 @@
 import types from './types';
 
-const setLoginState = loginState => ({
+const setLoginState = (loginState, loginData) => ({
   type: types.SET_LOGIN_STATE,
   loginState,
+  loginData,
 });
 
 const setLoginError = errorMessage => ({

src/app/login/duck/operations.js

@@ -13,7 +13,7 @@ const doLogin = (usernameOrEmail, password) => dispatch => {
     .post(url, { usernameOrEmail, password })
     .then(({ data }) => {
       localStorage.setItem('token', data.token);
-      dispatch(setLoginState(constants.LOGIN_SUCCESS));
+      dispatch(setLoginState(constants.LOGIN_SUCCESS, data));
     })
     .catch(({ response }) => {
       dispatch(setLoginState(constants.LOGIN_ERROR));

src/app/login/duck/reducers.js

@@ -7,10 +7,11 @@ const INITIAL_STATE = {
 const loginReducer = (state = INITIAL_STATE, action) => {
   switch (action.type) {
     case types.SET_LOGIN_STATE: {
-      const { loginState } = action;
+      const { loginState, loginData } = action;
       return {
         ...state,
         loginState,
+        loginData,
       };
     }
     case types.SET_LOGIN_ERROR: {

src/app/login/login.test.js

@@ -164,7 +164,7 @@ describe('Connected Login Component Dispatches Login Success', () => {
   const store = mockStore(initialState);
   let wrapper;
   beforeEach(() => {
-    const response = { data: 'Login successful' };
+    const response = { data: { articles: {} } };
     axios.post.mockResolvedValue(response);
     wrapper = mount(
       <Provider store={store}>

src/app/navBar/NavbarComponent.jsx

@@ -11,9 +11,10 @@ const { setSignupState } = signupActions;
 const NavbarComponent = ({ dispatch }) => {
   const isSignedIn = !!localStorage.getItem('token');
   const signUserOut = () => {
-    localStorage.removeItem('token');
     dispatch(setLoginState('LOGGED_OUT'));
     dispatch(setSignupState('LOGGED_OUT'));
+    localStorage.removeItem('state');
+    localStorage.removeItem('token');
   };
   return (
     <nav id="navbarbg">