messaging as hook

Author: hyoban

apps/mobile/src/App.tsx

@@ -5,15 +5,20 @@ import { RootSiblingParent } from "react-native-root-siblings"
 import { useSheet } from "react-native-sheet-transitions"
 
 import { useIntentHandler } from "./hooks/useIntentHandler"
-import { useMessaging } from "./initialize/messaging"
 import { DebugButton, EnvProfileIndicator } from "./modules/debug"
+import { usePrefetchActions } from "./store/action/hooks"
+import { useMessaging, useMessagingToken } from "./store/messaging/hooks"
 import { useUnreadCountBadge } from "./store/unread/hooks"
 import { useOnboarding, usePrefetchSessionUser } from "./store/user/hooks"
 
 export function App({ children }: { children: React.ReactNode }) {
   useIntentHandler()
   useOnboarding()
   useUnreadCountBadge()
+
+  // prefetch actions to detect if the user has any actions contains notifications
+  usePrefetchActions()
+  useMessagingToken()
   useMessaging()
   const { scale } = useSheet()
 

apps/mobile/src/initialize/index.ts

@@ -8,7 +8,6 @@ import { initBackgroundFetch } from "./background"
 import { initCrashlytics } from "./crashlytics"
 import { initializeDayjs } from "./dayjs"
 import { hydrateDatabaseToStore, hydrateQueryClient, hydrateSettings } from "./hydrate"
-import { initMessaging } from "./messaging"
 import { migrateDatabase } from "./migration"
 import { initializePlayer } from "./player"
 
@@ -42,7 +41,6 @@ export const initializeApp = async () => {
     using_indexed_db: true,
   })
   initCrashlytics()
-  initMessaging()
   initBackgroundFetch()
   console.log(`Initialize done,`, `${loadingTime}ms`)
 }

apps/mobile/src/store/action/hooks.ts

@@ -64,3 +64,9 @@ export function useActionRuleCondition({
 export const useIsActionDataDirty = () => {
   return useActionStore((state) => state.isDirty)
 }
+
+export const useHasNotificationActions = () => {
+  return useActionStore((state) => {
+    return state.rules.some((rule) => !!rule.result.newEntryNotification)
+  })
+}

apps/mobile/src/initialize/messaging.ts apps/mobile/src/store/messaging/hooks.tsapps/mobile/src/initialize/messaging.ts renamed to apps/mobile/src/store/messaging/hooks.ts

@@ -1,14 +1,17 @@
 import type { FirebaseMessagingTypes } from "@react-native-firebase/messaging"
 import messaging from "@react-native-firebase/messaging"
+import { useMutation } from "@tanstack/react-query"
 import { useEffect } from "react"
 import { Platform } from "react-native"
 
-import { apiClient } from "../lib/api-fetch"
-import { kv } from "../lib/kv"
-import { useNavigation } from "../lib/navigation/hooks"
-import { requestNotificationPermission } from "../lib/permission"
-import { EntryDetailScreen } from "../screens/(stack)/entries/[entryId]"
-import { whoami } from "../store/user/getters"
+import { apiClient } from "@/src/lib/api-fetch"
+import { kv } from "@/src/lib/kv"
+import { useNavigation } from "@/src/lib/navigation/hooks"
+import { requestNotificationPermission } from "@/src/lib/permission"
+import { EntryDetailScreen } from "@/src/screens/(stack)/entries/[entryId]"
+
+import { useHasNotificationActions } from "../action/hooks"
+import { useWhoami } from "../user/hooks"
 
 const FIREBASE_MESSAGING_TOKEN_STORAGE_KEY = "firebase_messaging_token"
 
@@ -27,14 +30,19 @@ async function saveMessagingToken() {
   kv.set(FIREBASE_MESSAGING_TOKEN_STORAGE_KEY, token)
 }
 
-export const initMessaging = () => {
-  const user = whoami()
-  if (!user) {
-    return
-  }
+export function useMessagingToken() {
+  const whoami = useWhoami()
+  const hasNotificationActions = useHasNotificationActions()
+  const { mutate } = useMutation({
+    mutationFn: async () => {
+      return Promise.all([saveMessagingToken(), requestNotificationPermission()])
+    },
+  })
 
-  saveMessagingToken()
-  requestNotificationPermission()
+  useEffect(() => {
+    if (!whoami || !hasNotificationActions) return
+    mutate()
+  }, [hasNotificationActions, mutate, whoami])
 }
 
 export function useMessaging() {