Add Hamburger Menu & Loader HOC

package.json

@@ -7,15 +7,18 @@
     "react-scripts": "1.1.1"
   },
   "dependencies": {
+    "@emotion/react": "^11.1.1",
     "history": "^4.6.3",
     "marked": "^0.3.6",
     "prop-types": "^15.5.10",
     "react": "^16.3.0",
     "react-dom": "^16.3.0",
+    "react-hamburger-menu": "^1.2.1",
     "react-redux": "^5.0.7",
     "react-router": "^4.1.2",
     "react-router-dom": "^4.1.2",
     "react-router-redux": "^5.0.0-alpha.6",
+    "react-spinners": "^0.9.0",
     "redux": "^3.6.0",
     "redux-devtools-extension": "^2.13.2",
     "redux-logger": "^3.0.1",

src/components/Article/index.js

@@ -4,16 +4,20 @@ import React from 'react';
 import agent from '../../agent';
 import { connect } from 'react-redux';
 import marked from 'marked';
-import { ARTICLE_PAGE_LOADED, ARTICLE_PAGE_UNLOADED } from '../../constants/actionTypes';
+import Loader from '../Loader'
+import { ARTICLE_BEGIN, ARTICLE_PAGE_LOADED, ARTICLE_PAGE_UNLOADED } from '../../constants/actionTypes';
 
 const mapStateToProps = state => ({
   ...state.article,
-  currentUser: state.common.currentUser
+  currentUser: state.common.currentUser,
+  loading: state.article.loading
 });
 
 const mapDispatchToProps = dispatch => ({
-  onLoad: payload =>
-    dispatch({ type: ARTICLE_PAGE_LOADED, payload }),
+  onLoad: payload => {
+    dispatch({ type: ARTICLE_BEGIN })
+    dispatch({ type: ARTICLE_PAGE_LOADED, payload })
+  },
   onUnload: () =>
     dispatch({ type: ARTICLE_PAGE_UNLOADED })
 });
@@ -31,6 +35,10 @@ class Article extends React.Component {
   }
 
   render() {
+    const { setLoading, loading } = this.props;
+
+    loading ? setLoading(true) : setLoading(false)
+
     if (!this.props.article) {
       return null;
     }
@@ -94,4 +102,4 @@ class Article extends React.Component {
   }
 }
 
-export default connect(mapStateToProps, mapDispatchToProps)(Article);
+export default connect(mapStateToProps, mapDispatchToProps)(Loader(Article));

src/components/ArticleList.js

@@ -1,13 +1,15 @@
 import ArticlePreview from './ArticlePreview';
 import ListPagination from './ListPagination';
+import { connect } from 'react-redux'
 import React from 'react';
+import Loader from './Loader';
 
-const ArticleList = props => {
-  if (!props.articles) {
-    return (
-      <div className="article-preview">Loading...</div>
-    );
-  }
+function ArticleList(props) {
+  const { setLoading, loading } = props;
+
+  loading ? setLoading(true) : setLoading(false)
+
+  if (!props.articles) return (<div></div>)
 
   if (props.articles.length === 0) {
     return (
@@ -35,4 +37,9 @@ const ArticleList = props => {
   );
 };
 
-export default ArticleList;
+const mapStateToProps = (state) => ({
+  loading: state.articleList.loading
+})
+
+
+export default connect(mapStateToProps)(Loader(ArticleList));

src/components/Header.js

@@ -1,25 +1,27 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
+import HamburgerMenu from 'react-hamburger-menu'
+import '../css/styles.css'
 
 const LoggedOutView = props => {
   if (!props.currentUser) {
     return (
       <ul className="nav navbar-nav pull-xs-right">
 
         <li className="nav-item">
-          <Link to="/" className="nav-link">
+          <Link to="/" className="nav-link" onClick={() => props.handleClick()}>
             Home
           </Link>
         </li>
 
         <li className="nav-item">
-          <Link to="/login" className="nav-link">
+          <Link to="/login" className="nav-link" onClick={() => props.handleClick()}>
             Sign in
           </Link>
         </li>
 
         <li className="nav-item">
-          <Link to="/register" className="nav-link">
+          <Link to="/register" className="nav-link" onClick={() => props.handleClick()}>
             Sign up
           </Link>
         </li>
@@ -36,25 +38,26 @@ const LoggedInView = props => {
       <ul className="nav navbar-nav pull-xs-right">
 
         <li className="nav-item">
-          <Link to="/" className="nav-link">
+          <Link to="/" className="nav-link" onClick={() => props.handleClick()}>
             Home
           </Link>
         </li>
 
         <li className="nav-item">
-          <Link to="/editor" className="nav-link">
+          <Link to="/editor" className="nav-link" onClick={() => props.handleClick()}>
             <i className="ion-compose"></i>&nbsp;New Post
           </Link>
         </li>
 
         <li className="nav-item">
-          <Link to="/settings" className="nav-link">
+          <Link to="/settings" className="nav-link" onClick={() => props.handleClick()}>
             <i className="ion-gear-a"></i>&nbsp;Settings
           </Link>
         </li>
 
         <li className="nav-item">
           <Link
+            onClick={() => props.handleClick()}
             to={`/@${props.currentUser.username}`}
             className="nav-link">
             <img src={props.currentUser.image} className="user-pic" alt={props.currentUser.username} />
@@ -70,18 +73,43 @@ const LoggedInView = props => {
 };
 
 class Header extends React.Component {
+  constructor() {
+    super();
+    this.state = {
+      open: false
+    }
+  }
+
+  handleClick() {
+    this.setState({
+      open: !this.state.open
+    });
+  }
+
   render() {
+    let dropDownClass;
+    this.state.open ? dropDownClass = "" : dropDownClass = "hide"
     return (
       <nav className="navbar navbar-light">
-        <div className="container">
-
+        <div className="container topnav">
+
+          <HamburgerMenu
+            isOpen={this.state.open}
+            menuClicked={this.handleClick.bind(this)}
+            width={18}
+            height={15}
+            strokeWidth={1}
+            animationDuration={0.5}
+            className="hamburger"
+          />
           <Link to="/" className="navbar-brand">
             {this.props.appName.toLowerCase()}
           </Link>
+          <div className={"my-nav " + dropDownClass}>
+            <LoggedOutView currentUser={this.props.currentUser} handleClick={this.handleClick} />
 
-          <LoggedOutView currentUser={this.props.currentUser} />
-
-          <LoggedInView currentUser={this.props.currentUser} />
+            <LoggedInView currentUser={this.props.currentUser} handleClick={this.handleClick} />
+          </div>
         </div>
       </nav>
     );

src/components/Home/index.js

@@ -5,6 +5,7 @@ import Tags from './Tags';
 import agent from '../../agent';
 import { connect } from 'react-redux';
 import {
+  ARTICLE_BEGIN,
   HOME_PAGE_LOADED,
   HOME_PAGE_UNLOADED,
   APPLY_TAG_FILTER
@@ -21,10 +22,12 @@ const mapStateToProps = state => ({
 const mapDispatchToProps = dispatch => ({
   onClickTag: (tag, pager, payload) =>
     dispatch({ type: APPLY_TAG_FILTER, tag, pager, payload }),
-  onLoad: (tab, pager, payload) =>
-    dispatch({ type: HOME_PAGE_LOADED, tab, pager, payload }),
+  onLoad: (tab, pager, payload) => {
+    dispatch({ type: ARTICLE_BEGIN })
+    dispatch({ type: HOME_PAGE_LOADED, tab, pager, payload })
+  },
   onUnload: () =>
-    dispatch({  type: HOME_PAGE_UNLOADED })
+    dispatch({ type: HOME_PAGE_UNLOADED })
 });
 
 class Home extends React.Component {

src/components/Loader.js

@@ -0,0 +1,32 @@
+import React, { useState } from 'react'
+import { css } from "@emotion/core";
+import { PropagateLoader } from 'react-spinners';
+
+const Loader = (WrappedComponent) => {
+  const HOC = (props) => {
+    const [isLoading, setLoading] = useState(true);
+
+    const setLoadingState = isComponentLoading => {
+      setLoading(isComponentLoading);
+    };
+    return (
+      <div>
+        {isLoading && <PropagateLoader css={override} color={"#62B85C"} loading={isLoading} />}
+        <WrappedComponent {...props} setLoading={setLoadingState} />
+      </div>
+    )
+  }
+  return HOC;
+}
+
+const override = css`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+`;
+
+export default Loader;
+

src/constants/actionTypes.js

@@ -10,6 +10,7 @@ export const ARTICLE_PAGE_LOADED = 'ARTICLE_PAGE_LOADED';
 export const ARTICLE_PAGE_UNLOADED = 'ARTICLE_PAGE_UNLOADED';
 export const ADD_COMMENT = 'ADD_COMMENT';
 export const DELETE_COMMENT = 'DELETE_COMMENT';
+export const ARTICLE_BEGIN = 'ARTICLE_BEGIN';
 export const ARTICLE_FAVORITED = 'ARTICLE_FAVORITED';
 export const ARTICLE_UNFAVORITED = 'ARTICLE_UNFAVORITED';
 export const SET_PAGE = 'SET_PAGE';

src/css/styles.css

@@ -0,0 +1,59 @@
+.topnav {
+  height: 100%;
+  overflow: hidden;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.hide {
+  display: none;
+}
+
+@media (min-width: 768px){
+  .hamburger {
+    display: none;
+  }
+
+  .my-nav {
+    display: block;  
+  }
+}
+
+@media (max-width: 767px){
+  .my-nav {
+    position: absolute;
+    top: 100%;
+    left: 1%;
+    border: 1px solid rgba(207, 205, 205, 0.377);
+    border-left: none;
+    border-top: none;
+    width: 30%;
+    background: #fff;
+    z-index: 1;
+  }
+
+  .my-nav > ul {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+  }
+
+  .my-nav > ul>li {
+    text-align: center;
+    width: 100%;
+    margin: 0 !important;
+    z-index: 2;
+    border: 1px solid rgba(207, 205, 205, 0.377);
+    border-bottom: none;
+    border-right: none;
+  }
+
+  .my-nav > ul>li:hover {
+    background: rgba(235, 235, 235, 0.493);
+    border-left: 4px solid #62B85C;
+  }
+  .hamburger {
+    display: block;
+  }
+}

src/reducers/article.js

@@ -2,7 +2,8 @@ import {
   ARTICLE_PAGE_LOADED,
   ARTICLE_PAGE_UNLOADED,
   ADD_COMMENT,
-  DELETE_COMMENT
+  DELETE_COMMENT,
+  ARTICLE_BEGIN
 } from '../constants/actionTypes';
 
 export default (state = {}, action) => {
@@ -11,7 +12,8 @@ export default (state = {}, action) => {
       return {
         ...state,
         article: action.payload[0].article,
-        comments: action.payload[1].comments
+        comments: action.payload[1].comments,
+        loading: false
       };
     case ARTICLE_PAGE_UNLOADED:
       return {};
@@ -29,6 +31,11 @@ export default (state = {}, action) => {
         ...state,
         comments: state.comments.filter(comment => comment.id !== commentId)
       };
+    case ARTICLE_BEGIN:
+      return {
+        ...state,
+        loading: true
+      }
     default:
       return state;
   }

src/reducers/articleList.js

@@ -1,4 +1,5 @@
 import {
+  ARTICLE_BEGIN,
   ARTICLE_FAVORITED,
   ARTICLE_UNFAVORITED,
   SET_PAGE,
@@ -54,7 +55,8 @@ export default (state = {}, action) => {
         articles: action.payload[1].articles,
         articlesCount: action.payload[1].articlesCount,
         currentPage: 0,
-        tab: action.tab
+        tab: action.tab,
+        loading: false
       };
     case HOME_PAGE_UNLOADED:
       return {};
@@ -80,6 +82,11 @@ export default (state = {}, action) => {
     case PROFILE_PAGE_UNLOADED:
     case PROFILE_FAVORITES_PAGE_UNLOADED:
       return {};
+    case ARTICLE_BEGIN:
+      return {
+        ...state,
+        loading: true
+      }
     default:
       return state;
   }