diff --git a/core/screens/homeFeed/Feed.tsx b/core/screens/homeFeed/Feed.tsx index 9cb0947dcf4e75cd8b9387ba44fd71541cf4f0bc..be73b23d01eb83c6d4ce6e6ae67f3a937588df0f 100644 --- a/core/screens/homeFeed/Feed.tsx +++ b/core/screens/homeFeed/Feed.tsx @@ -91,13 +91,13 @@ const HomeFeed = () => { index: number }) => { return ( - <HoliTransition.FadeDown visible> + <> {item.feedPost && <GenericPostCard post={item.feedPost} allTopics={allTopics} />} {item.spacePost && <GenericPostCard post={item.spacePost} allTopics={allTopics} />} {item.insight && insightsCreators && <InsightCard insight={item.insight} creators={insightsCreators} />} {item.goodNewsArticle && <GoodNewsCard article={item.goodNewsArticle} />} {item.volunteeringReco && <VolunteeringCard recommendation={item.volunteeringReco} />} - </HoliTransition.FadeDown> + </> ) }, [allTopics, insightsCreators] diff --git a/core/screens/homeFeed/Feed.web.tsx b/core/screens/homeFeed/Feed.web.tsx index 9fe332f9f2a030976c08b653812fbdfa37adc7f8..7eaab9eb34156dc41733e1b710d951f9bbbc291f 100644 --- a/core/screens/homeFeed/Feed.web.tsx +++ b/core/screens/homeFeed/Feed.web.tsx @@ -173,10 +173,42 @@ const HomeFeed = () => { // Add tracking stats function const getFeedStats = useFeedStats(combinedFeedData, lastViewedIndex, track) - // Track when user leaves the page useEffect(() => { + const handlePageHide = () => { + getFeedStats() + } + + const handleHistoryChange = () => { + getFeedStats() + } + + // Listen for browser navigation (back/forward) + window.addEventListener('popstate', handleHistoryChange) + + // Override pushState and replaceState to detect navigation inside the app + const originalPushState = window.history.pushState + const originalReplaceState = window.history.replaceState + + window.history.pushState = function (...args) { + originalPushState.apply(this, args) + handleHistoryChange() + } + + window.history.replaceState = function (...args) { + originalReplaceState.apply(this, args) + handleHistoryChange() + } + + // Listen for tab close or page hide + document.addEventListener('visibilitychange', handlePageHide) + return () => { - getFeedStats() // Track when component unmounts + window.removeEventListener('popstate', handleHistoryChange) + document.removeEventListener('visibilitychange', handlePageHide) + + // Restore original history functions + window.history.pushState = originalPushState + window.history.replaceState = originalReplaceState } }, [getFeedStats]) diff --git a/core/screens/homeFeed/helpers/useFeedStats.ts b/core/screens/homeFeed/helpers/useFeedStats.ts index ee1e9017bca0d1fb2066dde97332bcecafc86bde..16353d128e772f4d9470a7759f526ea73463d61b 100644 --- a/core/screens/homeFeed/helpers/useFeedStats.ts +++ b/core/screens/homeFeed/helpers/useFeedStats.ts @@ -1,4 +1,4 @@ -import { useCallback } from 'react' +import { useCallback, useMemo } from 'react' import { TrackingEvent } from '@holi/core/tracking' import type { FeedItem } from '@holi/core/screens/homeFeed/types' import type { VolunteeringReco } from '@holi-apps/volunteering/types' @@ -12,10 +12,11 @@ export const useFeedStats = ( lastViewedIndex: number, track: (event: TrackingEvent) => void ) => { - const getFeedStats = useCallback(() => { + // Memoize the stats calculation + const stats = useMemo(() => { const viewedItems = combinedFeedData.slice(0, lastViewedIndex + 1) - const stats = viewedItems.reduce( + return viewedItems.reduce( (acc, item) => ({ feedPosts: acc.feedPosts + (item.feedPost ? 1 : 0), spacePosts: acc.spacePosts + (item.spacePost ? 1 : 0), @@ -33,7 +34,10 @@ export const useFeedStats = ( total: 0, } ) + }, [combinedFeedData, lastViewedIndex]) + // Now getFeedStats only depends on stable stats and track function + const getFeedStats = useCallback(() => { track( TrackingEvent.FeedPosts.viewSummary( stats.total, @@ -44,7 +48,7 @@ export const useFeedStats = ( stats.volunteering ) ) - }, [combinedFeedData, lastViewedIndex, track]) + }, [stats, track]) return getFeedStats } diff --git a/core/screens/homeFeed/useFeedQuery.tsx b/core/screens/homeFeed/useFeedQuery.tsx index 5cfd3b4f7154a9297be83c596843b208dda88bf2..2de59653373116d24621ec6de1529a041b50453b 100644 --- a/core/screens/homeFeed/useFeedQuery.tsx +++ b/core/screens/homeFeed/useFeedQuery.tsx @@ -11,8 +11,8 @@ import { feedInsightsQuery } from '@holi/core/screens/insights/queries' import type { Insight } from '@holi/core/screens/insights/types' import type { User } from '@holi/core/domain/shared/types' -const PAGE_SIZE_EXTERNAL_DATA = 20 -const PAGE_SIZE_FEED = 20 +const PAGE_SIZE_EXTERNAL_DATA = 12 +const PAGE_SIZE_FEED = 12 const POST_FREQUENCY = 2 export const useFeedQuery = () => {