move filesystem operation to backend

app/src/components/Sidebar/ValueRenderer/ValuePanel.tsx

@@ -60,9 +60,9 @@ function ValuePanel(props: Props) {
     return node?.message && decodeMessage(node.message)?.message?.toUnicodeString()
   }, [node, decodeMessage])
 
-  const getBuffer = () => {
+  const getData = () => {
     if (node?.message && node.message.payload) {
-      return node.message.payload.toBuffer()
+      return node.message.payload.base64Message
     }
   }
 
@@ -100,7 +100,7 @@ function ValuePanel(props: Props) {
   const [value] =
     node && node.message && node.message.payload ? node.message.payload?.format(node.type) : [null, undefined]
   const copyValue = value ? <Copy getValue={getDecodedValue} /> : null
-  const saveValue = value ? <Save getBuffer={getBuffer} /> : null
+  const saveValue = value ? <Save getData={getData} /> : null
 
   return (
     <Panel>

app/src/components/helper/Save.tsx

@@ -2,15 +2,15 @@ import * as React from 'react'
 import { connect } from 'react-redux'
 import Check from '@material-ui/icons/Check'
 import CustomIconButton from './CustomIconButton'
-import { promises as fsPromise } from 'fs'
+
 import { SaveAlt } from '@material-ui/icons'
 import { bindActionCreators } from 'redux'
-import { rendererRpc } from '../../../../events'
+import { rendererRpc, writeFile } from '../../../../events'
 import { makeSaveDialogRpc } from '../../../../events/OpenDialogRequest'
 
 import { globalActions } from '../../actions'
 
-export async function saveToFile(buffer: Buffer | string): Promise<string | undefined> {
+export async function saveToFile(data: string): Promise<string | undefined> {
   const rejectReasons = {
     errorWritingFile: 'Error writing file',
   }
@@ -21,7 +21,7 @@ export async function saveToFile(buffer: Buffer | string): Promise<string | unde
 
   if (!canceled && filePath !== undefined) {
     try {
-      await fsPromise.writeFile(filePath, buffer)
+      const filename = await rendererRpc.call(writeFile, { filePath, data })
       return filePath
     } catch (error) {
       throw rejectReasons.errorWritingFile
@@ -30,7 +30,7 @@ export async function saveToFile(buffer: Buffer | string): Promise<string | unde
 }
 
 interface Props {
-  getBuffer: () => Buffer | undefined
+  getData: () => string | undefined
   actions: {
     global: typeof globalActions
   }
@@ -48,9 +48,9 @@ class Save extends React.PureComponent<Props, State> {
 
   private handleClick = async (event: React.MouseEvent) => {
     event.stopPropagation()
-    const buffer = this.props.getBuffer()
+    const data = this.props.getData()
-    if (buffer !== undefined) {
+    if (data != undefined) {
-      const filename = await saveToFile(buffer)
+      const filename = await saveToFile(data)
       this.props.actions.global.showNotification(`Saved to ${filename}`)
       this.setState({ didSave: true })
       setTimeout(() => {

events/Events.ts

@@ -54,3 +54,7 @@ export function makeConnectionMessageEvent(connectionId: string): Event<MqttMess
 export const getAppVersion: RpcEvent<void, string> = {
   topic: 'getAppVersion',
 }
+
+export const writeFile: RpcEvent<{ filePath: string, data: string }, void> = {
+  topic: 'writeFile',
+}

src/electron.ts

@@ -4,6 +4,7 @@ import ConfigStorage from '../backend/src/ConfigStorage'
 import { app, BrowserWindow, Menu, dialog } from 'electron'
 import { autoUpdater } from 'electron-updater'
 import { ConnectionManager } from '../backend/src/index'
+import { promises as fsPromise } from 'fs'
 // import { electronTelemetryFactory } from 'electron-telemetry'
 import { menuTemplate } from './MenuTemplate'
 import buildOptions from './buildOptions'
@@ -11,7 +12,7 @@ import { waitForDevServer, isDev, runningUiTestOnCi, loadDevTools } from './deve
 import { shouldAutoUpdate, handleAutoUpdate } from './autoUpdater'
 import { registerCrashReporter } from './registerCrashReporter'
 import { makeOpenDialogRpc, makeSaveDialogRpc } from '../events/OpenDialogRequest'
-import { backendRpc, getAppVersion } from '../events'
+import { backendRpc, getAppVersion, writeFile } from '../events'
 
 registerCrashReporter()
 
@@ -31,6 +32,10 @@ app.whenReady().then(() => {
   })
 
   backendRpc.on(getAppVersion, async () => app.getVersion())
+
+  backendRpc.on(writeFile, async ({ filePath, data }) => {
+    await fsPromise.writeFile(filePath, Buffer.from(data, 'base64'))
+  })
 })
 
 autoUpdater.logger = log