Merge pull request #43 from DerTyp7/refactor_custom-react-hook

Refactor custom react hook

package.json

@@ -1,7 +1,7 @@
 {
   "name": "ts5-obs-overlay",
   "private": true,
-  "version": "1.1.3",
+  "version": "1.2.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -15,6 +15,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.14.1",
+    "react-ts5-remote-app-api": "^1.0.5",
     "sass": "^1.63.6"
   },
   "devDependencies": {

src/App.tsx

@@ -1,57 +1,14 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import "@styles/App.scss";
-import { IChannel, IClient, IConnection, ITS5ConnectionHandler } from "@interfaces/teamspeak";
-import { useEffect, useState } from "react";
 import Viewer from "./Viewer";
 import { useSearchParams } from "react-router-dom";
-import { TS5ConnectionHandler } from "@handlers/teamspeak/connectionHandler";
+import useTSRemoteApp, { IClient } from "react-ts5-remote-app-api";
 
 export default function App() {
   const [searchParams] = useSearchParams();
-
-  const [clients, setClients] = useState<IClient[]>([]);
-  const [channels, setChannels] = useState<IChannel[]>([]);
-  const [connections, setConnections] = useState<IConnection[]>([]);
-  const [activeConnectionId, setActiveConnectionId] = useState<number>(1);
-
-  const [currentConnection, setCurrentConnection] = useState<IConnection | undefined>(undefined);
-  const [currentChannel, setCurrentChannel] = useState<IChannel | undefined>(undefined);
-  const [currentClient, setCurrentClient] = useState<IClient | undefined>(undefined);
-
-  function setCurrentStates() {
-    const currentConnection = connections.find((connection) => connection.id === activeConnectionId);
-    setCurrentConnection(currentConnection);
-
-    if (currentConnection) {
-      const currentClient = clients.find((client) => client.id === currentConnection.clientId);
-      setCurrentClient(currentClient);
-      if (currentClient) {
-        const currentChannel = channels.find((channel) => channel.id === currentClient.channel?.id);
-        setCurrentChannel(currentChannel);
-        if (currentChannel) {
-          return currentChannel;
-        }
-      }
-    }
-  }
-
-  useEffect(() => {
-    const remoteAppPort = searchParams.get("remoteAppPort");
-
-    console.log(searchParams.get("hideNonTalking"));
-    const tsConnection: ITS5ConnectionHandler = new TS5ConnectionHandler(
-      parseInt(remoteAppPort ?? "5899"),
-      setConnections,
-      setChannels,
-      setClients,
-      setActiveConnectionId
-    );
-    tsConnection.connect();
-  }, []);
-
-  useEffect(() => {
-    setCurrentStates();
-  }, [clients, channels, connections, activeConnectionId]);
+  const { clients, activeConnectionId, currentChannel } = useTSRemoteApp({
+    remoteAppPort: parseInt(searchParams.get("remoteAppPort") ?? "5899"),
+  });
 
   return (
     <div className="App">

src/Viewer.tsx

@@ -1,5 +1,5 @@
-import { IChannel, IClient } from "@interfaces/teamspeak";
 import "@styles/Viewer.scss";
+import { IChannel, IClient } from "react-ts5-remote-app-api";
 
 export default function Viewer({
   clients,