[HOLD for payment 2023-07-17] [$250] Migrate LoginForm.js to function component

[marcaaron]

Class Component Migration

Filenames

• [ ] src/pages/signin/LoginForm.js
  • type: React.Component
  • has state values: true
  • has refs: true
  • has context: false
  • lifecycle methods: componentDidMount,componentDidUpdate

Task

• We currently have some class components in our codebase that we would like to refactor to a function component.
• Here's a link with some general advice on how to refactor a class component to a function component: https://react.dev/reference/react/Component#alternatives
• If you need additional guidance, please ask in #expensify-open-source
• Test for any regressions and verify that there are no breaking changes

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~013393bcd51ba58942
• Upwork Job ID: 1673400345829101568
• Last Price Increase: 2023-06-26

[MelvinBot]

⚠️ Could not update price automatically because there is no linked Upwork Job ID. The BZ team member will need to update the price manually in Upwork.

[marcaaron]

Heads up! The pricing for this issue has been adjusted based on the scope of the work and the fact that no complex bug investigations or proposal are required.

[multijump]

I can work on this if it goes to external

[muxriddinmuqimov77]

I'd like to work on this issue when it goes to external

[s-alves10]

I'd love to work on this.

[melvin-bot[bot]]

Triggered auto assignment to @CortneyOfstad (NewFeature), see https://stackoverflowteams.com/c/expensify/questions/14418#:~:text=BugZero%20process%20steps%20for%20feature%20requests for more details.

[melvin-bot[bot]]

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

[melvin-bot[bot]]

Triggered auto assignment to Design team member for new feature review - @shawnborton (NewFeature)

[melvin-bot[bot]]

Triggered auto assignment to @dylanexpensify (External), see https://stackoverflow.com/c/expensify/questions/8582 for more details.

[melvin-bot[bot]]

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

[olexyt]

I would like to work on this.

[rayane-djouah]

can I work on this?

[melvin-bot[bot]]

📣 @faruqAbdulHakim! 📣 Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork. Please follow these steps:

1. Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
2. Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
3. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details. Format:

   Contributor details
   Your Expensify account email: <REPLACE EMAIL HERE>
   Upwork Profile Link: <REPLACE LINK HERE>

[melvin-bot[bot]]

✅ Contributor details stored successfully. Thank you for contributing to Expensify!

[dayana7204]

I am ready to work on this ticket :)

[code0406]

I am eager to take on this task.

[dylanexpensify]

Hmm, @CortneyOfstad which one of us is leading this?

[CortneyOfstad]

What the heck? 😂

I'm cool either way! I am OoO next week, but can keep this and keep an eye on it 👍

[CortneyOfstad]

@marcaaron for assignments, how do we handle this for contributors? Also, why are both Dylan and I assigned as BZ? Hoping you have some ideas on what is going on here 😂

[vdem0115]

I would like to work on this issue.

[marcaaron]

I'm not sure but I removed @dylanexpensify since you were assigned first.

The C+ assigned will select someone and then post a comment with the 🎀 👀 🎀 C+ reviewed text (example here). At that point, an Internal engineer would be assigned to assign the person suggested by the C+.

[CortneyOfstad]

Okay, sounds good! I'm heading OoO for the week, but will keep an eye on this 👍

If you feel like anything is delayed, feel free to re-assign as needed, but we should be okay I would think

[ishpaul777]

Proposal

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

Migrate LoginForm.js to function component

What is the root cause of that problem?

not a problem, as we want to migrate to function component only

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

Here is a gist of main component rewritten in a function component - https://gist.github.com/ishpaul777/87aa644a5b3da39f63b4f2d622d59448

[melvin-bot[bot]]

📣 @ishpaul777! 📣 Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork. Please follow these steps:

1. Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
2. Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
3. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details. Format:

   Contributor details
   Your Expensify account email: <REPLACE EMAIL HERE>
   Upwork Profile Link: <REPLACE LINK HERE>

[ishpaul777]

Contributor details Your Expensify account email: ishpaul207@gmail.com Upwork Profile Link: https://www.upwork.com/freelancers/~01f4fddf5caa8bfc3a

[melvin-bot[bot]]

✅ Contributor details stored successfully. Thank you for contributing to Expensify!

[abdul-abdu]

Proposal

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

1. Migrate LoginForm.js to the function component

