cleanup call making
This commit is contained in:
parent
a26babc792
commit
800ff5ab99
@ -4,7 +4,12 @@ import { Call, Device, TwilioError } from "@twilio/voice-sdk";
|
|||||||
|
|
||||||
import getToken from "../mutations/get-token";
|
import getToken from "../mutations/get-token";
|
||||||
|
|
||||||
export default function useMakeCall(recipient: string) {
|
type Params = {
|
||||||
|
recipient: string;
|
||||||
|
onHangUp?: () => void;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function useMakeCall({ recipient, onHangUp }: Params) {
|
||||||
const [outgoingConnection, setOutgoingConnection] = useState<Call | null>(null);
|
const [outgoingConnection, setOutgoingConnection] = useState<Call | null>(null);
|
||||||
const [device, setDevice] = useState<Device | null>(null);
|
const [device, setDevice] = useState<Device | null>(null);
|
||||||
const [getTokenMutation] = useMutation(getToken);
|
const [getTokenMutation] = useMutation(getToken);
|
||||||
@ -80,15 +85,10 @@ export default function useMakeCall(recipient: string) {
|
|||||||
|
|
||||||
function hangUp() {
|
function hangUp() {
|
||||||
setState("call_ending");
|
setState("call_ending");
|
||||||
|
outgoingConnection?.reject();
|
||||||
if (outgoingConnection) {
|
device?.disconnectAll();
|
||||||
outgoingConnection.reject();
|
device?.destroy();
|
||||||
}
|
onHangUp?.();
|
||||||
|
|
||||||
if (device) {
|
|
||||||
device.disconnectAll();
|
|
||||||
device.destroy();
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function onDeviceError(error: TwilioError.TwilioError, call?: Call) {
|
function onDeviceError(error: TwilioError.TwilioError, call?: Call) {
|
||||||
|
@ -10,19 +10,20 @@ import Keypad from "../../components/keypad";
|
|||||||
import useMakeCall from "../../hooks/use-make-call";
|
import useMakeCall from "../../hooks/use-make-call";
|
||||||
|
|
||||||
const OutgoingCall: BlitzPage = () => {
|
const OutgoingCall: BlitzPage = () => {
|
||||||
const router = useRouter();
|
|
||||||
const recipient = decodeURIComponent(router.params.recipient);
|
|
||||||
const call = useMakeCall(recipient);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
console.log("call.state", call.state);
|
|
||||||
if (call.state === "ready") {
|
|
||||||
call.makeCall();
|
|
||||||
}
|
|
||||||
}, [call.state]);
|
|
||||||
|
|
||||||
useRequireOnboarding();
|
useRequireOnboarding();
|
||||||
const [phoneNumber, setPhoneNumber] = useAtom(phoneNumberAtom);
|
const [phoneNumber, setPhoneNumber] = useAtom(phoneNumberAtom);
|
||||||
|
const router = useRouter();
|
||||||
|
const recipient = decodeURIComponent(router.params.recipient);
|
||||||
|
const onHangUp = useMemo(
|
||||||
|
() => () => {
|
||||||
|
setPhoneNumber("");
|
||||||
|
|
||||||
|
// return router.replace(Routes.KeypadPage());
|
||||||
|
return router.push(Routes.KeypadPage());
|
||||||
|
},
|
||||||
|
[router, setPhoneNumber],
|
||||||
|
);
|
||||||
|
const call = useMakeCall({ recipient, onHangUp });
|
||||||
const pressDigit = useAtom(pressDigitAtom)[1];
|
const pressDigit = useAtom(pressDigitAtom)[1];
|
||||||
const onDigitPressProps = useMemo(
|
const onDigitPressProps = useMemo(
|
||||||
() => (digit: string) => ({
|
() => (digit: string) => ({
|
||||||
@ -34,16 +35,13 @@ const OutgoingCall: BlitzPage = () => {
|
|||||||
}),
|
}),
|
||||||
[call, pressDigit],
|
[call, pressDigit],
|
||||||
);
|
);
|
||||||
const hangUp = useMemo(
|
|
||||||
() => () => {
|
|
||||||
call.hangUp();
|
|
||||||
setPhoneNumber("");
|
|
||||||
|
|
||||||
// return router.replace(Routes.KeypadPage());
|
useEffect(() => {
|
||||||
return router.push(Routes.KeypadPage());
|
console.log("call.state", call.state);
|
||||||
},
|
if (call.state === "ready") {
|
||||||
[call, router, setPhoneNumber],
|
call.makeCall();
|
||||||
);
|
}
|
||||||
|
}, [call.state]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="w-96 h-full flex flex-col justify-around py-5 mx-auto text-center text-black bg-white">
|
<div className="w-96 h-full flex flex-col justify-around py-5 mx-auto text-center text-black bg-white">
|
||||||
@ -58,7 +56,7 @@ const OutgoingCall: BlitzPage = () => {
|
|||||||
|
|
||||||
<Keypad onDigitPressProps={onDigitPressProps} onZeroPressProps={onDigitPressProps("0")}>
|
<Keypad onDigitPressProps={onDigitPressProps} onZeroPressProps={onDigitPressProps("0")}>
|
||||||
<button
|
<button
|
||||||
onClick={hangUp}
|
onClick={call.hangUp}
|
||||||
className="cursor-pointer select-none col-start-2 h-12 w-12 flex justify-center items-center mx-auto bg-red-800 rounded-full"
|
className="cursor-pointer select-none col-start-2 h-12 w-12 flex justify-center items-center mx-auto bg-red-800 rounded-full"
|
||||||
>
|
>
|
||||||
<FontAwesomeIcon className="w-6 h-6" icon={faPhone} color="white" size="lg" />
|
<FontAwesomeIcon className="w-6 h-6" icon={faPhone} color="white" size="lg" />
|
||||||
|
Loading…
Reference in New Issue
Block a user