[HOLD for payment 2024-11-21] [$250] Web - Company cards - Undefined cards is displayed on card name when refreshing the page

[IuliiaHerets]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Version Number: v9.0.58-0
Reproducible in staging?: Y
Reproducible in production?: Y
Email or phone of affected tester (no customers): expensify416+da2@gmail.com
Issue reported by: Applause Internal Team

Action Performed:

1. Create a workspace > click on More features > enable Company cards
2. Add a company card
3. Click on 'Settings' button on the newly added company card
4. Click 'Card feed name'
5. Refresh the page

Expected Result:

The card name should be displayed

Actual Result:

Undefined cards is displayed

Workaround:

Unknown

Platforms:

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6656556_1730896387469.Screen_Recording_2024-11-06_at_3.20.12_in_the_afternoon.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021854924087067768118
• Upwork Job ID: 1854924087067768118
• Last Price Increase: 2024-11-08
• Automatic offers:
• DylanDylann | Reviewer | 104837075
• huult | Contributor | 104837077

Issue Owner

Current Issue Owner: @twisterdotcom

[melvin-bot]

Triggered auto assignment to @twisterdotcom (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

Proposal

Please re-state the problem that we are trying to solve in this issue.

Undefined cards is displayed

What is the root cause of that problem?

When the user reloads, selectedFeed will be undefined for a while so feedName will be undefined
in the InputWrapper we are using is defaultValue=feedName and it has received the value undefined the first time
so when feedName is updated InputWrapper will not be re-rendered

App/src/pages/workspace/companyCards/WorkspaceCompanyCardsSettingsFeedNamePage.tsx

Lines 43 to 44 in c755314

	const selectedFeed = CardUtils.getSelectedFeed(lastSelectedFeed, cardFeeds);
	const feedName = cardFeeds?.settings?.companyCardNicknames?.[selectedFeed] ?? translate('workspace.companyCards.feedName', {feedName: CardUtils.getCardFeedName(selectedFeed)});

What changes do you think we should make in order to solve the problem?

1. We should use useState to re-render this input

    const feedNameDefault = cardFeeds?.settings?.companyCardNicknames?.[selectedFeed] ?? translate('workspace.companyCards.feedName', {feedName: CardUtils.getCardFeedName(selectedFeed)});
    const [feedName, setFeedName] = useState('');

2. Will set feedName again when feedNameDefault is changed

          useEffect(()=>{
              setFeedName(feedNameDefault);
          },[feedNameDefault])

3. Using value instead of defaultValue in this input

App/src/pages/workspace/companyCards/WorkspaceCompanyCardsSettingsFeedNamePage.tsx

Line 97 in c755314

defaultValue={feedName}

        value={feedName}
        onChange={(event) => {
            setFeedName(event.target.value);
        }}

What alternative solutions did you explore? (Optional)

[Shahidullah-Muffakir]

Proposal

Please re-state the problem that we are trying to solve in this issue.

When users refresh the company card feed name settings page, instead of showing the correct card feed name, the page displays "undefined cards" as the input value.

What is the root cause of that problem?

The root cause is that the code tries to display and set the input value before the card feed data (cardFeeds) is fully loaded from Onyx . During this initial loading state, cardFeeds is undefined, which causes the feed name logic to fall back to an undefined value. The current code doesn't properly handle this loading state, leading to the "undefined cards" display.

What changes do you think we should make in order to solve the problem?

We should add a proper loading state handler before attempting to render the input field. Here's the specific change needed:

1. Add a check at the beginning of the component to verify if cardFeeds data is available
2. Show a loading indicator while the data is being fetched:
   here:

   App/src/pages/workspace/companyCards/WorkspaceCompanyCardsSettingsFeedNamePage.tsx

   Lines 29 to 45 in 62aed8d

   	type WorkspaceCompanyCardsSettingsFeedNamePageProps = StackScreenProps<SettingsNavigatorParamList, typeof SCREENS.WORKSPACE.COMPANY_CARDS_SETTINGS_FEED_NAME>;
   	function WorkspaceCompanyCardsSettingsFeedNamePage({
   	route: {
   	params: {policyID},
   	},
   	}: WorkspaceCompanyCardsSettingsFeedNamePageProps) {
   	const styles = useThemeStyles();
   	const {translate} = useLocalize();
   	const {inputCallbackRef} = useAutoFocusInput();
   	const policy = usePolicy(policyID);
   	const workspaceAccountID = policy?.workspaceAccountID ?? -1;
   	const [lastSelectedFeed] = useOnyx(`${ONYXKEYS.COLLECTION.LAST_SELECTED_FEED}${policyID}`);
   	const [cardFeeds] = useOnyx(`${ONYXKEYS.COLLECTION.SHARED_NVP_PRIVATE_DOMAIN_MEMBER}${workspaceAccountID}`);
   	const selectedFeed = CardUtils.getSelectedFeed(lastSelectedFeed, cardFeeds);
   	const feedName = cardFeeds?.settings?.companyCardNicknames?.[selectedFeed] ?? translate('workspace.companyCards.feedName', {feedName: CardUtils.getCardFeedName(selectedFeed)});

if (!cardFeeds) {
    return <FullScreenLoadingIndicator/>;
}

[mkzie2]

Edited by proposal-police: This proposal was edited at 2024-11-07 02:07:28 UTC.

Proposal

Please re-state the problem that we are trying to solve in this issue.

Undefined cards is displayed in card name

What is the root cause of that problem?

We supplied a default value which is computed based on cardFeeds Onyx data:

App/src/pages/workspace/companyCards/WorkspaceCompanyCardsSettingsFeedNamePage.tsx

Line 103 in b05ce87

</FormProvider>

At the initial mount, cardFeeds might not be fully loaded causing feedName to be undefined. And defaultValue only loads the initial value, does not re-render when the value changes.

What changes do you think we should make in order to solve the problem?

We should show a loading indicator WHILE THE DATA IS STILL LOADING, not when it is undefined. Because the data might actually be undefined itself (for example, delete the card from another device).

We can leverage cardFeeds and lastSelectedFeed Onyx's status metadata and isLoadingOnyxValue.

if ((!cardFeeds || !lastSelectedFeed) && isLoadingCardFeedsAndLastSelectedFeed) {
    return <LoadingIndicator />
}

[huult]

Edited by proposal-police: This proposal was edited at 2024-11-12 05:19:43 UTC.

Proposal

Please re-state the problem that we are trying to solve in this issue.

Undefined cards is displayed on card name when refreshing the page

What is the root cause of that problem?

When the workspace company card page reloads, lastSelectedFeed and cardFeeds will initially be undefined and will receive values after a moment as useOnyx processes the data.

App/src/pages/workspace/companyCards/WorkspaceCompanyCardsSettingsFeedNamePage.tsx

Lines 41 to 42 in 27b4786

	const [lastSelectedFeed] = useOnyx(`${ONYXKEYS.COLLECTION.LAST_SELECTED_FEED}${policyID}`);
	const [cardFeeds] = useOnyx(`${ONYXKEYS.COLLECTION.SHARED_NVP_PRIVATE_DOMAIN_MEMBER}${workspaceAccountID}`);

feedName receives selectedFeed, which is undefined because lastSelectedFeed and cardFeeds are also undefined. As a result, cardFeeds?.settings?.companyCardNicknames?.[selectedFeed] returns undefined, and translate('workspace.companyCards.feedName', { feedName: CardUtils.getCardFeedName(selectedFeed) }) outputs undefined cards. This is then set to the default value of WORKSPACE_COMPANY_CARD_FEED_NAME form but does not update when feedName changes. For this reason, we see undefined cards in the input

App/src/pages/workspace/companyCards/WorkspaceCompanyCardsSettingsFeedNamePage.tsx

Lines 43 to 44 in 27b4786

	const selectedFeed = CardUtils.getSelectedFeed(lastSelectedFeed, cardFeeds);
	const feedName = cardFeeds?.settings?.companyCardNicknames?.[selectedFeed] ?? translate('workspace.companyCards.feedName', {feedName: CardUtils.getCardFeedName(selectedFeed)});

What changes do you think we should make in order to solve the problem?

To resolve this issue, we need the previous value of feedName to be set as the default value after the page reloads. To retain the previous value, we pass feedName as a parameter so that, once the reload is complete, it can be retrieved and displayed. Something like this:

//.src/pages/workspace/companyCards/WorkspaceCompanyCardsSettingsFeedNamePage.tsx#L31
function WorkspaceCompanyCardsSettingsFeedNamePage({
    route: {
-        params: {policyID},
+        params: {policyID, currentFeedName},
    },
+   navigation    
}: WorkspaceCompanyCardsSettingsFeedNamePageProps) {

//.src/pages/workspace/companyCards/WorkspaceCompanyCardsSettingsFeedNamePage.tsx#L44
-   const feedName = cardFeeds?.settings?.companyCardNicknames?.[selectedFeed] ?? translate('workspace.companyCards.feedName', {feedName: CardUtils.getCardFeedName(selectedFeed)});
+    const feedName = selectedFeed
+        ? cardFeeds?.settings?.companyCardNicknames?.[selectedFeed] ?? translate('workspace.companyCards.feedName', {feedName: CardUtils.getCardFeedName(selectedFeed)})
+        : currentFeedName;

+    useEffect(() => {
+        if (!feedName) {
+            return;
+        }

+        navigation.setParams({currentFeedName: feedName});
+    }, [feedName, navigation]);

Note: We applied this solution to the category page as well

What alternative solutions did you explore? (Optional)

We use loading indicator to wait value of cardFeedsResult and lastSelectedFeedResult:

// src/pages/workspace/companyCards/WorkspaceCompanyCardsSettingsFeedNamePage.tsx#L43

-    const [lastSelectedFeed] = useOnyx(`${ONYXKEYS.COLLECTION.LAST_SELECTED_FEED}${policyID}`);
+    const [lastSelectedFeed, lastSelectedFeedResult] = useOnyx(`${ONYXKEYS.COLLECTION.LAST_SELECTED_FEED}${policyID}`);
-    const [cardFeeds] = useOnyx(`${ONYXKEYS.COLLECTION.SHARED_NVP_PRIVATE_DOMAIN_MEMBER}${workspaceAccountID}`);
+   const [cardFeeds, cardFeedsResult] = useOnyx(`${ONYXKEYS.COLLECTION.SHARED_NVP_PRIVATE_DOMAIN_MEMBER}${workspaceAccountID}`);
    
// src/pages/workspace/companyCards/WorkspaceCompanyCardsSettingsFeedNamePage.tsx#L67
+    if (isLoadingOnyxValue(cardFeedsResult) || isLoadingOnyxValue(lastSelectedFeedResult)) {
+        return <FullScreenLoadingIndicator />;
+    }

Test branch

POC

Screen.Recording.2024-11-07.at.21.12.15.mov

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~021854924087067768118

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @DylanDylann (External)

[ikevin127]

Edited by proposal-police: This proposal was edited at 2024-11-09 02:15:29 UTC.

Proposal

Please re-state the problem that we are trying to solve in this issue

undefined cards is displayed on card name when refreshing the page.

What is the root cause of that problem?

We set defaultValue={feedName} on component mount when feedName is not yet calculated because cardFeeds useOnyx status is loading on mount after refreshing the page.

The `defaultValue` is only used for the initial render and does not update after the component mounts.

The above quote is the reason why the defaultValue is not updated once cardFeeds exists and feedName is calculated here because it happens shortly after initial component mount.

What changes do you think we should make in order to solve the problem?

To fix this issue and fulfill the issue's Expected result which states The card name should be displayed we have to apply the following changes to the WorkspaceCompanyCardsSettingsFeedNamePage.tsx component:

• leverage useOnyx result status and apply it to cardFeeds like so:

const [cardFeeds, cardFeedsResult] = useOnyx(`${ONYXKEYS.COLLECTION.SHARED_NVP_PRIVATE_DOMAIN_MEMBER}${workspaceAccountID}`);

• add the setInputValue logic required to dynamically assign / change the input value after initial component mount:

const [inputValue, setInputValue] = useState('');

useEffect(() => {
    if (cardFeedsResult.status === 'loading') {
        return;
    }
    setInputValue(feedName);
}, [cardFeedsResult, feedName]);

• remove InputWrapper's defaultValue={feedName} and add the following instead:

value={inputValue}
onChangeText={setInputValue}

Solution result

MacOS: Chrome

Screen.Recording.2024-11-08.at.18.04.04.mov

cc @Expensify/design Might have a say on how we're approaching a fix for this issue since some contributors suggested displaying a loading indicator and others didn't, since the issue's Expected result does not mention a loader.