refresh device token before it expires every hour

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

@@ -1,14 +1,36 @@
-import { useEffect } from "react";
+import { useCallback, useEffect } 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 from "../mutations/get-token";
+import getToken, { ttl } 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 [getTokenMutation] = useMutation(getToken);
+	const refreshToken = useCallback(async () => {
+		if (!device) {
+			logger.error("Tried refreshing accessToken for an uninitialized device");
+			return;
+		}
+
+		const token = await getTokenMutation();
+		device.updateToken(token);
+	}, [device, getTokenMutation]);
+	const isDeviceReady = device?.state === Device.State.Registered;
+
+	useEffect(() => {
+		if (!isDeviceReady) {
+			return;
+		}
+
+		const intervalId = setInterval(refreshToken, ttl - 30);
+		return () => clearInterval(intervalId);
+	}, [isDeviceReady, refreshToken]);
 
 	useEffect(() => {
 		(async () => {
@@ -22,14 +44,16 @@ export default function useDevice() {
 			device.register();
 			setDevice(device);
 		})();
-	}, [getTokenMutation]);
+	}, [getTokenMutation, setDevice]);
 
 	useEffect(() => {
 		if (!device) {
 			return;
 		}
 
-		(window as any).device = device;
+		console.log("ok");
+		// @ts-ignore
+		window.device = device;
 		device.on("error", onDeviceError);
 		device.on("incoming", onDeviceIncoming);
 
@@ -39,7 +63,14 @@ export default function useDevice() {
 		};
 	}, [device]);
 
-	return device;
+	// @ts-ignore
+	window.refreshToken = refreshToken;
+
+	return {
+		device,
+		isDeviceReady,
+		refreshToken,
+	};
 
 	function onDeviceError(error: TwilioError.TwilioError, call?: Call) {
 		// TODO gracefully handle errors: possibly hang up the call, redirect to keypad

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

@@ -12,7 +12,7 @@ type Params = {
 export default function useMakeCall({ recipient, onHangUp }: Params) {
 	const [outgoingConnection, setOutgoingConnection] = useState<Call | null>(null);
 	const [state, setState] = useState<State>("initial");
-	const device = useDevice();
+	const { device, isDeviceReady } = useDevice();
 	const router = useRouter();
 
 	return {
@@ -23,8 +23,8 @@ export default function useMakeCall({ recipient, onHangUp }: Params) {
 	};
 
 	async function makeCall() {
-		if (!device) {
-			console.error("no device initialized, can't make the call");
+		if (!device || !isDeviceReady) {
+			console.error("device is not ready yet, can't make the call");
 			return;
 		}
 

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

@@ -4,6 +4,8 @@ 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) {

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

@@ -1,6 +1,6 @@
 import type { BlitzPage } from "blitz";
 import { Routes, useRouter } from "blitz";
-import { useEffect, useMemo } from "react";
+import { useCallback, useEffect } from "react";
 import { atom, useAtom } from "jotai";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faPhoneAlt as faPhone } from "@fortawesome/pro-solid-svg-icons";
@@ -15,13 +15,13 @@ const OutgoingCall: BlitzPage = () => {
 	useRequireOnboarding();
 	const [phoneNumber, setPhoneNumber] = useAtom(phoneNumberAtom);
 	const router = useRouter();
-	const device = useDevice();
+	const { isDeviceReady } = useDevice();
 	const recipient = decodeURIComponent(router.params.recipient);
-	const onHangUp = useMemo(() => () => setPhoneNumber(""), [setPhoneNumber]);
+	const onHangUp = useCallback(() => setPhoneNumber(""), [setPhoneNumber]);
 	const call = useMakeCall({ recipient, onHangUp });
 	const pressDigit = useAtom(pressDigitAtom)[1];
-	const onDigitPressProps = useMemo(
-		() => (digit: string) => ({
+	const onDigitPressProps = useCallback(
+		(digit: string) => ({
 			onPress() {
 				pressDigit(digit);
 
@@ -32,10 +32,10 @@ const OutgoingCall: BlitzPage = () => {
 	);
 
 	useEffect(() => {
-		if (device !== null) {
+		if (isDeviceReady) {
 			call.makeCall();
 		}
-	}, [device]);
+	}, [isDeviceReady]);
 
 	return (
 		<div className="w-96 h-full flex flex-col justify-around py-5 mx-auto text-center text-black bg-white">