letsgooooo receiving calls

app/features/core/components/notification.tsx

@@ -4,11 +4,13 @@ import { Transition } from "@headlessui/react";
 import { useAtom } from "jotai";
 
 import useNotifications, { notificationDataAtom } from "~/features/core/hooks/use-notifications";
+import useCall from "~/features/phone-calls/hooks/use-call";
 
 export default function Notification() {
 	useNotifications();
 	const navigate = useNavigate();
 	const [notificationData] = useAtom(notificationDataAtom);
+	const [call, setCall] = useCall();
 	const [show, setShow] = useState(notificationData !== null);
 	const close = () => setShow(false);
 	const actions = buildActions();
@@ -78,7 +80,7 @@ export default function Notification() {
 			message: [
 				{
 					title: "Reply",
-					onClick: () => {
+					onClick() {
 						navigate(`/messages/${encodeURIComponent(notificationData.data.recipient)}`);
 						close();
 					},
@@ -86,8 +88,21 @@ export default function Notification() {
 				{ title: "Close", onClick: close },
 			],
 			call: [
-				{ title: "Answer", onClick: close },
-				{ title: "Decline", onClick: close },
+				{
+					title: "Answer",
+					onClick() {
+						navigate(`/incoming-call/${encodeURIComponent(notificationData.data.recipient)}`);
+						close();
+					},
+				},
+				{
+					title: "Decline",
+					onClick() {
+						call?.reject();
+						setCall(null);
+						close();
+					},
+				},
 			],
 		}[notificationData.data.type];
 	}

app/features/core/hooks/use-notifications.client.ts

@@ -78,7 +78,7 @@ export default function useNotifications() {
 
 function urlBase64ToUint8Array(base64String: string) {
 	const padding = "=".repeat((4 - (base64String.length % 4)) % 4);
-	const base64 = (base64String + padding).replace(/\-/g, "+").replace(/_/g, "/");
+	const base64 = (base64String + padding).replaceAll("-", "+").replaceAll("_", "/");
 
 	const rawData = window.atob(base64);
 	const outputArray = new Uint8Array(rawData.length);

app/features/core/hooks/use-notifications.ts

@@ -19,7 +19,7 @@ export default function useNotifications() {
 			channel.removeEventListener("message", eventHandler);
 			channel.close();
 		};
-	}, []);
+	}, [setNotificationData]);
 
 	useEffect(() => {
 		if (!notificationData) {
@@ -28,7 +28,7 @@ export default function useNotifications() {
 
 		const timeout = setTimeout(() => setNotificationData(null), 5000);
 		return () => clearTimeout(timeout);
-	}, [notificationData]);
+	}, [notificationData, setNotificationData]);
 }
 
 export const notificationDataAtom = atom<NotificationPayload | null>(null);