Added sidebar component

client/config/paths.js

@@ -72,7 +72,7 @@ module.exports = {
   appBuild: resolveApp('build'),
   appPublic: resolveApp('public'),
   appHtml: resolveApp('public/index.html'),
-  appIndexJs: resolveModule(resolveApp, 'src/main'),
+  appIndexJs: resolveModule(resolveApp, 'src/app/main'),
   appPackageJson: resolveApp('package.json'),
   appSrc: resolveApp('src/app'),
   appTsConfig: resolveApp('tsconfig.json'),

client/public/index.html

@@ -17,7 +17,6 @@
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <link rel="stylesheet" type="text/css" href="./index.css" />
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.

client/src/app/components/atoms/InputField/InputField.js

@@ -1,10 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import styles from './InputField.module.scss';
 
 const InputField = ({meta}) => {
   return (
-    <div className={styles['c-InputField']}>
+    <div className='c-InputField'>
       <div
             className={`form-group row ${
                 meta.container_class ? meta.container_class : ''

client/src/app/components/index.js

@@ -1,4 +1,5 @@
 /* PLOP_INJECT_IMPORT */
+import SideBarTab from './SideBarTab';
 import SideBar from './SideBar';
 import Jumbotron from './Jumbotron';
 import FormFieldContainer from './FormFieldContainer';
@@ -12,6 +13,7 @@ import PageLoader from './PageLoader';
 
 export {
   /* PLOP_INJECT_EXPORT */
+	SideBarTab,
 	SideBar,
 	Jumbotron,
 	FormFieldContainer,

client/src/app/components/molecules/LoginForm/LoginForm.js

@@ -1,13 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import styles from './LoginForm.module.scss';
 
 import loginFormFields from './../../../config/forms-meta/login-form.json'
 import Form from './../common/Form'
 
 const LoginForm = props => {
   return (
-    <div className={styles['c-LoginForm']}>
+    <div className='c-LoginForm'>
       <Form 
         metaData={loginFormFields} 
         context="login"

client/src/app/components/molecules/PageLoader/PageLoader.js

@@ -1,28 +0,0 @@
-import React from 'react';
-import styles from './PageLoader.module.scss';
-
-const PageLoader = props => {
-  return (
-      <div className={styles['c-PageLoader']}>
-        <div className={styles['is-animate']}>
-          <div className={styles.l}>l</div>
-          <div className={styles.l}>o</div>
-          <div className={styles.l}>a</div>
-          <div className={styles.l}>d</div>
-          <div className={styles.l}>i</div>
-          <div className={styles.l}>n</div>
-          <div className={styles.l}>g</div>
-        </div>
-      </div>
-  )
-};
-
-PageLoader.defaultProps = {
-
-};
-
-PageLoader.propTypes = {
-
-};
-
-export default PageLoader;

client/src/app/components/molecules/PageLoader/PageLoader.jsx

@@ -0,0 +1,27 @@
+import React from 'react';
+
+const PageLoader = props => {
+  return (
+      <div className='c-PageLoader'>
+        <div className='is-animate'>
+          <div className='l'>l</div>
+          <div className='l'>o</div>
+          <div className='l'>a</div>
+          <div className='l'>d</div>
+          <div className='l'>i</div>
+          <div className='l'>n</div>
+          <div className='l'>g</div>
+        </div>
+      </div>
+  )
+};
+
+PageLoader.defaultProps = {
+
+};
+
+PageLoader.propTypes = {
+
+};
+
+export default PageLoader;

client/src/app/components/molecules/PageLoader/index.js

@@ -1,3 +1,3 @@
-import PageLoader from './PageLoader';
+import PageLoader from './PageLoader.jsx';
 
 export default PageLoader;

client/src/app/components/molecules/SideBar/SideBar.component.scss

@@ -7,7 +7,7 @@ $theme-supplementer: #5D001E;
 $theme-supplementer-transparent: rgba(93,0,30,0.3);
 
 .c-SideBar {
-    background: $theme-supplementer-transparent;
+    // background: $theme-supplementer-transparent;
     z-index: 20;
     
     p {

client/src/app/components/molecules/SideBar/SideBar.js

@@ -1,52 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import styles from './SideBar.module.scss';
-
-const SideBar = props => {
-  // return (
-  //   <nav id="sidebar" class="active">
-  // <div class="sidebar-header">
-  //   <button type="button" id="sidebarCollapse" class="btn btn-info">
-  //     <i class="fas fa-align-justify"></i>
-  //   </button>
-  //   <h3 class="logotext">Microbot</h3>
-  //   <!-- <strong>MB</strong> -->
-  // </div>
-
-  // <ul class="list-unstyled components">
-  //   <li *ngFor="let tab of tabsData"
-  //       [ngClass]="{active: tab.activeClass}">
-  //     <a [routerLink]="tab.href">
-  //       <i [ngClass]="['fas', tab.tabImage]"></i>
-  //       <span class="hideable hide">{{tab.tabText}}</span>
-  //     </a>
-  //     <ul 
-  //       class="collapse list-unstyled" 
-  //       id="pageSubmenu"
-  //       *ngIf="tab.subList">
-  //       <li>
-  //         <a href="#">Repo</a>
-  //       </li>
-  //       <li>
-  //         <a href="#">Issues</a>
-  //       </li>
-  //       <li>
-  //         <a href="#">Admin</a>
-  //       </li>
-  //     </ul>
-  //   </li>
-  //   </ul>
-  //   </nav>
-  // );
-  return null
-};
-
-SideBar.defaultProps = {
-
-};
-
-SideBar.propTypes = {
-
-};
-
-export default SideBar;

client/src/app/components/molecules/SideBar/SideBar.jsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import SideBarTab from './SideBarTab';
+
+const SideBar = props => {
+  const tabsData = [
+    {'href': 'homeSubmenu', 'tabImage': 'fa-home', 'tabText': 'Home', 'activeClass': true, 'subList': false},
+    {'href': 'about', 'tabImage': 'fa-briefcase', 'tabText': 'About', 'activeClass': false, 'subList': false},
+    {'href': 'pageSubmenu', 'tabImage': 'fa-copy', 'tabText': 'Tasks', 'activeClass': false, 'subList': true},
+    {'href': 'favorites', 'tabImage': 'fa-image', 'tabText': 'Favorites', 'activeClass': false, 'subList': false},
+    {'href': 'question', 'tabImage': 'fa-question', 'tabText': 'FAQ', 'activeClass': false, 'subList': false},
+    {'href': 'contact', 'tabImage': 'fa-paper-plane', 'tabText': 'Contact', 'activeClass': false, 'subList': false},
+  ]
+  const tabItems = tabsData && tabsData.map((tab) => {
+    return <SideBarTab tab={tab} />
+  })
+  return (
+    <div className="c-SideBar">
+      <nav id="sidebar" class="active">
+        <div class="sidebar-header">
+          <button type="button" id="sidebarCollapse" class="btn btn-info">
+            <i class="fas fa-align-justify"></i>
+          </button>
+          <h3 class="logotext">Microbot</h3>
+        </div>
+        <ul class="list-unstyled components">
+          {tabItems}
+        </ul>
+      </nav>
+    </div>
+  )
+};
+
+
+SideBar.propTypes = {
+  tabsData: PropTypes.array
+};
+
+export default SideBar;

client/src/app/components/molecules/SideBar/SideBarTab/SideBarTab.jsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {Link} from 'react-router-dom'
+
+const SideBarTab = ({tab}) => {
+  return (
+    <li className={tab.activeClass ? 'active' : ''}>
+      <Link href={tab.href}>
+        <i className={`fas ${tab.tabImage}`}></i>
+        <span className="hideable hide">{tab.tabText}</span>
+      </Link>
+      {tab.subList && (<ul 
+        className="collapse list-unstyled" 
+        id="pageSubmenu">
+        <li>
+          <Link href="#">Repo</Link>
+        </li>
+        <li>
+          <Link href="#">Issues</Link>
+        </li>
+        <li>
+          <Link href="#">Admin</Link>
+        </li>
+      </ul>)}
+    </li>
+  );
+};
+
+SideBarTab.propTypes = {
+  tab: PropTypes.object
+};
+
+export default SideBarTab;

client/src/app/components/molecules/SideBar/SideBarTab/SideBarTab.module.scss

@@ -0,0 +1,3 @@
+.c-SideBarTab {
+  
+}

client/src/app/components/molecules/SideBar/SideBarTab/SideBarTab.test.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import SideBarTab from './SideBarTab';
+
+describe('SideBarTab', () => {
+   it('renders without error', () => {
+
+   });
+});

client/src/app/components/molecules/SideBar/SideBarTab/index.js

@@ -0,0 +1,3 @@
+import SideBarTab from './SideBarTab.jsx';
+
+export default SideBarTab;

client/src/app/components/molecules/SideBar/index.js

@@ -1,3 +1,3 @@
-import SideBar from './SideBar';
+import SideBar from './SideBar.jsx';
 
 export default SideBar;

client/src/app/components/molecules/SocialLogin/SocialLogin.jsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import {withRouter} from 'react-router-dom'
 import {gapi} from 'gapi-script'
-import styles from './SocialLogin.module.scss';
 
 class SocialLogin extends React.Component{
 
@@ -27,7 +26,7 @@ class SocialLogin extends React.Component{
 
   onSuccess(googleUser) {
     console.log('Logged in as: ' + googleUser.getBasicProfile().getName());
-    // this.props.history.push('/home')
+    this.props.history.push('/home')
   }
 
   onFailure(error) {
@@ -36,7 +35,7 @@ class SocialLogin extends React.Component{
 
   render() {
     return (
-      <div className={styles['c-SocialLogin']}>
+      <div className='c-SocialLogin'>
         <div className="row">
           <div className="col-12">
             <div className="g-signin2" id="g-signin2"></div>

client/src/app/components/molecules/SocialLogin/index.js

@@ -1,3 +1,3 @@
-import SocialLogin from './SocialLogin';
+import SocialLogin from './SocialLogin.jsx';
 
 export default SocialLogin;

client/src/app/components/molecules/common/Form/Form.js

@@ -1,6 +1,5 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import * as styles from './Form.module.scss'
 import FormFieldContainer from '../FormFieldContainer';
 
 class Form extends React.Component {
@@ -78,7 +77,7 @@ class Form extends React.Component {
         })
 
         return (
-            <form className={styles['c-Form']} onSubmit={this.handleSubmit}>
+            <form className='c-Form' onSubmit={this.handleSubmit}>
                 <fieldset>{inputListSection}</fieldset>
                 <button type="submit" className="btn btn-primary btn-block" style={{marginTop: '15px', background: 'black'}}>Submit</button>
             </form>

client/src/app/components/molecules/common/Jumbotron/Jumbotron.component.scss

@@ -1,4 +1,5 @@
 .c-Jumbotron {
+  padding: 1rem;
   background: #222;
   color: #bbbbbb;
   margin-bottom: 0;

client/src/app/components/molecules/common/Jumbotron/Jumbotron.jsx

@@ -1,14 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types'
-import styles from './Jumbotron.module.scss';
 import {Link} from 'react-router-dom'
 
 const Jumbotron = props => {
   return (
-    <div className={`${styles['c-Jumbotron']} jumbotron`}>
+    <div className='c-Jumbotron'>
       <h1 className="display-4">{props.jumboText}</h1>
       <p className="lead">{props.subText}</p>
-      <hr className={`${styles['my-4']} my-4`}/>
+      <hr className='my-4' />
       <p>{props.jumboDescription}</p>
       <p className="lead">
         <Link className="btn btn-primary btn-lg" to="#" role="button">Let's get started</Link>

client/src/app/components/molecules/common/Jumbotron/Jumbotron.test.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import Jumbotron from './Jumbotron';
+import Jumbotron from './Jumbotron.jsx';
 
 describe('Jumbotron', () => {
    it('renders without error', () => {

client/src/app/components/molecules/common/Jumbotron/index.js

@@ -1,3 +1,3 @@
-import Jumbotron from './Jumbotron';
+import Jumbotron from './Jumbotron.jsx';
 
 export default Jumbotron;

client/src/app/index.scss

@@ -1,3 +1,8 @@
+@charset 'UTF-8';
+
+@import 'styles/components';
+@import 'styles/pages';
+
 body {
   margin: 0;
   background-color: #222!important;

client/src/app/main.js

@@ -2,14 +2,14 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import thunk from 'redux-thunk'
 import {createStore, applyMiddleware} from 'redux'
-import * as serviceWorker from './serviceWorker';
-import Router from './app/router';
-import reducer from './app/reducer'
-import './index.css'
+// import * as serviceWorker from '../serviceWorker';
+import Router from './router';
+import reducer from './reducer'
+import './index.scss'
 import 'bootstrap/dist/css/bootstrap.min.css'
 
 const store = createStore(reducer, applyMiddleware(thunk))
 
 ReactDOM.render(<Router store={store} />, document.getElementById('root'));
 
-serviceWorker.unregister();
+// serviceWorker.unregister();

client/src/app/pages/Home/Home.jsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import styles from './Home.module.css';
 import {connect} from 'react-redux'
 import {createPropsSelector} from 'reselect-immutable-helpers'
 
@@ -22,7 +21,7 @@ class Home extends React.Component {
 
     render() {
         return (
-            <div className={styles.Home}>
+            <div className="Home">
                 <Sidebar />
             </div>
         )

client/src/app/pages/Login/Login.jsx

@@ -8,7 +8,7 @@ import * as actions from './actions'
 import {getLogin, getFormErrors, getFormValues} from './selectors'
 import LoginForm from '../../components/molecules/LoginForm'
 import SocialLogin from '../../components/molecules/SocialLogin'
-import Jumbotron from '../../components/molecules/common/Jumbotron/Jumbotron'
+import Jumbotron from '../../components/molecules/common/Jumbotron'
 
 class Login extends React.Component {
     constructor(props) {

client/src/app/styles/_components.scss

@@ -1,8 +1,11 @@
 // Components
 // ===
 
-// @import '../components/footer/style';
-// @import '../components/header/style';
-// @import '../components/email-subscribe/style';
-// @import '../components/page-loader/style';
+@import '../components/atoms/InputField/InputField.component';
+@import '../components/molecules/common/Form/Form.component';
+@import '../components/molecules/common/Jumbotron/Jumbotron.component';
+@import '../components/molecules/LoginForm/LoginForm.component';
+@import '../components/molecules/PageLoader/PageLoader.component';
+@import '../components/molecules/SocialLogin/SocialLogin.component';
+@import '../components/molecules/SideBar/SideBar.component';
 // @import '../preloader/preload';

client/src/app/styles/_pages.scss

@@ -1,7 +1,5 @@
 // Pages
 // ===
 
-@import '../index';
-// @import '../pages/home/style';
-// @import '../pages/product-list/style';
-// @import '../pages/product-details/style';
+@import '../pages/Home/Home.module';
+@import '../pages/Login/Login.module';