[feature] add interfaces for classes

src/App.tsx

@@ -1,10 +1,10 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import "@styles/App.scss";
-import { IChannel, IClient, IConnection } from "interfaces/teamspeak";
+import { IChannel, IClient, IConnection, ITS5ConnectionHandler } from "interfaces/teamspeak";
 import { useEffect, useState } from "react";
 import Viewer from "./Viewer";
 import { useSearchParams } from "react-router-dom";
-import { TS5Connection } from "handlers/teamspeak/connectionHandler";
+import { TS5ConnectionHandler } from "handlers/teamspeak/connectionHandler";
 
 export default function App() {
   const [searchParams] = useSearchParams();
@@ -38,7 +38,7 @@ export default function App() {
   useEffect(() => {
     const remoteAppPort = searchParams.get("remoteAppPort");
 
-    const tsConnection: TS5Connection = new TS5Connection(
+    const tsConnection: ITS5ConnectionHandler = new TS5ConnectionHandler(
       parseInt(remoteAppPort ?? "5899"),
       setConnections,
       setChannels,

src/handlers/teamspeak/connectionHandler.ts

@@ -1,16 +1,16 @@
-import { IAuthSenderPayload, IChannel, IClient, IConnection, ITS5Connection } from "interfaces/teamspeak";
+import { IAuthSenderPayload, IChannel, IClient, IConnection, ITS5ConnectionHandler, ITS5DataHandler, ITS5MessageHandler } from "interfaces/teamspeak";
 import { TS5DataHandler } from "./dataHandler";
 import { TS5MessageHandler } from "./messageHandler";
 
 
 // Establish connection to TS5 client
 // Main class
-export class TS5Connection implements ITS5Connection {
+export class TS5ConnectionHandler implements ITS5ConnectionHandler {
   ws: WebSocket; // Websocket connection to TS5 client
   authenticated = false; // Is the connection authenticated?
   remoteAppPort: number; // Port of TS5 client
-  dataHandler: TS5DataHandler; // Handles data/lists and states
+  dataHandler: ITS5DataHandler; // Handles data/lists and states
-  messageHandler: TS5MessageHandler; // Handles messages received from TS5 client
+  messageHandler: ITS5MessageHandler; // Handles messages received from TS5 client
 
   constructor(
     // Port of TS5 client

src/handlers/teamspeak/messageHandler.ts

@@ -1,15 +1,14 @@
-import { IChannelInfos, IConnection, IChannel, IAuthMessage, IClientInfo, IClientMovedMessage, IClient, IClientPropertiesUpdatedMessage, ITalkStatusChangedMessage, IClientSelfPropertyUpdatedMessage, IServerPropertiesUpdatedMessage, IConnectStatusChangedMessage, IChannelsMessage, ITS5MessageHandler } from "interfaces/teamspeak";
+import { IChannelInfos, IConnection, IChannel, IAuthMessage, IClientInfo, IClientMovedMessage, IClient, IClientPropertiesUpdatedMessage, ITalkStatusChangedMessage, IClientSelfPropertyUpdatedMessage, IServerPropertiesUpdatedMessage, IConnectStatusChangedMessage, IChannelsMessage, ITS5MessageHandler, ITS5DataHandler } from "interfaces/teamspeak";
-import { TS5DataHandler } from "./dataHandler";
 
 // Handle incoming messages from TS5 client
 export class TS5MessageHandler implements ITS5MessageHandler {
   ws: WebSocket;
-  dataHandler: TS5DataHandler;
+  dataHandler: ITS5DataHandler;
 
   setActiveConnectionStateId: React.Dispatch<React.SetStateAction<number>>;
   activeConnectionId = 0;
 
-  constructor(ws: WebSocket, dataHandler: TS5DataHandler, setActiveConnectionStateId: React.Dispatch<React.SetStateAction<number>>) {
+  constructor(ws: WebSocket, dataHandler: ITS5DataHandler, setActiveConnectionStateId: React.Dispatch<React.SetStateAction<number>>) {
     this.ws = ws;
     this.dataHandler = dataHandler;
     this.setActiveConnectionStateId = setActiveConnectionStateId;

src/interfaces/teamspeak.ts

@@ -1,5 +1,5 @@
 // Classes
-export interface ITS5Connection {
+export interface ITS5ConnectionHandler {
   ws: WebSocket;
   authenticated: boolean;
   remoteAppPort: number;