Fixed storage bug

electron/index.ts

@@ -36,6 +36,13 @@ function escapeRegExp(string) {
   return string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"); // $& means the whole matched string
 }
 
+// Path variables for file and folder selection
+let imagePath: string | undefined = undefined;
+let folderPath: string | undefined = undefined;
+let customModelsFolderPath: string | undefined = undefined;
+let outputFolderPath: string | undefined = undefined;
+let saveOutputFolder = false;
+
 // Prepare the renderer once the app is ready
 let mainWindow: BrowserWindow;
 app.on("ready", async () => {
@@ -84,7 +91,7 @@ app.on("ready", async () => {
     autoUpdater.checkForUpdates();
   }
 
-  // SAVE LAST IMAGE PATH TO LOCAL STORAGE
+  // GET LAST IMAGE PATH TO LOCAL STORAGE
   mainWindow.webContents
     .executeJavaScript('localStorage.getItem("lastImagePath");', true)
     .then((lastImagePath: string | null) => {
@@ -93,7 +100,7 @@ app.on("ready", async () => {
       }
     });
 
-  // SAVE LAST FOLDER PATH TO LOCAL STORAGE
+  // GET LAST FOLDER PATH TO LOCAL STORAGE
   mainWindow.webContents
     .executeJavaScript('localStorage.getItem("lastFolderPath");', true)
     .then((lastFolderPath: string | null) => {
@@ -102,7 +109,7 @@ app.on("ready", async () => {
       }
     });
 
-  // SAVE LAST CUSTOM MODELS FOLDER PATH TO LOCAL STORAGE
+  // GET LAST CUSTOM MODELS FOLDER PATH TO LOCAL STORAGE
   mainWindow.webContents
     .executeJavaScript(
       'localStorage.getItem("lastCustomModelsFolderPath");',
@@ -114,7 +121,7 @@ app.on("ready", async () => {
       }
     });
 
-  // SAVE LAST CUSTOM MODELS FOLDER PATH TO LOCAL STORAGE
+  // GET LAST CUSTOM MODELS FOLDER PATH TO LOCAL STORAGE
   mainWindow.webContents
     .executeJavaScript('localStorage.getItem("lastOutputFolderPath");', true)
     .then((lastOutputFolderPath: string | null) => {
@@ -122,6 +129,15 @@ app.on("ready", async () => {
         outputFolderPath = lastOutputFolderPath;
       }
     });
+
+  // GET LAST SAVE OUTPUT FOLDER (BOOLEAN) TO LOCAL STORAGE
+  mainWindow.webContents
+    .executeJavaScript('localStorage.getItem("rememberOutputFolder");', true)
+    .then((lastSaveOutputFolder: boolean | null) => {
+      if (lastSaveOutputFolder !== null) {
+        saveOutputFolder = lastSaveOutputFolder;
+      }
+    });
 });
 
 // Quit the app once all windows are closed
@@ -134,12 +150,6 @@ const logit = (...args: any) => {
   mainWindow.webContents.send(commands.LOG, args.join(" "));
 };
 
-// Path variables for file and folder selection
-let imagePath: string | undefined = undefined;
-let folderPath: string | undefined = undefined;
-let customModelsFolderPath: string | undefined = undefined;
-let outputFolderPath: string | undefined = undefined;
-
 // Default models
 const defaultModels = [
   "realesrgan-x4plus",
@@ -163,19 +173,7 @@ ipcMain.handle(commands.SELECT_FILE, async () => {
     return null;
   } else {
     logit("Selected File Path: ", filePaths[0]);
-    const platform = getPlatform();
+    imagePath = filePaths[0];
-    imagePath =
-      platform === "win"
-        ? filePaths[0].replace(new RegExp(escapeRegExp("\\"), "g"), "\\\\")
-        : filePaths[0];
-    mainWindow.webContents
-      .executeJavaScript(
-        `localStorage.setItem("lastImagePath", "${imagePath}");`,
-        true
-      )
-      .then(() => {
-        logit(`Saved Last Image Path (${imagePath}) to Local Storage`);
-      });
 
     let isValid = false;
     // READ SELECTED FILES
@@ -221,25 +219,7 @@ ipcMain.handle(commands.SELECT_FOLDER, async (event, message) => {
     return null;
   } else {
     logit("Selected Folder Path: ", folderPaths[0]);
-    const platform = getPlatform();
+    folderPath = folderPaths[0];
-    folderPath =
-      platform === "win"
-        ? folderPaths[0].replace(new RegExp(escapeRegExp("\\"), "g"), "\\\\")
-        : folderPaths[0];
-    mainWindow.webContents
-      .executeJavaScript('localStorage.getItem("rememberOutputFolder");', true)
-      .then((result) => {
-        if (result === "false") return;
-        mainWindow.webContents
-          .executeJavaScript(
-            `localStorage.setItem("lastFolderPath", "${folderPath}");`,
-            true
-          )
-          .then(() => {
-            logit(`Saved Last Folder Path (${folderPath}) to Local Storage`);
-          });
-      });
-
     return folderPaths[0];
   }
 });
@@ -343,6 +323,21 @@ ipcMain.on(commands.DOUBLE_UPSCAYL, async (event, payload) => {
   const saveImageAs = payload.saveImageAs as string;
   const scale = payload.scale as string;
 
+  // SAVE OUTPUT FOLDER TO LOCAL STORAGE
+  mainWindow.webContents
+    .executeJavaScript('localStorage.getItem("rememberOutputFolder");', true)
+    .then((result) => {
+      if (result === "false") return;
+      mainWindow.webContents
+        .executeJavaScript(
+          `localStorage.setItem("lastFolderPath", "${folderPath}");`,
+          true
+        )
+        .then(() => {
+          logit(`Saved Last Folder Path (${folderPath}) to Local Storage`);
+        });
+    });
+
   const isDefaultModel = defaultModels.includes(model);
 
   // COPY IMAGE TO TMP FOLDER

renderer/components/LeftPaneImageSteps.tsx

@@ -10,7 +10,6 @@ interface IProps {
   selectImageHandler: () => Promise<void>;
   selectFolderHandler: () => Promise<void>;
   handleModelChange: (e: any) => void;
-  handleDrop: (e: any) => void;
   outputHandler: () => Promise<void>;
   upscaylHandler: () => Promise<void>;
   batchMode: boolean;
@@ -19,13 +18,8 @@ interface IProps {
   outputPath: string;
   doubleUpscayl: boolean;
   setDoubleUpscayl: React.Dispatch<React.SetStateAction<boolean>>;
-  model: string;
   setModel: React.Dispatch<React.SetStateAction<string>>;
-  isVideo: boolean;
-  setIsVideo: React.Dispatch<React.SetStateAction<boolean>>;
-  saveImageAs: string;
   setSaveImageAs: React.Dispatch<React.SetStateAction<string>>;
-  gpuId: string;
   setGpuId: React.Dispatch<React.SetStateAction<string>>;
   dimensions: {
     width: number | null;
@@ -38,7 +32,6 @@ function LeftPaneImageSteps({
   selectImageHandler,
   selectFolderHandler,
   handleModelChange,
-  handleDrop,
   outputHandler,
   upscaylHandler,
   batchMode,
@@ -47,13 +40,8 @@ function LeftPaneImageSteps({
   outputPath,
   doubleUpscayl,
   setDoubleUpscayl,
-  model,
   setModel,
-  isVideo,
-  setIsVideo,
-  gpuId,
   setGpuId,
-  saveImageAs,
   setSaveImageAs,
   dimensions,
 }: IProps) {
@@ -84,7 +72,7 @@ function LeftPaneImageSteps({
     } else {
       const currentlySavedModel = JSON.parse(
         localStorage.getItem("model")
-      ) as (typeof modelOptions)[0];
+      ) as typeof modelOptions[0];
       setCurrentModel(currentlySavedModel);
       setModel(currentlySavedModel.value);
     }

renderer/components/SettingsTab.tsx

@@ -2,19 +2,11 @@ import React, { useEffect, useState } from "react";
 import { themeChange } from "theme-change";
 import commands from "../../electron/commands";
 import { useAtom } from "jotai";
-import {
+import { customModelsPathAtom, scaleAtom } from "../atoms/userSettingsAtom";
-  customModelsPathAtom,
-  rememberOutputFolderAtom,
-  scaleAtom,
-} from "../atoms/userSettingsAtom";
 import { modelsListAtom } from "../atoms/modelsListAtom";
 
 interface IProps {
   batchMode: boolean;
-  setBatchMode: React.Dispatch<React.SetStateAction<boolean>>;
-  rememberOutputFolder: boolean;
-  setRememberOutputFolder: React.Dispatch<React.SetStateAction<boolean>>;
-  imagePath: string;
   setModel: React.Dispatch<React.SetStateAction<string>>;
   saveImageAs: string;
   setSaveImageAs: React.Dispatch<React.SetStateAction<string>>;
@@ -25,8 +17,6 @@ interface IProps {
 
 function SettingsTab({
   batchMode,
-  setBatchMode,
-  imagePath,
   setModel,
   gpuId,
   setGpuId,
@@ -50,9 +40,7 @@ function SettingsTab({
 
   const [scale, setScale] = useAtom(scaleAtom);
 
-  const [rememberOutputFolder, setRememberOutputFolder] = useAtom(
+  const [rememberOutputFolder, setRememberOutputFolder] = useState(false);
-    rememberOutputFolderAtom
-  );
 
   useEffect(() => {
     themeChange(false);
@@ -71,7 +59,7 @@ function SettingsTab({
     } else {
       const currentlySavedModel = JSON.parse(
         localStorage.getItem("model")
-      ) as (typeof modelOptions)[0];
+      ) as typeof modelOptions[0];
       setCurrentModel(currentlySavedModel);
       setModel(currentlySavedModel.value);
     }
@@ -82,6 +70,22 @@ function SettingsTab({
       const currentlySavedGpuId = localStorage.getItem("gpuId");
       setGpuId(currentlySavedGpuId);
     }
+
+    if (!localStorage.getItem("rememberOutputFolder")) {
+      localStorage.setItem("rememberOutputFolder", "false");
+    } else {
+      const currentlySavedRememberOutputFolder = localStorage.getItem(
+        "rememberOutputFolder"
+      );
+      console.log(
+        "🚀 => file: SettingsTab.tsx:80 => currentlySavedRememberOutputFolder:",
+        currentlySavedRememberOutputFolder
+      );
+
+      setRememberOutputFolder(
+        currentlySavedRememberOutputFolder === "true" ? true : false
+      );
+    }
   }, []);
 
   useEffect(() => {
@@ -161,9 +165,19 @@ function SettingsTab({
         <input
           type="checkbox"
           className="toggle-primary toggle"
-          defaultChecked={rememberOutputFolder}
+          checked={rememberOutputFolder}
           onClick={() => {
-            setRememberOutputFolder((oldValue) => !oldValue);
+            setRememberOutputFolder((oldValue) => {
+              if (oldValue === true) {
+                localStorage.removeItem("lastOutputFolderPath");
+              }
+
+              return !oldValue;
+            });
+            localStorage.setItem(
+              "rememberOutputFolder",
+              JSON.stringify(!rememberOutputFolder)
+            );
           }}
         />
       </div>

renderer/pages/index.tsx

@@ -15,7 +15,6 @@ import { modelsListAtom } from "../atoms/modelsListAtom";
 import {
   batchModeAtom,
   customModelsPathAtom,
-  rememberOutputFolderAtom,
   scaleAtom,
 } from "../atoms/userSettingsAtom";
 
@@ -30,9 +29,6 @@ const Home = () => {
   const [loaded, setLoaded] = useState(false);
   const [version, setVersion] = useState("");
   const [batchMode, setBatchMode] = useAtom(batchModeAtom);
-  const [rememberOutputFolder, setRememberOutputFolder] = useAtom(
-    rememberOutputFolderAtom
-  );
   const [batchFolderPath, setBatchFolderPath] = useState("");
   const [upscaledBatchFolderPath, setUpscaledBatchFolderPath] = useState("");
   const [doubleUpscayl, setDoubleUpscayl] = useState(false);
@@ -203,6 +199,18 @@ const Home = () => {
     }
   }, []);
 
+  useEffect(() => {
+    const rememberOutputFolder = localStorage.getItem("rememberOutputFolder");
+    const lastOutputFolderPath = localStorage.getItem("lastOutputFolderPath");
+
+    if (rememberOutputFolder === "true") {
+      setOutputPath(lastOutputFolderPath);
+    } else {
+      setOutputPath("");
+      localStorage.removeItem("lastOutputFolderPath");
+    }
+  }, []);
+
   useEffect(() => {
     setProgress("");
   }, [batchMode]);
@@ -370,7 +378,6 @@ const Home = () => {
       }
 
       var dirname = filePath.match(/(.*)[\/\\]/)[1] || "";
-      console.log("🚀 => handleDrop => dirname", dirname);
       setOutputPath(dirname);
     }
   };
@@ -399,6 +406,10 @@ const Home = () => {
     var path = await window.electron.invoke(commands.SELECT_FOLDER);
     if (path !== null) {
       setOutputPath(path);
+      const rememberOutputFolder = localStorage.getItem("rememberOutputFolder");
+      if (rememberOutputFolder) {
+        localStorage.setItem("lastOutputFolderPath", path);
+      }
     } else {
       console.log("Getting output path from input file");
     }
@@ -517,7 +528,6 @@ const Home = () => {
             selectImageHandler={selectImageHandler}
             selectFolderHandler={selectFolderHandler}
             handleModelChange={handleModelChange}
-            handleDrop={handleDrop}
             outputHandler={outputHandler}
             upscaylHandler={upscaylHandler}
             batchMode={batchMode}
@@ -526,13 +536,8 @@ const Home = () => {
             outputPath={outputPath}
             doubleUpscayl={doubleUpscayl}
             setDoubleUpscayl={setDoubleUpscayl}
-            model={model}
             setModel={setModel}
-            isVideo={isVideo}
-            setIsVideo={setIsVideo}
-            gpuId={gpuId}
             setGpuId={setGpuId}
-            saveImageAs={saveImageAs}
             setSaveImageAs={setSaveImageAs}
             dimensions={dimensions}
           />
@@ -541,10 +546,6 @@ const Home = () => {
         {selectedTab === 1 && (
           <SettingsTab
             batchMode={batchMode}
-            setBatchMode={setBatchMode}
-            rememberOutputFolder={rememberOutputFolder}
-            setRememberOutputFolder={setRememberOutputFolder}
-            imagePath={imagePath}
             setModel={setModel}
             gpuId={gpuId}
             setGpuId={setGpuId}
@@ -564,8 +565,7 @@ const Home = () => {
         onDragOver={(e) => handleDragOver(e)}
         onDragEnter={(e) => handleDragEnter(e)}
         onDragLeave={(e) => handleDragLeave(e)}
-        onPaste={(e) => handlePaste(e)}
+        onPaste={(e) => handlePaste(e)}>
-      >
         {progress.length > 0 &&
         upscaledImagePath.length === 0 &&
         upscaledBatchFolderPath.length === 0 &&
@@ -642,8 +642,7 @@ const Home = () => {
             </p>
             <button
               className="bg-gradient-blue rounded-lg p-3 font-medium text-white/90 transition-colors"
-              onClick={openFolderHandler}
+              onClick={openFolderHandler}>
-            >
               Open Upscayled Folder
             </button>
           </>