move triggerCondition logic inside an effect

This commit is contained in:
Abbey Campbell
2025-11-17 18:26:53 -08:00
parent 4a45896703
commit 62bbd5415c

View File

@@ -33,45 +33,68 @@ const AddObsButton = ( ): React.Node => {
const setShownOnce = useStore( state => state.layout.setShownOnce );
const justFinishedSignup = useStore( state => state.layout.justFinishedSignup );
const numOfUserObservations = zustandStorage.getItem( "numOfUserObservations" );
// Base trigger condition in all cases:
// Only show the tooltip if the user has only AI camera as an option in this button.
// Only show the tooltip on MyObservations screen.
let triggerCondition = !isAllAddObsOptionsMode && currentRoute?.name === "ObsList";
if ( justFinishedSignup ) {
// If a user creates a new account, they should see the tooltip right after
// dismissing the account creation pivot card and landing on My Obs.
triggerCondition = triggerCondition && !!shownOnce["account-creation"];
} else if ( numOfUserObservations === undefined
|| numOfUserObservations === null
|| typeof numOfUserObservations !== "number" ) {
// If numOfUserObservations is undefined or null, we can not know if we should show the
// tooltip to the user. Usually this happens when the user logs in before making an
// observation, then we need to fetch the number of observations from server.
triggerCondition = false;
} else if ( !currentUser ) {
// If logged out, user should see the tooltip after making their second observation
triggerCondition = triggerCondition && numOfUserObservations > 1;
} else if ( numOfUserObservations > 50 ) {
// If a user logs in to an existing account with <=50 observations,
// they should see the tooltip right after landing on My Obs after signing in
//
// If a user is already logged in and updates the app when tooltip is released,
// they should see the tooltip the first time they open the app after updating
//
// Both those cases are covered by not changing the base trigger condition.
//
// If a user logs in to an existing account with >50 observations, they should
// see the tooltip right after dismissing the "Welcome back!" pivot card
// and landing on My Obs.
triggerCondition = triggerCondition && !!shownOnce["fifty-observation"];
}
const obsCountLoaded = typeof numOfUserObservations === "number";
React.useEffect( () => {
// The tooltip should only appear once per app download.
if ( !shownOnce[showKey] && triggerCondition ) setShowTooltip( true );
}, [shownOnce, triggerCondition] );
let timeoutId = null;
// We must know the route name and observation count before evaluating the triggerCondition
// And, the tooltip should only appear once per app download.
const shouldEvaluateTrigger = currentRoute?.name && obsCountLoaded && !shownOnce[showKey];
if ( shouldEvaluateTrigger ) {
// Base trigger condition in all cases:
// Only show the tooltip if the user has the AI camera as the default button option.
// Only show the tooltip on MyObservations screen.
const onObsList = currentRoute?.name === "ObsList";
const onlyAiCamera = !isAllAddObsOptionsMode;
let triggerCondition = onObsList && onlyAiCamera;
if ( justFinishedSignup ) {
// If a user creates a new account, they should see the tooltip right after dismissing the
// account creation pivot card and landing on My Obs.
triggerCondition = triggerCondition && !!shownOnce["account-creation"];
} else if ( !currentUser ) {
// If logged out, user should see the tooltip after making their second observation
triggerCondition = triggerCondition && numOfUserObservations > 1;
} else if ( numOfUserObservations > 50 ) {
// If a user logs in to an existing account with >50 observations, they should see the
// tooltip right after dismissing the "Welcome back!" pivot card and landing on My Obs.
triggerCondition = triggerCondition && !!shownOnce["fifty-observation"];
// If a user logs in to an existing account with <=50 observations,
// they should see the tooltip right after landing on My Obs after signing in
//
// If a user is already logged in and updates the app when tooltip is released,
// they should see the tooltip the first time they open the app after updating
//
// Both those cases are covered by not changing the base trigger condition.
}
// We use a timeout to avoid opening/closing two modals at the same time, such as the
// PivotCards that also appear on the MyObs screen.
if ( triggerCondition ) {
timeoutId = setTimeout( () => {
setShowTooltip( true );
}, 500 );
}
}
return () => {
if ( timeoutId != null ) {
clearTimeout( timeoutId );
}
};
}, [
currentRoute,
obsCountLoaded,
numOfUserObservations,
justFinishedSignup,
currentUser,
isAllAddObsOptionsMode,
shownOnce
] );
const dismissTooltip = () => {
setShowTooltip( false );