[HOLD for payment 2024-10-14] [$100] Migrate DeeplinkRedirectLoadingIndicator from withOnyx to useOnyx

[roryabraham]

Coming from https://expensify.slack.com/archives/C01GTK53T8Q/p1725973460005309?thread_ts=1725905735.105989&cid=C01GTK53T8Q

Migrate src/components/DeeplinkWrapper/DeeplinkRedirectLoadingIndicator.tsx to use useOnyx instead of withOnyx.

Issue Owner

Current Issue Owner: @

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021834282172274819617
• Upwork Job ID: 1834282172274819617
• Last Price Increase: 2024-09-12
• Automatic offers:
• Nodebrute | Contributor | 103949156

Issue Owner

Current Issue Owner: @lschurr / @lschurr

[melvin-bot]

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

[melvin-bot]

Triggered auto assignment to @lschurr (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.

[roryabraham]

seems like upwork automation didn't work 😞

[BhuvaneshPatil]

Dibs

[melvin-bot]

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

[melvin-bot]

Current assignee @getusha is eligible for the External assigner, not assigning anyone new.

[melvin-bot]

Upwork job price has been updated to $100

[github-actions]

@Nodebrute Your proposal will be dismissed because you did not follow the proposal template.

[Nodebrute]

Proposal

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

Migrate DeeplinkRedirectLoadingIndicator from withOnyx to useOnyx

What is the root cause of that problem?

Feature request

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

We can remove this withOnyx

App/src/components/DeeplinkWrapper/DeeplinkRedirectLoadingIndicator.tsx

Lines 65 to 69 in 7748eff

	export default withOnyx<DeeplinkRedirectLoadingIndicatorProps, DeeplinkRedirectLoadingIndicatorOnyxProps>({
	session: {
	key: ONYXKEYS.SESSION,
	},
	})(DeeplinkRedirectLoadingIndicator);

and then we can use

  const [session] = useOnyx(ONYXKEYS.SESSION);

Optional: we can also remove type props

What alternative solutions did you explore? (Optional)

[ChavdaSachin]

Proposal

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

Migrate src/components/DeeplinkWrapper/DeeplinkRedirectLoadingIndicator.tsx to use useOnyx instead of withOnyx.

What is the root cause of that problem?

• migration

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

• Old file here
  Updated code here

import React from 'react';
import {View} from 'react-native';
import type {OnyxEntry} from 'react-native-onyx';
import {useOnyx} from 'react-native-onyx';
import Icon from '@components/Icon';
import * as Expensicons from '@components/Icon/Expensicons';
import * as Illustrations from '@components/Icon/Illustrations';
import Text from '@components/Text';
import TextLink from '@components/TextLink';
import useLocalize from '@hooks/useLocalize';
import useTheme from '@hooks/useTheme';
import useThemeStyles from '@hooks/useThemeStyles';
import Navigation from '@libs/Navigation/Navigation';
import ONYXKEYS from '@src/ONYXKEYS';
import type * as OnyxTypes from '@src/types/onyx';

type DeeplinkRedirectLoadingIndicatorOnyxProps = {
    /** Current user session */
    session: OnyxEntry<OnyxTypes.Session>;
};

type DeeplinkRedirectLoadingIndicatorProps = DeeplinkRedirectLoadingIndicatorOnyxProps & {
    /** Opens the link in the browser */
    openLinkInBrowser: (value: boolean) => void;
};

function DeeplinkRedirectLoadingIndicator({openLinkInBrowser}: DeeplinkRedirectLoadingIndicatorProps) {
    const {translate} = useLocalize();
    const theme = useTheme();
    const styles = useThemeStyles();
    const [session] = useOnyx(ONYXKEYS.SESSION);

    return (
        <View style={styles.deeplinkWrapperContainer}>
            <View style={styles.deeplinkWrapperMessage}>
                <View style={styles.mb2}>
                    <Icon
                        width={200}
                        height={164}
                        src={Illustrations.RocketBlue}
                    />
                </View>
                <Text style={[styles.textHeadline, styles.textXXLarge]}>{translate('deeplinkWrapper.launching')}</Text>
                <View style={[styles.mt2, styles.textAlignCenter]}>
                    <Text>{translate('deeplinkWrapper.loggedInAs', {email: session?.email ?? ''})}</Text>
                    <Text style={[styles.textAlignCenter]}>
                        {translate('deeplinkWrapper.doNotSeePrompt')} <TextLink onPress={() => openLinkInBrowser(true)}>{translate('deeplinkWrapper.tryAgain')}</TextLink>
                        {translate('deeplinkWrapper.or')} <TextLink onPress={() => Navigation.goBack()}>{translate('deeplinkWrapper.continueInWeb')}</TextLink>.
                    </Text>
                </View>
            </View>
            <View style={styles.deeplinkWrapperFooter}>
                <Icon
                    width={154}
                    height={34}
                    fill={theme.success}
                    src={Expensicons.ExpensifyWordmark}
                />
            </View>
        </View>
    );
}

DeeplinkRedirectLoadingIndicator.displayName = 'DeeplinkRedirectLoadingIndicator';

export default DeeplinkRedirectLoadingIndicator;

What alternative solutions did you explore? (Optional)

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[melvin-bot]

📣 @Nodebrute 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job
Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

[roryabraham]

Assigning to @Nodebrute on a first-come-first-serve basis. @BhuvaneshPatil is assigned to two other migrations already

[roryabraham]

PR is on staging. @puneetlath choosing you at random to assign here just in case the PR is reverted and further internal engineering help is needed.

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 9.0.45-4 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• [NO QA]: migrate DeeplinkRedirectLoadingIndicator to useOnyx #49224

If no regressions arise, payment will be issued on 2024-10-14. 🎊

For reference, here are some details about the assignees on this issue:

• @getusha requires payment through NewDot Manual Requests
• @Nodebrute requires payment automatic offer (Contributor)

[melvin-bot]

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

• [@getusha] The PR that introduced the bug has been identified. Link to the PR:
• [@getusha] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment:
• [@getusha] A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion:
• [@getusha] Determine if we should create a regression test for this bug.
• [@getusha] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.
• [@lschurr] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

[lschurr]

Payment summary:

• Contributor: $100 @Nodebrute (Paid via Upwork)
• Reviewer: $100 @getusha (Please request via NewDot)

[getusha]

This was a migration issue, i don't think we need a checklist.

[garrettmknight]

$100 approved for @getusha