modify components

add routing

package.json

@@ -7,14 +7,15 @@
     "react": "^16.7.0",
     "react-dom": "^16.7.0",
     "react-redux": "^6.0.0",
+    "react-router-dom": "^4.3.1",
     "react-scripts": "2.1.2",
     "redux": "^4.0.1",
     "redux-thunk": "^2.3.0"
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
-    "test": "react-scripts test --coverage",
+    "test": "react-scripts test --coverage --collectCoverageFrom=src/**/*.js --collectCoverageFrom=!src/index.js --collectCoverageFrom=!src/serviceWorker.js",
     "eject": "react-scripts eject",
     "test:watch": "jest --watch"
   },

src/App.css

@@ -1,5 +1,5 @@
 .App {
-  text-align: center;
+
 }
 
 .App-logo {

src/App.js

@@ -1,24 +1,14 @@
 import React, { Component } from 'react';
 import './App.css';
-import Posts from './components/posts'
 import store from './store'
 import {Provider} from 'react-redux'
-import Postmenu from './components/postForm';
-import SignUp from './components/signupComponent';
-import LogIn from './components/loginComponent';
+import RouterComponent from './Router/router'
 class App extends Component {
   render() {
     return (
       <Provider store={store}>
       <div className="App">
-      <SignUp/>
-      <hr/>
-      <LogIn/>
-      <hr/>
-      <Postmenu />
-      <hr/>
-        <Posts />
-
+      <RouterComponent/> 
       </div>
       </Provider>
     );

src/Router/router.jsx

@@ -0,0 +1,27 @@
+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 React from 'react';
+import FixedNavbarExample from '../components/navbarComponent'
+
+const RouterComponent = () => {
+    return (
+        <BrowserRouter>
+        <div>
+            <FixedNavbarExample />
+        <Switch>
+            <Route path="/" component={LogIn} exact/>
+            <Route path="/signup" component={SignUp} />
+            <Route path="/addmenu" component={Postmenu} />
+            <Route path="/menu" component={Posts} />   
+            <Route path="/clock" component={Clock} />
+        </Switch>
+        </div>
+        </BrowserRouter>
+    );
+};
+
+export default RouterComponent;

src/components/clock.js

@@ -0,0 +1,40 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+export default class Clock extends React.Component {
+    constructor(props) {
+      super(props);
+      this.state = {
+        time: this.props.time
+      };
+      this.update = this.updateTime.bind(this);
+    }
+    render() {
+      var time = this.formatTime(this.state.time);
+      return (<h1>{ time.hours } : { time.minutes } : { time.seconds }</h1>);
+    }
+    componentDidMount() {
+      this.interval = setInterval(this.update, 1000);
+    }
+    componentWillUnmount() {
+      clearInterval(this.interval);
+    }
+    formatTime(time) {
+      var [hours, minutes, seconds] = [
+        time.getHours(),
+        time.getMinutes(),
+        time.getSeconds()
+      ].map(num => num < 10 ? '0' + num : num);
+      return {
+        hours,
+        minutes,
+        seconds
+      };
+    }
+    updateTime() {
+      this.setState({
+        time: new Date(this.state.time.getTime() + 1000)
+      });
+    }
+  };
+  const rest = {}
+  ReactDOM.render(<Clock time={ new Date() }/>, rest);

src/components/loginComponent.js

@@ -28,12 +28,12 @@ onSubmit(e){
 }
     render() {
         return (
-        <MDBContainer>
-      <MDBRow>
-        <MDBCol md="6">
+        <MDBContainer className="mt-5 pt-5 ">
+      <MDBRow className="flex flex-center">
+        <MDBCol  md="6">
         <form onSubmit = {this.onSubmit}>
-          <MDBCard>
-            <MDBCardBody className="mx-4">
+          <MDBCard className="mx-auto">
+            <MDBCardBody >
               <div className="text-center">
                 <h3 className="dark-grey-text mb-5">
                   <strong>Sign in</strong>

src/components/navbarComponent.js

@@ -0,0 +1,63 @@
+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 bgPink = {backgroundColor: '#e91e63'}
+    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>
+                <MDBNavbarNav left>
+                  <MDBNavItem active>
+                      <NavLink to="/">Home</NavLink>
+                  </MDBNavItem>
+                  <MDBNavItem>
+                      <NavLink to="/menu">Menu</NavLink>
+                  </MDBNavItem>
+                  <MDBNavItem>
+                      <NavLink to="/addmenu">Add Menu</NavLink>
+                  </MDBNavItem>
+                  <MDBNavItem>
+                    <NavLink to="/signup">Signup</NavLink>
+                  </MDBNavItem>
+                </MDBNavbarNav>
+                <MDBNavbarNav right>
+                  <MDBNavItem>
+                    <NavLink to="#"><MDBIcon icon="facebook" /></NavLink>
+                  </MDBNavItem>
+                  <MDBNavItem>
+                    <NavLink to="#"><MDBIcon icon="twitter" /></NavLink>
+                  </MDBNavItem>
+                  <MDBNavItem>
+                    <NavLink to="#"><MDBIcon icon="instagram" /></NavLink>
+                  </MDBNavItem>
+                </MDBNavbarNav>
+              </MDBCollapse>
+            </MDBNavbar>
+          </header>
+      </div>
+    );
+  }
+}
+
+export default FixedNavbarExample;

src/components/number.js

@@ -0,0 +1,4 @@
+function sum(a, b) {
+    return a + b;
+  }
+  module.exports = sum;

src/components/postForm.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import {connect} from 'react-redux'
 import {myMenu} from '../actions/fetchAction'
+import { MDBContainer, MDBRow, MDBCol, MDBBtn, MDBIcon } from 'mdbreact';
 class Postmenu extends React.Component {
     constructor(props) {
         super(props);
@@ -28,27 +29,59 @@ class Postmenu extends React.Component {
     }
     render() {
         return (
-            <div>
-                <h1>Add Menu</h1>
-                <form onSubmit = {this.onSubmit}>
-                    <div>
-                        <label>meal:</label> 
-                        <input type="text" name='meal' onChange={this.onChange} />
-                    </div>
-                    <br/>
-                    <div>
-                        <label>description:</label> 
-                        <input type="text" name='description' onChange={this.onChange} />
-                    </div>
-                    <br/>
-                    <div>
-                        <label>price:</label> 
-                        <input type="number" name='price' onChange={this.onChange} />
-                    </div>
-                    <br/>
-                    <button type='submit'>Submit</button>
-                </form>
+    <MDBContainer className="mt-5 pt-5">
+      <MDBRow>
+        <MDBCol md="6">
+          <form  onSubmit = {this.onSubmit}>
+            <p className="h4 text-center mb-4" color = 'elegant-color-dark'>Add menu</p>
+            <label htmlFor="defaultFormContactNameEx" className="grey-text">
+              Meal 
+            </label>
+            <input
+              type="text"
+              name='meal'
+              onChange={this.onChange} 
+              id="defaultFormContactNameEx"
+              className="form-control"
+            />
+            <br />
+            <label htmlFor="defaultFormContactEmailEx" className="grey-text">
+              price
+            </label>
+            <input
+              type="number" 
+              name='price' 
+              onChange={this.onChange}
+              id="defaultFormContactEmailEx"
+              className="form-control"
+            />
+            <br />
+            <label
+              htmlFor="defaultFormContactMessageEx"
+              className="grey-text"
+            >
+              Description
+            </label>
+            <textarea
+              type="text"
+              name='description' 
+              onChange={this.onChange}
+              id="defaultFormContactMessageEx"
+              className="form-control"
+              rows="3"
+            />
+            <div className="text-start mt-4">
+              <MDBBtn color="warning" outline type="submit">
+                Send
+                <MDBIcon icon="paper-plane-o" className="ml-2" />
+              </MDBBtn>
             </div>
+          </form>
+        </MDBCol>
+      </MDBRow>
+    </MDBContainer>
+
+
         );
     }
 }
@@ -57,6 +90,3 @@ export default connect (
     null,
     {myMenu}
 ) (Postmenu)
-
-
-

src/components/posts.test.js

@@ -2,12 +2,12 @@ import React from 'react';
 import { shallow, configure } from 'enzyme';
 import Posts from '../../src/components/posts';
 import Adapter from 'enzyme-adapter-react-16';
+import sum from '../components/number'
 
-configure({ adapter: new Adapter()})
 describe('Post', () => {
     let wrapper = shallow(<Posts/>);
     it('should render post', () => {
         expect(wrapper.containsMatchingElement(<div/>)).toEqual(false);
 
     });
-});
+});

src/components/signupComponent.js

@@ -31,8 +31,8 @@ onSubmit(e){
 }
     render() {
         return (
-            <MDBContainer>
-            <MDBRow>
+            <MDBContainer className="mt-5 pt-5 ">
+            <MDBRow className="flex flex-center">
                 <MDBCol md="6">
                 <form onSubmit = {this.onSubmit}>
                 <MDBCard>
@@ -138,4 +138,4 @@ onSubmit(e){
 export default connect (
     null,
     {registerAction}
-) (SignUp);
+) (SignUp);