Add phone components

Add mocks

src/Wrappers/voice.ts

@@ -1,53 +1,94 @@
 import { Device, Connection } from "twilio-client";
 import useVoiceState, { VoiceState } from "../Hooks/voice-state";
+import { useState } from "react";
+import { MockDevice } from "../Mocks/mock-device";
 
 export interface Voice
 {
 	startDevice(token: string): void; 
 	answer(): void;
+	reject(): void;
 	hangup(): void;
+	dial(phoneNumber: string): void;
 	voiceState: VoiceState;
 }
 
 export default function useVoice() 
 {
 	const state = useVoiceState();
-	let device: Device;
-	let connection: Connection;
+	console.log("Creating new voice");
+
+	const [device, setDevice] = useState<Device>();
+	const [connection, setConnection] = useState<Connection>();
 
 	const startDevice = (token: string) =>
 	{
-		device = new Device(token);
+		// const device = new Device(token)
+		const  device = new MockDevice(token);
+
+		console.log("Creating new device", device);
 
 		device.on("ready", () => state.onDeviceStateUpdate("Disconnected"));
 		device.on("offline", () => state.onDeviceStateUpdate("Offline"));
-		device.on("disconnect", () => state.onDeviceStateUpdate("Disconnected"));
-		device.on("cancel", () => state.onDeviceStateUpdate("Disconnected"));
+
+		device.on("disconnect", () => 
+		{
+			setConnection(undefined);
+			state.onDeviceStateUpdate("Disconnected")
+		});
+
+		device.on("cancel", () => 
+		{
+			setConnection(undefined);
+			state.onDeviceStateUpdate("Disconnected")
+		});
 
 		device.on("incoming", (incomingConnection: Connection) => 
 		{
 			state.onDeviceStateUpdate("Ringing", incomingConnection.parameters.From);
 			
 			incomingConnection.on("accept", () => state.onDeviceStateUpdate("Connected"));
+			incomingConnection.on("disconnect", () => state.onDeviceStateUpdate("Disconnected"));
 			incomingConnection.on("mute", muted => state.onDeviceStateUpdate(muted ? "Muted" : "Connected"));
-			connection = incomingConnection;
+
+			setConnection(incomingConnection);
 		});
+
+		setDevice(device);
 	}
 
 	const answer = () =>
 	{
-		connection.accept();
+		connection?.accept();
+	}
+
+	const reject = () =>
+	{
+		connection?.reject();
 	}
 
 	const hangup = () =>
 	{
-		device.disconnectAll();
+		device?.disconnectAll();
+	}
+
+	const dial = (phoneNumber: string) =>
+	{
+		const connection = device?.connect({To: phoneNumber});
+
+		connection?.on("accept", () => state.onDeviceStateUpdate("Connected"));
+		connection?.on("disconnect", () => state.onDeviceStateUpdate("Disconnected"));
+		connection?.on("mute", muted => state.onDeviceStateUpdate(muted ? "Muted" : "Connected"));
+
+		setConnection(connection);
 	}
 
 	return {
 		startDevice,
 		answer,
+		reject,
 		hangup,
+		dial,
 		voiceState: state.voiceState,
-	}
+	} as Voice;
 }