add main menu navigation and door lock charges page

This commit is contained in:
Bilal Catic
2019-05-27 14:39:22 +02:00
parent c67b203bec
commit ed457e470f
9 changed files with 145 additions and 4 deletions

View File

@@ -6,7 +6,9 @@
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-router-dom": "^5.0.0",
"react-scripts": "3.0.1"
"react-scripts": "3.0.1",
"semantic-ui-css": "^2.4.1",
"semantic-ui-react": "^0.87.1"
},
"scripts": {
"start": "react-scripts start",

View File

@@ -1,15 +1,20 @@
import React, { Component } from 'react';
import './App.css';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Home from './scenes/Home';
import NotFound from './scenes/NotFound';
import { mainMenuItems } from './constants/menuItems';
class App extends Component {
render() {
return (
<Router>
<Switch>
<Route exact path="/" component={Home} />
{
mainMenuItems.map(mainMenuItem =>
<Route exact path={mainMenuItem.url} component={mainMenuItem.component} />)
}
<Route component={NotFound} />
</Switch>
</Router>

View File

@@ -0,0 +1,15 @@
import React from 'react';
import { NavLink } from 'react-router-dom';
import { Menu } from 'semantic-ui-react';
import { mainMenuItems} from "../../constants/menuItems";
const MainMenu = () =>
(<Menu>
{
mainMenuItems.map(mainMenuItem =>
<Menu.Item as={NavLink} to={mainMenuItem.url} exact>{mainMenuItem.title}</Menu.Item>)
}
</Menu>);
export default MainMenu;

View File

@@ -0,0 +1,15 @@
import DoorLockCharges from "../scenes/DoorLockCharges";
import Home from "../scenes/Home";
export const mainMenuItems = [
{
title: 'Home',
url: '/',
component: Home,
},
{
title: 'Door Lock Charges',
url: '/door-lock-charges',
component: DoorLockCharges,
},
];

View File

@@ -1,6 +1,7 @@
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import 'semantic-ui-css/semantic.min.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

View File

@@ -0,0 +1,18 @@
import React, { Component } from 'react';
import MainMenu from '../../components/MainMenu';
class DoorLockCharges extends Component {
render () {
return (
<div>
<MainMenu/>
<h3>Door Lock Charges</h3>
<hr/>
</div>
);
}
}
export default DoorLockCharges;

View File

@@ -1,5 +1,7 @@
import React, { Component } from 'react';
import MainMenu from '../../components/MainMenu';
class Home extends Component {
state = {
apiStatus: 'loading',
@@ -24,6 +26,7 @@ class Home extends Component {
const {apiStatus} = this.state;
return (
<div>
<MainMenu/>
<h3>CRM Integration</h3>
<hr/>
<h5>Integration API Status : {apiStatus}</h5>

View File

@@ -1,8 +1,11 @@
import React from 'react';
import MainMenu from "../../components/MainMenu";
export default function NotFound () {
return (
<div>
<MainMenu/>
<hr />
<h1>Page not found</h1>
</div>
);

View File

@@ -981,6 +981,13 @@
version "1.1.3"
resolved "https://registry.yarnpkg.com/@nodelib/fs.stat/-/fs.stat-1.1.3.tgz#2b5a3ab3f918cca48a8c754c08168e3f03eba61b"
"@semantic-ui-react/event-stack@^3.1.0":
version "3.1.0"
resolved "https://registry.yarnpkg.com/@semantic-ui-react/event-stack/-/event-stack-3.1.0.tgz#aadbe4a28b0dd7703c5f451640d0fefe66dd9208"
dependencies:
exenv "^1.2.2"
prop-types "^15.6.2"
"@svgr/babel-plugin-add-jsx-attribute@^4.2.0":
version "4.2.0"
resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-4.2.0.tgz#dadcb6218503532d6884b210e7f3c502caaa44b1"
@@ -2126,6 +2133,10 @@ class-utils@^0.3.5:
isobject "^3.0.0"
static-extend "^0.1.1"
classnames@^2.2.6:
version "2.2.6"
resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce"
clean-css@4.2.x:
version "4.2.1"
resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.2.1.tgz#2d411ef76b8569b6d0c84068dabe85b0aa5e5c17"
@@ -2424,6 +2435,13 @@ create-hmac@^1.1.0, create-hmac@^1.1.2, create-hmac@^1.1.4:
safe-buffer "^5.0.1"
sha.js "^2.4.8"
create-react-context@<=0.2.2:
version "0.2.2"
resolved "https://registry.yarnpkg.com/create-react-context/-/create-react-context-0.2.2.tgz#9836542f9aaa22868cd7d4a6f82667df38019dca"
dependencies:
fbjs "^0.8.0"
gud "^1.0.0"
create-react-context@^0.2.2:
version "0.2.3"
resolved "https://registry.yarnpkg.com/create-react-context/-/create-react-context-0.2.3.tgz#9ec140a6914a22ef04b8b09b7771de89567cb6f3"
@@ -3258,6 +3276,10 @@ execa@^1.0.0:
signal-exit "^3.0.0"
strip-eof "^1.0.0"
exenv@^1.2.2:
version "1.2.2"
resolved "https://registry.yarnpkg.com/exenv/-/exenv-1.2.2.tgz#2ae78e85d9894158670b03d47bec1f03bd91bb9d"
exit@^0.1.2:
version "0.1.2"
resolved "https://registry.yarnpkg.com/exit/-/exit-0.1.2.tgz#0632638f8d877cc82107d30a0fff1a17cba1cd0c"
@@ -4868,6 +4890,10 @@ jest@24.7.1:
import-local "^2.0.0"
jest-cli "^24.7.1"
jquery@x.*:
version "3.4.1"
resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.4.1.tgz#714f1f8d9dde4bdfa55764ba37ef214630d80ef2"
js-levenshtein@^1.1.3:
version "1.1.6"
resolved "https://registry.yarnpkg.com/js-levenshtein/-/js-levenshtein-1.1.6.tgz#c6cee58eb3550372df8deb85fad5ce66ce01d59d"
@@ -5028,6 +5054,10 @@ jsx-ast-utils@^2.0.1:
dependencies:
array-includes "^3.0.3"
keyboard-key@^1.0.4:
version "1.0.4"
resolved "https://registry.yarnpkg.com/keyboard-key/-/keyboard-key-1.0.4.tgz#52d8fa07b7e17757072aa22a67fb4ae85e4c46b0"
killable@^1.0.0:
version "1.0.1"
resolved "https://registry.yarnpkg.com/killable/-/killable-1.0.1.tgz#4c8ce441187a061c7474fb87ca08e2a638194892"
@@ -6097,6 +6127,10 @@ pnp-webpack-plugin@1.2.1:
dependencies:
ts-pnp "^1.0.0"
popper.js@^1.14.4:
version "1.15.0"
resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.15.0.tgz#5560b99bbad7647e9faa475c6b8056621f5a4ff2"
portfinder@^1.0.9:
version "1.0.20"
resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.20.tgz#bea68632e54b2e13ab7b0c4775e9b41bf270e44a"
@@ -6745,7 +6779,7 @@ prompts@^2.0.1:
kleur "^3.0.2"
sisteransi "^1.0.0"
prop-types@^15.6.2:
prop-types@^15.6.1, prop-types@^15.6.2:
version "15.7.2"
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
dependencies:
@@ -6942,6 +6976,17 @@ react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.4:
version "16.8.6"
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.8.6.tgz#5bbc1e2d29141c9fbdfed456343fe2bc430a6a16"
react-popper@^1.3.3:
version "1.3.3"
resolved "https://registry.yarnpkg.com/react-popper/-/react-popper-1.3.3.tgz#2c6cef7515a991256b4f0536cd4bdcb58a7b6af6"
dependencies:
"@babel/runtime" "^7.1.2"
create-react-context "<=0.2.2"
popper.js "^1.14.4"
prop-types "^15.6.1"
typed-styles "^0.0.7"
warning "^4.0.2"
react-router-dom@^5.0.0:
version "5.0.0"
resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-5.0.0.tgz#542a9b86af269a37f0b87218c4c25ea8dcf0c073"
@@ -7434,6 +7479,26 @@ selfsigned@^1.9.1:
dependencies:
node-forge "0.7.5"
semantic-ui-css@^2.4.1:
version "2.4.1"
resolved "https://registry.yarnpkg.com/semantic-ui-css/-/semantic-ui-css-2.4.1.tgz#f5aea39fafb787cbd905ec724272a3f9cba9004a"
dependencies:
jquery x.*
semantic-ui-react@^0.87.1:
version "0.87.1"
resolved "https://registry.yarnpkg.com/semantic-ui-react/-/semantic-ui-react-0.87.1.tgz#249cca258fe05ee0a7095d8be0b3a749f34a1837"
dependencies:
"@babel/runtime" "^7.1.2"
"@semantic-ui-react/event-stack" "^3.1.0"
classnames "^2.2.6"
keyboard-key "^1.0.4"
lodash "^4.17.11"
prop-types "^15.6.2"
react-is "^16.7.0"
react-popper "^1.3.3"
shallowequal "^1.1.0"
"semver@2 || 3 || 4 || 5", semver@^5.3.0, semver@^5.4.1, semver@^5.5.0, semver@^5.5.1, semver@^5.6.0:
version "5.7.0"
resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.0.tgz#790a7cf6fea5459bac96110b29b60412dc8ff96b"
@@ -7551,6 +7616,10 @@ shallow-clone@^1.0.0:
kind-of "^5.0.0"
mixin-object "^2.0.1"
shallowequal@^1.1.0:
version "1.1.0"
resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-1.1.0.tgz#188d521de95b9087404fd4dcb68b13df0ae4e7f8"
shebang-command@^1.2.0:
version "1.2.0"
resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-1.2.0.tgz#44aac65b695b03398968c39f363fee5deafdf1ea"
@@ -8174,6 +8243,10 @@ type-is@~1.6.17, type-is@~1.6.18:
media-typer "0.3.0"
mime-types "~2.1.24"
typed-styles@^0.0.7:
version "0.0.7"
resolved "https://registry.yarnpkg.com/typed-styles/-/typed-styles-0.0.7.tgz#93392a008794c4595119ff62dde6809dbc40a3d9"
typedarray@^0.0.6:
version "0.0.6"
resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
@@ -8450,6 +8523,12 @@ walker@^1.0.7, walker@~1.0.5:
dependencies:
makeerror "1.0.x"
warning@^4.0.2:
version "4.0.3"
resolved "https://registry.yarnpkg.com/warning/-/warning-4.0.3.tgz#16e9e077eb8a86d6af7d64aa1e05fd85b4678ca3"
dependencies:
loose-envify "^1.0.0"
watchpack@^1.5.0:
version "1.6.0"
resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-1.6.0.tgz#4bc12c2ebe8aa277a71f1d3f14d685c7b446cd00"