New notifications not being received by the socket connection
I am using the listenNotificationReceive method from the @novu/headless package with react to listen for new notifications from my app. However, the method is not being called when I trigger notifications from my dashboard. To view new notifications, I'd have to manually call the fetch notifications method. Is there a way to fix this? Code snippets below
const NotificationProvider = ({ children }: { children: React.ReactNode }) => {
const [notifications, setNotifications] = useState<IMessage[]>([])
const { cacheConfig } = useAppStore()
const [loading, setLoading] = useState(false)
const headlessServiceRef = useRef<HeadlessService | null>(null)
const [pageNum, setPageNum] = useState(0)
const [fetchNotifsError, setFetchNotifsError] = useState(false)
const fetchNotifications = useCallback(() => {
const headlessService = headlessServiceRef.current
if (headlessService) {
headlessService.fetchNotifications({
listener: ({ isError, isLoading, status }) => {
if (isError) {
setFetchNotifsError(true)
}
setLoading(isLoading)
},
onSuccess: response => {
setFetchNotifsError(false)
setHasMore(response.hasMore)
setLoading(false)
setNotifications(response.data)
},
onError(error) {
setLoading(false)
},
page: pageNum,
})
}
}, [pageNum, cacheConfig?.host])
useEffect(() => {
const headlessService = new HeadlessService({
applicationIdentifier: process.env.REACT_APP_NOVU_APPLICATION_ID || "",
subscriberId: cacheConfig?.host,
})
headlessService.initializeSession({
listener: res => {},
onSuccess: session => {
headlessServiceRef.current = headlessService
fetchNotifications()
fetchUnread()
},
onError: error => {
console.log("headless error:", error)
setFetchNotifsError(true)
},
})
}, [fetchNotifications, cacheConfig?.host])
useEffect(() => {
const headlessService = headlessServiceRef.current
if (headlessService) {
headlessService.listenNotificationReceive({
listener(message) {
// !THIS LISTENER FN IS NOT BEING CALLED DESPITE NOTIFICATIONS BEING TRIGGERRED SUCCESSFULLY FROM THE DASHBOARD
console.log(message)
// Do something with message
}
},
})
}
}, [cacheConfig?.host])
return (
<NotificationContext.Provider
value={{
notifications,
pageNum,
fetchNotifications,
hasMore,
loading,
unread,
fetchNotifsError,
}}
>
{children}
</NotificationContext.Provider>
)
}
const useNotification = () => useContext(NotificationContext)
export { useNotification, NotificationProvider }const NotificationProvider = ({ children }: { children: React.ReactNode }) => {
const [notifications, setNotifications] = useState<IMessage[]>([])
const { cacheConfig } = useAppStore()
const [loading, setLoading] = useState(false)
const headlessServiceRef = useRef<HeadlessService | null>(null)
const [pageNum, setPageNum] = useState(0)
const [fetchNotifsError, setFetchNotifsError] = useState(false)
const fetchNotifications = useCallback(() => {
const headlessService = headlessServiceRef.current
if (headlessService) {
headlessService.fetchNotifications({
listener: ({ isError, isLoading, status }) => {
if (isError) {
setFetchNotifsError(true)
}
setLoading(isLoading)
},
onSuccess: response => {
setFetchNotifsError(false)
setHasMore(response.hasMore)
setLoading(false)
setNotifications(response.data)
},
onError(error) {
setLoading(false)
},
page: pageNum,
})
}
}, [pageNum, cacheConfig?.host])
useEffect(() => {
const headlessService = new HeadlessService({
applicationIdentifier: process.env.REACT_APP_NOVU_APPLICATION_ID || "",
subscriberId: cacheConfig?.host,
})
headlessService.initializeSession({
listener: res => {},
onSuccess: session => {
headlessServiceRef.current = headlessService
fetchNotifications()
fetchUnread()
},
onError: error => {
console.log("headless error:", error)
setFetchNotifsError(true)
},
})
}, [fetchNotifications, cacheConfig?.host])
useEffect(() => {
const headlessService = headlessServiceRef.current
if (headlessService) {
headlessService.listenNotificationReceive({
listener(message) {
// !THIS LISTENER FN IS NOT BEING CALLED DESPITE NOTIFICATIONS BEING TRIGGERRED SUCCESSFULLY FROM THE DASHBOARD
console.log(message)
// Do something with message
}
},
})
}
}, [cacheConfig?.host])
return (
<NotificationContext.Provider
value={{
notifications,
pageNum,
fetchNotifications,
hasMore,
loading,
unread,
fetchNotifsError,
}}
>
{children}
</NotificationContext.Provider>
)
}
const useNotification = () => useContext(NotificationContext)
export { useNotification, NotificationProvider }