mokhtar/shellphone.app
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

memoize hook functions and wrap up outgoing calls

Browse Source
This commit is contained in:
m5r 2021-09-05 00:29:25 +08:00
parent d5185fa183
commit 3433a90258
4 changed files with 106 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
app/phone-calls/hooks/use-device.tsx
View File

@ -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) {
return;
}
const intervalId = setInterval(refreshToken, (ttl - 30) * 1000);
const intervalId = setInterval(() => {
return refreshToken();
}, (3600 - 30) * 1000);
return () => clearInterval(intervalId);
}, [isDeviceReady, refreshToken]);
}, [refreshToken]);
useEffect(() => {
(async () => {
@ -51,31 +48,39 @@ export default function useDevice() {
return;
}
console.log("ok");
// @ts-ignore
window.device = device;
device.on("registered", onDeviceRegistered);
device.on("unregistered", onDeviceUnregistered);
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
console.error("device error", JSON.parse(JSON.stringify(error)));
alert(error.code);
// we might have to change this if we instantiate the device on every page to receive calls
setDevice(() => {
// 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.",

136
app/phone-calls/hooks/use-make-call.ts
View File

@ -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,69 +19,85 @@ export default function useMakeCall({ recipient, onHangUp }: Params) {
const { device, isDeviceReady } = useDevice();
const router = useRouter();
const endCall = useCallback(
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);
},
[outgoingConnection, router],
);
const makeCall = useCallback(
async function makeCall() {
if (!device || !isDeviceReady) {
logger.warn("device is not ready yet, can't make the call");
return;
}
if (state !== "initial") {
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);
outgoingConnection.on("error", (error) => {
outgoingConnection.off("cancel", endCall);
outgoingConnection.off("disconnect", endCall);
setState(() => {
// hack to trigger the error boundary
throw error;
});
});
outgoingConnection.once("accept", (call: Call) => setState("call_in_progress"));
outgoingConnection.on("cancel", endCall);
outgoingConnection.on("disconnect", endCall);
},
[device, isDeviceReady, recipient, state],
);
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,
};
async function makeCall() {
if (!device || !isDeviceReady) {
console.error("device is not ready yet, can't make the call");
return;
}
if (state !== "initial") {
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);
outgoingConnection.off("disconnect", endCall);
setState(() => {
// hack to trigger the error boundary
throw error;
});
});
outgoingConnection.once("accept", (call: Call) => setState("call_in_progress"));
outgoingConnection.on("cancel", endCall);
outgoingConnection.on("disconnect", endCall);
}
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);
}
function sendDigits(digits: string) {
return outgoingConnection?.sendDigits(digits);
}
function hangUp() {
setState("call_ending");
outgoingConnection?.disconnect();
device?.disconnectAll();
onHangUp?.();
router.replace(Routes.KeypadPage());
outgoingConnection?.off("cancel", endCall);
outgoingConnection?.off("disconnect", endCall);
}
}
type State = "initial" | "ready" | "calling" | "call_in_progress" | "call_ending" | "call_ended";

4
app/phone-calls/mutations/get-token.ts
View File

@ -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,

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

@ -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">