Migrate UI to Next.js/React

Author: iaincollins

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "icarus",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "description": "",
   "scripts": {
     "build": "npm run build:web && npm run build:app && npm run build:service && npm run build:package",
@@ -11,7 +11,7 @@
     "build:clean": "node scripts/build-clean.js",
     "build:assets": "node scripts/build-assets.js",
     "dev:web": "next src\\web",
-    "dev:service": "nodemon src/service/main.js",
+    "dev:service": "node src/service/main.js --proxy=\"http://localhost:3000\" &",
     "lint": "npm run lint:go && npm run lint:javascript",
     "lint:go": "go fmt src\\app\\main.go",
     "lint:javascript": "npx standard --fix"
@@ -34,6 +34,7 @@
   },
   "dependencies": {
     "connect": "^3.7.0",
+    "http-proxy": "^1.18.1",
     "serve-static": "^1.14.1",
     "ws": "^8.2.3",
     "yargs": "^17.2.1"

package.json

@@ -1,7 +1,7 @@
 const path = require('path')
-const package = require('../../package.json')
+const packageJson = require('../../package.json')
 
-const PRODUCT_VERSION = `${package.version}.0`
+const PRODUCT_VERSION = `${packageJson.version}.0`
 const APP_FILE_VERSION = PRODUCT_VERSION
 const SERVICE_FILE_VERSION = PRODUCT_VERSION
 

scripts/lib/build-options.js

@@ -1,17 +1,25 @@
 const connect = require('connect')
 const serveStatic = require('serve-static')
 const http = require('http')
+const httpProxy = require('http-proxy')
+const proxy = httpProxy.createProxyServer({})
 const WebSocket = require('ws')
 const eventHandlers = require('./lib/event-handlers')
 const yargs = require('yargs')
 
 const commandLineArgs = yargs.argv
 const PORT = commandLineArgs.port || process.env.PORT || 3300
 const WEBROOT = process.env.WEBROOT || 'build/web'
+const PROXY = commandLineArgs.proxy || false
 
 // Start simple HTTP server and add WebSocket server
 const webServer = connect().use(serveStatic(WEBROOT))
-const httpServer = http.createServer(webServer)
+console.log('PROXY', PROXY)
+// Proxy requests if PROXY specified (i.e. in development)
+const httpServer = PROXY
+  ? http.createServer((req, res) => proxy.web(req, res, { target: PROXY }))
+  : http.createServer(webServer)
+
 const webSocketServer = new WebSocket.Server({ server: httpServer })
 
 // Bind message event handler to WebSocket server before starting server

src/service/main.js

@@ -1,8 +1,7 @@
 
 export default function Loader ({ visible }) {
-  if (!visible) return null
   return (
-    <div id='loader'>
+    <div id='loader' style={{ opacity: visible ? 1 : 0 }}>
       <div className='loader__row'>
         <div className='loader__arrow loader__arrow--outer-18' />
         <div className='loader__arrow loader__arrow--down lloader__arrow--outer-17' />

src/web/components/loader.js

@@ -0,0 +1,12 @@
+
+export default function Panel ({ children, visible }) {
+  return (
+    <div className='panel' style={{ opacity: visible ? 1 : 0 }}>
+      {children}
+    </div>
+  )
+}
+
+Panel.defaultProps = {
+  visible: true
+}

src/web/components/panel.js

@@ -0,0 +1,56 @@
+/* global WebSocket */
+import { createContext, useState, useContext } from 'react'
+
+let socket
+
+const defaultSocketState = {
+  connected: false
+}
+
+// function sendEvent (name, message = null) {
+//   if (socket) {
+//     socket.send(JSON.stringify({ name, message }))
+//   }
+// }
+
+function connect (socketState, setSocketState) {
+  socket = new WebSocket('ws://' + window.location.host)
+  socket.onmessage = (event) => {
+    const { name, message } = JSON.parse(event.data)
+    console.log('message received', name, message)
+  }
+  socket.onopen = (e) => {
+    console.log('Connected to socket server')
+    setSocketState({
+      ...socketState,
+      connected: true
+    })
+  }
+  socket.onclose = (e) => {
+    console.log('Disconnected from socket server')
+    setSocketState({
+      ...socketState,
+      connected: false
+    })
+  }
+}
+
+const SocketContext = createContext()
+
+export function Socket ({ children }) {
+  const [socketState, setSocketState] = useState(defaultSocketState)
+
+  if (typeof WebSocket !== 'undefined' && socketState.connected !== true) {
+    connect(socketState, setSocketState)
+  }
+
+  return (
+    <SocketContext.Provider value={socketState}>
+      {children}
+    </SocketContext.Provider>
+  )
+}
+
+export function useSocket () {
+  return useContext(SocketContext)
+}

src/web/components/socket.js

@@ -6,11 +6,11 @@
 
 @font-face {
   font-family: 'Jura';
-  src: url('../fonts/Jura-VariableFont_wght.ttf') format('truetype');
+  src: url('../public/fonts/Jura-VariableFont_wght.ttf') format('truetype');
 }
 
 * {
-  cursor: url('../images/cursor.png'), crosshair;
+  cursor: url('../public/images/cursor.png'), crosshair;
 }
 
 ::selection { 
@@ -105,10 +105,14 @@ html, body {
 }
 
 #main {
-  transition: .25s ease-in-out;
   z-index: 10;
 }
 
+.panel {
+  transition: .25s ease-in-out;
+  opacity: 0;
+}
+
 h1 {
   margin: .25rem 0;
 }

src/web/public/css/buttons.css renamed to src/web/css/buttons.css

@@ -0,0 +1,22 @@
+function toggleFullScreen () {
+  if (typeof window.app_toggleFullScreen === 'function') { return window.app_toggleFullScreen() }
+
+  if (!document.fullscreenElement) {
+    document.documentElement.requestFullscreen()
+  } else {
+    if (document.exitFullscreen) {
+      document.exitFullscreen()
+    }
+  }
+}
+
+function closeWindow () {
+  if (typeof window.app_quit === 'function') { return window.app_quit() }
+
+  window.close()
+}
+
+module.exports = {
+  toggleFullScreen,
+  closeWindow
+}

src/web/public/css/loader.css renamed to src/web/css/loader.css

@@ -1,11 +1,10 @@
-import '../public/css/main.css'
-import Loader from 'components/loader'
+import '../css/main.css'
+import { Socket } from 'components/socket'
 
 export default function MyApp ({ Component, pageProps }) {
   return (
-    <>
-      <Loader />
+    <Socket>
       <Component {...pageProps} />
-    </>
+    </Socket>
   )
 }

src/web/public/css/main.css renamed to src/web/css/main.css

@@ -0,0 +1,22 @@
+import { toggleFullScreen, closeWindow } from 'lib/window'
+import { useSocket } from 'components/socket'
+import Loader from 'components/loader'
+import Panel from 'components/panel'
+
+export default function IndexPage () {
+  const { connected } = useSocket()
+  return (
+    <>
+      <Loader visible={!connected} />
+      <Panel visible={connected}>
+        <h3>ICARUS Terminal</h3>
+        <p>
+          <button onClick={toggleFullScreen}>Toggle Fullscreen</button>
+        </p>
+        <p>
+          <button onClick={closeWindow}>Close Terminal</button>
+        </p>
+      </Panel>
+    </>
+  )
+}