Update code

renderer/components/hooks/use-custom-models.ts

@@ -0,0 +1,17 @@
+import ELECTRON_COMMANDS from "@common/commands";
+import { useEffect } from "react";
+import useLog from "./useLog";
+
+export const initCustomModels = () => {
+  const { logit } = useLog();
+
+  useEffect(() => {
+    const customModelsPath = JSON.parse(
+      localStorage.getItem("customModelsPath"),
+    );
+    if (customModelsPath !== null) {
+      window.electron.send(ELECTRON_COMMANDS.GET_MODELS_LIST, customModelsPath);
+      logit("🎯 GET_MODELS_LIST: ", customModelsPath);
+    }
+  }, []);
+};

renderer/components/hooks/use-electron.ts

@@ -1,8 +1,5 @@
 import { useEffect } from "react";
-import { useAtomValue } from "jotai";
-import { translationAtom } from "@/atoms/translations-atom";
 import ELECTRON_COMMANDS from "@common/commands";
-import useLog from "./useLog";
 
 const useElectron = ({
   command,

renderer/components/main-content/index.tsx

@@ -1,24 +1,14 @@
 import useLog from "../hooks/useLog";
 import { useState, useCallback, useMemo, useRef } from "react";
 import ELECTRON_COMMANDS from "../../../common/commands";
-import { useAtom, useAtomValue, useSetAtom } from "jotai";
-import { logAtom } from "../../atoms/logAtom";
-import { modelsListAtom } from "../../atoms/modelsListAtom";
+import { useAtomValue, useSetAtom } from "jotai";
 import {
   batchModeAtom,
   lensSizeAtom,
-  compressionAtom,
-  dontShowCloudModalAtom,
-  noImageProcessingAtom,
   savedOutputPathAtom,
   progressAtom,
-  scaleAtom,
   viewTypeAtom,
   rememberOutputFolderAtom,
-  customWidthAtom,
-  useCustomWidthAtom,
-  tileSizeAtom,
-  showSidebarAtom,
 } from "../../atoms/userSettingsAtom";
 import { useToast } from "@/components/ui/use-toast";
 import { sanitizePath } from "@common/sanitize-path";
@@ -45,10 +35,28 @@ const MainContent = ({
   batchFolderPath,
   doubleUpscaylCounter,
   setDimensions,
+}: {
+  imagePath: string;
+  resetImagePaths: () => void;
+  upscaledBatchFolderPath: string;
+  setImagePath: React.Dispatch<React.SetStateAction<string>>;
+  validateImagePath: (path: string) => void;
+  selectFolderHandler: () => void;
+  selectImageHandler: () => void;
+  upscaledImagePath: string;
+  batchFolderPath: string;
+  doubleUpscaylCounter: number;
+  setDimensions: React.Dispatch<
+    React.SetStateAction<{
+      width: number;
+      height: number;
+    }>
+  >;
 }) => {
   const t = useAtomValue(translationAtom);
   const { logit } = useLog();
   const { toast } = useToast();
+  const version = useUpscaylVersion();
 
   const upscaledImageRef = useRef<HTMLImageElement>(null);
 
@@ -63,7 +71,6 @@ const MainContent = ({
   const lensSize = useAtomValue(lensSizeAtom);
   const rememberOutputFolder = useAtomValue(rememberOutputFolderAtom);
   const [zoomAmount, setZoomAmount] = useState("100");
-  const version = useUpscaylVersion();
 
   const sanitizedUpscaledImagePath = useMemo(
     () => sanitizePath(upscaledImagePath),

renderer/components/sidebar/index.tsx

@@ -1,9 +1,8 @@
 "use client";
 import { useState } from "react";
-import { useAtom, useAtomValue } from "jotai";
+import { useAtom, useAtomValue, useSetAtom } from "jotai";
 import {
   batchModeAtom,
-  lensSizeAtom,
   compressionAtom,
   dontShowCloudModalAtom,
   noImageProcessingAtom,
@@ -11,8 +10,6 @@ import {
   overwriteAtom,
   progressAtom,
   scaleAtom,
-  viewTypeAtom,
-  rememberOutputFolderAtom,
   customWidthAtom,
   useCustomWidthAtom,
   tileSizeAtom,
@@ -37,11 +34,10 @@ import Header from "../Header";
 import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { logAtom } from "@/atoms/logAtom";
-import { modelsListAtom } from "@/atoms/modelsListAtom";
 import ELECTRON_COMMANDS from "@common/commands";
+import useUpscaylVersion from "../hooks/use-upscayl-version";
 
 const Sidebar = ({
-  upscaledImagePath,
   setUpscaledImagePath,
   batchFolderPath,
   setUpscaledBatchFolderPath,
@@ -50,7 +46,6 @@ const Sidebar = ({
   selectImageHandler,
   selectFolderHandler,
 }: {
-  upscaledImagePath: string;
   setUpscaledImagePath: React.Dispatch<React.SetStateAction<string>>;
   batchFolderPath: string;
   setUpscaledBatchFolderPath: React.Dispatch<React.SetStateAction<string>>;
@@ -65,11 +60,12 @@ const Sidebar = ({
   const t = useAtomValue(translationAtom);
   const { logit } = useLog();
   const { toast } = useToast();
+  const version = useUpscaylVersion();
 
   // LOCAL STATES
+  // TODO: Add electron handler for os
   const [os, setOs] = useState<"linux" | "mac" | "win" | undefined>(undefined);
   const [model, setModel] = useState("realesrgan-x4plus");
-  const [version, setVersion] = useState("");
   const [doubleUpscayl, setDoubleUpscayl] = useState(false);
   const overwrite = useAtomValue(overwriteAtom);
   const [gpuId, setGpuId] = useState("");
@@ -79,22 +75,16 @@ const Sidebar = ({
   const [showCloudModal, setShowCloudModal] = useState(false);
 
   // ATOMIC STATES
-  const [outputPath, setOutputPath] = useAtom(savedOutputPathAtom);
+  const outputPath = useAtomValue(savedOutputPathAtom);
   const [compression, setCompression] = useAtom(compressionAtom);
-  const [progress, setProgress] = useAtom(progressAtom);
+  const setProgress = useSetAtom(progressAtom);
   const [batchMode, setBatchMode] = useAtom(batchModeAtom);
-  const [logData, setLogData] = useAtom(logAtom);
-  const [modelOptions, setModelOptions] = useAtom(modelsListAtom);
+  const logData = useAtomValue(logAtom);
   const [scale] = useAtom(scaleAtom);
-  const [dontShowCloudModal, setDontShowCloudModal] = useAtom(
-    dontShowCloudModalAtom,
-  );
+  const setDontShowCloudModal = useSetAtom(dontShowCloudModalAtom);
   const noImageProcessing = useAtomValue(noImageProcessingAtom);
   const [news, setNews] = useAtom(newsAtom);
   const [showNewsModal, setShowNewsModal] = useAtom(showNewsModalAtom);
-  const viewType = useAtomValue(viewTypeAtom);
-  const lensSize = useAtomValue(lensSizeAtom);
-  const rememberOutputFolder = useAtomValue(rememberOutputFolderAtom);
   const customWidth = useAtomValue(customWidthAtom);
   const useCustomWidth = useAtomValue(useCustomWidthAtom);
   const tileSize = useAtomValue(tileSizeAtom);

renderer/pages/index.tsx

@@ -1,7 +1,7 @@
 "use client";
 import { useState, useEffect } from "react";
 import ELECTRON_COMMANDS from "../../common/commands";
-import { useAtom, useAtomValue } from "jotai";
+import { useAtom, useAtomValue, useSetAtom } from "jotai";
 import { modelsListAtom } from "../atoms/modelsListAtom";
 import {
   batchModeAtom,
@@ -21,32 +21,38 @@ import MainContent from "@/components/main-content";
 import getDirectoryFromPath from "@common/get-directory-from-path";
 import { FEATURE_FLAGS } from "@common/feature-flags";
 import { VALID_IMAGE_FORMATS } from "@/lib/valid-formats";
+import { initCustomModels } from "@/components/hooks/use-custom-models";
 
 const Home = () => {
   const t = useAtomValue(translationAtom);
   const { logit } = useLog();
   const { toast } = useToast();
 
-  // * SHARED HOOKS AND STATES
+  initCustomModels();
+
+  const [isLoading, setIsLoading] = useState(true);
+
   const [imagePath, setImagePath] = useState("");
-  const rememberOutputFolder = useAtomValue(rememberOutputFolderAtom);
-  const [outputPath, setOutputPath] = useAtom(savedOutputPathAtom);
+  const [upscaledImagePath, setUpscaledImagePath] = useState("");
   const [dimensions, setDimensions] = useState({
     width: null,
     height: null,
   });
-  const [progress, setProgress] = useAtom(progressAtom);
-  const [upscaledImagePath, setUpscaledImagePath] = useState("");
+  const setOutputPath = useSetAtom(savedOutputPathAtom);
+  const rememberOutputFolder = useAtomValue(rememberOutputFolderAtom);
+
+  const batchMode = useAtomValue(batchModeAtom);
   const [batchFolderPath, setBatchFolderPath] = useState("");
   const [upscaledBatchFolderPath, setUpscaledBatchFolderPath] = useState("");
-  const [isLoading, setIsLoading] = useState(true);
+
+  const setProgress = useSetAtom(progressAtom);
   const [doubleUpscaylCounter, setDoubleUpscaylCounter] = useState(0);
+
   const [modelOptions, setModelOptions] = useAtom(modelsListAtom);
+
   const [news, setNews] = useAtom(newsAtom);
   const [showNewsModal, setShowNewsModal] = useAtom(showNewsModalAtom);
-  const [batchMode, setBatchMode] = useAtom(batchModeAtom);
 
-  // * SHARED FUNCTIONS
   const selectImageHandler = async () => {
     resetImagePaths();
     var path = await window.electron.invoke(ELECTRON_COMMANDS.SELECT_FILE);
@@ -62,22 +68,7 @@ const Home = () => {
     }
     validateImagePath(path);
   };
-  const validateImagePath = (path: string) => {
-    if (path.length > 0) {
-      logit("🖼 imagePath: ", path);
-      const extension = path.toLocaleLowerCase().split(".").pop();
-      logit("🔤 Extension: ", extension);
-      if (!VALID_IMAGE_FORMATS.includes(extension.toLowerCase())) {
-        toast({
-          title: t("ERRORS.INVALID_IMAGE_ERROR.TITLE"),
-          description: t("ERRORS.INVALID_IMAGE_ERROR.DESCRIPTION"),
-        });
-        resetImagePaths();
-      }
-    } else {
-      resetImagePaths();
-    }
-  };
+
   const selectFolderHandler = async () => {
     resetImagePaths();
     var path = await window.electron.invoke(ELECTRON_COMMANDS.SELECT_FOLDER);
@@ -96,6 +87,23 @@ const Home = () => {
     }
   };
 
+  const validateImagePath = (path: string) => {
+    if (path.length > 0) {
+      logit("🖼 imagePath: ", path);
+      const extension = path.toLocaleLowerCase().split(".").pop();
+      logit("🔤 Extension: ", extension);
+      if (!VALID_IMAGE_FORMATS.includes(extension.toLowerCase())) {
+        toast({
+          title: t("ERRORS.INVALID_IMAGE_ERROR.TITLE"),
+          description: t("ERRORS.INVALID_IMAGE_ERROR.DESCRIPTION"),
+        });
+        resetImagePaths();
+      }
+    } else {
+      resetImagePaths();
+    }
+  };
+
   // ELECTRON EVENT LISTENERS
   useEffect(() => {
     const handleErrors = (data: string) => {
@@ -271,17 +279,6 @@ const Home = () => {
     );
   }, []);
 
-  // FETCH CUSTOM MODELS FROM CUSTOM MODELS PATH
-  useEffect(() => {
-    const customModelsPath = JSON.parse(
-      localStorage.getItem("customModelsPath"),
-    );
-    if (customModelsPath !== null) {
-      window.electron.send(ELECTRON_COMMANDS.GET_MODELS_LIST, customModelsPath);
-      logit("🎯 GET_MODELS_LIST: ", customModelsPath);
-    }
-  }, []);
-
   // FETCH NEWS
   useEffect(() => {
     // TODO: ADD AN ABOUT TAB
@@ -342,10 +339,6 @@ const Home = () => {
     setUpscaledBatchFolderPath("");
   };
 
-  // UTILS
-
-  // HANDLERS
-
   if (isLoading) {
     return (
       <Logo className="absolute left-1/2 top-1/2 w-36 -translate-x-1/2 -translate-y-1/2 animate-pulse" />
@@ -357,7 +350,6 @@ const Home = () => {
       <Sidebar
         imagePath={imagePath}
         dimensions={dimensions}
-        upscaledImagePath={upscaledImagePath}
         setUpscaledImagePath={setUpscaledImagePath}
         batchFolderPath={batchFolderPath}
         setUpscaledBatchFolderPath={setUpscaledBatchFolderPath}