Add feature to save settings automatically #4

CHANGELOG.md

@@ -1,5 +1,8 @@
+# v1.2.0 (Oct 17, 2021)
+- The app now remembers your settings
+
 # v1.1.0 (September 9, 2021)
--Fixed ports that were non-numeric
+- Improve logic for retrieving processes by port
 
 # v1.0.1 (August 17, 2021)
 - Fix handling of invalid port numbers for Unix-based systems

app/pages/main/main.svelte

@@ -4,17 +4,24 @@
 	import { MAX_PORT_NUMBER, MIN_PORT_NUMBER } from "@app/constants/numbers";
 	import { getProcesses } from "@app/services/processreader";
 	import type { Process } from "@app/services/processreader";
-	import ProcessTable from "../../components/processtable/processtable.svelte";
+	import ProcessTable from "@app/components/processtable/processtable.svelte";
 	import { isWindows } from "@app/utils/platform";
+	import { set as setSetting, get as getSetting } from "@app/utils/settings-store";
 
 	const IS_WINDOWS = isWindows();
+	const SETTING_KEYS = {
+		startPort: "startPort",
+		endPort: "endPort",
+		restrictedRangeEnabled: "restrictedRangeEnabled",
+		checkWslProcesses: "checkWslProcesses",
+	};
 
-	let startPort = MIN_PORT_NUMBER;
-	let endPort = MAX_PORT_NUMBER;
-	let restrictedRangeEnabled = false;
+	let startPort = getSetting<number>(SETTING_KEYS.startPort, MIN_PORT_NUMBER);
+	let endPort = getSetting<number>(SETTING_KEYS.endPort, MAX_PORT_NUMBER);
+	let restrictedRangeEnabled = getSetting<boolean>(SETTING_KEYS.restrictedRangeEnabled, false);
 	let processes: Process[] = [];
 	let isScanning = false;
-	let checkWslProcesses = true;
+	let checkWslProcesses = getSetting<boolean>(SETTING_KEYS.checkWslProcesses, true);
 	let scanError: string | null = null;
 
 	const performScan = async () => {
@@ -38,22 +45,48 @@
 		}
 	};
 
+	const updateSetting = (key: string, value: boolean | string | number): void => {
+		setSetting(key, value);
+	};
+
 	onMount(performScan);
 </script>
 
 <div class="container">
 	<form id="scanner-form">
 		<div>
-			<input type="checkbox" bind:checked={restrictedRangeEnabled}/>
+			<input
+				type="checkbox"
+				bind:checked={restrictedRangeEnabled}
+				on:change={e => updateSetting(SETTING_KEYS.restrictedRangeEnabled, e.target.checked)}
+			/>
 			<span>Only test ports between</span>
-			<input type=number bind:value={startPort} min={MIN_PORT_NUMBER} max={MAX_PORT_NUMBER} disabled={!restrictedRangeEnabled}/>
+			<input
+				type=number
+				bind:value={startPort}
+				min={MIN_PORT_NUMBER}
+				max={MAX_PORT_NUMBER}
+				disabled={!restrictedRangeEnabled}
+				on:change={e => updateSetting(SETTING_KEYS.startPort, e.target.value)}
+			/>
 			<span>and</span>
-			<input type=number bind:value={endPort} min={MIN_PORT_NUMBER} max={MAX_PORT_NUMBER} disabled={!restrictedRangeEnabled}/>
+			<input
+				type=number
+				bind:value={endPort}
+				min={MIN_PORT_NUMBER}
+				max={MAX_PORT_NUMBER}
+				disabled={!restrictedRangeEnabled}
+				on:change={e => updateSetting(SETTING_KEYS.endPort, e.target.value)}
+			/>
 			<button id="btn-scan" class="btn btn-primary" type="button" on:click={performScan} disabled={isScanning}>SCAN</button>
 		</div>
 
 		<div hidden={!IS_WINDOWS}>
-			<input type="checkbox" bind:checked={checkWslProcesses}/>
+			<input
+				type="checkbox"
+				bind:checked={checkWslProcesses}
+				on:change={e => updateSetting(SETTING_KEYS.checkWslProcesses, e.target.checked)}
+			/>
 			<span>Check WSL Processes</span>
 		</div>
 

app/utils/settings-store.ts

@@ -0,0 +1,11 @@
+export function set<T>(key: string, value: T): void {
+	// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+	// @ts-ignore See https://www.electronjs.org/docs/tutorial/process-model#preload-scripts
+	window.store.set(key, value);
+}
+
+export function get<T>(key: string, defaultValue: T): T | undefined {
+	// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+	// @ts-ignore See https://www.electronjs.org/docs/tutorial/process-model#preload-scripts
+	return window.store.get(key, defaultValue) as T | undefined;
+}

electron/main.ts

@@ -11,8 +11,12 @@
  */
 import { app, BrowserWindow } from "electron";
 import * as path from "path";
+
 const config = require("../app/configs/config");
 
+require("electron-store").initRenderer();
+
+
 function createWindow() {
 	const mainWindow = new BrowserWindow({
 		height: 768,

electron/preload.ts

@@ -15,6 +15,7 @@ import { promisify } from "util";
 import { Process } from "../app/services/processreader";
 import { MAX_PORT_NUMBER, MIN_PORT_NUMBER } from "../app/constants/numbers";
 import { wait } from "../app/utils/wait";
+
 const execAsync = promisify(exec);
 
 const WINDOWS_NEWLINE = "\r\n";
@@ -122,7 +123,7 @@ async function getProcessesWindows(): Promise<Process[]> {
 	return processes;
 }
 
-export async function getProcesses(fromPort = MIN_PORT_NUMBER, toPort = MAX_PORT_NUMBER, checkWslProcesses = false): Promise<Process[]> {
+async function getProcesses(fromPort = MIN_PORT_NUMBER, toPort = MAX_PORT_NUMBER, checkWslProcesses = false): Promise<Process[]> {
 	const isWindows = getPlatform() === "win32";
 
 	let processes: Process[] = [];
@@ -133,11 +134,10 @@ export async function getProcesses(fromPort = MIN_PORT_NUMBER, toPort = MAX_PORT
 	if (isWindows) {
 		processes = processes.concat(await getProcessesWindows());
 	}
-	console.log(processes);
 	return processes.filter((process) => process.portNumber >= fromPort && process.portNumber <= toPort);
 }
 
-export function getPlatform() {
+function getPlatform() {
 	return process.platform;
 }
 
@@ -156,7 +156,7 @@ function tryKill(pid: number, wsl: boolean): boolean {
 	}
 }
 
-export async function terminate(process: Process): Promise<boolean> {
+async function terminate(process: Process): Promise<boolean> {
 	const { id: pid, isWSL } = process;
 	let signalSent = tryKill(process.id, process.isWSL);
 
@@ -189,6 +189,20 @@ contextBridge.exposeInMainWorld("process", {
 	getPlatform,
 });
 
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const ElectronStore = require("electron-store");
+const electronStore = new ElectronStore();
+
+
+contextBridge.exposeInMainWorld("store", {
+	set: function(key, value) {
+		electronStore.set(key, value);
+	},
+	get: function(key, defaultValue) {
+		return electronStore.get(key, defaultValue);
+	}
+});
+
 // All of the Node.js APIs are available in the preload process.
 // It has the same sandbox as a Chrome extension.
 window.addEventListener("DOMContentLoaded", () => {