feat: add "Open recent" file menu

fix #6

main/windowManager.ts

@@ -88,6 +88,9 @@ export default function createWindowManager(app: App, ipcMain: IpcMain) {
     win.on('focus', () => {
       win.webContents.send('FOCUS');
     });
+    win.on('blur', () => {
+      win.webContents.send('BLUR');
+    });
 
     const { SERVER_URL, NODE_ENV } = process.env;
     if (NODE_ENV === 'development') {
@@ -125,6 +128,9 @@ export default function createWindowManager(app: App, ipcMain: IpcMain) {
   ipcMain.handle('MENU_FILE_NEW', () => {
     createWindow();
   });
+  ipcMain.handle('MENU_FILE_OPEN_EXISTING', (_, file: string) => {
+    createWindow(file);
+  });
 
   return {
     init() {

src/budget/useMenu.ts

@@ -1,11 +1,12 @@
-import { useEffect, useMemo } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import {
   createMenu,
   createFileMenu,
   createEditMenu,
   CreateMenuCallbacks,
   ipcRenderer,
   Menu,
+  settings,
   useSetShowSettings,
 } from '../lib';
 
@@ -48,17 +49,34 @@ function buildMenu(callbacks: CreateMenuCallbacks) {
 
 export default function useMenu() {
   const setShowSettings = useSetShowSettings();
-  const menu = useMemo(() => buildMenu({ setShowSettings }), [setShowSettings]);
+  const [recentSignal, setRecentSignal] = useState<symbol>(Symbol());
+  const [focus, updateFocus] = useState<boolean>(true);
+  const menu = useMemo(
+    () => buildMenu({ setShowSettings }),
+    /* eslint-disable-next-line react-hooks/exhaustive-deps */
+    [setShowSettings, recentSignal],
+  );
   useEffect(() => {
-    const activate = () => {
-      Menu.setApplicationMenu(menu);
-    };
-    activate();
-    ipcRenderer.on('FOCUS', activate);
+    const obs = settings.watch('recentFiles', () => {
+      setRecentSignal(Symbol());
+    });
+    const setFocus = () => updateFocus(true);
+    const setBlur = () => updateFocus(false);
+
+    ipcRenderer.on('FOCUS', setFocus);
+    ipcRenderer.on('BLUR', setBlur);
+
     return () => {
-      ipcRenderer.off('FOCUS', activate);
+      obs.dispose();
+      ipcRenderer.off('FOCUS', setFocus);
+      ipcRenderer.off('BLUR', setBlur);
     };
-  }, [menu]);
+  }, []);
+  useEffect(() => {
+    if (focus) {
+      Menu.setApplicationMenu(menu);
+    }
+  }, [focus, menu]);
 
   return menu;
 }

src/budget/useSave.ts

@@ -1,9 +1,22 @@
 import { useState, useEffect, useCallback, useRef } from 'react';
-import { ipcRenderer, writeFile } from '../lib';
+import { ipcRenderer, writeFile, existsSync, settings } from '../lib';
 import { Menu } from 'electron';
 import { MENU_ID_SAVE, MENU_ID_SAVE_AS } from './useMenu';
 import { BudgetState } from './Types';
 
+type RecentFile = { name: string; file: string };
+function addRecentFile(file: string, name: string) {
+  const recent: RecentFile[] = settings.get('recentFiles', []) as any;
+  const otherExistingFiles = recent.filter(
+    ({ file: f }) => existsSync(f) && f !== file,
+  );
+
+  settings.set('recentFiles', [
+    { file, name },
+    ...otherExistingFiles.slice(0, 9),
+  ]);
+}
+
 export default function useSave(menu: Menu, state: BudgetState | null) {
   const [saved, setSaved] = useState<BudgetState | null | Error>(null);
   const stateRef = useRef<BudgetState | null>();
@@ -33,6 +46,7 @@ export default function useSave(menu: Menu, state: BudgetState | null) {
         return;
       }
 
+      addRecentFile(file, state.name);
       writeFile(file, JSON.stringify(state), (err) => {
         if (!canceled) {
           setSaved(err || state);

src/lib/createMenu.ts

@@ -1,5 +1,7 @@
 import { MenuItemConstructorOptions } from 'electron';
 import { ipcRenderer, appName } from './electron';
+import settings from './electron-settings';
+import { basename } from './path';
 
 type MenuConfig = MenuItemConstructorOptions;
 export type CreateMenuCallbacks = {
@@ -60,6 +62,11 @@ export function createFileMenu(entries: MenuConfig[] = []): MenuConfig[] {
         ipcRenderer.invoke('MENU_FILE_OPEN');
       },
     },
+    {
+      label: 'Open Recent',
+      id: 'open-recent',
+      submenu: createRecentSubmenu(settings.get('recentFiles') as any),
+    },
     entries.length ? { type: 'separator' } : false,
     ...entries,
     { type: 'separator' },
@@ -69,6 +76,20 @@ export function createFileMenu(entries: MenuConfig[] = []): MenuConfig[] {
   return config.filter(isMenuConfig);
 }
 
+export function createRecentSubmenu(
+  recentFiles: {
+    name: string;
+    file: string;
+  }[],
+): MenuConfig['submenu'] {
+  return recentFiles.map(({ name, file }) => ({
+    label: `${name} - ${basename(file)}`,
+    click() {
+      ipcRenderer.invoke('MENU_FILE_OPEN_EXISTING', file);
+    },
+  }));
+}
+
 export function createEditMenu(): MenuConfig {
   return {
     label: 'Edit',

src/lib/electron-settings.ts

@@ -0,0 +1,3 @@
+import settings from 'electron-settings';
+
+export default window.require('electron-settings') as typeof settings;

src/lib/fs.ts

@@ -1,5 +1,6 @@
-import { writeFile as wft, readFile as rft } from 'fs';
+import { writeFile as wft, readFile as rft, existsSync as est } from 'fs';
 const fs = window.require('fs');
 
 export const writeFile: typeof wft = fs.writeFile;
 export const readFile: typeof rft = fs.readFile;
+export const existsSync: typeof est = fs.existsSync;

src/lib/index.ts

@@ -6,6 +6,7 @@ export { default as createNumberFormatter } from './createNumberFormatter';
 export { default as useInputProps } from './useInputProps';
 export { default as useAmountInputProps } from './useAmountInputProps';
 export { default as useInit, INIT_EMPTY } from './useInit';
+export { default as settings } from './electron-settings';
 export { createMenu, createFileMenu, createEditMenu } from './createMenu';
 export {
   withShowSettingsProvider,
@@ -24,6 +25,7 @@ export {
 export * from './guards';
 export * from './electron';
 export * from './fs';
+export * from './path';
 export * from './useIsVisible';
 export type NumberFormatter = NumberFormatterT;
 export type CreateMenuCallbacks = CreateMenuCallbacksT;

src/lib/path.ts

@@ -0,0 +1,4 @@
+import { basename as bnt } from 'path';
+const path = window.require('path');
+
+export const basename: typeof bnt = path.basename;