Fixed storage bug

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 {
-  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>

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>
           </>