Fixed storage bug

2024-11-28 01:10:52 +01:00 · 2023-04-28 18:17:51 +05:30 · 2023-04-28 18:17:51 +05:30 · d4b776ea23
commit d4b776ea23
parent a9b75d6843
4 changed files with 87 additions and 91 deletions
--- a/electron/index.ts
+++ b/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 =
-      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`);
-      });
+    imagePath = filePaths[0];

    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 =
-      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`);
-          });
-      });
-
+    folderPath = folderPaths[0];
    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
--- a/renderer/components/LeftPaneImageSteps.tsx
+++ b/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);
    }
--- a/renderer/components/SettingsTab.tsx
+++ b/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 {
-  customModelsPathAtom,
-  rememberOutputFolderAtom,
-  scaleAtom,
-} from "../atoms/userSettingsAtom";
+import { customModelsPathAtom, 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(
-    rememberOutputFolderAtom
-  );
+  const [rememberOutputFolder, setRememberOutputFolder] = useState(false);

  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>
--- a/renderer/pages/index.tsx
+++ b/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>
          </>