make phone calls

app/features/phone-calls/hooks/use-device.ts

@@ -1,26 +1,26 @@
 import { useEffect, useState } from "react";
-import { type TwilioError, Call, Device } from "@twilio/voice-sdk";
 import { useFetcher } from "@remix-run/react";
+import { type TwilioError, Call, Device } from "@twilio/voice-sdk";
+import { useAtom, atom } from "jotai";
 
 import type { TwilioTokenLoaderData } from "~/features/phone-calls/loaders/twilio-token";
 
 export default function useDevice() {
 	const jwt = useDeviceToken();
-	const [device, setDevice] = useState<Device | null>(null);
-	const [isDeviceReady, setIsDeviceReady] = useState(() => device?.state === Device.State.Registered);
+	const [device, setDevice] = useAtom(deviceAtom);
+	const [isDeviceReady, setIsDeviceReady] = useState(device?.state === Device.State.Registered);
 
 	useEffect(() => {
+		// init token
 		jwt.refresh();
 	}, []);
 
 	useEffect(() => {
-		if (jwt.token && device?.state === Device.State.Registered && device?.token !== jwt.token) {
-			device.updateToken(jwt.token);
+		// init device
+		if (!jwt.token) {
+			return;
 		}
-	}, [jwt.token, device]);
-
-	useEffect(() => {
-		if (!jwt.token || device?.state === Device.State.Registered) {
+		if (device && device.state !== Device.State.Unregistered) {
 			return;
 		}
 
@@ -30,9 +30,16 @@ export default function useDevice() {
 				[Device.SoundName.Disconnect]: undefined, // TODO
 			},
 		});
-		newDevice.register(); // TODO throwing an error
+		newDevice.register();
 		setDevice(newDevice);
-	}, [device?.state, jwt.token, setDevice]);
+	}, [device, jwt.token]);
+
+	useEffect(() => {
+		// refresh token
+		if (jwt.token && device?.state === Device.State.Registered && device?.token !== jwt.token) {
+			device.updateToken(jwt.token);
+		}
+	}, [device, jwt.token]);
 
 	useEffect(() => {
 		if (!device) {
@@ -100,6 +107,8 @@ export default function useDevice() {
 	}
 }
 
+const deviceAtom = atom<Device | null>(null);
+
 function useDeviceToken() {
 	const fetcher = useFetcher<TwilioTokenLoaderData>();
 

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

@@ -32,6 +32,7 @@ export default function useMakeCall({ recipient, onHangUp }: Params) {
 
 	const makeCall = useCallback(
 		async function makeCall() {
+			console.log({ device, isDeviceReady });
 			if (!device || !isDeviceReady) {
 				console.warn("device is not ready yet, can't make the call");
 				return;

app/features/phone-calls/loaders/twilio-token.ts

@@ -2,7 +2,7 @@ import { type LoaderFunction } from "@remix-run/node";
 import Twilio from "twilio";
 
 import { refreshSessionData, requireLoggedIn } from "~/utils/auth.server";
-import { encrypt } from "~/utils/encryption";
+import { decrypt, encrypt } from "~/utils/encryption";
 import db from "~/utils/db.server";
 import { commitSession } from "~/utils/session.server";
 import getTwilioClient from "~/utils/twilio.server";
@@ -10,7 +10,7 @@ import getTwilioClient from "~/utils/twilio.server";
 export type TwilioTokenLoaderData = string;
 
 const loader: LoaderFunction = async ({ request }) => {
-	const { user, organization, twilio } = await requireLoggedIn(request);
+	const { user, twilio } = await requireLoggedIn(request);
 	if (!twilio) {
 		throw new Error("unreachable");
 	}
@@ -39,15 +39,15 @@ const loader: LoaderFunction = async ({ request }) => {
 		shouldRefreshSession = true;
 		const apiKey = await twilioClient.newKeys.create({ friendlyName: "Shellphone" });
 		apiKeySid = apiKey.sid;
-		apiKeySecret = apiKey.secret;
+		apiKeySecret = encrypt(apiKey.secret);
 		await db.twilioAccount.update({
 			where: { accountSid: twilioAccount.accountSid },
-			data: { apiKeySid: apiKey.sid, apiKeySecret: encrypt(apiKey.secret) },
+			data: { apiKeySid, apiKeySecret },
 		});
 	}
 
-	const accessToken = new Twilio.jwt.AccessToken(twilioAccount.accountSid, apiKeySid, apiKeySecret, {
-		identity: `${organization.id}__${user.id}`,
+	const accessToken = new Twilio.jwt.AccessToken(twilioAccount.accountSid, apiKeySid, decrypt(apiKeySecret), {
+		identity: `${twilio.accountSid}__${user.id}`,
 		ttl: 3600,
 	});
 	const grant = new Twilio.jwt.AccessToken.VoiceGrant({