Change routing in react-native so that I can trap the back button, handle linking, etc from within the react-native app.

packages/commonwealth/client/scripts/views/components/ReactNativeBridge/ReactNativeBridge.tsx

@@ -1,5 +1,6 @@
 import useUserStore from 'client/scripts/state/ui/user';
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
 
 interface ReactNativeWebView {
   // allows us to send messages to ReactNative.
@@ -31,6 +32,26 @@ type UserInfo = {
   // darkMode: 'dark' | 'light';
 };
 
+type NavigateToLink = {
+  type: 'navigate-to-link';
+  link: string;
+};
+
+function isNavigateToLink(data: object): data is NavigateToLink {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  return (data as any).type === 'navigate-to-link';
+}
+
+type NavigateBack = {
+  type: 'navigate-back';
+  link: string;
+};
+
+function isNavigateBack(data: object): data is NavigateBack {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  return (data as any).type === 'navigate-back';
+}
+
 /**
  * This acts as a bridge between the react-native client (mobile app) and our
  * webapp.  Notifications only work with a userId and the react-native client
@@ -44,9 +65,34 @@ type UserInfo = {
  */
 export const ReactNativeBridge = () => {
   const user = useUserStore();
+  const navigate = useNavigate();
 
   const [userInfo, setUserInfo] = useState<UserInfo | null>(null);
 
+  const handleMessage = useCallback(
+    (message: MessageEvent) => {
+      const obj = messageToObject(message.data);
+      if (obj && typeof message.data === 'object') {
+        if (isNavigateToLink(obj)) {
+          navigate(getPathAndQuery(obj.link));
+        }
+
+        if (isNavigateBack(obj)) {
+          navigate(-1);
+        }
+      }
+    },
+    [navigate],
+  );
+
+  useEffect(() => {
+    window.addEventListener('message', handleMessage);
+
+    return () => {
+      window.removeEventListener('message', handleMessage);
+    };
+  }, [handleMessage]);
+
   useEffect(() => {
     if (user.id !== userInfo?.userId) {
       setUserInfo({
@@ -70,3 +116,15 @@ export const ReactNativeBridge = () => {
 
   return null;
 };
+
+function messageToObject(message: string | object): object {
+  return typeof message === 'string' ? JSON.parse(message) : message;
+}
+
+function getPathAndQuery(url: string): string {
+  // only navigate with the path and query because we don't want to include
+  // the host portion as a notification could be from the official common.xyz
+  // site but we might be using frack for testing.
+  const parsedUrl = new URL(url);
+  return `${parsedUrl.pathname}${parsedUrl.search}`;
+}