react and redux Conduit App test (Mundruku Ivan)

package.json

@@ -12,20 +12,23 @@
     "prop-types": "^15.5.10",
     "react": "^16.3.0",
     "react-dom": "^16.3.0",
+    "react-fontawesome": "^1.7.1",
+    "react-loader-spinner": "^3.1.14",
     "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-simple-sidenav": "^2.0.0",
     "redux": "^3.6.0",
     "redux-devtools-extension": "^2.13.2",
     "redux-logger": "^3.0.1",
     "superagent": "^3.8.2",
     "superagent-promise": "^1.1.0"
   },
   "scripts": {
-    "start": "cross-env PORT=4100 react-scripts start",
+    "start": "react-scripts start",
     "build": "react-scripts build",
-    "test": "cross-env PORT=4100 react-scripts test --env=jsdom",
+    "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject"
   }
 }

public/index.html

@@ -5,7 +5,13 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
     <link rel="stylesheet" href="//demo.productionready.io/main.css">
+
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
+
+    <link rel="stylesheet" href="/src/styles.css">
+
     <link href="//code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" type="text/css">
+
     <link href="//fonts.googleapis.com/css?family=Titillium+Web:700|Source+Serif+Pro:400,700|Merriweather+Sans:400,700|Source+Sans+Pro:400,300,600,700,300italic,400italic,600italic,700italic" rel="stylesheet" type="text/css">
     <!--
       Notice the use of %PUBLIC_URL% in the tag above.

src/components/App.js

