Add dtmf buttons unstyled

package-lock.json

@@ -1551,6 +1551,11 @@
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.4.tgz",
       "integrity": "sha512-8+KAKzEvSUdeo+kmqnKrqgeE+LcA0tjYWFY7RPProVYwnqDjukzO+3b6dLD56rYX5TdWejnEOLJYOIeh4CXKuA=="
     },
+    "@types/lodash": {
+      "version": "4.14.149",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.149.tgz",
+      "integrity": "sha512-ijGqzZt/b7BfzcK9vTrS6MFljQRPn5BFWOx8oE0GYxribu6uV+aA9zZuXI1zc/etK9E8nrgdoF2+LgUw7+9tJQ=="
+    },
     "@types/minimatch": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.3.tgz",

package.json

@@ -7,9 +7,11 @@
     "@testing-library/react": "^9.4.0",
     "@testing-library/user-event": "^7.2.1",
     "@types/jest": "^24.9.1",
+    "@types/lodash": "^4.14.149",
     "@types/node": "^12.12.26",
     "@types/react": "^16.9.19",
     "@types/react-dom": "^16.9.5",
+    "lodash": "^4.17.15",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
     "react-scripts": "3.3.1",

src/App.tsx

@@ -1,8 +1,7 @@
 import React from 'react';
 import './App.css';
-import Phone from './Components/Phone/phone';
+import Phone from './components/Phone/phone';
-import useVoice from './Wrappers/voice';
+import useVoice from './wrappers/voice';
-import { voiceToken } from './Wrappers/default-config';
 
 const App = () => {
 

src/Components/Phone/Button/button.tsx

@@ -9,7 +9,6 @@ interface ButtonSettings
 
 export default function Button({title, onClick} : ButtonSettings) {
 	return (
-		<button className={styles[title]} onClick={() => onClick()}>
+		<button className={styles[title]} onClick={() => onClick()}/>
-		</button>
 	);
 }

src/Components/Phone/display-device-state.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { DeviceState } from '../../Hooks/voice-state';
+import { DeviceState } from '../../hooks/voice-state';
 
 export default function DisplayDeviceState({deviceState}: {deviceState: DeviceState})
 {

src/Components/Phone/phone.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
-import useVoice, { Voice } from '../../Wrappers/voice';
+import { Voice } from '../../wrappers/voice';
-import { voiceToken } from '../../Wrappers/default-config';
+import { voiceToken } from '../../wrappers/default-config';
 import Button from './Button/button';
 import DeviceState from './display-device-state';
+import DtmfButtons from './DtmfButtons/dtmf-buttons';
 
 export default function Phone({voice:{ startDevice, answer, reject, hangup, dial, voiceState} }: {voice: Voice})
 {
@@ -31,6 +32,7 @@ export default function Phone({voice:{ startDevice, answer, reject, hangup, dial
 			<div className="Phone">
 				<DeviceState deviceState = {voiceState.deviceState}/>
 				<Button title = "hangup" onClick = {() => hangup()}/>
+				<DtmfButtons/>
 			</div>
 		);
 	}

src/Mocks/mock-connection.ts

@@ -6,12 +6,12 @@ export class MockConnection implements Connection
 	private from = "+16133713909";
 	private to = "+123456789";
 
-	public parameters: ConnectionParameters = <ConnectionParameters>{ From: this.from, To: this.to };
+	public parameters: ConnectionParameters = { From: this.from, To: this.to } as ConnectionParameters;
 	public customParameters: Map<string, string> = new Map();
 	public options: object = {};
 
 	private connectionStatus: ConnectionStatus = "ringing";
-	private readonly handlers = <{[key in ConnectionEvent]: ((mute?: boolean) => void)[]}>{};
+	private readonly handlers = {} as {[key in ConnectionEvent]: ((mute?: boolean) => void)[]};
 	private muted: boolean = false;
 
 	private executeHandler(handlerName: ConnectionEvent)

src/Mocks/mock-device.ts

@@ -5,36 +5,36 @@ export const defaultDelay = 500;
 
 export class MockDevice implements Device
 {
-	public audio: DeviceAudio = <DeviceAudio>{};
+	public audio: DeviceAudio = {} as DeviceAudio;
 	private deviceStatus: DeviceStatus = "offline";
-	private readonly handlers = <{[key in DeviceEvent]: ((connection?: Connection) => void)[]}>{};
+	private readonly handlers = {} as {[key in DeviceEvent]: ((connection?: Connection) => void)[]};
 
 	constructor(token: string, params?: SetupParams)
 	{
-		setTimeout(() => this.handlers["ready"].forEach(handler =>  handler()), 1000);
+		setTimeout(() => this.handlers["ready"].forEach(handler =>  handler()), defaultDelay);
-		setTimeout(() => this.handlers["incoming"].forEach(handler =>  handler(new MockConnection())), 5000);
+		setTimeout(() => this.handlers["incoming"].forEach(handler =>  handler(new MockConnection())), 2000);
 	}
 	
 	public setup(token: string, params?: SetupParams): void {}
 
 	public connect(params: any, audioConstraints?: any): Connection 
 	{
-		return <Connection>{};
+		return {} as Connection;
 	}
 
 	public activeConnection(): Connection 
 	{
-		return <Connection>{};
+		return {} as Connection;
 	}
 
 	public destroy(): void
 	{
-		setTimeout(() => this.handlers["offline"]?.forEach(handler =>  handler()), 500);
+		setTimeout(() => this.handlers["offline"]?.forEach(handler =>  handler()), defaultDelay);
 	}
 
 	public disconnectAll(): void
 	{
-		setTimeout(() => this.handlers["disconnect"]?.forEach(handler =>  handler()), 500);
+		setTimeout(() => this.handlers["disconnect"]?.forEach(handler =>  handler()), defaultDelay);
 	}
 
 	public status()

src/Wrappers/voice.ts

@@ -1,7 +1,7 @@
 import { Device, Connection } from "twilio-client";
-import useVoiceState, { VoiceState } from "../Hooks/voice-state";
+import useVoiceState, { VoiceState } from "../hooks/voice-state";
 import { useState } from "react";
-import { MockDevice } from "../Mocks/mock-device";
+import { MockDevice } from "../mocks/mock-device";
 
 export interface Voice
 {

src/components/Phone/DtmfButtons/dtmf-buttons.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { chunk } from 'lodash';
+
+interface DtmfButton
+{
+	title: string;
+	subTitle:string;
+}
+
+const buttons: DtmfButton[] = [
+	{title: "1", subTitle: ""},
+	{title: "2", subTitle: "abc"},
+	{title: "3", subTitle: "efg"},
+	{title: "4", subTitle: "hij"},
+	{title: "5", subTitle: "klm"},
+	{title: "6", subTitle: "nop"},
+	{title: "7", subTitle: "qrs"},
+	{title: "8", subTitle: "tuv"},
+	{title: "9", subTitle: "wxyz"},
+	{title: "*", subTitle: ""},
+	{title: "0", subTitle: "+"},
+	{title: "#", subTitle: ""},
+];
+
+export default function DtmfButtons() {
+	return (
+		<div>
+			{ chunk(buttons, 3).map((buttonRow, rowIndex) =>
+				<div key={rowIndex}>
+					{ buttonRow.map(({title, subTitle}, index) => <button>{ title }</button>) }
+				</div>
+				)
+			}
+		</div>
+	);
+}