From e6082c2b75fb883125cdfc1ce8b06ea311a13ebd Mon Sep 17 00:00:00 2001 From: Jakub Butkiewicz Date: Thu, 11 Apr 2024 10:46:09 +0200 Subject: [PATCH 1/5] feat: migrate ProfileAvatar to TS --- .../sidebar/ProfileAvatarWithIndicator.js | 63 ------------------- .../sidebar/ProfileAvatarWithIndicator.tsx | 44 +++++++++++++ 2 files changed, 44 insertions(+), 63 deletions(-) delete mode 100644 src/pages/home/sidebar/ProfileAvatarWithIndicator.js create mode 100644 src/pages/home/sidebar/ProfileAvatarWithIndicator.tsx diff --git a/src/pages/home/sidebar/ProfileAvatarWithIndicator.js b/src/pages/home/sidebar/ProfileAvatarWithIndicator.js deleted file mode 100644 index bd9c01aba001..000000000000 --- a/src/pages/home/sidebar/ProfileAvatarWithIndicator.js +++ /dev/null @@ -1,63 +0,0 @@ -/* eslint-disable rulesdir/onyx-props-must-have-default */ -import lodashGet from 'lodash/get'; -import PropTypes from 'prop-types'; -import React from 'react'; -import {View} from 'react-native'; -import {withOnyx} from 'react-native-onyx'; -import AvatarWithIndicator from '@components/AvatarWithIndicator'; -import OfflineWithFeedback from '@components/OfflineWithFeedback'; -import withCurrentUserPersonalDetails from '@components/withCurrentUserPersonalDetails'; -import useThemeStyles from '@hooks/useThemeStyles'; -import compose from '@libs/compose'; -import * as UserUtils from '@libs/UserUtils'; -import personalDetailsPropType from '@pages/personalDetailsPropType'; -import ONYXKEYS from '@src/ONYXKEYS'; - -const propTypes = { - /** The personal details of the person who is logged in */ - currentUserPersonalDetails: personalDetailsPropType, - - /** Indicates whether the app is loading initial data */ - isLoading: PropTypes.bool, - - /** Whether the avatar is selected */ - isSelected: PropTypes.bool, -}; - -const defaultProps = { - currentUserPersonalDetails: { - pendingFields: {avatar: ''}, - accountID: '', - avatar: '', - }, - isLoading: true, - isSelected: false, -}; - -function ProfileAvatarWithIndicator({currentUserPersonalDetails, isLoading, isSelected}) { - const styles = useThemeStyles(); - - return ( - - - - - - ); -} - -ProfileAvatarWithIndicator.propTypes = propTypes; -ProfileAvatarWithIndicator.defaultProps = defaultProps; -ProfileAvatarWithIndicator.displayName = 'ProfileAvatarWithIndicator'; -export default compose( - withCurrentUserPersonalDetails, - withOnyx({ - isLoading: { - key: ONYXKEYS.IS_LOADING_APP, - }, - }), -)(ProfileAvatarWithIndicator); diff --git a/src/pages/home/sidebar/ProfileAvatarWithIndicator.tsx b/src/pages/home/sidebar/ProfileAvatarWithIndicator.tsx new file mode 100644 index 000000000000..cd5d243a1fa4 --- /dev/null +++ b/src/pages/home/sidebar/ProfileAvatarWithIndicator.tsx @@ -0,0 +1,44 @@ +import React from 'react'; +import {View} from 'react-native'; +import type {OnyxEntry} from 'react-native-onyx'; +import {withOnyx} from 'react-native-onyx'; +import AvatarWithIndicator from '@components/AvatarWithIndicator'; +import OfflineWithFeedback from '@components/OfflineWithFeedback'; +import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails'; +import useThemeStyles from '@hooks/useThemeStyles'; +import * as UserUtils from '@libs/UserUtils'; +import ONYXKEYS from '@src/ONYXKEYS'; + +type ProfileAvatarWithIndicatorOnyxProps = { + /** Indicates whether the app is loading initial data */ + isLoading: OnyxEntry; +}; + +type ProfileAvatarWithIndicatorProps = ProfileAvatarWithIndicatorOnyxProps & { + /** Whether the avatar is selected */ + isSelected: boolean; +}; + +function ProfileAvatarWithIndicator({isLoading = true, isSelected = false}: ProfileAvatarWithIndicatorProps) { + const styles = useThemeStyles(); + const currentUserPersonalDetails = useCurrentUserPersonalDetails(); + + return ( + + + + + + ); +} + +ProfileAvatarWithIndicator.displayName = 'ProfileAvatarWithIndicator'; +export default withOnyx({ + isLoading: { + key: ONYXKEYS.IS_LOADING_APP, + }, +})(ProfileAvatarWithIndicator); From 21d7f6f4ff4d5b8db9678ff9d4e8e84810718f11 Mon Sep 17 00:00:00 2001 From: Jakub Butkiewicz Date: Thu, 11 Apr 2024 10:47:54 +0200 Subject: [PATCH 2/5] fix: formatting --- src/pages/home/sidebar/ProfileAvatarWithIndicator.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/pages/home/sidebar/ProfileAvatarWithIndicator.tsx b/src/pages/home/sidebar/ProfileAvatarWithIndicator.tsx index cd5d243a1fa4..217b9db69e63 100644 --- a/src/pages/home/sidebar/ProfileAvatarWithIndicator.tsx +++ b/src/pages/home/sidebar/ProfileAvatarWithIndicator.tsx @@ -37,6 +37,7 @@ function ProfileAvatarWithIndicator({isLoading = true, isSelected = false}: Prof } ProfileAvatarWithIndicator.displayName = 'ProfileAvatarWithIndicator'; + export default withOnyx({ isLoading: { key: ONYXKEYS.IS_LOADING_APP, From 5707e34f8d185d090a2b90d4f989e4a21e204fd5 Mon Sep 17 00:00:00 2001 From: Jakub Butkiewicz Date: Thu, 11 Apr 2024 10:57:10 +0200 Subject: [PATCH 3/5] fix: resolve comments --- src/pages/home/sidebar/ProfileAvatarWithIndicator.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/home/sidebar/ProfileAvatarWithIndicator.tsx b/src/pages/home/sidebar/ProfileAvatarWithIndicator.tsx index 217b9db69e63..838e990b1be9 100644 --- a/src/pages/home/sidebar/ProfileAvatarWithIndicator.tsx +++ b/src/pages/home/sidebar/ProfileAvatarWithIndicator.tsx @@ -16,7 +16,7 @@ type ProfileAvatarWithIndicatorOnyxProps = { type ProfileAvatarWithIndicatorProps = ProfileAvatarWithIndicatorOnyxProps & { /** Whether the avatar is selected */ - isSelected: boolean; + isSelected?: boolean; }; function ProfileAvatarWithIndicator({isLoading = true, isSelected = false}: ProfileAvatarWithIndicatorProps) { @@ -24,7 +24,7 @@ function ProfileAvatarWithIndicator({isLoading = true, isSelected = false}: Prof const currentUserPersonalDetails = useCurrentUserPersonalDetails(); return ( - + Date: Fri, 12 Apr 2024 10:44:30 +0200 Subject: [PATCH 4/5] feat: use useOnyx instead of withOnyx --- .../sidebar/ProfileAvatarWithIndicator.tsx | 22 ++++++------------- 1 file changed, 7 insertions(+), 15 deletions(-) diff --git a/src/pages/home/sidebar/ProfileAvatarWithIndicator.tsx b/src/pages/home/sidebar/ProfileAvatarWithIndicator.tsx index 838e990b1be9..e7726fb89537 100644 --- a/src/pages/home/sidebar/ProfileAvatarWithIndicator.tsx +++ b/src/pages/home/sidebar/ProfileAvatarWithIndicator.tsx @@ -1,7 +1,6 @@ import React from 'react'; import {View} from 'react-native'; -import type {OnyxEntry} from 'react-native-onyx'; -import {withOnyx} from 'react-native-onyx'; +import {useOnyx} from 'react-native-onyx'; import AvatarWithIndicator from '@components/AvatarWithIndicator'; import OfflineWithFeedback from '@components/OfflineWithFeedback'; import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails'; @@ -9,19 +8,16 @@ import useThemeStyles from '@hooks/useThemeStyles'; import * as UserUtils from '@libs/UserUtils'; import ONYXKEYS from '@src/ONYXKEYS'; -type ProfileAvatarWithIndicatorOnyxProps = { - /** Indicates whether the app is loading initial data */ - isLoading: OnyxEntry; -}; - -type ProfileAvatarWithIndicatorProps = ProfileAvatarWithIndicatorOnyxProps & { +type ProfileAvatarWithIndicatorProps = { /** Whether the avatar is selected */ isSelected?: boolean; }; -function ProfileAvatarWithIndicator({isLoading = true, isSelected = false}: ProfileAvatarWithIndicatorProps) { +function ProfileAvatarWithIndicator({isSelected = false}: ProfileAvatarWithIndicatorProps) { const styles = useThemeStyles(); const currentUserPersonalDetails = useCurrentUserPersonalDetails(); + const [isLoadingOnyxValue] = useOnyx(ONYXKEYS.IS_LOADING_APP); + const isLoading = isLoadingOnyxValue ?? true; return ( @@ -29,7 +25,7 @@ function ProfileAvatarWithIndicator({isLoading = true, isSelected = false}: Prof @@ -38,8 +34,4 @@ function ProfileAvatarWithIndicator({isLoading = true, isSelected = false}: Prof ProfileAvatarWithIndicator.displayName = 'ProfileAvatarWithIndicator'; -export default withOnyx({ - isLoading: { - key: ONYXKEYS.IS_LOADING_APP, - }, -})(ProfileAvatarWithIndicator); +export default ProfileAvatarWithIndicator; From b9e32ab47f0a4fbd478bcb2fdc19c0911cad44a6 Mon Sep 17 00:00:00 2001 From: Jakub Butkiewicz Date: Fri, 12 Apr 2024 12:27:47 +0200 Subject: [PATCH 5/5] fix: mock useOnyx hook --- __mocks__/react-native-onyx.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/__mocks__/react-native-onyx.ts b/__mocks__/react-native-onyx.ts index 253e3db47a96..9c6a36380c04 100644 --- a/__mocks__/react-native-onyx.ts +++ b/__mocks__/react-native-onyx.ts @@ -5,7 +5,7 @@ /* eslint-disable rulesdir/prefer-onyx-connect-in-libs */ import type {ConnectOptions, OnyxKey} from 'react-native-onyx'; -import Onyx, {withOnyx} from 'react-native-onyx'; +import Onyx, {useOnyx, withOnyx} from 'react-native-onyx'; let connectCallbackDelay = 0; function addDelayToConnectCallback(delay: number) { @@ -40,4 +40,4 @@ const reactNativeOnyxMock: ReactNativeOnyxMock = { }; export default reactNativeOnyxMock; -export {withOnyx}; +export {withOnyx, useOnyx};