refactor: move ipc call out of vue components

main/registerIpcMainActionListeners.ts

@@ -2,6 +2,7 @@ import { app, dialog, ipcMain } from 'electron';
 import { autoUpdater } from 'electron-updater';
 import fs from 'fs/promises';
 import path from 'path';
+import { SelectFileOptions, SelectFileReturn } from 'utils/types';
 import databaseManager from '../backend/database/manager';
 import { emitMainProcessError } from '../backend/helpers';
 import { Main } from '../main';
@@ -13,7 +14,7 @@ import {
   getConfigFilesWithModified,
   getErrorHandledReponse,
   isNetworkError,
-  setAndGetCleanedConfigFiles
+  setAndGetCleanedConfigFiles,
 } from './helpers';
 import { saveHtmlAsPdf } from './saveHtmlAsPdf';
 
@@ -82,35 +83,38 @@ export default function registerIpcMainActionListeners(main: Main) {
     return obj;
   });
 
-  ipcMain.handle(IPC_ACTIONS.GET_FILE, async (event, options) => {
+  ipcMain.handle(
-    const response = {
+    IPC_ACTIONS.SELECT_FILE,
-      name: '',
+    async (_, options: SelectFileOptions): Promise<SelectFileReturn> => {
-      filePath: '',
+      const response: SelectFileReturn = {
-      success: false,
+        name: '',
-      data: Buffer.from('', 'utf-8'),
+        filePath: '',
-      canceled: false,
+        success: false,
-    };
+        data: Buffer.from('', 'utf-8'),
-    const { filePaths, canceled } = await dialog.showOpenDialog(
+        canceled: false,
-      main.mainWindow!,
+      };
-      options
+      const { filePaths, canceled } = await dialog.showOpenDialog(
-    );
+        main.mainWindow!,
+        { ...options, properties: ['openFile'] }
+      );
 
-    response.filePath = filePaths?.[0];
+      response.filePath = filePaths?.[0];
-    response.canceled = canceled;
+      response.canceled = canceled;
 
-    if (!response.filePath) {
+      if (!response.filePath) {
+        return response;
+      }
+
+      response.success = true;
+      if (canceled) {
+        return response;
+      }
+
+      response.name = path.basename(response.filePath);
+      response.data = await fs.readFile(response.filePath);
       return response;
     }
-
+  );
-    response.success = true;
-    if (canceled) {
-      return response;
-    }
-
-    response.name = path.basename(response.filePath);
-    response.data = await fs.readFile(response.filePath);
-    return response;
-  });
 
   ipcMain.handle(IPC_ACTIONS.GET_CREDS, async (event) => {
     return await getUrlAndTokenString();

src/components/Controls/AttachImage.vue

@@ -60,10 +60,9 @@
   </div>
 </template>
 <script lang="ts">
-import { ipcRenderer } from 'electron';
 import { fyo } from 'src/initFyo';
+import { selectFile } from 'src/utils/ipcCalls';
 import { getDataURL } from 'src/utils/misc';
-import { IPC_ACTIONS } from 'utils/messages';
 import { defineComponent } from 'vue';
 import FeatherIcon from '../FeatherIcon.vue';
 import Base from './Base.vue';
@@ -92,15 +91,12 @@ export default defineComponent({
       }
       const options = {
         title: fyo.t`Select Image`,
-        properties: ['openFile'],
         filters: [
           { name: 'Image', extensions: ['png', 'jpg', 'jpeg', 'webp'] },
         ],
       };
-      const { name, success, data } = await ipcRenderer.invoke(
+
-        IPC_ACTIONS.SELECT_FILE,
+      const { name, success, data } = await selectFile(options);
-        options
-      );
 
       if (!success) {
         return;

src/pages/DataImport.vue

@@ -345,7 +345,6 @@
   </div>
 </template>
 <script>
-import { ipcRenderer } from 'electron';
 import Button from 'src/components/Button.vue';
 import FormControl from 'src/components/Controls/FormControl.vue';
 import DropdownWithActions from 'src/components/DropdownWithActions.vue';
@@ -354,10 +353,9 @@ import HowTo from 'src/components/HowTo.vue';
 import PageHeader from 'src/components/PageHeader.vue';
 import { importable, Importer } from 'src/dataImport';
 import { fyo } from 'src/initFyo';
-import { getSavePath, saveData } from 'src/utils/ipcCalls';
+import { getSavePath, saveData, selectFile } from 'src/utils/ipcCalls';
 import { docsPathMap } from 'src/utils/misc';
 import { docsPath, showMessageDialog } from 'src/utils/ui';
-import { IPC_ACTIONS } from 'utils/messages';
 import Loading from '../components/Loading.vue';
 
 export default {
@@ -618,12 +616,12 @@ export default {
     async selectFile() {
       const options = {
         title: this.t`Select File`,
-        properties: ['openFile'],
         filters: [{ name: 'CSV', extensions: ['csv'] }],
       };
 
-      const { success, canceled, filePath, data, name } =
+      const { success, canceled, filePath, data, name } = await selectFile(
-        await ipcRenderer.invoke(IPC_ACTIONS.GET_FILE, options);
+        options
+      );
 
       if (!success && !canceled) {
         return await showMessageDialog({

src/utils/ipcCalls.ts

@@ -6,9 +6,16 @@ import { t } from 'fyo';
 import { BaseError } from 'fyo/utils/errors';
 import { BackendResponse } from 'utils/ipc/types';
 import { IPC_ACTIONS, IPC_MESSAGES } from 'utils/messages';
+import { SelectFileOptions, SelectFileReturn } from 'utils/types';
 import { setLanguageMap } from './language';
 import { showMessageDialog, showToast } from './ui';
 
+export async function selectFile(
+  options: SelectFileOptions
+): Promise<SelectFileReturn> {
+  return await ipcRenderer.invoke(IPC_ACTIONS.SELECT_FILE, options);
+}
+
 export async function checkForUpdates() {
   await ipcRenderer.invoke(IPC_ACTIONS.CHECK_FOR_UPDATES);
   await setLanguageMap();

utils/messages.ts

@@ -19,7 +19,7 @@ export enum IPC_ACTIONS {
   SEND_ERROR = 'send-error',
   GET_LANGUAGE_MAP = 'get-language-map',
   CHECK_FOR_UPDATES = 'check-for-updates',
-  GET_FILE = 'get-file',
+  SELECT_FILE = 'select-file',
   GET_CREDS = 'get-creds',
   GET_DB_LIST = 'get-db-list',
   DELETE_FILE = 'delete-file',

utils/types.ts

@@ -31,3 +31,16 @@ export type UnexpectedLogObject = {
   stack: string;
   more: Record<string, unknown>;
 }
+
+export interface SelectFileOptions {
+  title: string;
+  filters?: { name: string; extensions: string[] }[];
+}
+
+export interface SelectFileReturn {
+  name: string;
+  filePath: string;
+  success: boolean;
+  data: Buffer;
+  canceled: boolean;
+}