feat(react-redux): code refactor

change the code base structure to have the file structure similar to that recommended for react applications

package.json

@@ -15,7 +15,7 @@
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
-    "test": "react-scripts test --coverage --collectCoverageFrom=src/**/*.js --collectCoverageFrom=!src/index.js --collectCoverageFrom=!src/serviceWorker.js",
+    "test": "react-scripts test --coverage --collectCoverageFrom=src/**/*.js --collectCoverageFrom=src/**/*.jsx --collectCoverageFrom=!src/index.jsx --collectCoverageFrom=!src/serviceWorker.js",
     "eject": "react-scripts eject",
     "test:watch": "jest --watch"
   },

src/Router/router.jsx

@@ -1,11 +1,10 @@
 import {BrowserRouter, Route, Switch} from 'react-router-dom'
-import Postmenu from '../components/postForm';
-import SignUp from '../components/signupComponent';
-import LogIn from '../components/loginComponent';
-import Posts from '../components/posts'
-import Clock from '../components/clock'
+import Postmenu from '../container/Menu/Menu';
+import SignUp from '../container/Signup/Signup';
+import LogIn from '../container/Login/Login';
+import Posts from '../container/GetMenu/GetMenu'
 import React from 'react';
-import FixedNavbarExample from '../components/navbarComponent'
+import FixedNavbarExample from '../container/NavBar/NavBar'
 
 const RouterComponent = () => {
     return (
@@ -17,7 +16,6 @@ const RouterComponent = () => {
             <Route path="/signup" component={SignUp} />
             <Route path="/addmenu" component={Postmenu} />
             <Route path="/menu" component={Posts} />   
-            <Route path="/clock" component={Clock} />
         </Switch>
         </div>
         </BrowserRouter>

src/components/LoginForm/LoginForm.jsx

@@ -0,0 +1,111 @@
+import React from "react";
+import {
+  MDBContainer,
+  MDBRow,
+  MDBCol,
+  MDBCard,
+  MDBCardBody,
+  MDBInput,
+  MDBBtn,
+  MDBIcon,
+  MDBModalFooter
+} from "mdbreact";
+
+const LoginForm = ({ onChange, onSubmit }) => {
+  return (
+    <MDBContainer className="mt-5 pt-5 ">
+      <MDBRow className="flex flex-center">
+        <MDBCol md="6">
+          <form onSubmit={onSubmit}>
+            <MDBCard className="mx-auto">
+              <MDBCardBody>
+                <div className="text-center">
+                  <h3 className="dark-grey-text mb-5">
+                    <strong>Sign in</strong>
+                  </h3>
+                </div>
+                <MDBInput
+                  label="Your Username"
+                  group
+                  type="text"
+                  name="username"
+                  onChange={onChange}
+                  validate
+                  error="wrong"
+                  success="right"
+                />
+                <MDBInput
+                  label="Your password"
+                  group
+                  type="password"
+                  name="password"
+                  onChange={onChange}
+                  validate
+                  containerClass="mb-0"
+                />
+                <p className="font-small blue-text d-flex justify-content-end pb-3">
+                  Forgot
+                  <a href="#!" className="blue-text ml-1">
+                    Password?
+                  </a>
+                </p>
+                <div className="text-center mb-3">
+                  <MDBBtn
+                    gradient="blue"
+                    rounded
+                    type="submit"
+                    className="btn-block z-depth-1a"
+                  >
+                    Sign in
+                  </MDBBtn>
+                </div>
+                <p className="font-small dark-grey-text text-right d-flex justify-content-center mb-3 pt-2">
+                  or Sign in with:
+                </p>
+                <div className="row my-3 d-flex justify-content-center">
+                  <MDBBtn
+                    type="button"
+                    color="white"
+                    rounded
+                    className="mr-md-3 z-depth-1a"
+                  >
+                    <MDBIcon
+                      icon="facebook"
+                      className="blue-text text-center"
+                    />
+                  </MDBBtn>
+                  <MDBBtn
+                    type="button"
+                    color="white"
+                    rounded
+                    className="mr-md-3 z-depth-1a"
+                  >
+                    <MDBIcon icon="twitter" className="blue-text" />
+                  </MDBBtn>
+                  <MDBBtn
+                    type="button"
+                    color="white"
+                    rounded
+                    className="z-depth-1a"
+                  >
+                    <MDBIcon icon="google-plus" className="blue-text" />
+                  </MDBBtn>
+                </div>
+              </MDBCardBody>
+              <MDBModalFooter className="mx-5 pt-3 mb-1">
+                <p className="font-small grey-text d-flex justify-content-end">
+                  Not a member?
+                  <a href="./signup" className="blue-text ml-1">
+                    Sign Up
+                  </a>
+                </p>
+              </MDBModalFooter>
+            </MDBCard>
+          </form>
+        </MDBCol>
+      </MDBRow>
+    </MDBContainer>
+  );
+};
+
+export default LoginForm;

src/components/navbarComponent.js → src/components/NavBar/Navbar.jsx

@@ -1,32 +1,18 @@
 import React from 'react';
 import {MDBNavbar, NavLink, MDBNavbarBrand, MDBNavbarNav, MDBNavbarToggler, MDBCollapse, MDBNavItem, MDBIcon } from 'mdbreact';
 
-class FixedNavbarExample extends React.Component {
-  constructor(props) {
-      super(props);
-      this.state = {
-          collapse: false,
-      };
-      this.onClick = this.onClick.bind(this);
-  }
 
-  onClick() {
-    this.setState({
-        collapse: !this.state.collapse,
-      });
-  }
-
-  render() {
+const Navbar = ({onClick, isOpen}) => {
     const bgPink = {backgroundColor: '#e91e63'}
-    return(
-      <div >
+    return (
+        <div >
           <header>
             <MDBNavbar style={bgPink} color="grey darken-3"  dark expand="md" scrolling fixed="top">
               <MDBNavbarBrand href="/">
                   <strong>FAST FOOD FAST</strong>
               </MDBNavbarBrand>
-              <MDBNavbarToggler onClick={ this.onClick } />
-              <MDBCollapse isOpen = { this.state.collapse } navbar>
+              <MDBNavbarToggler onClick={onClick } />
+              <MDBCollapse isOpen = { isOpen } navbar>
                 <MDBNavbarNav left>
                   <MDBNavItem active>
                       <NavLink to="/">Home</NavLink>
@@ -57,7 +43,7 @@ class FixedNavbarExample extends React.Component {
           </header>
       </div>
     );
-  }
-}
+};
+
 
-export default FixedNavbarExample;
+export default Navbar;

src/components/NavBar/Navbar.spec.jsx

@@ -0,0 +1,17 @@
+import React from "react";
+import { shallow } from "enzyme";
+import Navbar from "./Navbar";
+
+let props = {
+  onChange: jest.fn(),
+  onSubmit: jest.fn(),
+};
+describe("Test Navbar", () => {
+  let wrapper;
+  beforeEach(() => {
+    wrapper = shallow(<Navbar {...props} />);
+  });
+  it("Navbar snapshot", () => {
+    expect(wrapper).toMatchSnapshot();
+  });
+});