memoize hook functions and wrap up outgoing calls

app/phone-calls/hooks/use-device.tsx

@@ -1,16 +1,16 @@
-import { useCallback, useEffect, useMemo } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { useMutation } from "blitz";
 import type { TwilioError } from "@twilio/voice-sdk";
 import { Call, Device } from "@twilio/voice-sdk";
-import { atom, useAtom } from "jotai";
 
-import getToken, { ttl } from "../mutations/get-token";
+import getToken from "../mutations/get-token";
 import appLogger from "../../../integrations/logger";
 
 const logger = appLogger.child({ module: "use-device" });
 
 export default function useDevice() {
-	const [device, setDevice] = useAtom(deviceAtom);
+	const [device, setDevice] = useState<Device | null>(null);
+	const [isDeviceReady, setIsDeviceReady] = useState(() => device?.state === Device.State.Registered);
 	const [getTokenMutation] = useMutation(getToken);
 	const refreshToken = useCallback(async () => {
 		if (!device) {
@@ -21,16 +21,13 @@ export default function useDevice() {
 		const token = await getTokenMutation();
 		device.updateToken(token);
 	}, [device, getTokenMutation]);
-	const isDeviceReady = useMemo(() => device?.state === Device.State.Registered, [device]);
 
 	useEffect(() => {
-		if (!isDeviceReady) {
+		const intervalId = setInterval(() => {
-			return;
+			return refreshToken();
-		}
+		}, (3600 - 30) * 1000);
-
-		const intervalId = setInterval(refreshToken, (ttl - 30) * 1000);
 		return () => clearInterval(intervalId);
-	}, [isDeviceReady, refreshToken]);
+	}, [refreshToken]);
 
 	useEffect(() => {
 		(async () => {
@@ -51,31 +48,39 @@ export default function useDevice() {
 			return;
 		}
 
-		console.log("ok");
+		device.on("registered", onDeviceRegistered);
-		// @ts-ignore
+		device.on("unregistered", onDeviceUnregistered);
-		window.device = device;
 		device.on("error", onDeviceError);
 		device.on("incoming", onDeviceIncoming);
 
 		return () => {
+			device.off("registered", onDeviceRegistered);
+			device.off("unregistered", onDeviceUnregistered);
 			device.off("error", onDeviceError);
 			device.off("incoming", onDeviceIncoming);
 		};
 	}, [device]);
 
-	// @ts-ignore
-	window.refreshToken = refreshToken;
-
 	return {
 		device,
 		isDeviceReady,
 		refreshToken,
 	};
 
+	function onDeviceRegistered() {
+		setIsDeviceReady(true);
+	}
+
+	function onDeviceUnregistered() {
+		setIsDeviceReady(false);
+	}
+
 	function onDeviceError(error: TwilioError.TwilioError, call?: Call) {
-		// TODO gracefully handle errors: possibly hang up the call, redirect to keypad
+		// we might have to change this if we instantiate the device on every page to receive calls
-		console.error("device error", JSON.parse(JSON.stringify(error)));
+		setDevice(() => {
-		alert(error.code);
+			// hack to trigger the error boundary
+			throw error;
+		});
 	}
 
 	function onDeviceIncoming(call: Call) {
@@ -94,8 +99,6 @@ export default function useDevice() {
 	}
 }
 
-const deviceAtom = atom<Device | null>(null);
-
 let e = {
 	message:
 		"ConnectionError (53000): Raised whenever a signaling connection error occurs that is not covered by a more specific error code.",

app/phone-calls/hooks/use-make-call.ts

@@ -1,9 +1,13 @@
-import { useState } from "react";
+import { useCallback, useState } from "react";
 import { useRouter, Routes } from "blitz";
 import { Call } from "@twilio/voice-sdk";
 
 import useDevice from "./use-device";
 
+import appLogger from "../../../integrations/logger";
+
+const logger = appLogger.child({ module: "use-make-call" });
+
 type Params = {
 	recipient: string;
 	onHangUp?: () => void;
@@ -15,16 +19,25 @@ export default function useMakeCall({ recipient, onHangUp }: Params) {
 	const { device, isDeviceReady } = useDevice();
 	const router = useRouter();
 
-	return {
+	const endCall = useCallback(
-		makeCall,
+		function endCall() {
-		sendDigits,
+			outgoingConnection?.off("cancel", endCall);
-		hangUp,
+			outgoingConnection?.off("disconnect", endCall);
-		state,
+			outgoingConnection?.disconnect();
-	};
 
+			setState("call_ending");
+			setTimeout(() => {
+				setState("call_ended");
+				setTimeout(() => router.replace(Routes.KeypadPage()), 100);
+			}, 150);
+		},
+		[outgoingConnection, router],
+	);
+
+	const makeCall = useCallback(
 		async function makeCall() {
 			if (!device || !isDeviceReady) {
-			console.error("device is not ready yet, can't make the call");
+				logger.warn("device is not ready yet, can't make the call");
 				return;
 			}
 
@@ -32,13 +45,16 @@ export default function useMakeCall({ recipient, onHangUp }: Params) {
 				return;
 			}
 
+			if (device.isBusy) {
+				logger.error("device is busy, this shouldn't happen");
+				return;
+			}
+
 			setState("calling");
 
 			const params = { To: recipient };
 			const outgoingConnection = await device.connect({ params });
 			setOutgoingConnection(outgoingConnection);
-		// @ts-ignore
-		window.ddd = outgoingConnection;
 
 			outgoingConnection.on("error", (error) => {
 				outgoingConnection.off("cancel", endCall);
@@ -51,33 +67,37 @@ export default function useMakeCall({ recipient, onHangUp }: Params) {
 			outgoingConnection.once("accept", (call: Call) => setState("call_in_progress"));
 			outgoingConnection.on("cancel", endCall);
 			outgoingConnection.on("disconnect", endCall);
-	}
+		},
-
+		[device, isDeviceReady, recipient, state],
-	function endCall() {
+	);
-		outgoingConnection?.off("cancel", endCall);
-		outgoingConnection?.off("disconnect", endCall);
-		outgoingConnection?.disconnect();
-
-		setState("call_ending");
-		setTimeout(() => {
-			setState("call_ended");
-			setTimeout(() => router.replace(Routes.KeypadPage()), 100);
-		}, 150);
-	}
 
+	const sendDigits = useCallback(
 		function sendDigits(digits: string) {
 			return outgoingConnection?.sendDigits(digits);
-	}
+		},
+		[outgoingConnection],
+	);
 
+	const hangUp = useCallback(
 		function hangUp() {
 			setState("call_ending");
 			outgoingConnection?.disconnect();
 			device?.disconnectAll();
+			device?.destroy();
 			onHangUp?.();
 			router.replace(Routes.KeypadPage());
 			outgoingConnection?.off("cancel", endCall);
 			outgoingConnection?.off("disconnect", endCall);
-	}
+		},
+		[device, endCall, onHangUp, outgoingConnection, router],
+	);
+
+	return {
+		makeCall,
+		sendDigits,
+		hangUp,
+		state,
+	};
 }
 
 type State = "initial" | "ready" | "calling" | "call_in_progress" | "call_ending" | "call_ended";

app/phone-calls/mutations/get-token.ts

@@ -4,8 +4,6 @@ import Twilio from "twilio";
 import db from "db";
 import getCurrentPhoneNumber from "../../phone-numbers/queries/get-current-phone-number";
 
-export const ttl = 3600;
-
 export default resolver.pipe(resolver.authorize(), async (_ = null, context) => {
 	const phoneNumber = await getCurrentPhoneNumber({}, context);
 	if (!phoneNumber) {
@@ -30,7 +28,7 @@ export default resolver.pipe(resolver.authorize(), async (_ = null, context) =>
 		organization.twilioAccountSid,
 		organization.twilioApiKey,
 		organization.twilioApiSecret,
-		{ identity: `${context.session.orgId}__${context.session.userId}` },
+		{ identity: `${context.session.orgId}__${context.session.userId}`, ttl: 3600 },
 	);
 	const grant = new Twilio.jwt.AccessToken.VoiceGrant({
 		outgoingApplicationSid: organization.twimlAppSid,

app/phone-calls/pages/outgoing-call/[recipient].tsx

@@ -16,10 +16,10 @@ const OutgoingCall: BlitzPage = () => {
 	useRequireOnboarding();
 	const [phoneNumber, setPhoneNumber] = useAtom(phoneNumberAtom);
 	const router = useRouter();
-	const { isDeviceReady } = useDevice();
 	const recipient = decodeURIComponent(router.params.recipient);
 	const onHangUp = useCallback(() => setPhoneNumber(""), [setPhoneNumber]);
 	const call = useMakeCall({ recipient, onHangUp });
+	const { isDeviceReady } = useDevice();
 	const pressDigit = useAtom(pressDigitAtom)[1];
 	const onDigitPressProps = useCallback(
 		(digit: string) => ({
@@ -36,7 +36,7 @@ const OutgoingCall: BlitzPage = () => {
 		if (isDeviceReady) {
 			call.makeCall();
 		}
-	}, [isDeviceReady]);
+	}, [call, isDeviceReady]);
 
 	return (
 		<div className="w-96 h-full flex flex-col justify-around py-5 mx-auto text-center text-black bg-white">