From dde729becafb5ab895af7646a48e0d2b4d2e93da Mon Sep 17 00:00:00 2001
From: Yevgeniy Akimenko <yakimenko@bcit.ca>
Date: Mon, 1 May 2023 21:37:29 -0700
Subject: [PATCH] fixed react infinite loop on adding single image

---
 renderer/pages/index.tsx | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/renderer/pages/index.tsx b/renderer/pages/index.tsx
index c5ed1e3..736e673 100644
--- a/renderer/pages/index.tsx
+++ b/renderer/pages/index.tsx
@@ -19,6 +19,8 @@ const Home = () => {
   // STATES
   const [imagePath, SetImagePath] = useState("");
   const [upscaledImagePath, setUpscaledImagePath] = useState("");
+  const [formattedImagePath, setFormattedImagePath] = useState("");
+  const [formattedUpscaledImagePath, setFormattedUpscaledImagePath] = useState("");
   const [outputPath, setOutputPath] = useState("");
   const [scaleFactor] = useState(4);
   const [progress, setProgress] = useState("");
@@ -126,6 +128,7 @@ const Home = () => {
       setProgress("");
       setUpscaledImagePath(data);
       logit("upscaledImagePath: ", upscaledImagePath);
+      setFormattedUpscaledImagePath(formatPath(data));
       logit(`📢 UPSCAYL_DONE: `, data);
     });
 
@@ -141,6 +144,7 @@ const Home = () => {
       setProgress("");
       setDoubleUpscaylCounter(0);
       setUpscaledImagePath(data);
+      setFormattedUpscaledImagePath(formatPath(data));
       logit(`📢 DOUBLE_UPSCAYL_DONE: `, data);
     });
 
@@ -275,6 +279,7 @@ const Home = () => {
     if (path !== null) {
       logit("📢 Selected Image Path: ", path);
       SetImagePath(path);
+      setFormattedImagePath(formatPath(path));
       var dirname = path.match(/(.*)[\/\\]/)[1] || "";
       logit("📢 Selected Image Directory: ", dirname);
       setOutputPath(dirname);
@@ -364,6 +369,7 @@ const Home = () => {
       } else {
         logit("📢 Setting image path: ", filePath);
         SetImagePath(filePath);
+        setFormattedImagePath(formatPath(filePath));
       }
 
       var dirname = filePath.match(/(.*)[\/\\]/)[1] || "";
@@ -389,6 +395,7 @@ const Home = () => {
       alert("Please drag and drop an image");
     } else {
       SetImagePath(filePath);
+      setFormattedImagePath(formatPath(filePath));
       var dirname = filePath.match(/(.*)[\/\\]/)[1] || "";
       logit("📢 Setting output path: ", dirname);
       setOutputPath(dirname);
@@ -630,8 +637,8 @@ const Home = () => {
                   "file://" +
                   `${
                     upscaledImagePath
-                      ? formatPath(upscaledImagePath)
-                      : formatPath(imagePath)
+                      ? formattedUpscaledImagePath
+                      : formattedImagePath
                   }`
                 }
                 onLoad={(e: any) => {
@@ -642,7 +649,7 @@ const Home = () => {
                 }}
                 draggable="false"
                 alt=""
-                className={`h-full w-full bg-[#1d1c23] object-contain`}
+                className="h-full w-full bg-[#1d1c23] object-contain"
               />
             </>
           )}
@@ -689,7 +696,7 @@ const Home = () => {
                     </p>
 
                     <img
-                      src={"file:///" + formatPath(imagePath)}
+                      src={"file:///" + formattedImagePath}
                       alt="Original"
                       onMouseMove={handleMouseMove}
                       style={{
@@ -707,7 +714,7 @@ const Home = () => {
                       Upscayled
                     </p>
                     <img
-                      src={"file://" + formatPath(upscaledImagePath)}
+                      src={"file://" + formattedUpscaledImagePath}
                       alt="Upscayl"
                       style={{
                         objectFit: "contain",