feat: add screens folder

template/src/app/App.tsx

@@ -2,7 +2,8 @@ import { useEffect, useState, Suspense } from "react";
 import { CurrentPage } from "./CurrentPage";
 import { Loading } from "components/Loading";
 import { WINDOW_NAMES } from "./constants";
-import { getCurrentWindow } from "lib";
+import { getCurrentWindow } from "lib/overwolf-essentials";
+import { log } from "lib/log";
 import "./App.css";
 
 //This is the main component of the app, it is the root of the app
@@ -12,20 +13,15 @@ export const App = () => {
   const [page, setPage] = useState<string>("");
 
   useEffect(() => {
-    async function preLoad() {
-      if (process.env.NODE_ENV === "development") {
-        //you can set the current window to dev if you want to see the dev page <Normal Browser>
-        setPage(WINDOW_NAMES.DESKTOP);
-      } else {
-        const currentWindow = await getCurrentWindow();
-        setPage(currentWindow);
-        console.info(
-          "[🐺 overwolf-modern-react-boilerplate][🧰 src/app/App.tsx][🔧 useEffect - preLoad]",
-          JSON.stringify({ currentWindow }, null, 2)
-        );
-      }
-    }
-    preLoad();
+    (async function preLoad() {
+      const currentWindow = await getCurrentWindow();
+      setPage(currentWindow);
+      log(
+        JSON.stringify({ currentWindow }, null, 2),
+        "src/app/App.tsx",
+        "useEffect - preLoad"
+      );
+    })();
   }, []);
   //this is fallback for the loading current screen
   return (

template/src/lib/auth.ts

@@ -1,7 +1,12 @@
+import { log } from "./log";
+import { isDev } from "./utils";
+
 const enum ThirdPartyProvider {
   Google = "google",
   Spotify = "spotify",
   Twitch = "twitch",
+  Custom = "custom",
+  //...
 }
 
 function createUrl(provider: ThirdPartyProvider): string {
@@ -16,8 +21,8 @@ function createUrl(provider: ThirdPartyProvider): string {
 
 function loginWithThirdParty(provider: ThirdPartyProvider) {
   const url = createUrl(provider);
-  if (process.env.NODE_ENV === "development") {
-    console.log(`Redirecting to ${url}`);
+  if (isDev) {
+    log(`Redirecting to ${url}`, "src/lib/auth.ts", "loginWithThirdParty");
     window.open(url, "_blank");
   }
   overwolf.utils.openUrlInDefaultBrowser(url);

template/src/lib/io.ts

@@ -54,8 +54,8 @@ const getFileSize = (data: string): string => {
  * @param data The data to write to the file.
  * @returns A promise that resolves to a message indicating the status of the write operation.
  */
-const overwolfWriteFileContents = <T>(path: string, data: T): Promise<string> =>
-  new Promise((resolve) => {
+const overwolfWriteFileContents = <T>(path: string, data: T) =>
+  new Promise<string>((resolve) => {
     overwolf.io.writeFileContents(
       path,
       JSON.stringify(data),

template/src/lib/log.ts

@@ -0,0 +1,8 @@
+const log = (message: string, component: string, method: string) => {
+  console.info(
+    `%c[🐺 overwolf-modern-react-boilerplate][🧰 ${component}][🔧 ${method}][📃 ${message} ]`,
+    "background: #222; color: #bada55; padding: 2px 0; border-radius: 2px; font-weight: bold;"
+  );
+};
+
+export { log };

template/src/lib/overwolf-essentials.ts

@@ -1,3 +1,6 @@
+import { WINDOW_NAMES } from "app/constants";
+import { isDev } from "./utils";
+
 async function obtainDeclaredWindow(
   windowName: string
 ): Promise<overwolf.windows.WindowInfo> {
@@ -11,6 +14,25 @@ async function obtainDeclaredWindow(
     });
   });
 }
+
+async function getCurrentWindow() {
+  if (isDev) {
+    console.log(
+      `Running in dev mode, returning ${WINDOW_NAMES.DESKTOP} window, you can change this in src/lib/overwolf-essentials.ts: getCurrent`
+    );
+    Promise.resolve(WINDOW_NAMES.DESKTOP);
+  }
+  return new Promise<string>((resolve, reject) => {
+    overwolf.windows.getCurrentWindow((result) => {
+      if (result.success) {
+        resolve(result.window);
+      } else {
+        reject(result.error);
+      }
+    });
+  });
+}
+
 function getMonitorsList(): Promise<overwolf.utils.Display[]> {
   return new Promise<overwolf.utils.Display[]>((resolve) => {
     overwolf.utils.getMonitorsList((result) => {
@@ -19,4 +41,4 @@ function getMonitorsList(): Promise<overwolf.utils.Display[]> {
   });
 }
 
-export { obtainDeclaredWindow, getMonitorsList };
+export { obtainDeclaredWindow, getMonitorsList, getCurrentWindow };

template/src/lib/utils.ts

@@ -94,6 +94,8 @@ const parseSafeJSON = <T>(data: string = ""): T | null => {
   }
 };
 
+const isDev = process.env.NODE_ENV === "development";
+
 export {
   classNames,
   formatDate,
@@ -102,4 +104,5 @@ export {
   normalizeName,
   parseSafeJSON,
   sleep,
+  isDev,
 };