refactor network and add cells component with ipc module

.editorconfig

@@ -12,7 +12,7 @@ insert_final_newline = true
 # Use 4 spaces for the Python files
 [*.py]
 indent_size = 4
-max_line_length = 80
+max_line_length = 120
 
 # The JSON files contain newlines inconsistently
 [*.json]
@@ -21,7 +21,7 @@ insert_final_newline = ignore
 # The JavaScript file
 [*.js]
 indent_size = 2
-max_line_length = 80
+max_line_length = 120
 
 # Minified JavaScript files shouldn't be changed
 [**.min.js]

.eslintrc.js

@@ -1,9 +1,11 @@
 module.exports = {
   "extends": "airbnb",
   "parser": "@typescript-eslint/parser",
-  "plugins": ["prettier"],
+  "plugins": ["prettier", "@typescript-eslint"],
   "rules": {
-    "prettier/prettier": "error",
+    "prettier/prettier": ["error", {
+      "printWidth": 120
+    }],
     "semi": [2, "never"],
     "comma-dangle": [2, {
       "arrays": "always-multiline",
@@ -14,6 +16,12 @@ module.exports = {
     }],
     "import/no-extraneous-dependencies": [2, {
       "devDependencies": true
+    }],
+    "no-unused-vars": "off",
+    "@typescript-eslint/no-unused-vars": ["error", {
+      "vars": "local",
+      "args": "after-used",
+      "ignoreRestSiblings": false
     }]
   },
   "env": {

package.json

@@ -26,12 +26,10 @@
     "build:react": "lerna run --scope=neuron-react-app build",
     "build:electron": "lerna run --scope=neuron build",
     "build:cp-pages": "lerna run --scope=neuron cp:pages",
-
     "build": "cross-env NODE_ENV=production concurrently \"yarn build:react\" \"yarn build:electron\"",
     "package-win": "yarn build && lerna run --scope=neuron package-win",
     "package-mac": "yarn build && lerna run --scope=neuron package-mac",
     "package-linux": "yarn build && lerna run --scope=neuron package-linux",
-
     "build:clean": "rm -rf packages/react-app/build && rm -rf packages/electron-app/dist",
     "precommit": "lint-staged"
   },
@@ -43,7 +41,8 @@
   },
   "devDependencies": {
     "@cryptape/sdk-ts-config": "0.0.1",
-    "@typescript-eslint/parser": "^1.0.0",
+    "@typescript-eslint/eslint-plugin": "^1.2.0",
+    "@typescript-eslint/parser": "^1.2.0",
     "concurrently": "^4.1.0",
     "cross-env": "^5.2.0",
     "cz-conventional-changelog": "^2.1.0",
@@ -53,6 +52,7 @@
     "eslint-plugin-jsx-a11y": "^6.1.2",
     "eslint-plugin-prettier": "^3.0.1",
     "eslint-plugin-react": "^7.12.4",
+    "eslint-plugin-typescript": "^0.14.0",
     "husky": "^1.3.1",
     "lerna": "^3.10.5",
     "lint-staged": "^8.1.0",

packages/electron-app/src/main.ts

@@ -1,18 +1,33 @@
-// Modules to control application life and create native browser window
-import { app, BrowserWindow } from 'electron'
+import { app, BrowserWindow, ipcMain } from 'electron'
 import * as path from 'path'
 
-// Keep a global reference of the window object, if you don't, the window will
-// be closed automatically when the JavaScript object is garbage collected.
+import { MSG } from './utils/const'
+
 let mainWindow: Electron.BrowserWindow | null
+
 const { NODE_ENV } = process.env
+
 const ENTRY = {
   DEV: 'http://localhost:3000',
   PROD: `file://${path.join(__dirname, '../../react-app/build/index.html')}`,
 }
 
+ipcMain.on(MSG.SEND_CAPACITY, (e: Electron.Event, ...args: string[]) => {
+  e.sender.send(MSG.SEND_CAPACITY, args)
+})
+
+ipcMain.on(MSG.GET_LIVE_CELL, (e: Electron.Event, ...args: string[]) => {
+  e.sender.send(MSG.GET_LIVE_CELL, args)
+})
+
+ipcMain.on(MSG.GET_CELLS_BY_TYPE_HASH, (e: Electron.Event, ...args: string[]) => {
+  console.log('here')
+  setTimeout(() => {
+    e.sender.send(MSG.GET_CELLS_BY_TYPE_HASH, args)
+  }, 1000)
+})
+
 function createWindow() {
-  // Create the browser window.
   mainWindow = new BrowserWindow({
     width: 800,
     height: 600,
@@ -23,33 +38,19 @@ function createWindow() {
 
   mainWindow.loadURL(NODE_ENV === 'development' ? ENTRY.DEV : ENTRY.PROD)
 
-  // Emitted when the window is closed.
   mainWindow.on('closed', () => {
-    // Dereference the window object, usually you would store windows
-    // in an array if your app supports multi windows, this is the time
-    // when you should delete the corresponding element.
     mainWindow = null
   })
 }
 
-// This method will be called when Electron has finished
-// initialization and is ready to create browser windows.
-// Some APIs can only be used after this event occurs.
 app.on('ready', createWindow)
 
-// Quit when all windows are closed.
-app.on('window-all-closed', () => {
-  // On macOS it is common for applications and their menu bar
-  // to stay active until the user quits explicitly with Cmd + Q
-  if (process.platform !== 'darwin') {
-    app.quit()
-  }
-})
-
 app.on('activate', () => {
-  // On macOS it's common to re-create a window in the app when the
-  // dock icon is clicked and there are no other windows open.
   if (mainWindow === null) {
     createWindow()
   }
 })
+
+export default {
+  MSG,
+}

packages/electron-app/src/utils/const.ts

@@ -0,0 +1,9 @@
+export enum MSG {
+  SEND_CAPACITY = 'sendCapacity',
+  GET_LIVE_CELL = 'getLiveCell',
+  GET_CELLS_BY_TYPE_HASH = 'getCellsByTypeHash',
+}
+
+export default {
+  MSG,
+}

packages/react-app/.eslintrc.js

@@ -10,6 +10,6 @@ module.exports = {
   "rules": {
     "react/jsx-filename-extension": [1, {
       "extensions": [".ts", ".tsx"]
-    }],
+    }]
   }
 }

packages/react-app/package.json

@@ -36,6 +36,7 @@
     "@types/react-dom": "16.0.11",
     "@types/styled-components": "^4.1.6",
     "cross-env": "^5.2.0",
+    "electron": "^4.0.3",
     "grommet": "^2.3.1",
     "node-sass": "^4.11.0",
     "react": "^16.8.0-alpha.0",

packages/react-app/src/components/App.tsx

@@ -3,6 +3,7 @@ import styled from 'styled-components'
 import Sidebar from './Sidebar'
 import Header from './Header'
 import Transfer from './Transfer'
+import Cells from './Cells'
 
 const AppContainer = styled.div`
   display: flex;
@@ -21,6 +22,7 @@ const App = () => (
       <Header />
       <div id="MainContent">
         <Transfer />
+        <Cells />
         <p>Main Content goes here</p>
       </div>
     </MainContainer>

packages/react-app/src/components/Cells/index.tsx

@@ -0,0 +1,28 @@
+import React, { useState, useContext, useEffect } from 'react'
+import ipcCtx from '../../contexts/ipc'
+import chainCtx from '../../contexts/chain'
+
+const Cells = () => {
+  const [typeHash] = useState('')
+  const ipc = useContext(ipcCtx)
+  const chain = useContext(chainCtx)
+  useEffect(() => {
+    ipc.getCellsByTypeHash(typeHash)
+  }, [typeHash])
+  return (
+    <div>
+      Cells
+      {chain.cells.map(cell => (
+        <button
+          key={cell}
+          onClick={() => ipc.getLiveCell({ hash: '1', index: 1 })}
+          onKeyDown={() => ipc.getLiveCell({ hash: '1', index: 1 })}
+          type="button"
+        >
+          {cell}
+        </button>
+      ))}
+    </div>
+  )
+}
+export default Cells