[HOLD for payment 2024-01-22] [$250] [TS migration] Migrate 'SignInButtons' component to TypeScript

[melvin-bot]

TypeScript migration

Make sure you read through our TypeScript's style guide, cheatsheet and PropTypes conversion table before you start working on this migration issue.

Files

Path	Dependencies
src/components/SignInButtons/IconButton.js	8
src/components/SignInButtons/GetUserLanguage.js	0
src/components/SignInButtons/GoogleSignIn/index.website.js	8
src/components/SignInButtons/GoogleSignIn/index.native.js	7
src/components/SignInButtons/GoogleSignIn/index.desktop.js	8
src/components/SignInButtons/AppleSignIn/index.website.js	10
src/components/SignInButtons/AppleSignIn/index.ios.js	6
src/components/SignInButtons/AppleSignIn/index.desktop.js	7
src/components/SignInButtons/AppleSignIn/index.android.js	7
src/components/SignInButtons/AppleAuthWrapper/index.js	0
src/components/SignInButtons/AppleAuthWrapper/index.ios.js	3

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~014df343518e1f9fe5
• Upwork Job ID: 1736777478874030080
• Last Price Increase: 2023-12-18
• Automatic offers:
• shahinyan11 | Contributor | 28065558

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

Upwork job price has been updated to $250

[MahmudjonToraqulov]

I would like to work on this

[HezekielT]

I would love to work on this.

[shahinyan11]

I would like to work on this. I commented only under this issue

[rayane-djouah]

I would like to work on this issue

[yh-0218]

I would like to work on this issue

[djabdou]

I would like to work on this

[annscode]

I would like to work on this issue

[expertscoders]

I'm available to work on this

[Ekaterina-Kaschenko]

1. Create a types file in the root of each component (SignInButtons, ReportActionItemFragment, ReportActionItemMessageEdit).
2. Define public and private interfaces/types in the types file and export the public ones for external use.
3. Use the .ts extension for each file in the folders.
4. Go through each file and apply appropriate types for incoming parameters (props).
5. Specify types for generics where needed.
6. Test all properly.

Also, we'd like to mention that it's not good to keep codes for server requests separately
https://github.com/Expensify/App/blob/main/src/components/SignInButtons/AppleSignIn/index.ios.js#L12

[melvin-bot]

📣 @Ekaterina-Kaschenko! 📣
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. Make sure you've read and understood the contributing guidelines.
2. 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.
3. 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.
4. 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>

[Tony-MK]

Can I work on this migration?

[anudeeps0306]

Contributor details
Your Expensify account email: anudeep0306@gmail.com
Upwork Profile Link: https://www.upwork.com/freelancers/~019df89cc58fc54b33

To proceed with the TypeScript migration, follow these steps:

1. File-by-File Migration:

• Start by updating the file extensions from .js to .ts or .tsx for React components in the following files and directories:

  • src/components/SignInButtons/IconButton.ts
  • src/components/SignInButtons/GetUserLanguage.ts
  • src/components/SignInButtons/GoogleSignIn/index.website.ts
  • src/components/SignInButtons/GoogleSignIn/index.native.ts
  • src/components/SignInButtons/GoogleSignIn/index.desktop.ts
  • src/components/SignInButtons/AppleSignIn/index.website.ts
  • src/components/SignInButtons/AppleSignIn/index.ios.ts
  • src/components/SignInButtons/AppleSignIn/index.desktop.ts
  • src/components/SignInButtons/AppleSignIn/index.android.ts
  • src/components/SignInButtons/AppleAuthWrapper/index.ts
  • src/components/SignInButtons/AppleAuthWrapper/index.ios.ts

• For each file:

  • Follow the TypeScript style guide and naming conventions for types and interfaces.
  • Replace PropTypes with TypeScript types or interfaces based on the PropTypes conversion table.
  • Implement strict typing based on the provided rules and guidelines.
  • Organize the files according to the recommended file structure.

2. Define Types in Types Files:

• Create a types.ts file in the root of each component directory (SignInButtons, ReportActionItemFragment, ReportActionItemMessageEdit).
• Define public and private interfaces/types in these types files.
• Export the public interfaces/types for external usage.

3. Specific Steps:

• Ensure that each file in the folders uses the .ts extension.
• Review and apply appropriate types for incoming parameters (props).
• Specify types for generics where applicable.
• Utilize TypeScript utility types and type-fest for improved code readability and maintainability.
• Replace Higher Order Components (HOCs) with Hooks wherever possible, adhering to the provided guidelines.

4. Testing and Validation:

• After making changes, thoroughly test each component to ensure functionality is maintained.
• Check for any type errors or bugs introduced during the migration process.
• Document fixes for any minor issues encountered during the migration in the PR comments.
• Use @ts-expect-error temporarily to suppress TypeScript errors if needed, and create separate GitHub issues to resolve these errors later.

[melvin-bot]

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

[yuwenmemon]

Sure thing! @rushatgabhane can you take a look?

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

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

• [TS migration] Migrate 'SignInButtons' component to TypeScript #33404

If no regressions arise, payment will be issued on 2024-01-22. 🎊

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

• @rushatgabhane requires payment through NewDot Manual Requests
• @shahinyan11 requires payment automatic offer (Contributor)

[melvin-bot]

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

• [@rushatgabhane] Please propose regression test steps to ensure the new feature will work correctly on production in further releases.
• [@NicMendonca] Link the GH issue for creating/updating the regression test once above steps have been agreed upon.

[rushatgabhane]

TS migration. No regression steps needed.

[rushatgabhane]

@NicMendonca could you please add payment summary so it'll be paid on 22nd. Thank you 🙇

[NicMendonca]

BZ Summary:
C: @shahinyan11 - $250 (paid via Upwork)
C+: @rushatgabhane - $250 (paid via Expensify)

[NicMendonca]

@shahinyan11 you've been paid! @rushatgabhane don't forget to request payment!

[JmillsExpensify]

$250 payment approved for @rushatgabhane based on summary above.

[shahinyan11]

@NicMendonca Upwork still shows the task as in progress. Should someone complete it or what?