What is the root cause of that problem?

• Not a problem! we want to migrate class component to function

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

function LoginForm(props) {
    const [login, setLogin] = useState('');
    const [formError, setFormError] = useState(null);
    const inputRef = useRef(null);

    useEffect(() => {
        if (props.account.errors || props.account.isLoading) {
            Session.clearAccountMessages();
        }
        // eslint-disable-next-line react-hooks/exhaustive-deps -- we don't want this effect to run again
    }, []);

    useEffect(() => {
        if (!canFocusInputOnScreenFocus() || !inputRef.current || !props.isVisible) {
            return;
        }
        if (props.blurOnSubmit) {
            inputRef.blur();
        }

        inputRef.current.focus();
    }, [props.blurOnSubmit, props.isVisible]);

    /**
     * Handle text input and clear formError upon text change
     *
     * @param {String} text
     */
    const onTextInput = (text) => {
        setLogin(text);
        setFormError(null);

        if (props.account.errors || props.account.message) {
            Session.clearAccountMessages();
        }

        // Clear the "Account successfully closed" message when the user starts typing
        if (props.closeAccount.success && !isInputAutoFilled(inputRef)) {
            CloseAccount.setDefaultData();
        }
    };

    /**
     * Check that all the form fields are valid, then trigger the submit callback
     */
    const validateAndSubmitForm = () => {
        if (props.network.isOffline) {
            return;
        }

        // If account was closed and have success message in Onyx, we clear it here
        if (!_.isEmpty(props.closeAccount.success)) {
            CloseAccount.setDefaultData();
        }

        const loginTrimmed = login.trim();
        if (!loginTrimmed) {
            setFormError('common.pleaseEnterEmailOrPhoneNumber');
            return;
        }

        const phoneLogin = LoginUtils.appendCountryCode(LoginUtils.getPhoneNumberWithoutSpecialChars(loginTrimmed));
        const parsedPhoneNumber = parsePhoneNumber(phoneLogin);

        if (!Str.isValidEmail(login) && !parsedPhoneNumber.possible) {
            if (ValidationUtils.isNumericWithSpecialChars(loginTrimmed)) {
                setFormError('common.error.phoneNumber');
            } else {
                setFormError('loginForm.error.invalidFormatEmailLogin');
            }
            return;
        }

        setFormError(null);

        // Check if this login has an account associated with it or not
        Session.beginSignIn(parsedPhoneNumber.possible ? parsedPhoneNumber.number.e164 : loginTrimmed);
    };

    const formErrorText = formError ? props.translate(formError) : '';
    const serverErrorText = ErrorUtils.getLatestErrorMessage(props.account);
    const hasError = !_.isEmpty(serverErrorText);

    return (
        <>
            <View
                accessibilityLabel={props.translate('loginForm.loginForm')}
                style={[styles.mt3]}
            >
                <TextInput
                    ref={inputRef}
                    label={props.translate('loginForm.phoneOrEmail')}
                    value={login}
                    autoCompleteType="username"
                    textContentType="username"
                    nativeID="username"
                    name="username"
                    onChangeText={onTextInput}
                    onSubmitEditing={validateAndSubmitForm}
                    autoCapitalize="none"
                    autoCorrect={false}
                    keyboardType={CONST.KEYBOARD_TYPE.EMAIL_ADDRESS}
                    errorText={formErrorText}
                    hasError={hasError}
                />
            </View>
            {!_.isEmpty(props.account.success) && <Text style={[styles.formSuccess]}>{props.account.success}</Text>}
            {!_.isEmpty(props.closeAccount.success || props.account.message) && (
                // DotIndicatorMessage mostly expects onyxData errors, so we need to mock an object so that the messages looks similar to prop.account.errors
                <DotIndicatorMessage
                    style={[styles.mv2]}
                    type="success"
                    messages={{0: props.closeAccount.success || props.account.message}}
                />
            )}
            {
                // We need to unmount the submit button when the component is not visible so that the Enter button
                // key handler gets unsubscribed and does not conflict with the Password Form
                props.isVisible && (
                    <View style={[styles.mt5]}>
                        <FormAlertWithSubmitButton
                            buttonText={props.translate('common.continue')}
                            isLoading={props.account.isLoading && props.account.loadingForm === CONST.FORMS.LOGIN_FORM}
                            onSubmit={validateAndSubmitForm}
                            message={serverErrorText}
                            isAlertVisible={!_.isEmpty(serverErrorText)}
                            containerStyles={[styles.mh0]}
                        />
                    </View>
                )
            }
        </>
    );
}

