Interview

package.json

@@ -12,6 +12,7 @@
     "prop-types": "^15.5.10",
     "react": "^16.3.0",
     "react-dom": "^16.3.0",
+    "react-loader-spinner": "^3.1.14",
     "react-redux": "^5.0.7",
     "react-router": "^4.1.2",
     "react-router-dom": "^4.1.2",

src/components/App.js

@@ -21,7 +21,7 @@ const mapStateToProps = state => {
     appName: state.common.appName,
     currentUser: state.common.currentUser,
     redirectTo: state.common.redirectTo
-  }};
+}};
 
 const mapDispatchToProps = dispatch => ({
   onLoad: (payload, token) =>

src/components/ArticleList.js

@@ -1,22 +1,9 @@
 import ArticlePreview from './ArticlePreview';
 import ListPagination from './ListPagination';
 import React from 'react';
+import Loader from './HOC/Loader';
 
 const ArticleList = props => {
-  if (!props.articles) {
-    return (
-      <div className="article-preview">Loading...</div>
-    );
-  }
-
-  if (props.articles.length === 0) {
-    return (
-      <div className="article-preview">
-        No articles are here... yet.
-      </div>
-    );
-  }
-
   return (
     <div>
       {
@@ -35,4 +22,4 @@ const ArticleList = props => {
   );
 };
 
-export default ArticleList;
+export default Loader(ArticleList);

src/components/HOC/Loader.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import Spinner from 'react-loader-spinner';
+
+const Loader = (WrappedComponent) => {
+    return(props) => {
+        if (!props.articles) {
+            return (
+              <div className="article-preview">
+                <div style={{width: "100%", display: "flex"}}>
+                    <Spinner 
+                        type="TailSpin" 
+                        color="#5cb85c" 
+                        height={80} width={80} 
+                        style={{margin: "auto"}}
+                    />
+                </div>
+              </div>
+            );
+          }
+
+          if (props.articles.length === 0) {
+            return (
+              <div className="article-preview">
+                No articles are here... yet.
+              </div>
+            );
+          }
+        return(
+            <div>
+                <WrappedComponent {...props}/>
+            </div>
+        )
+    }
+}
+
+export default Loader;

src/components/Header.js

@@ -70,18 +70,38 @@ const LoggedInView = props => {
 };
 
 class Header extends React.Component {
+  constructor(props) {
+    super(props);
+    this.toggleMenu= this.toggleMenu.bind(this);
+    this.state = {
+        active: true,
+    };
+  }
+
+  toggleMenu(){    
+    this.setState(state => ({ active: !state.active }));
+  }
+
   render() {
     return (
-      <nav className="navbar navbar-light">
-        <div className="container">
+      <nav className="navbar navbar-light nav-conduit">
+        <div className="container nav-responsive">
+
+          <div className="hamburger">
+            <button className="btn btn-sm btn-outline-primary" onClick={this.toggleMenu}>
+              <i className="ion-android-menu"></i>
+            </button>
+          </div>
 
           <Link to="/" className="navbar-brand">
             {this.props.appName.toLowerCase()}
           </Link>
 
-          <LoggedOutView currentUser={this.props.currentUser} />
+          <span className={this.state.active ? 'menu-hamburger' : 'menu-hamburger active'}>
+            <LoggedOutView currentUser={this.props.currentUser} />
 
-          <LoggedInView currentUser={this.props.currentUser} />
+            <LoggedInView currentUser={this.props.currentUser} />
+          </span>
         </div>
       </nav>
     );

src/index.css

@@ -0,0 +1,54 @@
+.hamburger{
+    display: none;
+}
+.nav-conduit{
+    background-color: #fff;
+    position: sticky;
+    z-index: 1;
+    width: 100%;
+    top: 0;
+    box-shadow: 0 1px 6px 0 rgba(32, 33, 36, 0.28);
+}
+@media (max-width: 768px){
+    .navbar.navbar-light{
+        padding: 0px;
+    }
+    .nav-responsive{
+        display: flex;
+        max-width: 768px;
+        padding: 10px 15px;
+    }
+    .hamburger{
+        margin: 0px 15px 0px 0px;
+        display: block;        
+    }
+    .hamburger button i{
+        font-size: 25px;
+        line-height: 0px;
+    }
+    .menu-hamburger{
+        position: absolute;
+        margin: 50px 0px 0px -15px;
+        background-color: #fff;
+        z-index: 1;
+        width: 250px;
+        box-shadow: 0 1px 6px 0 rgba(32, 33, 36, 0.28);
+        display: none;
+    }
+    .menu-hamburger.active{
+        display: block ;
+    }
+    .menu-hamburger .navbar-nav{
+        display: block;
+        box-shadow: 2px 7px 6px 0 rgba(32, 33, 36, 0.28);
+        float: none !important
+    }
+    .menu-hamburger .navbar-nav .nav-item{
+        width: 100%;
+        margin-left: 0rem;
+        border-bottom: 1px solid #e5e5e5;
+    }
+    .menu-hamburger .navbar-nav .nav-item a{
+        margin-left: 1rem;
+    }
+}

src/index.js

@@ -2,6 +2,7 @@ import ReactDOM from 'react-dom';
 import { Provider } from 'react-redux';
 import React from 'react';
 import { store, history} from './store';
+import './index.css';
 
 import { Route, Switch } from 'react-router-dom';
 import { ConnectedRouter } from 'react-router-redux';