@@ -31,6 +31,17 @@ const mapDispatchToProps = dispatch => ({
 });
 
 class App extends React.Component {
+
+   state={
+     showNav:false
+   }
+
+   toggleNavBar=(action)=>{
+     this.setState({
+       showNav:action
+     })
+   }
+
   componentWillReceiveProps(nextProps) {
     if (nextProps.redirectTo) {
       // this.context.router.replace(nextProps.redirectTo);
@@ -73,7 +84,7 @@ class App extends React.Component {
       <div>
         <Header
           appName={this.props.appName}
-          currentUser={this.props.currentUser} />
+          currentUser={this.props.currentUser} showNav={this.state.showNav} onHideNav={()=>this.toggleNavBar(false)} onNavOpen={()=>this.toggleNavBar(true)}/>
       </div>
     );
   }

src/components/ArticleList.js

@@ -1,14 +1,10 @@
 import ArticlePreview from './ArticlePreview';
 import ListPagination from './ListPagination';
 import React from 'react';
+import LoadingSpinnerHoc from '../../src/components/HOC/spinner'
 
 const ArticleList = props => {
-  if (!props.articles) {
-    return (
-      <div className="article-preview">Loading...</div>
-    );
-  }
-
+
   if (props.articles.length === 0) {
     return (
       <div className="article-preview">
@@ -35,4 +31,4 @@ const ArticleList = props => {
   );
 };
 
-export default ArticleList;
+export default  LoadingSpinnerHoc(ArticleList);

src/components/HOC/spinner.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import Loader from 'react-loader-spinner'
+import "react-loader-spinner/dist/loader/css/react-spinner-loader.css"
+
+
+
+const LoadingSpinnerHoc = (Component) => (props) =>{
+  const tags = props.tags;
+  const article=props.articles;
+
+  if (tags || article) {
+    return (
+    <div>
+  <Component {...props} />
+
+   </div>
+    ) 
+  }
+  else
+  {
+    return (
+      <Loader
+      type="ThreeDots"
+      color="#00BFFF"
+      height={100}
+      width={100}
+      timeout={3000} //3 secs
+
+   />
+    );
+  }
+
+
+}
+
+export default LoadingSpinnerHoc;

src/components/Header.js

@@ -1,10 +1,18 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
+import FontAwesome from 'react-fontawesome';
+import SideNav from '../components/sideNav';
+import '../components/styles.css';
 
-const LoggedOutView = props => {
+
+
+
+
+
+ const LoggedOutView = props => {
   if (!props.currentUser) {
     return (
-      <ul className="nav navbar-nav pull-xs-right">
+      <ul className="nav navbar-nav pull-xs-right logout_view" >
 
         <li className="nav-item">
           <Link to="/" className="nav-link">
@@ -30,10 +38,11 @@ const LoggedOutView = props => {
   return null;
 };
 
-const LoggedInView = props => {
+ const LoggedInView = props => {
   if (props.currentUser) {
     return (
-      <ul className="nav navbar-nav pull-xs-right">
+      <ul className="nav navbar-nav pull-xs-right logedin_view" >
+
 
         <li className="nav-item">
           <Link to="/" className="nav-link">
@@ -70,15 +79,27 @@ const LoggedInView = props => {
 };
 
 class Header extends React.Component {
+
+  state={
+    showNav:false
+  }
+
+  toggleNavBar=(action)=>{
+    this.setState({
+      showNav:action
+    })
+  }
+
   render() {
     return (
       <nav className="navbar navbar-light">
+
         <div className="container">
-
+          <SideNav showNav={this.state.showNav} onHideSideNav={()=>this.toggleNavBar(false)} appName={this.props.appName} currentUser={this.props.currentUser}/>
+          <FontAwesome name="bars" onClick={()=>this.toggleNavBar(true)} className="nav_harmburg navbar-brand " style={{marginTop:"1.5%"}}/>
           <Link to="/" className="navbar-brand">
             {this.props.appName.toLowerCase()}
           </Link>
-
           <LoggedOutView currentUser={this.props.currentUser} />
 
           <LoggedInView currentUser={this.props.currentUser} />

src/components/Home/Tags.js

@@ -1,9 +1,10 @@
 import React from 'react';
 import agent from '../../agent';
+import  LoadingSpinnerHoc from '../HOC/spinner'
 
 const Tags = props => {
   const tags = props.tags;
-  if (tags) {
+
     return (
       <div className="tag-list">
         {
@@ -26,11 +27,6 @@ const Tags = props => {
         }
       </div>
     );
-  } else {
-    return (
-      <div>Loading Tags...</div>
-    );
-  }
 };
 
-export default Tags;
+export default LoadingSpinnerHoc(Tags);

src/components/sideNav.js

@@ -0,0 +1,93 @@
+import React from 'react';
+import SideNav from 'react-simple-sidenav';
+import { Link } from 'react-router-dom';
+import '../components/styles.css';
+
+
+
+const LoggedOutView = props => {
+    if (!props.currentUser) {
+      return (
+        <ul className="nav side_item" onClick={props.onClick}>
+
+          <li className="nav-item">
+            <Link to="/" className="nav-link">
+              Home
+            </Link>
+          </li>
+
+          <li className="nav-item">
+            <Link to="/login" className="nav-link">
+              Sign in
+            </Link>
+          </li>
+
+          <li className="nav-item">
+            <Link to="/register" className="nav-link">
+              Sign up
+            </Link>
+          </li>
+
+        </ul>
+      );
+    }
+    return null;
+  };
+
+   const LoggedInView = props => {
+    if (props.currentUser) {
+      return (
+        <ul className="nav side_item">
+
+
+          <li className="nav-item home_item">
+            <Link to="/" className="nav-link">
+              Home
+            </Link>
+          </li>
+
+          <li className="nav-item">
+            <Link to="/editor" className="nav-link">
+              <i className="ion-compose"></i>&nbsp;New Post
+            </Link>
+          </li>
+
+          <li className="nav-item">
+            <Link to="/settings" className="nav-link">
+              <i className="ion-gear-a"></i>&nbsp;Settings
+            </Link>
+          </li>
+
+          <li className="nav-item">
+            <Link
+              to={`/@${props.currentUser.username}`}
+              className="nav-link">
+              <img src={props.currentUser.image} className="user-pic" alt={props.currentUser.username} />
+              {props.currentUser.username}
+            </Link>
+          </li>
+
+        </ul>
+      );
+    }
+
+    return null;
+  };
+
+
+const sideNav=(props)=>{
+
+    console.log(props);
+    return (<div>
+       <SideNav showNav={props.showNav} onHideNav={props.onHideSideNav}>
+       <Link to="/" className="navbar-brand">
+            {props.appName.toLowerCase()}
+          </Link>
+          <LoggedOutView currentUser={props.currentUser}/>
+
+          <LoggedInView currentUser={props.currentUser} />
+       </SideNav>
+    </div>)
+}
+
+export default sideNav;

src/components/styles.css

@@ -0,0 +1,49 @@
+
+
+
+.nav_harmburg{
+    display:none ;
+}
+@media only screen and (max-width: 768px) {
+
+
+    .nav_harmburg{
+        display: inline-block;
+    }
+
+.navbar-brand{
+    text-align: center;
+}
+
+.logout_view{
+    display: none;
+  }
+
+.logedin_view{
+    display: none;
+}
+
+.navbar-brand {
+    margin-right: 1rem!important;
+}
+
+Link i{
+    margin-right: 8%;
+}
+.side_item{
+    margin-left: 2% !important;
+
+
+}
+.nav-link{
+    color: black;
+}
+
+.home_item{
+    margin-left: 4%;
+}
+
+
+
+}
+