Make password configurable / add UI for upload

client/src/App.js

@@ -1,15 +1,24 @@
 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 key={mainMenuItem.id}
+                                   exact
+                                   path={mainMenuItem.url}
+                                   component={mainMenuItem.component}
+                            />)
+                    }
                     <Route component={NotFound} />
                 </Switch>
             </Router>

client/src/components/MainMenu/index.js

@@ -0,0 +1,21 @@
+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 key={mainMenuItem.id}
+                           as={NavLink}
+                           to={mainMenuItem.url}
+                           exact
+                >
+                    {mainMenuItem.title}
+                </Menu.Item>)
+        }
+    </Menu>);
+
+export default MainMenu;

client/src/constants/menuItems.js

@@ -0,0 +1,17 @@
+import UploadDLockData from "../scenes/UploadDLockData";
+import Home from "../scenes/Home";
+
+export const mainMenuItems = [
+    {
+        id: 'home',
+        title: 'Home',
+        url: '/',
+        component: Home,
+    },
+    {
+        id: 'uploadDLockData',
+        title: 'DLock',
+        url: '/dlock',
+        component: UploadDLockData,
+    },
+];

client/src/index.js

@@ -1,10 +1,17 @@
 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';
+import { Provider } from 'react-redux';
+import { createStore, applyMiddleware } from 'redux';
+import thunkMiddleware from 'redux-thunk';
+import { rootReducer } from "./store/reducers";
 
-ReactDOM.render(<App />, document.getElementById('root'));
+const store = createStore(rootReducer, applyMiddleware(thunkMiddleware));
+
+ReactDOM.render(<Provider store={store}><App /></Provider>, document.getElementById('root'));
 
 // If you want your app to work offline and load faster, you can change
 // unregister() to register() below. Note this comes with some pitfalls.

client/src/scenes/Home/index.js

@@ -1,34 +1,35 @@
 import React, { Component } from 'react';
 
-class Home extends Component {
-    state = {
-        apiStatus: 'loading',
-    };
+import { Container, Form } from "semantic-ui-react";
 
-    componentDidMount() {
-        fetch('/api')
-            .then(response => response.json())
-            .then(result => {
-                console.log(result);
-                if (result.status === 1) {
-                    this.setState({apiStatus: 'working'});
-                } else {
-                    this.setState({apiStatus: 'NOT WORKING !'});
-                }
-            })
-            .catch(err => {
-                this.setState({apiStatus: `ERROR : ${err}`});
-            })
-    }
+import MainMenu from '../../components/MainMenu';
+
+class Home extends Component {
 
     render () {
-        const {apiStatus} = this.state;
         return (
-            <div>
-                <h3>CRM Integration</h3>
+            <Container>
+                <MainMenu/>
+                <h3>Report</h3>
                 <hr/>
-                <h5>Integration API Status : {apiStatus}</h5>
-            </div>
+                <Form>
+                    <Form.Group widths="equal">
+                        <Form.Input
+                            fluid
+                            required
+                            label="Start date"
+                            type="date"
+                        />
+                        <Form.Input
+                            fluid
+                            required
+                            label="End date"
+                            type="date"
+                        />
+                    </Form.Group>
+                    <Form.Button>Show report</Form.Button>
+                </Form>
+            </Container>
         );
     }
 }

client/src/scenes/NotFound/index.js

@@ -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>
     );

client/src/scenes/UploadDLockData/index.js

@@ -0,0 +1,39 @@
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+
+import { Container, Form } from "semantic-ui-react";
+
+import MainMenu from '../../components/MainMenu';
+import { uploadDoorLockData } from "../../store/actions";
+
+class UploadDLockData extends Component {
+
+    render () {
+        return (
+            <Container>
+                <MainMenu/>
+                <h3>DLock Data</h3>
+                <hr/>
+                <Form>
+                    <Form.Input
+                        fluid
+                        required
+                        label="Select DLock file"
+                        type="file"
+                    />
+                    <Form.Button onClick={this.props.uploadDoorLockData}>Upload</Form.Button>
+                </Form>
+            </Container>
+        );
+    }
+}
+
+const mapStateToProps = (state) => ({
+
+});
+
+const mapDispatchToProps = (dispatch) => ({
+    uploadDoorLockData: () => uploadDoorLockData(dispatch),
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(UploadDLockData);

client/src/store/actions/doorLockActions.js

@@ -0,0 +1,17 @@
+import {
+    UPLOAD_DOOR_LOCK_DATA_PENDING,
+    UPLOAD_DOOR_LOCK_DATA_SUCCESS,
+    UPLOAD_DOOR_LOCK_DATA_FAILED
+} from "../constants";
+
+export const uploadDoorLockData = (dispatch) => {
+    dispatch({type: UPLOAD_DOOR_LOCK_DATA_PENDING});
+    fetch('/api/doorLockData')
+        .then(response => response.json())
+        .then(data => {
+            dispatch({type: UPLOAD_DOOR_LOCK_DATA_SUCCESS, payload: data})
+        })
+        .catch(err => {
+            dispatch({type: UPLOAD_DOOR_LOCK_DATA_FAILED, payload: err})
+        })
+};

client/src/store/actions/index.js

@@ -0,0 +1 @@
+export * from './doorLockActions';

client/src/store/constants.js

@@ -0,0 +1,3 @@
+export const UPLOAD_DOOR_LOCK_DATA_PENDING = 'UPLOAD_DOOR_LOCK_DATA_PENDING';
+export const UPLOAD_DOOR_LOCK_DATA_SUCCESS = 'UPLOAD_DOOR_LOCK_DATA_SUCCESS';
+export const UPLOAD_DOOR_LOCK_DATA_FAILED = 'UPLOAD_DOOR_LOCK_DATA_FAILED';

client/src/store/reducers/doorLockReducers.js

@@ -0,0 +1,35 @@
+import {
+    UPLOAD_DOOR_LOCK_DATA_PENDING,
+    UPLOAD_DOOR_LOCK_DATA_SUCCESS,
+    UPLOAD_DOOR_LOCK_DATA_FAILED
+} from "../constants";
+
+const initialState = {
+    pending: false,
+    result: {},
+    error: '',
+};
+
+export const doorLockData = (state, action) => {
+  state = state || initialState;
+  action = action || {};
+
+  switch(action.type){
+      case UPLOAD_DOOR_LOCK_DATA_PENDING:
+          return Object.assign({}, state, {
+              pending: true,
+          });
+      case UPLOAD_DOOR_LOCK_DATA_SUCCESS:
+          return Object.assign({}, state, {
+              pending: false,
+              result: action.payload,
+          });
+      case UPLOAD_DOOR_LOCK_DATA_FAILED:
+          return Object.assign({}, state, {
+              pending: false,
+              error: action.payload,
+          });
+      default:
+          return state;
+  }
+};

client/src/store/reducers/index.js

@@ -0,0 +1,8 @@
+import { combineReducers } from "redux";
+
+import { doorLockData} from "./doorLockReducers";
+
+export const rootReducer = combineReducers({
+    doorLockData
+});
+