[melvin-bot[bot]]

📣 @abdul-abdu! 📣 Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork. Please follow these steps:

1. Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
2. Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
3. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details. Format:

   Contributor details
   Your Expensify account email: <REPLACE EMAIL HERE>
   Upwork Profile Link: <REPLACE LINK HERE>

[abdul-abdu]

Contributor details Your Expensify account email: abdugaffor.abdurakhimov@gmail.com Upwork Profile Link: https://www.upwork.com/freelancers/~0115fc90e6d2b384c3

[melvin-bot[bot]]

✅ Contributor details stored successfully. Thank you for contributing to Expensify!

[melvin-bot[bot]]

@CortneyOfstad, @narefyev91 Whoops! This issue is 2 days overdue. Let's get this updated quick!

[narefyev91]

Based on this comment "the fact that no complex bug investigations or proposal are required." - we should take person who posted comment firstly @multijump will you be able to start working on this one? 🎀 👀 🎀 C+ reviewed

[melvin-bot[bot]]

Triggered auto assignment to @luacmartins, see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[multijump]

Based on this comment "the fact that no complex bug investigations or proposal are required." - we should take person who posted comment firstly @multijump will you be able to start working on this one? 🎀 👀 🎀 C+ reviewed

Hi, @narefyev91 Yes, I will start working on this side right now when this assign to me. Thanks.

[melvin-bot[bot]]

📣 @multijump You have been assigned to this job! Please apply to this job in Upwork here and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻 Once you apply to this job, your Upwork ID will be stored and you will be automatically hired for future jobs! Keep in mind: Code of Conduct | Contributing 📖

[multijump]

Thanks for your considering me, @luacmartins @narefyev91 I will create PR asap(may be tomorrow).

[multijump]

Hi, @luacmartins @narefyev91 I created PR(https://github.com/Expensify/App/pull/22224). Please give me your feedbacks. Thanks

[melvin-bot[bot]]

🎯 ⚡️ Woah @narefyev91 / @multijump, great job pushing this forwards! ⚡️

The pull request got merged within 3 working days of assignment, so this job is eligible for a 50% #urgency bonus 🎉

• when @multijump got assigned: 2023-07-04 15:57:41 Z
• when the PR got merged: 2023-07-05 19:58:45 UTC

On to the next one 🚀

[melvin-bot[bot]]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot[bot]]

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

• https://github.com/Expensify/App/pull/22224

If no regressions arise, payment will be issued on 2023-07-17. :confetti_ball:

After the hold period is over and BZ checklist items are completed, please complete any of the applicable payments for this issue, and check them off once done.

• [x] External issue reporter
• [x] Contributor that fixed the issue
• [x] Contributor+ that helped on the issue and/or PR

As a reminder, here are the bonuses/penalties that should be applied for any External issue:

• Merged PR within 3 business days of assignment - 50% bonus
• Merged PR more than 9 business days after assignment - 50% penalty

[luacmartins]

Waiting on payment

[CortneyOfstad]

@multijump and @narefyev91 Can you link your Upwork profiles? I just want to make sure that I am paying the correct people 😂 TIA!

[multijump]

@multijump and @narefyev91 Can you link your Upwork profiles? I just want to make sure that I am paying the correct people 😂 TIA!

Hi, @CortneyOfstad Here is my profile. https://www.upwork.com/freelancers/~0168534bdf28bd4cf8 Thanks.

[narefyev91]

@multijump and @narefyev91 Can you link your Upwork profiles? I just want to make sure that I am paying the correct people 😂 TIA!

Hey @CortneyOfstad - no needs to any payment from Upwork - i'm working from Callstack :-)

[CortneyOfstad]

Perfect thanks!

@multijump sending you the contract now!

[CortneyOfstad]

Just sent — let me know when you accept @multijump, and I'll get that paid ASAP!

[multijump]

Just sent — let me know when you accept @multijump, and I'll get that paid ASAP!

Accepted offer. Thanks.

[CortneyOfstad]

Perfect! That has been paid (including the 50% bonus for the PR being merged within 3 days) so you are all set!

Closing!