From 09c51af5cf6a8cdad053e2283cb916e6a14d1728 Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Tue, 9 Apr 2024 21:53:44 +0100 Subject: [PATCH 1/2] [Statsig] Instrument feed display --- src/lib/statsig/events.ts | 6 +++++ src/view/com/pager/Pager.tsx | 28 +++++++++++++++++------ src/view/com/pager/Pager.web.tsx | 22 +++++++++++++----- src/view/screens/Home.tsx | 38 +++++++++++++++++++++++++++----- 4 files changed, 76 insertions(+), 18 deletions(-) diff --git a/src/lib/statsig/events.ts b/src/lib/statsig/events.ts index 73e9876ac8..3d650b8b73 100644 --- a/src/lib/statsig/events.ts +++ b/src/lib/statsig/events.ts @@ -44,6 +44,12 @@ export type LogEvents = { } 'onboarding:moderation:nextPressed': {} 'onboarding:finished:nextPressed': {} + 'home:feedDisplayed': { + feedUrl: string + feedType: string + index: number + reason: 'focus' | 'tabbar-click' | 'pager-swipe' | 'desktop-sidebar-click' + } 'feed:endReached': { feedUrl: string feedType: string diff --git a/src/view/com/pager/Pager.tsx b/src/view/com/pager/Pager.tsx index 06ec2e4503..26070fb880 100644 --- a/src/view/com/pager/Pager.tsx +++ b/src/view/com/pager/Pager.tsx @@ -1,17 +1,22 @@ import React, {forwardRef} from 'react' import {Animated, View} from 'react-native' import PagerView, { - PagerViewOnPageSelectedEvent, PagerViewOnPageScrollEvent, + PagerViewOnPageSelectedEvent, PageScrollStateChangedNativeEvent, } from 'react-native-pager-view' + +import {LogEvents} from '#/lib/statsig/events' import {s} from 'lib/styles' export type PageSelectedEvent = PagerViewOnPageSelectedEvent const AnimatedPagerView = Animated.createAnimatedComponent(PagerView) export interface PagerRef { - setPage: (index: number) => void + setPage: ( + index: number, + reason: LogEvents['home:feedDisplayed']['reason'], + ) => void } export interface RenderTabBarFnProps { @@ -25,7 +30,10 @@ interface Props { initialPage?: number renderTabBar: RenderTabBarFn onPageSelected?: (index: number) => void - onPageSelecting?: (index: number) => void + onPageSelecting?: ( + index: number, + reason: LogEvents['home:feedDisplayed']['reason'], + ) => void onPageScrollStateChanged?: ( scrollState: 'idle' | 'dragging' | 'settling', ) => void @@ -51,7 +59,13 @@ export const Pager = forwardRef>( const pagerView = React.useRef(null) React.useImperativeHandle(ref, () => ({ - setPage: (index: number) => pagerView.current?.setPage(index), + setPage: ( + index: number, + reason: LogEvents['home:feedDisplayed']['reason'], + ) => { + pagerView.current?.setPage(index) + onPageSelecting?.(index, reason) + }, })) const onPageSelectedInner = React.useCallback( @@ -79,14 +93,14 @@ export const Pager = forwardRef>( // -prf if (scrollState.current === 'settling') { if (lastDirection.current === -1 && offset < lastOffset.current) { - onPageSelecting?.(position) + onPageSelecting?.(position, 'pager-swipe') setSelectedPage(position) lastDirection.current = 0 } else if ( lastDirection.current === 1 && offset > lastOffset.current ) { - onPageSelecting?.(position + 1) + onPageSelecting?.(position + 1, 'pager-swipe') setSelectedPage(position + 1) lastDirection.current = 0 } @@ -113,7 +127,7 @@ export const Pager = forwardRef>( const onTabBarSelect = React.useCallback( (index: number) => { pagerView.current?.setPage(index) - onPageSelecting?.(index) + onPageSelecting?.(index, 'tabbar-click') }, [pagerView, onPageSelecting], ) diff --git a/src/view/com/pager/Pager.web.tsx b/src/view/com/pager/Pager.web.tsx index 42982ef7f8..abba12b2cc 100644 --- a/src/view/com/pager/Pager.web.tsx +++ b/src/view/com/pager/Pager.web.tsx @@ -1,6 +1,8 @@ import React from 'react' -import {flushSync} from 'react-dom' import {View} from 'react-native' +import {flushSync} from 'react-dom' + +import {LogEvents} from '#/lib/statsig/events' import {s} from 'lib/styles' export interface RenderTabBarFnProps { @@ -14,7 +16,10 @@ interface Props { initialPage?: number renderTabBar: RenderTabBarFn onPageSelected?: (index: number) => void - onPageSelecting?: (index: number) => void + onPageSelecting?: ( + index: number, + reason: LogEvents['home:feedDisplayed']['reason'], + ) => void } export const Pager = React.forwardRef(function PagerImpl( { @@ -31,11 +36,16 @@ export const Pager = React.forwardRef(function PagerImpl( const anchorRef = React.useRef(null) React.useImperativeHandle(ref, () => ({ - setPage: (index: number) => onTabBarSelect(index), + setPage: ( + index: number, + reason: LogEvents['home:feedDisplayed']['reason'], + ) => { + onTabBarSelect(index, reason) + }, })) const onTabBarSelect = React.useCallback( - (index: number) => { + (index: number, reason: LogEvents['home:feedDisplayed']['reason']) => { const scrollY = window.scrollY // We want to determine if the tabbar is already "sticking" at the top (in which // case we should preserve and restore scroll), or if it is somewhere below in the @@ -54,7 +64,7 @@ export const Pager = React.forwardRef(function PagerImpl( flushSync(() => { setSelectedPage(index) onPageSelected?.(index) - onPageSelecting?.(index) + onPageSelecting?.(index, reason) }) if (isSticking) { const restoredScrollY = scrollYs.current[index] @@ -73,7 +83,7 @@ export const Pager = React.forwardRef(function PagerImpl( {renderTabBar({ selectedPage, tabBarAnchor: , - onSelect: onTabBarSelect, + onSelect: e => onTabBarSelect(e, 'tabbar-click'), })} {React.Children.map(children, (child, i) => ( diff --git a/src/view/screens/Home.tsx b/src/view/screens/Home.tsx index e6ba0395cf..e4f4b27aec 100644 --- a/src/view/screens/Home.tsx +++ b/src/view/screens/Home.tsx @@ -2,8 +2,9 @@ import React from 'react' import {ActivityIndicator, AppState, StyleSheet, View} from 'react-native' import {useFocusEffect} from '@react-navigation/native' +import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback' import {useSetTitle} from '#/lib/hooks/useSetTitle' -import {useGate} from '#/lib/statsig/statsig' +import {logEvent, LogEvents, useGate} from '#/lib/statsig/statsig' import {emitSoftReset} from '#/state/events' import {FeedSourceInfo, usePinnedFeedsInfos} from '#/state/queries/feed' import {FeedDescriptor, FeedParams} from '#/state/queries/post-feed' @@ -79,7 +80,7 @@ function HomeScreenReady({ // This is supposed to only happen on the web when you use the right nav. if (selectedIndex !== lastPagerReportedIndexRef.current) { lastPagerReportedIndexRef.current = selectedIndex - pagerRef.current?.setPage(selectedIndex) + pagerRef.current?.setPage(selectedIndex, 'desktop-sidebar-click') } }, [selectedIndex]) @@ -96,6 +97,17 @@ function HomeScreenReady({ }, [setDrawerSwipeDisabled, selectedIndex, setMinimalShellMode]), ) + useFocusEffect( + useNonReactiveCallback(() => { + logEvent('home:feedDisplayed', { + index: selectedIndex, + feedType: selectedFeed.split('|')[0], + feedUrl: selectedFeed, + reason: 'focus', + }) + }), + ) + const disableMinShellOnForegrounding = useGate( 'disable_min_shell_on_foregrounding', ) @@ -116,13 +128,28 @@ function HomeScreenReady({ (index: number) => { setMinimalShellMode(false) setDrawerSwipeDisabled(index > 0) - const feed = allFeeds[index] - setSelectedFeed(feed) - lastPagerReportedIndexRef.current = index + if (lastPagerReportedIndexRef.current !== index) { + lastPagerReportedIndexRef.current = index + const feed = allFeeds[index] + setSelectedFeed(feed) + } }, [setDrawerSwipeDisabled, setSelectedFeed, setMinimalShellMode, allFeeds], ) + const onPageSelecting = React.useCallback( + (index: number, reason: LogEvents['home:feedDisplayed']['reason']) => { + const feed = allFeeds[index] + logEvent('home:feedDisplayed', { + index, + feedType: feed.split('|')[0], + feedUrl: feed, + reason, + }) + }, + [allFeeds], + ) + const onPressSelected = React.useCallback(() => { emitSoftReset() }, []) @@ -175,6 +202,7 @@ function HomeScreenReady({ ref={pagerRef} testID="homeScreen" initialPage={selectedIndex} + onPageSelecting={onPageSelecting} onPageSelected={onPageSelected} onPageScrollStateChanged={onPageScrollStateChanged} renderTabBar={renderTabBar}> From 0d070ab1eb24c074d9b971e7b5778adccc47db08 Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Tue, 9 Apr 2024 22:30:52 +0100 Subject: [PATCH 2/2] Back out leftover change --- src/view/screens/Home.tsx | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/src/view/screens/Home.tsx b/src/view/screens/Home.tsx index e4f4b27aec..39bdac669c 100644 --- a/src/view/screens/Home.tsx +++ b/src/view/screens/Home.tsx @@ -128,11 +128,9 @@ function HomeScreenReady({ (index: number) => { setMinimalShellMode(false) setDrawerSwipeDisabled(index > 0) - if (lastPagerReportedIndexRef.current !== index) { - lastPagerReportedIndexRef.current = index - const feed = allFeeds[index] - setSelectedFeed(feed) - } + const feed = allFeeds[index] + setSelectedFeed(feed) + lastPagerReportedIndexRef.current = index }, [setDrawerSwipeDisabled, setSelectedFeed, setMinimalShellMode, allFeeds], )