diff --git a/native/chat/chat-thread-list.react.js b/native/chat/chat-thread-list.react.js --- a/native/chat/chat-thread-list.react.js +++ b/native/chat/chat-thread-list.react.js @@ -44,6 +44,7 @@ ChatTopTabsNavigationProp, } from './chat.react.js'; import { useNavigateToThread } from './message-list-types.js'; +import { NUXHandler } from '../components/nux-handler.react.js'; import { BackgroundChatThreadListRouteName, HomeChatThreadListRouteName, @@ -387,6 +388,7 @@ ref={flatListRef} /> {floatingAction} + ), [ diff --git a/native/components/nux-handler.react.js b/native/components/nux-handler.react.js new file mode 100644 --- /dev/null +++ b/native/components/nux-handler.react.js @@ -0,0 +1,39 @@ +// @flow + +import { useNavigation } from '@react-navigation/core'; +import invariant from 'invariant'; +import * as React from 'react'; + +import { isLoggedIn } from 'lib/selectors/user-selectors.js'; + +import { NUXTipsContext } from './nux-tips-context.react.js'; +import type { NUXTipRouteNames } from '../navigation/route-names.js'; +import { useSelector } from '../redux/redux-utils.js'; + +function NUXHandler(): React.Node { + const navigation = useNavigation(); + + const nuxTipsContext = React.useContext(NUXTipsContext); + invariant(nuxTipsContext, 'nuxTipsContext should be defined'); + const { getTipsProps } = nuxTipsContext; + + const loggedIn = useSelector(isLoggedIn); + const prevLoggedIn = React.useRef(false); + + React.useEffect(() => { + if (!getTipsProps() || !loggedIn || prevLoggedIn.current) { + return; + } + prevLoggedIn.current = true; + + navigation.navigate({ + name: 'CommunityDrawerTip', + params: { + tipKey: 'community_drawer', + tooltipLocation: 'below', + }, + }); + }, [getTipsProps, navigation, loggedIn]); +} + +export { NUXHandler }; diff --git a/native/components/nux-tips-context.react.js b/native/components/nux-tips-context.react.js --- a/native/components/nux-tips-context.react.js +++ b/native/components/nux-tips-context.react.js @@ -62,26 +62,26 @@ function NUXTipsContextProvider(props: Props): React.Node { const { children } = props; - const tipsProps = React.useRef<{ [tip: NUXTip]: ?TipProps }>({}); + const tipsProps = React.useMemo<{ [tip: NUXTip]: ?TipProps }>(() => ({}), []); const registerTipButton = React.useCallback( (type: NUXTip, tipProps: ?TipProps) => { - tipsProps.current[type] = tipProps; + tipsProps[type] = tipProps; }, - [], + [tipsProps], ); const getTipsProps = React.useCallback(() => { const result: { [tip: NUXTip]: TipProps } = {}; for (const type of values(nuxTip)) { - if (!tipsProps.current[type]) { + if (!tipsProps[type]) { return null; } - result[type] = tipsProps.current[type]; + result[type] = tipsProps[type]; } return result; - }, []); + }, [tipsProps]); const value = React.useMemo( () => ({