renderer: setup react-router and two routes (#30)

Create two screens: Station Shell and Saturn Module.

Signed-off-by: Miroslav Bajtoš <saturn@bajtos.net>

main/index.js

@@ -1,8 +1,12 @@
 const { app, dialog } = require('electron')
 const log = require('electron-log')
+const serve = require('electron-serve')
+const path = require('node:path')
+
 const setupUI = require('./ui')
 const setupTray = require('./tray')
 const setupUpdater = require('./updater')
+
 const inTest = (process.env.NODE_ENV === 'test')
 
 function handleError (/** @type {any} */ err) {
@@ -28,7 +32,8 @@ if (!app.requestSingleInstanceLock() && !inTest) {
 
 /** @type {import('./typings').Context} */
 const ctx = {
-  showUI: () => { throw new Error('never get here') }
+  showUI: () => { throw new Error('never get here') },
+  loadWebUIFromDist: serve({ directory: path.resolve(__dirname, '../renderer/dist') })
 }
 
 async function run () {

main/typings.d.ts

@@ -1,3 +1,4 @@
 export interface Context {
   showUI: () => void
+  loadWebUIFromDist: import('electron-serve').loadURL
 }

main/ui.js

@@ -1,7 +1,5 @@
 const { BrowserWindow, app, screen } = require('electron')
 const store = require('./store')
-const path = require('node:path')
-const { pathToFileURL } = require('node:url')
 
 /**
  * @param {import('./typings').Context} ctx
@@ -29,7 +27,7 @@ module.exports = async function (ctx) {
   let devServer
 
   if (app.isPackaged || process.env.NODE_ENV !== 'development') {
-    ui.loadURL(pathToFileURL(path.join(__dirname, '../renderer/dist/index.html')).toString())
+    ctx.loadWebUIFromDist(ui)
   } else {
     console.log('Starting Vite DEV server')
     const { createServer } = require('vite')

package.json

@@ -32,10 +32,12 @@
   "homepage": "https://github.com/filecoin-project/filecoin-station#readme",
   "dependencies": {
     "electron-log": "^4.4.7",
+    "electron-serve": "^1.1.0",
     "electron-store": "^8.0.1",
     "electron-updater": "^5.0.1",
     "react": "^18.0.0",
-    "react-dom": "^18.0.0"
+    "react-dom": "^18.0.0",
+    "react-router-dom": "^6.3.0"
   },
   "devDependencies": {
     "@playwright/test": "^1.22.2",

renderer/src/App.css

@@ -1,27 +1,32 @@
 .App {
   text-align: center;
+  color: white;
+  height: 100vm;
+}
+
+.App header {
+  margin: 2em 0;
+
 }
 
-.App-logo {
+.logo {
   height: 40vmin;
+  font-size: 2em;
   pointer-events: none;
 }
 
 @media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
+  .logo {
+    animation: App-logo-spin infinite 10s linear;
   }
 }
 
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
+.App main {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   font-size: calc(10px + 2vmin);
-  color: white;
 }
 
 @keyframes App-logo-spin {
@@ -32,3 +37,7 @@
     transform: rotate(360deg);
   }
 }
+
+a {
+  color: cyan;
+}

renderer/src/App.tsx

@@ -1,15 +1,44 @@
-import logo from './logo.svg'
 import './App.css'
+import {
+  Routes,
+  Route,
+  Link
+} from 'react-router-dom'
 
 function App (): JSX.Element {
   return (
     <div className='App'>
-      <header className='App-header'>
-        <img src={logo} className='App-logo' alt='logo' />
+      <header>
         <h1>Filecoin Station</h1>
       </header>
+      <main className='App-header'>
+        <Routes>
+          <Route path='/' element={<Home />} />
+          <Route path='/saturn' element={<Saturn />} />
+        </Routes>
+      </main>
     </div>
   )
 }
 
 export default App
+
+function Home (): JSX.Element {
+  return (
+    <div>
+      <div className='logo'>🛰</div>
+      <h2>Welcome to Filecoin Station</h2>
+      <p><Link to='/saturn'> Saturn &gt;&gt;</Link></p>
+    </div>
+  )
+}
+
+function Saturn (): JSX.Element {
+  return (
+    <div>
+      <div className='logo'>🪐</div>
+      <h2>Welcome to Saturn</h2>
+      <p><Link to='/'>Station &gt;&gt;</Link></p>
+    </div>
+  )
+}

renderer/src/index.css

@@ -5,6 +5,7 @@ body {
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  background-color: #282c34;
 }
 
 code {

renderer/src/main.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
+import { BrowserRouter } from 'react-router-dom'
 import App from './App'
 import './index.css'
 
@@ -8,6 +9,8 @@ ReactDOM.createRoot(
   document.getElementById('root')!
 ).render(
   <React.StrictMode>
-    <App />
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
   </React.StrictMode>
 )