keypad page

app/features/keypad/components/blurred-keypad.tsx

@@ -0,0 +1,18 @@
+import { IoCall } from "react-icons/io5";
+
+import Keypad from "~/features/keypad/components/keypad";
+
+export default function BlurredKeypad() {
+	return (
+		<div className="filter blur-sm select-none absolute top-0 w-full h-full z-0">
+			<section className="relative w-96 h-full flex flex-col justify-around mx-auto py-5 text-center">
+				<div className="h-16 text-3xl text-gray-700" />
+				<Keypad>
+					<button className="cursor-pointer select-none col-start-2 h-12 w-12 flex justify-center items-center mx-auto bg-green-800 rounded-full">
+						<IoCall className="w-6 h-6 text-white" />
+					</button>
+				</Keypad>
+			</section>
+		</div>
+	);
+}

app/features/keypad/components/keypad.tsx

@@ -1,50 +1,45 @@
-import type { FunctionComponent, PropsWithChildren } from "react";
+import { type FunctionComponent, type PropsWithChildren, useRef } from "react";
-import type { PressHookProps } from "@react-aria/interactions";
 import { usePress } from "@react-aria/interactions";
+import { useLongPressDigit, usePressDigit } from "~/features/keypad/hooks/atoms";
 
-type Props = {
+const Keypad: FunctionComponent<PropsWithChildren<{}>> = ({ children }) => {
-	onDigitPressProps: (digit: string) => PressHookProps;
-	onZeroPressProps: PressHookProps;
-};
-
-const Keypad: FunctionComponent<PropsWithChildren<Props>> = ({ children, onDigitPressProps, onZeroPressProps }) => {
 	return (
 		<section>
 			<Row>
-				<Digit onPressProps={onDigitPressProps} digit="1" />
+				<Digit digit="1" />
-				<Digit onPressProps={onDigitPressProps} digit="2">
+				<Digit digit="2">
 					<DigitLetters>ABC</DigitLetters>
 				</Digit>
-				<Digit onPressProps={onDigitPressProps} digit="3">
+				<Digit digit="3">
 					<DigitLetters>DEF</DigitLetters>
 				</Digit>
 			</Row>
 			<Row>
-				<Digit onPressProps={onDigitPressProps} digit="4">
+				<Digit digit="4">
 					<DigitLetters>GHI</DigitLetters>
 				</Digit>
-				<Digit onPressProps={onDigitPressProps} digit="5">
+				<Digit digit="5">
 					<DigitLetters>JKL</DigitLetters>
 				</Digit>
-				<Digit onPressProps={onDigitPressProps} digit="6">
+				<Digit digit="6">
 					<DigitLetters>MNO</DigitLetters>
 				</Digit>
 			</Row>
 			<Row>
-				<Digit onPressProps={onDigitPressProps} digit="7">
+				<Digit digit="7">
 					<DigitLetters>PQRS</DigitLetters>
 				</Digit>
-				<Digit onPressProps={onDigitPressProps} digit="8">
+				<Digit digit="8">
 					<DigitLetters>TUV</DigitLetters>
 				</Digit>
-				<Digit onPressProps={onDigitPressProps} digit="9">
+				<Digit digit="9">
 					<DigitLetters>WXYZ</DigitLetters>
 				</Digit>
 			</Row>
 			<Row>
-				<Digit onPressProps={onDigitPressProps} digit="*" />
+				<Digit digit="*" />
-				<ZeroDigit onPressProps={onZeroPressProps} />
+				<ZeroDigit />
-				<Digit onPressProps={onDigitPressProps} digit="#" />
+				<Digit digit="#" />
 			</Row>
 			{typeof children !== "undefined" ? <Row>{children}</Row> : null}
 		</section>
@@ -57,15 +52,23 @@ const Row: FunctionComponent<PropsWithChildren<{}>> = ({ children }) => (
 	<div className="grid grid-cols-3 p-4 my-0 mx-auto text-black">{children}</div>
 );
 
-const DigitLetters: FunctionComponent<PropsWithChildren<{}>> = ({ children }) => <div className="text-xs text-gray-600">{children}</div>;
+const DigitLetters: FunctionComponent<PropsWithChildren<{}>> = ({ children }) => (
+	<div className="text-xs text-gray-600">{children}</div>
+);
 
 type DigitProps = {
 	digit: string;
-	onPressProps: Props["onDigitPressProps"];
 };
 
-const Digit: FunctionComponent<PropsWithChildren<DigitProps>> = ({ children, digit, onPressProps }) => {
+const Digit: FunctionComponent<PropsWithChildren<DigitProps>> = ({ children, digit }) => {
-	const { pressProps } = usePress(onPressProps(digit));
+	const pressDigit = usePressDigit();
+	const onPressProps = {
+		onPress() {
+			// navigator.vibrate(1); // removed in webkit
+			pressDigit(digit);
+		},
+	};
+	const { pressProps } = usePress(onPressProps);
 
 	return (
 		<div {...pressProps} className="text-3xl cursor-pointer select-none">
@@ -75,11 +78,24 @@ const Digit: FunctionComponent<PropsWithChildren<DigitProps>> = ({ children, dig
 	);
 };
 
-type ZeroDigitProps = {
+const ZeroDigit: FunctionComponent = () => {
-	onPressProps: Props["onZeroPressProps"];
+	const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+	const pressDigit = usePressDigit();
+	const longPressDigit = useLongPressDigit();
+	const onPressProps = {
+		onPressStart() {
+			pressDigit("0");
+			timeoutRef.current = setTimeout(() => {
+				longPressDigit("+");
+			}, 750);
+		},
+		onPressEnd() {
+			if (timeoutRef.current) {
+				clearTimeout(timeoutRef.current);
+				timeoutRef.current = null;
+			}
+		},
 	};
-
-const ZeroDigit: FunctionComponent<PropsWithChildren<ZeroDigitProps>> = ({ onPressProps }) => {
 	const { pressProps } = usePress(onPressProps);
 
 	return (

app/features/keypad/hooks/atoms.ts

@@ -0,0 +1,33 @@
+import { atom, useAtom } from "jotai";
+
+const phoneNumberAtom = atom("");
+const pressDigitAtom = atom(null, (get, set, digit: string) => {
+	if (get(phoneNumberAtom).length > 17) {
+		return;
+	}
+
+	if ("0123456789+#*".indexOf(digit) === -1) {
+		return;
+	}
+
+	set(phoneNumberAtom, (prevState) => prevState + digit);
+});
+const longPressDigitAtom = atom(null, (get, set, replaceWith: string) => {
+	if (get(phoneNumberAtom).length > 17) {
+		return;
+	}
+
+	set(phoneNumberAtom, (prevState) => prevState.slice(0, -1) + replaceWith);
+});
+const pressBackspaceAtom = atom(null, (get, set) => {
+	if (get(phoneNumberAtom).length === 0) {
+		return;
+	}
+
+	set(phoneNumberAtom, (prevState) => prevState.slice(0, -1));
+});
+
+export const usePhoneNumber = () => useAtom(phoneNumberAtom);
+export const useRemoveDigit = () => useAtom(pressBackspaceAtom)[1];
+export const usePressDigit = () => useAtom(pressDigitAtom)[1];
+export const useLongPressDigit = () => useAtom(longPressDigitAtom)[1];

app/features/keypad/hooks/use-on-backspace-press.ts

@@ -0,0 +1,34 @@
+import { useRef } from "react";
+import { usePress } from "@react-aria/interactions";
+
+import { useRemoveDigit } from "./atoms";
+
+export default function useOnBackspacePress() {
+	const removeDigit = useRemoveDigit();
+	const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+	const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
+	const { pressProps: onBackspacePressProps } = usePress({
+		onPressStart() {
+			timeoutRef.current = setTimeout(() => {
+				removeDigit();
+				intervalRef.current = setInterval(removeDigit, 75);
+			}, 325);
+		},
+		onPressEnd() {
+			if (timeoutRef.current) {
+				clearTimeout(timeoutRef.current);
+				timeoutRef.current = null;
+			}
+
+			if (intervalRef.current) {
+				clearInterval(intervalRef.current);
+				intervalRef.current = null;
+				return;
+			}
+
+			removeDigit();
+		},
+	});
+
+	return onBackspacePressProps;
+}

app/routes/__app/keypad.tsx

@@ -1,32 +1,56 @@
-import { Fragment, useRef, useState } from "react";
+import { Fragment } from "react";
+import type { LoaderFunction, MetaFunction } from "@remix-run/node";
 import { useNavigate } from "@remix-run/react";
-import { atom, useAtom } from "jotai";
+import { json, useLoaderData } from "superjson-remix";
-import { usePress } from "@react-aria/interactions";
 import { Transition } from "@headlessui/react";
 import { IoBackspace, IoCall } from "react-icons/io5";
-import { Direction } from "@prisma/client";
+import { Prisma } from "@prisma/client";
 
-import Keypad from "~/features/keypad/components/keypad";
-// import usePhoneCalls from "~/features/keypad/hooks/use-phone-calls";
 import useKeyPress from "~/features/keypad/hooks/use-key-press";
-// import useCurrentUser from "~/features/core/hooks/use-current-user";
+import useOnBackspacePress from "~/features/keypad/hooks/use-on-backspace-press";
-import KeypadErrorModal from "~/features/keypad/components/keypad-error-modal";
+import Keypad from "~/features/keypad/components/keypad";
+import BlurredKeypad from "~/features/keypad/components/blurred-keypad";
+import MissingTwilioCredentials from "~/features/core/components/missing-twilio-credentials";
 import InactiveSubscription from "~/features/core/components/inactive-subscription";
+import { getSeoMeta } from "~/utils/seo";
+import db from "~/utils/db.server";
+import { requireLoggedIn } from "~/utils/auth.server";
+import { usePhoneNumber, usePressDigit, useRemoveDigit } from "~/features/keypad/hooks/atoms";
+
+export const meta: MetaFunction = () => ({
+	...getSeoMeta({ title: "Keypad" }),
+});
+
+type KeypadLoaderData = {
+	hasOngoingSubscription: boolean;
+	hasPhoneNumber: boolean;
+	lastRecipientCalled?: string;
+};
+
+export const loader: LoaderFunction = async ({ request }) => {
+	const { phoneNumber } = await requireLoggedIn(request);
+	const hasOngoingSubscription = true; // TODO
+	const hasPhoneNumber = Boolean(phoneNumber);
+	const lastCall =
+		phoneNumber &&
+		(await db.phoneCall.findFirst({
+			where: { phoneNumberId: phoneNumber.id },
+			orderBy: { createdAt: Prisma.SortOrder.desc },
+		}));
+	return json<KeypadLoaderData>({
+		hasOngoingSubscription,
+		hasPhoneNumber,
+		lastRecipientCalled: lastCall?.recipient,
+	});
+};
 
 export default function KeypadPage() {
-	const { hasFilledTwilioCredentials, hasPhoneNumber, hasOngoingSubscription } = {
+	const { hasOngoingSubscription, hasPhoneNumber, lastRecipientCalled } = useLoaderData<KeypadLoaderData>();
-		hasFilledTwilioCredentials: false,
-		hasPhoneNumber: false,
-		hasOngoingSubscription: false,
-	};
 	const navigate = useNavigate();
-	const [isKeypadErrorModalOpen, setIsKeypadErrorModalOpen] = useState(false);
+	const [phoneNumber, setPhoneNumber] = usePhoneNumber();
-	const phoneCalls: any[] = []; //usePhoneCalls();
+	const removeDigit = useRemoveDigit();
-	const [phoneNumber, setPhoneNumber] = useAtom(phoneNumberAtom);
+	const pressDigit = usePressDigit();
-	const removeDigit = useAtom(pressBackspaceAtom)[1];
+	const onBackspacePress = useOnBackspacePress();
-	const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-	const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
-	const pressDigit = useAtom(pressDigitAtom)[1];
 	useKeyPress((key) => {
 		if (!hasOngoingSubscription) {
 			return;
@@ -38,74 +62,21 @@ export default function KeypadPage() {
 
 		pressDigit(key);
 	});
-	const longPressDigit = useAtom(longPressDigitAtom)[1];
-	const onZeroPressProps = {
-		onPressStart() {
-			if (!hasOngoingSubscription) {
-				return;
-			}
 
-			pressDigit("0");
+	if (!hasPhoneNumber) {
-			timeoutRef.current = setTimeout(() => {
+		return (
-				longPressDigit("+");
+			<>
-			}, 750);
+				<MissingTwilioCredentials />
-		},
+				<BlurredKeypad />
-		onPressEnd() {
+			</>
-			if (timeoutRef.current) {
+		);
-				clearTimeout(timeoutRef.current);
-				timeoutRef.current = null;
 	}
-		},
-	};
-	const onDigitPressProps = (digit: string) => ({
-		onPress() {
-			// navigator.vibrate(1); // removed in webkit
-			if (!hasOngoingSubscription) {
-				return;
-			}
-
-			pressDigit(digit);
-		},
-	});
-	const { pressProps: onBackspacePress } = usePress({
-		onPressStart() {
-			timeoutRef.current = setTimeout(() => {
-				removeDigit();
-				intervalRef.current = setInterval(removeDigit, 75);
-			}, 325);
-		},
-		onPressEnd() {
-			if (timeoutRef.current) {
-				clearTimeout(timeoutRef.current);
-				timeoutRef.current = null;
-			}
-
-			if (intervalRef.current) {
-				clearInterval(intervalRef.current);
-				intervalRef.current = null;
-				return;
-			}
-
-			removeDigit();
-		},
-	});
 
 	if (!hasOngoingSubscription) {
 		return (
 			<>
 				<InactiveSubscription />
-				<div className="filter blur-sm select-none absolute top-0 w-full h-full z-0">
+				<BlurredKeypad />
-					<section className="relative w-96 h-full flex flex-col justify-around mx-auto py-5 text-center">
-						<div className="h-16 text-3xl text-gray-700">
-							<span>{phoneNumber}</span>
-						</div>
-						<Keypad onDigitPressProps={onDigitPressProps} onZeroPressProps={onZeroPressProps}>
-							<button className="cursor-pointer select-none col-start-2 h-12 w-12 flex justify-center items-center mx-auto bg-green-800 rounded-full">
-								<IoCall className="w-6 h-6 text-white" />
-							</button>
-						</Keypad>
-					</section>
-				</div>
 			</>
 		);
 	}
@@ -117,24 +88,16 @@ export default function KeypadPage() {
 					<span>{phoneNumber}</span>
 				</div>
 
-				<Keypad onDigitPressProps={onDigitPressProps} onZeroPressProps={onZeroPressProps}>
+				<Keypad>
 					<button
 						onClick={async () => {
-							if (!hasFilledTwilioCredentials || !hasPhoneNumber) {
+							if (!hasPhoneNumber || !hasOngoingSubscription) {
-								setIsKeypadErrorModalOpen(true);
-								return;
-							}
-
-							if (!hasOngoingSubscription) {
 								return;
 							}
 
 							if (phoneNumber === "") {
-								const lastCall = phoneCalls?.[0];
+								if (lastRecipientCalled) {
-								if (lastCall) {
+									setPhoneNumber(lastRecipientCalled);
-									const lastCallRecipient =
-										lastCall.direction === Direction.Inbound ? lastCall.from : lastCall.to;
-									setPhoneNumber(lastCallRecipient);
 								}
 
 								return;
@@ -164,34 +127,6 @@ export default function KeypadPage() {
 					</Transition>
 				</Keypad>
 			</div>
-			<KeypadErrorModal closeModal={() => setIsKeypadErrorModalOpen(false)} isOpen={isKeypadErrorModalOpen} />
 		</>
 	);
 }
-
-const phoneNumberAtom = atom("");
-const pressDigitAtom = atom(null, (get, set, digit: string) => {
-	if (get(phoneNumberAtom).length > 17) {
-		return;
-	}
-
-	if ("0123456789+#*".indexOf(digit) === -1) {
-		return;
-	}
-
-	set(phoneNumberAtom, (prevState) => prevState + digit);
-});
-const longPressDigitAtom = atom(null, (get, set, replaceWith: string) => {
-	if (get(phoneNumberAtom).length > 17) {
-		return;
-	}
-
-	set(phoneNumberAtom, (prevState) => prevState.slice(0, -1) + replaceWith);
-});
-const pressBackspaceAtom = atom(null, (get, set) => {
-	if (get(phoneNumberAtom).length === 0) {
-		return;
-	}
-
-	set(phoneNumberAtom, (prevState) => prevState.slice(0, -1));
-});