small qol changes

This commit is contained in:
m5r 2021-08-13 19:55:05 +08:00
parent de4d4e63d5
commit a26babc792
3 changed files with 19 additions and 9 deletions

View File

@ -87,7 +87,7 @@ export default function useMakeCall(recipient: string) {
if (device) { if (device) {
device.disconnectAll(); device.disconnectAll();
// device.destroy(); device.destroy();
} }
} }

View File

@ -1,5 +1,5 @@
import type { BlitzPage } from "blitz"; import type { BlitzPage } from "blitz";
import { Link, Routes } from "blitz"; import { Link, Routes, useRouter } from "blitz";
import { useRef } from "react"; import { useRef } from "react";
import { atom, useAtom } from "jotai"; import { atom, useAtom } from "jotai";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@ -11,6 +11,7 @@ import useRequireOnboarding from "../../core/hooks/use-require-onboarding";
const KeypadPage: BlitzPage = () => { const KeypadPage: BlitzPage = () => {
useRequireOnboarding(); useRequireOnboarding();
const router = useRouter();
const [phoneNumber, setPhoneNumber] = useAtom(phoneNumberAtom); const [phoneNumber, setPhoneNumber] = useAtom(phoneNumberAtom);
const pressBackspace = useAtom(pressBackspaceAtom)[1]; const pressBackspace = useAtom(pressBackspaceAtom)[1];
const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null); const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
@ -31,6 +32,7 @@ const KeypadPage: BlitzPage = () => {
}; };
const onDigitPressProps = (digit: string) => ({ const onDigitPressProps = (digit: string) => ({
onPress() { onPress() {
// navigator.vibrate(1); // removed in webkit
pressDigit(digit); pressDigit(digit);
}, },
}); });
@ -43,12 +45,19 @@ const KeypadPage: BlitzPage = () => {
<Keypad onDigitPressProps={onDigitPressProps} onZeroPressProps={onZeroPressProps}> <Keypad onDigitPressProps={onDigitPressProps} onZeroPressProps={onZeroPressProps}>
<Link href={Routes.OutgoingCall({ recipient: encodeURI(phoneNumber) })}> <Link href={Routes.OutgoingCall({ recipient: encodeURI(phoneNumber) })}>
<a <button
onClick={() => setPhoneNumber("")} onClick={async () => {
if (phoneNumber === "") {
// TODO setPhoneNumber(lastCallRecipient);
}
await router.push(Routes.OutgoingCall({ recipient: encodeURI(phoneNumber) }));
setPhoneNumber("");
}}
className="cursor-pointer select-none col-start-2 h-12 w-12 flex justify-center items-center mx-auto bg-green-800 rounded-full" className="cursor-pointer select-none col-start-2 h-12 w-12 flex justify-center items-center mx-auto bg-green-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" />
</a> </button>
</Link> </Link>
<div className="cursor-pointer select-none m-auto" onClick={pressBackspace}> <div className="cursor-pointer select-none m-auto" onClick={pressBackspace}>
<FontAwesomeIcon className="w-6 h-6" icon={faBackspace} size="lg" /> <FontAwesomeIcon className="w-6 h-6" icon={faBackspace} size="lg" />

View File

@ -22,7 +22,7 @@ const OutgoingCall: BlitzPage = () => {
}, [call.state]); }, [call.state]);
useRequireOnboarding(); useRequireOnboarding();
const phoneNumber = useAtom(phoneNumberAtom)[0]; const [phoneNumber, setPhoneNumber] = useAtom(phoneNumberAtom);
const pressDigit = useAtom(pressDigitAtom)[1]; const pressDigit = useAtom(pressDigitAtom)[1];
const onDigitPressProps = useMemo( const onDigitPressProps = useMemo(
() => (digit: string) => ({ () => (digit: string) => ({
@ -37,11 +37,12 @@ const OutgoingCall: BlitzPage = () => {
const hangUp = useMemo( const hangUp = useMemo(
() => () => { () => () => {
call.hangUp(); call.hangUp();
setPhoneNumber("");
// return router.replace(Routes.KeypadPage()); // return router.replace(Routes.KeypadPage());
return router.push(Routes.KeypadPage()); return router.push(Routes.KeypadPage());
}, },
[call, router], [call, router, setPhoneNumber],
); );
return ( return (
@ -56,12 +57,12 @@ const OutgoingCall: BlitzPage = () => {
</div> </div>
<Keypad onDigitPressProps={onDigitPressProps} onZeroPressProps={onDigitPressProps("0")}> <Keypad onDigitPressProps={onDigitPressProps} onZeroPressProps={onDigitPressProps("0")}>
<div <button
onClick={hangUp} onClick={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" />
</div> </button>
</Keypad> </Keypad>
</div> </div>
); );