Updated useAtom

renderer/components/LeftPaneImageSteps.tsx

@@ -84,7 +84,7 @@ function LeftPaneImageSteps({
     } else {
       const currentlySavedModel = JSON.parse(
         localStorage.getItem("model")
-      ) as typeof modelOptions[0];
+      ) as (typeof modelOptions)[0];
       setCurrentModel(currentlySavedModel);
       setModel(currentlySavedModel.value);
     }
@@ -176,7 +176,7 @@ function LeftPaneImageSteps({
           type="checkbox"
           className="toggle"
           defaultChecked={batchMode}
-          onClick={handleBatchMode}></input>
+          onClick={() => setBatchMode((oldValue) => !oldValue)}></input>
         <p
           className="mr-1 inline-block  cursor-help text-sm"
           data-tip="This will let you upscale all files in a folder at once">

renderer/components/SettingsTab.tsx

@@ -2,7 +2,11 @@ import React, { useEffect, useState } from "react";
 import { themeChange } from "theme-change";
 import commands from "../../electron/commands";
 import { useAtom } from "jotai";
-import { customModelsPathAtom, scaleAtom } from "../atoms/userSettingsAtom";
+import {
+  customModelsPathAtom,
+  rememberOutputFolderAtom,
+  scaleAtom,
+} from "../atoms/userSettingsAtom";
 import { modelsListAtom } from "../atoms/modelsListAtom";
 
 interface IProps {
@@ -22,8 +26,6 @@ interface IProps {
 function SettingsTab({
   batchMode,
   setBatchMode,
-  rememberOutputFolder,
-  setRememberOutputFolder,
   imagePath,
   setModel,
   gpuId,
@@ -48,6 +50,10 @@ function SettingsTab({
 
   const [scale, setScale] = useAtom(scaleAtom);
 
+  const [rememberOutputFolder, setRememberOutputFolder] = useAtom(
+    rememberOutputFolderAtom
+  );
+
   useEffect(() => {
     themeChange(false);
 
@@ -88,10 +94,6 @@ function SettingsTab({
     localStorage.setItem("saveImageAs", format);
   };
 
-  const handleRememberOutputFolder = () => {
-    setRememberOutputFolder((oldValue) => !oldValue);
-  };
-
   const handleGpuIdChange = (e) => {
     setGpuId(e.target.value);
     localStorage.setItem("gpuId", e.target.value);
@@ -160,7 +162,9 @@ function SettingsTab({
           type="checkbox"
           className="toggle-primary toggle"
           defaultChecked={rememberOutputFolder}
-          onChange={handleRememberOutputFolder}
+          onClick={() => {
+            setRememberOutputFolder((oldValue) => !oldValue);
+          }}
         />
       </div>
 
@@ -191,8 +195,7 @@ function SettingsTab({
               setCustomModelsPath(customModelPath);
               window.electron.send(commands.GET_MODELS_LIST, customModelPath);
             }
-          }}
-        >
+          }}>
           Select Folder
         </button>
       </div>
@@ -217,8 +220,7 @@ function SettingsTab({
               className={`btn-primary btn ${
                 saveImageAs === "png" && "btn-accent"
               }`}
-              onClick={() => setExportType("png")}
-            >
+              onClick={() => setExportType("png")}>
               PNG
             </button>
             {/* JPG */}
@@ -226,8 +228,7 @@ function SettingsTab({
               className={`btn-primary btn ${
                 saveImageAs === "jpg" && "btn-accent"
               }`}
-              onClick={() => setExportType("jpg")}
-            >
+              onClick={() => setExportType("jpg")}>
               JPG
             </button>
             {/* WEBP */}
@@ -235,8 +236,7 @@ function SettingsTab({
               className={`btn-primary btn ${
                 saveImageAs === "webp" && "btn-accent"
               }`}
-              onClick={() => setExportType("webp")}
-            >
+              onClick={() => setExportType("webp")}>
               WEBP
             </button>
           </div>
@@ -272,8 +272,7 @@ function SettingsTab({
       <div className="relative flex flex-col gap-2">
         <button
           className="btn-primary btn-xs btn absolute right-2 top-10 z-10"
-          onClick={copyOnClickHandler}
-        >
+          onClick={copyOnClickHandler}>
           {isCopied ? <span>Copied 📋</span> : <span>Copy 📋</span>}
         </button>
         <p className="text-sm font-medium">LOGS</p>