Updated PR from cjharkins (#24)

* Delete package-lock.json

Signed-off-by: dib6596 <cory.harkins@cerecore.net>

* fix: add install.md (#5)

Signed-off-by: dib6596 <cory.harkins@cerecore.net>

* sidebar ui added

Signed-off-by: dib6596 <cory.harkins@cerecore.net>

* router support

Signed-off-by: dib6596 <cory.harkins@cerecore.net>

* Add Settings Route and fix CSS Layout issues

Signed-off-by: dib6596 <cory.harkins@cerecore.net>

* Convert app to Typescript

Signed-off-by: dib6596 <cory.harkins@cerecore.net>

* dev header and notifs

Signed-off-by: dib6596 <cory.harkins@cerecore.net>

* notifications with animations

Signed-off-by: dib6596 <cory.harkins@cerecore.net>

* Update main.js

Signed-off-by: dib6596 <cory.harkins@cerecore.net>

*  Do not ignore package-lock.json

package-lock.json ensures everyone has same version of all modules
and also makes npm install faster.

See https://stackoverflow.com/a/44210813

Signed-off-by: dib6596 <cory.harkins@cerecore.net>

* Update electron to 7.0 for better macOS Catalina compatibility

Electron 7.0 reacts properly to macOS "Auto" theme change

Signed-off-by: dib6596 <cory.harkins@cerecore.net>

* Eslint integration with airbnb extension (#12)

* Eslint integration with airbnb extension

Signed-off-by: ganeshpatro321 <ganeshpatro321@gmail.com>

* Reverted back to statefull components

* Removed duplicates

Signed-off-by: dib6596 <cory.harkins@cerecore.net>

* Update README.md

Signed-off-by: dib6596 <cory.harkins@cerecore.net>

* added rules for eslint, fixed files (#17)

Signed-off-by: Harkishen-Singh <harkishensingh@hotmail.com>
Signed-off-by: dib6596 <cory.harkins@cerecore.net>

* Add Screenshot of Application

Signed-off-by: dib6596 <cory.harkins@cerecore.net>

* Add Settings Route and fix CSS Layout issues

Signed-off-by: dib6596 <cory.harkins@cerecore.net>

* Convert app to Typescript

Signed-off-by: dib6596 <cory.harkins@cerecore.net>

* dev header and notifs

Signed-off-by: dib6596 <cory.harkins@cerecore.net>

* Added travis and fixed eslint (#20)

* Initial commit from Create React App

* setting up

* removed files

* added header

* updated start scripts

* pull

* pull

* implemented travux

* merge

* added eslint for travis (#2)

* Update README.md

* added rules for eslint, fixed files (#17)

Signed-off-by: Harkishen-Singh <harkishensingh@hotmail.com>

* added eslint in travis

* minor UI changes

* fix

* fix travis

* fix travi

Signed-off-by: dib6596 <cory.harkins@cerecore.net>

* notifications with animations

Signed-off-by: dib6596 <cory.harkins@cerecore.net>

* Update main.js

Signed-off-by: dib6596 <cory.harkins@cerecore.net>

*  Do not ignore package-lock.json

package-lock.json ensures everyone has same version of all modules
and also makes npm install faster.

See https://stackoverflow.com/a/44210813

Signed-off-by: dib6596 <cory.harkins@cerecore.net>

* Eslint integration with airbnb extension (#12)

* Eslint integration with airbnb extension

Signed-off-by: ganeshpatro321 <ganeshpatro321@gmail.com>

* Reverted back to statefull components

* Removed duplicates

Signed-off-by: dib6596 <cory.harkins@cerecore.net>

* Update README.md

Signed-off-by: dib6596 <cory.harkins@cerecore.net>

* added rules for eslint, fixed files (#17)

Signed-off-by: Harkishen-Singh <harkishensingh@hotmail.com>
Signed-off-by: dib6596 <cory.harkins@cerecore.net>

* Remove global access and fix style conflicts

Signed-off-by: dib6596 <cory.harkins@cerecore.net>

* Finish fixing merge conflicts

Signed-off-by: dib6596 <cory.harkins@cerecore.net>

* Remove local env directories

Signed-off-by: dib6596 <cory.harkins@cerecore.net>

* Remove redundant js/tsx files from migration

Signed-off-by: dib6596 <cory.harkins@cerecore.net>

* Fix eslint errors

Signed-off-by: dib6596 <cory.harkins@cerecore.net>

* Attempt to sign off past commits and fix merge conflicts

Signed-off-by: dib6596 <cory.harkins@cerecore.net>

* Stashing for merge into remote master

* Add Settings in eslintrc to resolve extension conflicts

Signed-off-by: dib6596 <cory.harkins@cerecore.net>

* Update margin in homepage and remove screenshots

Signed-off-by: ganeshpatro321 <ganeshpatro321@gmail.com>

* Add settings icon and fized layout of setting button

Signed-off-by: ganeshpatro321 <ganeshpatro321@gmail.com>

.eslintrc.json

@@ -1,74 +1,64 @@
 {
-    "env": {
-        "browser": true,
-        "es6": true
+  "env": {
+    "browser": true,
+    "es6": true
+  },
+  "extends": ["airbnb"],
+  "globals": {
+    "Atomics": "readonly",
+    "SharedArrayBuffer": "readonly"
+  },
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaFeatures": {
+      "jsx": true
     },
-    "extends": [
-        "airbnb"
-    ],
-    "globals": {
-        "Atomics": "readonly",
-        "SharedArrayBuffer": "readonly"
-    },
-    "parser": "@typescript-eslint/parser",
-    "parserOptions": {
-        "ecmaFeatures": {
-            "jsx": true
-        },
-        "ecmaVersion": 2018,
-        "sourceType": "module"
-    },
-    "plugins": [
-        "react",
-        "@typescript-eslint"
-    ],
-    "rules": {
-        "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
-        "react/prefer-stateless-function": [0, { "ignorePureComponents": false }],
-        "indent": [
-            "error",
-            2
-        ],
-        "linebreak-style": [
-            "error",
-            "unix"
-        ],
-        "quotes": [
-            "error",
-            "single"
-        ],
-        "semi": [
-            "error",
-            "always"
-        ],
-        "no-console": ["error", { "allow": ["error"] }],
-        "no-dupe-args": "error",
-        "no-dupe-keys": "error",
-        "no-empty": "error",
-        "no-extra-semi": "error",
-        "no-func-assign": "error",
-        "no-irregular-whitespace": "error",
-        "no-sparse-arrays": "error",
-        "no-unexpected-multiline": "error",
-       "no-unreachable": "error",
-        "class-methods-use-this": "error",
-        "curly": "error",
-        "eqeqeq": "error",
-        "no-invalid-this": "error",
-        "keyword-spacing": "error",
-        "space-before-blocks": "error"
-    },
-    "overrides": [
-        {
-          "files": [
-            "**/*.spec.js",
-            "**/*.spec.jsx",
-            "**/*.test.js",
-            "**/*.test.jsx"
-          ],
-          "env": {
-            "jest": true
-          }
-        }
-      ]
-}
+    "ecmaVersion": 2018,
+    "sourceType": "module"
+  },
+  "settings": {
+    "import/resolver": {
+      "node": {
+        "extensions": [".js", ".jsx", ".ts", ".tsx"]
+      }
+    }
+  },
+  "plugins": ["react", "@typescript-eslint"],
+  "rules": {
+    "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
+    "react/prefer-stateless-function": [0, { "ignorePureComponents": false }],
+    "indent": ["error", 2],
+    "linebreak-style": ["error", "unix"],
+    "quotes": ["error", "single"],
+    "semi": ["error", "always"],
+    "no-console": ["error", { "allow": ["error"] }],
+    "no-dupe-args": "error",
+    "no-dupe-keys": "error",
+    "no-empty": "error",
+    "no-extra-semi": "error",
+    "no-func-assign": "error",
+    "no-irregular-whitespace": "error",
+    "no-sparse-arrays": "error",
+    "no-unexpected-multiline": "error",
+    "no-unreachable": "error",
+    "class-methods-use-this": "error",
+    "curly": "error",
+    "eqeqeq": "error",
+    "no-invalid-this": "error",
+    "keyword-spacing": "error",
+    "space-before-blocks": "error"
+  },
+  "overrides": [
+    {
+      "files": [
+        "**/*.spec.js",
+        "**/*.spec.jsx",
+        "**/*.test.js",
+        "**/*.test.jsx"
+      ],
+      "env": {
+        "jest": true
+      }
+    }
+  ]
+}

.gitignore

@@ -4,4 +4,4 @@
 npm-debug.log*
 node_modules/
 .node_repl_history
-build/
+build/

README.md

@@ -1,16 +1,17 @@
 # bench-routes-electron
+
 [![DeepScan grade](https://deepscan.io/api/teams/5815/projects/7644/branches/80653/badge/grade.svg)](https://deepscan.io/dashboard#view=project&tid=5815&pid=7644&bid=80653)
 
 Daemon service for [bench-routes](https://github.com/zairza-cetb/bench-routes).
 
 ## Making Commits in bench-routes
-Bench Routes uses DCO(Developer Certificate Origin) to certify that the contributor wrote the partcular code or otherwise have the right to submit the code they are contributing to the project.For complete details on DCO  <a href="https://probot.github.io/apps/dco/" target="_blank">Click Here</a>.
+
+Bench Routes uses DCO(Developer Certificate Origin) to certify that the contributor wrote the partcular code or otherwise have the right to submit the code they are contributing to the project.For complete details on DCO <a href="https://probot.github.io/apps/dco/" target="_blank">Click Here</a>.
 
 Follow the below `commit` syntax to cerify the code and pass the DCO test.
+
 ```
 git commit -s -m <commit-message>
 ```
 
 For installation instructions, please head-over to [INSTALL.md](INSTALL.md).
-
-

package.json

@@ -3,6 +3,9 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@types/node": "^12.11.1",
+    "@types/react": "^16.9.9",
+    "@types/react-router-dom": "^5.1.0",
     "concurrently": "^5.0.0",
     "electron": "^7.0.0-beta.7",
     "electron-builder": "^21.2.0",
@@ -58,4 +61,3 @@
     }
   }
 }
-

public/main.js

@@ -25,10 +25,14 @@ function createWindow() {
     transparent: false,
   });
 
-  mainWindow.loadURL(isDev ? 'http://localhost:3000' : `file://${path.join(__dirname, '../build/index.html')}`);
+  mainWindow.loadURL(
+    isDev
+      ? 'http://localhost:3000'
+      : `file://${path.join(__dirname, '../build/index.html')}`,
+  );
 
   mainWindow.webContents.openDevTools();
-  mainWindow.on('closed', () => mainWindow = null);
+  mainWindow.on('closed', () => (mainWindow = null));
 }
 
 app.on('ready', createWindow);

src/App.css

@@ -1,20 +1,18 @@
-.App-logo {
-  height: 40vmin;
+body {
+  margin: 0;
+  padding: 0;
+  overflow-y: hidden;
 }
 
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
+.App {
   display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
+  flex-direction: row;
 }
 
-.App-link {
-  color: #09d3ac;
+.inner-component {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
 }
 
 body {
@@ -30,6 +28,5 @@ body {
 }
 
 .inner-component {
-  margin-top: 7%;
   margin-left: 2%;
 }

src/App.js

@@ -3,20 +3,14 @@ import './App.css';
 import Header from './components/layouts/Header';
 import Sidebar from './components/layouts/Sidebar';
 import Navigator from './router/Navigation';
-import Notification from './components/notification/Notification';
-
-global.showNotificationSection = true;
 
 function App() {
   return (
     <div className="App">
       <Sidebar className="sidebar" />
-      <div className="outer-wrapper">
+      <div className="inner-component">
         <Header />
-        <Notification />
-        <div className="inner-component">
-          <Navigator />
-        </div>
+        <Navigator />
       </div>
     </div>
   );

src/components/dashboard/Dashboard.tsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+export default class Dashboard extends React.Component<{}> {
+  render() {
+    return <div>This is a Dashboard</div>;
+  }
+}

src/components/layouts/Header.js

@@ -1,11 +1,35 @@
-import React from 'react';
+/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
+import React, { useState } from 'react';
+import Notification from '../notification/Notification';
 
-export default class Header extends React.Component {
-  render() {
-    return (
+export default function Header() {
+  const [showNotification, setShowNotification] = useState(false);
+
+  const updateShowNotificationsScreen = () => {
+    setShowNotification(!showNotification);
+  };
+
+  return (
+    <>
+      <Notification
+        showNotification={showNotification}
+        updateShowNotificationsScreen={updateShowNotificationsScreen}
+      />
       <header>
         <div className="logo-name">Bench-routes</div>
+        <div className="notification-icon">
+          <img
+            src="assets/icons/notify-icon.svg"
+            alt="notification"
+            onClick={() => updateShowNotificationsScreen()}
+            onKeyDown={(e) => {
+              if (e.keyCode === 13) {
+                updateShowNotificationsScreen();
+              }
+            }}
+          />
+        </div>
       </header>
-    );
-  }
+    </>
+  );
 }