♻️ notifications: use react-onesignal

exactly · Dec 27, 2023 · 2f5a5f3 · 2f5a5f3
1 parent cb5901e
commit 2f5a5f3
Show file tree

Hide file tree

Showing 3 changed files with 82 additions and 28 deletions.
diff --git a/app/_layout.tsx b/app/_layout.tsx
@@ -9,20 +9,18 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { reconnect } from "@wagmi/core";
 import { type FontSource, useFonts } from "expo-font";
 import { Slot, SplashScreen } from "expo-router";
-import Head from "expo-router/head";
 import { StatusBar } from "expo-status-bar";
 import React, { useEffect } from "react";
-import { Platform } from "react-native";
-import { OneSignal } from "react-native-onesignal";
 import * as Sentry from "sentry-expo";
 import { TamaguiProvider } from "tamagui";
 import { WagmiProvider, createConfig, custom } from "wagmi";
 
 import metadata from "../package.json";
 import tamaguiConfig from "../tamagui.config";
 import alchemyConnector from "../utils/alchemyConnector";
-import { alchemyAPIKey, chain, oneSignalAPPId } from "../utils/constants";
+import { alchemyAPIKey, chain } from "../utils/constants";
 import handleError from "../utils/handleError";
+import useOneSignal from "../utils/onesignal";
 
 export { ErrorBoundary } from "expo-router";
 
@@ -40,10 +38,6 @@ Sentry.init({
   autoSessionTracking: true,
 });
 
-if (oneSignalAPPId) {
-  OneSignal.initialize(oneSignalAPPId);
-}
-
 const provider = new AlchemyProvider({ apiKey: alchemyAPIKey, chain });
 const wagmiConfig = createConfig({
   chains: [chain],
@@ -69,31 +63,14 @@ export default function RootLayout() {
 
   useEffect(() => {
     reconnect(wagmiConfig).catch(handleError);
-    // TODO(jg): use real user id
-    if (oneSignalAPPId) OneSignal.login("0000000");
   }, []);
 
-  if (!loaded) return;
+  const initialized = useOneSignal({});
+
+  if (!loaded || !initialized) return;
 
   return (
     <>
-      {Platform.OS === "web" && (
-        <Head>
-          <script src="https://cdn.onesignal.com/sdks/web/v16/OneSignalSDK.page.js" defer />
-          <script
-            dangerouslySetInnerHTML={{
-              __html: `
-              window.OneSignalDeferred = window.OneSignalDeferred || [];
-              OneSignalDeferred.push(function(OneSignal) {
-                OneSignal.init({
-                  appId: "${process.env.EXPO_PUBLIC_ONE_SIGNAL_APP_ID}",
-                });
-              });`,
-            }}
-          />
-        </Head>
-      )}
-
       <StatusBar translucent={false} />
       <TamaguiProvider config={tamaguiConfig}>
         <WagmiProvider config={wagmiConfig}>

diff --git a/public/onesignal/sw.js → public/OneSignalSDKWorker.js b/public/onesignal/sw.js → public/OneSignalSDKWorker.js
diff --git a/utils/onesignal.ts b/utils/onesignal.ts
@@ -0,0 +1,77 @@
+import { useState, useEffect, useRef } from "react";
+import { Platform } from "react-native";
+import { OneSignal as RNOneSignal } from "react-native-onesignal";
+import ROneSignal from "react-onesignal";
+
+import { oneSignalAPPId } from "./constants";
+
+type OneSignalProperties = {
+  userId?: string;
+};
+
+type Instance =
+  | {
+      type: "native";
+      value: typeof RNOneSignal;
+    }
+  | {
+      type: "web";
+      value: typeof ROneSignal;
+    };
+
+export default function useOneSignal({ userId }: OneSignalProperties) {
+  const instance = useRef<Instance | null>(null);
+  const [initialized, setInitialized] = useState(false);
+
+  useEffect(() => {
+    const load = async function () {
+      if (!oneSignalAPPId) {
+        return;
+      }
+
+      if (!initialized) {
+        switch (Platform.OS) {
+          case "web": {
+            await ROneSignal.init({
+              appId: oneSignalAPPId,
+              allowLocalhostAsSecureOrigin: true,
+            });
+            instance.current = { type: "web", value: ROneSignal };
+            break;
+          }
+          case "ios":
+          case "android": {
+            RNOneSignal.initialize(oneSignalAPPId);
+            instance.current = { type: "native", value: RNOneSignal };
+            break;
+          }
+        }
+
+        setInitialized(true);
+      }
+
+      if (instance.current && userId) {
+        await instance.current.value.login(userId);
+      }
+    };
+
+    load().catch(() => {
+      setInitialized(true);
+    });
+
+    return () => {
+      if (!userId || !instance.current) {
+        return;
+      }
+
+      const logout = instance.current.value.logout();
+      if (logout instanceof Promise) {
+        logout.catch(() => {
+          // ignore
+        });
+      }
+    };
+  }, [userId, initialized]);
+
+  return initialized;
+}