From 91a9e189d7dcaea46e11df62b5644aac59ed73dd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alb=C3=A9rico=20Dias=20Barreto=20Filho?=
 <albericodiasbarretofilho@gmail.com>
Date: Tue, 9 Jan 2024 13:35:34 -0300
Subject: [PATCH] perf(hooks):  change hook options and improve hook logic

BREAKING CHANGE: The { displayLog?: boolean } option has been removed.
The parameter is passed in a variable instead of the object
useWindow hook fixed when there is no valid window name.
useGameEventProvider hook is changed to improve performance.
---
 README.md | 78 +++++++++++++++++++++++++++++++------------------------
 1 file changed, 44 insertions(+), 34 deletions(-)

diff --git a/README.md b/README.md
index 855defa..6188757 100644
--- a/README.md
+++ b/README.md
@@ -11,8 +11,12 @@ Custom hooks to help use overwolf api with the new react hooks technology.
 
 ```bash
 npm install --save overwolf-hooks
+pnpm install --save overwolf-hooks
+yarn add overwolf-hooks
 ```
 
+````
+
 ## How to use
 
 - If you are not familiar with Overwolf [overwolf api](https://overwolf.github.io/)
@@ -23,13 +27,14 @@ npm install --save overwolf-hooks
 1. **useWindow.tsx**
 
 ```TSX
-import { useWindow } from 'overwolf-hooks'
+import { useWindow } from 'overwolf-hooks';
 
-const options =  { displayLog: true }
+const shouldDisplayLog = true;
+const shouldListenToWindowStateChanges = true;
 
 const Panel = () => {
 
-const [desktopWindow] = useWindow("desktop", options);
+const [desktopWindow] = useWindow("desktop", shouldDisplayLog,shouldListenToWindowStateChanges);
 
 return (
     <div>
@@ -41,33 +46,38 @@ return (
     </div>
   )
 }
-```
+
 
 ## Force Window update
 
 If you need to force update the window state, you can use the refreshState function.
 
-
-```TSX
+```tsx
 import { useWindow } from 'overwolf-hooks'
 
-const options =  { displayLog: true, listenToWindowStateChanges: true }
+const shouldDisplayLog = true;
+const shouldListenToWindowStateChanges = true;
 
 const Panel = () => {
 
 //listenToWindowStateChanges is set to true to listen to window state changes, so you can read the window state from the desktopWindowStateChanged variable
-const [desktopWindow, desktopWindowStateChanged, refreshState] = useWindow("desktop", options);
+const [desktopWindow, desktopWindowStateChanged, refreshState] = useWindow("desktop", shouldDisplayLog, shouldListenToWindowStateChanges);
 
 useEffect(() => {
   //........ any other code
-  //force update
+  //force update/rebind the window object
   refreshState();
 }, [refreshState]);
 
+useEffect(() => {
+  //........ any other code
+  console.info("desktopWindowStateChanged", desktopWindowStateChanged);
+}, [desktopWindowStateChanged]);
+
 return <CustomComponent {...desktopWindow}/>
 }
-```
 
+```
 
 2. **useDrag.tsx**
 
@@ -75,12 +85,12 @@ return <CustomComponent {...desktopWindow}/>
 import { useEffect, useCallback } from "react";
 import { useDrag, useWindow } from 'overwolf-hooks'
 
-const options =  { displayLog: true }
+const shouldDisplayLog = true;
 
 const Header = () => {
 
-const [desktopWindow] = useWindow("desktop", options);
-const { onDragStart, onMouseMove, setCurrentWindowID } = useDrag(null, options);
+const [desktopWindow] = useWindow("desktop", shouldDisplayLog);
+const { onDragStart, onMouseMove, setCurrentWindowID } = useDrag(null, shouldDisplayLog);
 
 const updateDragWindow = useCallback(() => {
   if (desktopWindow?.id) setCurrentWindowID(desktopWindow.id);
@@ -101,27 +111,25 @@ return (
 3. **useGameEventProvider.tsx**
 
 ```TSX
-import { useEffect } from "react";
-import { useGameEventProvider } from 'overwolf-hooks'
-
-const options =  { displayLog: true }
-
-const Overlay = () => {
-
-const [{ event, info }, setGameFeatures] = useGameEventProvider<
-    GameExample.Info, //change with your GAME INTERFACE <OPTIONAL>
-    GameExample.Event //change with your GAME INTERFACE <OPTIONAL>
-  >(options);
+const REQUIRED_FEATURES = ["game_info", "match_info", "game_events"];
+const RETRY_TIMES = 5;
+const DISPLAY_OVERWOLF_HOOKS_LOGS = true;
+
+const BackgroundWindow = () => {
+  const { started, start, stop } = useGameEventProvider(
+    {
+      onInfoUpdates: (info) => { console.log("info", info); },
+      onNewEvents: (events) =>  { console.log("events", events); }),
+    },
+    REQUIRED_FEATURES,
+    RETRY_TIMES,
+    DISPLAY_OVERWOLF_HOOKS_LOGS
+  );
 
   useEffect(() => {
-    console.info("event", event); // or use https://github.com/AlbericoD/overwolf-modern-react-boilerplate#-remote-redux-debug
-  }, [event]);
-
-  useEffect(() => {
-    console.info("info", info); // or use https://github.com/AlbericoD/overwolf-modern-react-boilerplate#-remote-redux-debug
-  }, [info]);
-
-return <p>Overlay Window</p>
+    start();
+    return () => stop();
+  }, [start, stop]);
 
 }
 ```
@@ -132,11 +140,11 @@ return <p>Overlay Window</p>
 import { useEffect } from "react";
 import { useGameEventProvider, useRunningGame } from 'overwolf-hooks'
 
-const options =  { displayLog: true }
+const shouldDisplayLog = true;
 
 const Alert = () => {
 
-  const [currentGame] = useRunningGame(options);
+  const [currentGame] = useRunningGame(shouldDisplayLog);
 
   useEffect(() => {
     console.info("currentGame", currentGame);
@@ -150,3 +158,5 @@ return <p>Alert Window</p>
 ## License
 
 MIT © [AlbericoD](https://github.com/AlbericoD)
+
+````