[No QA][TS migration] Migrate 'UserUtils.js' lib to TypeScript #27778
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,9 +1,14 @@ | ||
| import {SvgProps} from 'react-native-svg'; | ||
| import {ValueOf} from 'type-fest'; | ||
| import CONST from '../CONST'; | ||
| import hashCode from './hashCode'; | ||
| import {ConciergeAvatar, FallbackAvatar} from '../components/Icon/Expensicons'; | ||
| import * as defaultAvatars from '../components/Icon/DefaultAvatars'; | ||
| import Login from '../types/onyx/Login'; | ||
|
|
||
| type AvatarRange = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24; | ||
|
|
||
| type LoginListIndicator = ValueOf<typeof CONST.BRICK_ROAD_INDICATOR_STATUS> | ''; | ||
|
|
||
| /** | ||
| * Searches through given loginList for any contact method / login with an error. | ||
|
|
@@ -25,36 +30,26 @@ import * as defaultAvatars from '../components/Icon/DefaultAvatars'; | |
| * } | ||
| * } | ||
| * }} | ||
| */ | ||
| function hasLoginListError(loginList: Login): boolean { | ||
| const errorFields = loginList?.errorFields ?? {}; | ||
| return Object.values(errorFields).some((field) => Object.keys(field ?? {}).length > 0); | ||
| } | ||
|
|
||
| /** | ||
| * Searches through given loginList for any contact method / login that requires | ||
| * an Info brick road status indicator. Currently this only applies if the user | ||
| * has an unvalidated contact method. | ||
| */ | ||
| function hasLoginListInfo(loginList: Login): boolean { | ||
| return !loginList.validatedDate; | ||
| } | ||
|
|
||
|
There was a problem hiding this comment. This change caused this regression: #28643 |
||
| /** | ||
| * Gets the appropriate brick road indicator status for a given loginList. | ||
| * Error status is higher priority, so we check for that first. | ||
| */ | ||
| function getLoginListBrickRoadIndicator(loginList: Login): LoginListIndicator { | ||
| if (hasLoginListError(loginList)) { | ||
| return CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR; | ||
| } | ||
|
|
@@ -66,42 +61,35 @@ function getLoginListBrickRoadIndicator(loginList) { | |
|
|
||
| /** | ||
| * Hashes provided string and returns a value between [0, range) | ||
| */ | ||
| function hashText(text: string, range: number): number { | ||
| return Math.abs(hashCode(text.toLowerCase())) % range; | ||
| } | ||
|
|
||
| /** | ||
| * Helper method to return the default avatar associated with the given accountID | ||
| * @param [accountID] | ||
| * @returns | ||
| */ | ||
| function getDefaultAvatar(accountID = -1): React.FC<SvgProps> { | ||
| if (accountID <= 0) { | ||
| return FallbackAvatar; | ||
| } | ||
| if (Number(accountID) === CONST.ACCOUNT_ID.CONCIERGE) { | ||
| return ConciergeAvatar; | ||
| } | ||
|
|
||
| // There are 24 possible default avatars, so we choose which one this user has based | ||
| // on a simple modulo operation of their login number. Note that Avatar count starts at 1. | ||
| const accountIDHashBucket = ((accountID % CONST.DEFAULT_AVATAR_COUNT) + 1) as AvatarRange; | ||
|
|
||
| return defaultAvatars[`Avatar${accountIDHashBucket}`]; | ||
| } | ||
|
|
||
| /** | ||
| * Helper method to return default avatar URL associated with login | ||
| */ | ||
| function getDefaultAvatarURL(accountID: string | number = '', isNewDot = false): string { | ||
| if (Number(accountID) === CONST.ACCOUNT_ID.CONCIERGE) { | ||
| return CONST.CONCIERGE_ICON_URL; | ||
| } | ||
|
|
@@ -115,64 +103,57 @@ function getDefaultAvatarURL(accountID = '', isNewDot = false) { | |
|
|
||
| /** | ||
| * Given a user's avatar path, returns true if user doesn't have an avatar or if URL points to a default avatar | ||
| * @param [avatarURL] - the avatar source from user's personalDetails | ||
| */ | ||
| function isDefaultAvatar(avatarURL?: string): boolean { | ||
| if (typeof avatarURL === 'string') { | ||
| if (avatarURL.includes('images/avatars/avatar_') || avatarURL.includes('images/avatars/default-avatar_') || avatarURL.includes('images/avatars/user/default')) { | ||
| return true; | ||
| } | ||
|
|
||
| // We use a hardcoded "default" Concierge avatar | ||
| if (avatarURL === CONST.CONCIERGE_ICON_URL_2021 || avatarURL === CONST.CONCIERGE_ICON_URL) { | ||
| return true; | ||
| } | ||
| } | ||
|
|
||
| if (!avatarURL) { | ||
| // If null URL, we should also use a default avatar | ||
| return true; | ||
| } | ||
|
|
||
| return false; | ||
| } | ||
|
|
||
| /** | ||
| * Provided a source URL, if source is a default avatar, return the associated SVG. | ||
| * Otherwise, return the URL pointing to a user-uploaded avatar. | ||
| * | ||
| * @param avatarURL - the avatar source from user's personalDetails | ||
| * @param accountID - the accountID of the user | ||
| */ | ||
| function getAvatar(avatarURL: string, accountID: number): React.FC<SvgProps> | string { | ||
| return isDefaultAvatar(avatarURL) ? getDefaultAvatar(accountID) : avatarURL; | ||
| } | ||
|
|
||
| /** | ||
| * Provided an avatar URL, if avatar is a default avatar, return NewDot default avatar URL. | ||
| * Otherwise, return the URL pointing to a user-uploaded avatar. | ||
| * | ||
| * @param avatarURL - the avatar source from user's personalDetails | ||
| * @param accountID - the accountID of the user | ||
| */ | ||
| function getAvatarUrl(avatarURL: string, accountID: number): string { | ||
| return isDefaultAvatar(avatarURL) ? getDefaultAvatarURL(accountID, true) : avatarURL; | ||
| } | ||
|
|
||
| /** | ||
| * Avatars uploaded by users will have a _128 appended so that the asset server returns a small version. | ||
| * This removes that part of the URL so the full version of the image can load. | ||
| */ | ||
| function getFullSizeAvatar(avatarURL: string, accountID: number): React.FC<SvgProps> | string { | ||
| const source = getAvatar(avatarURL, accountID); | ||
| if (typeof source !== 'string') { | ||
| return source; | ||
aldo-expensify marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| } | ||
| return source.replace('_128', ''); | ||
|
|
@@ -181,14 +162,10 @@ function getFullSizeAvatar(avatarURL, accountID) { | |
| /** | ||
| * Small sized avatars end with _128.<file-type>. This adds the _128 at the end of the | ||
| * source URL (before the file type) if it doesn't exist there already. | ||
| */ | ||
| function getSmallSizeAvatar(avatarURL: string, accountID: number): React.FC<SvgProps> | string { | ||
| const source = getAvatar(avatarURL, accountID); | ||
| if (typeof source !== 'string') { | ||
| return source; | ||
| } | ||
|
|
||
|
|
@@ -207,10 +184,8 @@ function getSmallSizeAvatar(avatarURL, accountID) { | |
|
|
||
| /** | ||
| * Generate a random accountID base on searchValue. | ||
| */ | ||
| function generateAccountID(searchValue: string): number { | ||
| return hashText(searchValue, 2 ** 32); | ||
| } | ||
|
|
||
|
|
||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Is the type
loginList: LoginListcorrect? if it is, we wouldn't need the question mark inloginList?There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yes it's correct, the thing is that this function is still used in some JS files and wrong values are passed and tests were failing. Once we get to these files that use this function the underlying issue will be fixed.
Either way, it's okay to make code safe and use
nullish coalescingandoptional chainingeven if types says it's not necessary.There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I disagree with this, I expect to be able to trust our types, but I understand that this may be acceptable while in a transitional period
I'm not sure why we didn't prefer
loginList: Login | undefined | nullif we had cases where we are passingundefinedornull🤷