Skip to content

Make all personal avatars have pending upload UI #13185

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Julesssss merged 6 commits into from
Jan 6, 2023
Merged

Make all personal avatars have pending upload UI #13185

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
9078869
Add pending avatar check to initial settings
Beamanator Nov 30, 2022
30bb53a
Add pending avatar check to report page
Beamanator Nov 30, 2022
14d73f0
Add pending avatar check to details page
Beamanator Nov 30, 2022
0b973a5
Add pending avatar check to LHN
Beamanator Nov 30, 2022
14eee46
Merge branch 'main' of github.com:Expensify/App into beaman-makeAllPe…
Beamanator Jan 5, 2023
49d5275
Expand destructure for lint
Beamanator Jan 5, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 11 additions & 6 deletions src/pages/DetailsPage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ import MenuItem from '../components/MenuItem';
import AttachmentModal from '../components/AttachmentModal';
import PressableWithoutFocus from '../components/PressableWithoutFocus';
import * as Report from '../libs/actions/Report';
import OfflineWithFeedback from '../components/OfflineWithFeedback';
import AutoUpdateTime from '../components/AutoUpdateTime';

const matchType = PropTypes.shape({
Expand Down Expand Up @@ -130,12 +131,16 @@ class DetailsPage extends React.PureComponent {
style={styles.noOutline}
onPress={show}
>
<Avatar
containerStyles={[styles.avatarLarge, styles.mb3]}
imageStyles={[styles.avatarLarge]}
source={details.avatar}
size={CONST.AVATAR_SIZE.LARGE}
/>
<OfflineWithFeedback
pendingAction={lodashGet(details, 'pendingFields.avatar', null)}
>
<Avatar
containerStyles={[styles.avatarLarge, styles.mb3]}
imageStyles={[styles.avatarLarge]}
source={details.avatar}
size={CONST.AVATAR_SIZE.LARGE}
/>
</OfflineWithFeedback>
</PressableWithoutFocus>
)}
</AttachmentModal>
Expand Down
21 changes: 16 additions & 5 deletions src/pages/home/report/ReportActionItemSingle.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import lodashGet from 'lodash/get';
import React from 'react';
import {View, Pressable} from 'react-native';
import PropTypes from 'prop-types';
Expand All @@ -17,6 +18,7 @@ import ROUTES from '../../../ROUTES';
import {withPersonalDetails} from '../../../components/OnyxProvider';
import Tooltip from '../../../components/Tooltip';
import ControlSelection from '../../../libs/ControlSelection';
import OfflineWithFeedback from '../../../components/OfflineWithFeedback';

const propTypes = {
/** All the data of the action */
Expand Down Expand Up @@ -49,7 +51,12 @@ const showUserDetails = (email) => {
};

const ReportActionItemSingle = (props) => {
const {avatar, displayName, login} = props.personalDetails[props.action.actorEmail] || {};
const {
avatar,
displayName,
login,
pendingFields,
} = props.personalDetails[props.action.actorEmail] || {};
const avatarUrl = props.action.automatic
? CONST.CONCIERGE_ICON_URL

Expand All @@ -72,10 +79,14 @@ const ReportActionItemSingle = (props) => {
onPress={() => showUserDetails(props.action.actorEmail)}
>
<Tooltip text={props.action.actorEmail}>
<Avatar
containerStyles={[styles.actionAvatar]}
source={avatarUrl}
/>
<OfflineWithFeedback
pendingAction={lodashGet(pendingFields, 'avatar', null)}
>
<Avatar
containerStyles={[styles.actionAvatar]}
source={avatarUrl}
/>
</OfflineWithFeedback>
</Tooltip>
</Pressable>
<View style={[styles.chatItemRight]}>
Expand Down
14 changes: 10 additions & 4 deletions src/pages/home/sidebar/SidebarLinks.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import lodashGet from 'lodash/get';
import React from 'react';
import {View, TouchableOpacity} from 'react-native';
import _ from 'underscore';
Expand Down Expand Up @@ -27,6 +28,7 @@ import reportActionPropTypes from '../report/reportActionPropTypes';
import LHNOptionsList from '../../../components/LHNOptionsList/LHNOptionsList';
import SidebarUtils from '../../../libs/SidebarUtils';
import reportPropTypes from '../../reportPropTypes';
import OfflineWithFeedback from '../../../components/OfflineWithFeedback';

const propTypes = {
/** Toggles the navigation menu open and closed */
Expand Down Expand Up @@ -163,10 +165,14 @@ class SidebarLinks extends React.Component {
accessibilityRole="button"
onPress={this.showSettingsPage}
>
<AvatarWithIndicator
source={this.props.currentUserPersonalDetails.avatar}
tooltipText={this.props.translate('common.settings')}
/>
<OfflineWithFeedback
pendingAction={lodashGet(this.props.currentUserPersonalDetails, 'pendingFields.avatar', null)}
>
<AvatarWithIndicator
source={this.props.currentUserPersonalDetails.avatar}
tooltipText={this.props.translate('common.settings')}
/>
</OfflineWithFeedback>
</TouchableOpacity>
</View>
<Freeze freeze={this.props.isSmallScreenWidth && !this.props.isDrawerOpen && this.isSidebarLoaded}>
Expand Down
16 changes: 11 additions & 5 deletions src/pages/settings/InitialSettingsPage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import lodashGet from 'lodash/get';
import React from 'react';
import {View, ScrollView, Pressable} from 'react-native';
import PropTypes from 'prop-types';
Expand Down Expand Up @@ -30,6 +31,7 @@ import * as Wallet from '../../libs/actions/Wallet';
import walletTermsPropTypes from '../EnablePayments/walletTermsPropTypes';
import * as PolicyUtils from '../../libs/PolicyUtils';
import ConfirmModal from '../../components/ConfirmModal';
import OfflineWithFeedback from '../../components/OfflineWithFeedback';

const propTypes = {
/* Onyx Props */
Expand Down Expand Up @@ -244,11 +246,15 @@ class InitialSettingsPage extends React.Component {
<View style={styles.pageWrapper}>
<Pressable style={[styles.mb3]} onPress={this.openProfileSettings}>
<Tooltip text={this.props.currentUserPersonalDetails.displayName}>
<Avatar
imageStyles={[styles.avatarLarge]}
source={this.props.currentUserPersonalDetails.avatar}
size={CONST.AVATAR_SIZE.LARGE}
/>
<OfflineWithFeedback
pendingAction={lodashGet(this.props.currentUserPersonalDetails, 'pendingFields.avatar', null)}
>
<Avatar
imageStyles={[styles.avatarLarge]}
source={this.props.currentUserPersonalDetails.avatar}
size={CONST.AVATAR_SIZE.LARGE}
/>
</OfflineWithFeedback>
</Tooltip>
</Pressable>

Expand Down