refactor avatar component

app/containers/Avatar/AvatarContainer.tsx

@@ -1,14 +1,10 @@
 import React from 'react';
 import { shallowEqual, useSelector } from 'react-redux';
 
-import Button from '../Button';
 import { IApplicationState } from '../../definitions';
 import { getUserSelector } from '../../selectors/login';
 import Avatar from './Avatar';
 import { IAvatar } from './interfaces';
-import I18n from '../../i18n';
-import { useTheme } from '../../theme';
-import styles from './styles';
 import { useAvatarETag } from './useAvatarETag';
 
 interface IAvatarContainer extends IAvatar {
@@ -27,11 +23,8 @@ const AvatarContainer = ({
 	onPress,
 	getCustomEmoji,
 	isStatic,
-	rid,
-	handleEdit
+	rid
 }: IAvatarContainer): React.ReactElement => {
-	const { colors } = useTheme();
-
 	const server = useSelector((state: IApplicationState) => state.share.server.server || state.server.server);
 	const serverVersion = useSelector((state: IApplicationState) => state.share.server.version || state.server.version);
 	const { id, token, username } = useSelector(
@@ -56,40 +49,27 @@ const AvatarContainer = ({
 	const { avatarETag } = useAvatarETag({ username, text, type, rid });
 
 	return (
-		<>
-			<Avatar
-				server={server}
-				style={style}
-				text={text}
-				avatar={avatar}
-				emoji={emoji}
-				size={size}
-				borderRadius={borderRadius}
-				type={type}
-				children={children}
-				userId={id}
-				token={token}
-				onPress={onPress}
-				getCustomEmoji={getCustomEmoji}
-				isStatic={isStatic}
-				rid={rid}
-				blockUnauthenticatedAccess={blockUnauthenticatedAccess}
-				externalProviderUrl={externalProviderUrl}
-				avatarETag={avatarETag}
-				serverVersion={serverVersion}
-			/>
-			{handleEdit ? (
-				<Button
-					title={I18n.t('Edit')}
-					type='secondary'
-					backgroundColor={colors.editAndUploadButtonAvatar}
-					onPress={handleEdit}
-					testID='avatar-edit-button'
-					style={styles.editAvatarButton}
-					color={colors.titleText}
-				/>
-			) : null}
-		</>
+		<Avatar
+			server={server}
+			style={style}
+			text={text}
+			avatar={avatar}
+			emoji={emoji}
+			size={size}
+			borderRadius={borderRadius}
+			type={type}
+			children={children}
+			userId={id}
+			token={token}
+			onPress={onPress}
+			getCustomEmoji={getCustomEmoji}
+			isStatic={isStatic}
+			rid={rid}
+			blockUnauthenticatedAccess={blockUnauthenticatedAccess}
+			externalProviderUrl={externalProviderUrl}
+			avatarETag={avatarETag}
+			serverVersion={serverVersion}
+		/>
 	);
 };
 

app/containers/Avatar/AvatarWithEdit.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+
+import Button from '../Button';
+import AvatarContainer from './AvatarContainer';
+import { IAvatar } from './interfaces';
+import I18n from '../../i18n';
+import { useTheme } from '../../theme';
+import styles from './styles';
+
+interface IAvatarContainer extends IAvatar {
+	handleEdit?: () => void;
+}
+
+const AvatarWithEdit = ({
+	style,
+	text = '',
+	avatar,
+	emoji,
+	size,
+	borderRadius,
+	type,
+	children,
+	onPress,
+	getCustomEmoji,
+	isStatic,
+	rid,
+	handleEdit
+}: IAvatarContainer): React.ReactElement => {
+	const { colors } = useTheme();
+
+	return (
+		<>
+			<AvatarContainer
+				style={style}
+				text={text}
+				avatar={avatar}
+				emoji={emoji}
+				size={size}
+				borderRadius={borderRadius}
+				type={type}
+				children={children}
+				onPress={onPress}
+				getCustomEmoji={getCustomEmoji}
+				isStatic={isStatic}
+				rid={rid}
+			/>
+			{handleEdit ? (
+				<Button
+					title={I18n.t('Edit')}
+					type='secondary'
+					backgroundColor={colors.editAndUploadButtonAvatar}
+					onPress={handleEdit}
+					testID='avatar-edit-button'
+					style={styles.editAvatarButton}
+					color={colors.titleText}
+				/>
+			) : null}
+		</>
+	);
+};
+
+export default AvatarWithEdit;

app/containers/Avatar/index.ts

@@ -0,0 +1,5 @@
+import Avatar from './AvatarContainer';
+
+export { default as AvatarWithEdit } from './AvatarWithEdit';
+
+export default Avatar;

app/views/ProfileView/index.tsx

@@ -18,7 +18,7 @@ import { FormTextInput } from '../../containers/TextInput';
 import { events, logEvent } from '../../lib/methods/helpers/log';
 import I18n from '../../i18n';
 import Button from '../../containers/Button';
-import Avatar from '../../containers/Avatar';
+import { AvatarWithEdit } from '../../containers/Avatar';
 import { setUser } from '../../actions/login';
 import * as HeaderButton from '../../containers/HeaderButton';
 import StatusBar from '../../containers/StatusBar';
@@ -411,7 +411,7 @@ class ProfileView extends React.Component<IProfileViewProps, IProfileViewState>
 				<SafeAreaView testID='profile-view'>
 					<ScrollView contentContainerStyle={sharedStyles.containerScrollView} testID='profile-view-list' {...scrollPersistTaps}>
 						<View style={styles.avatarContainer} testID='profile-view-avatar'>
-							<Avatar
+							<AvatarWithEdit
 								text={user.username}
 								avatarETag={user.avatarETag}
 								size={100}

app/views/RoomInfoEditView/index.tsx

@@ -8,7 +8,7 @@ import { Subscription } from 'rxjs';
 
 import { deleteRoom } from '../../actions/room';
 import { themes } from '../../lib/constants';
-import Avatar from '../../containers/Avatar';
+import { AvatarWithEdit } from '../../containers/Avatar';
 import { sendLoadingEvent } from '../../containers/Loading';
 import SafeAreaView from '../../containers/SafeAreaView';
 import StatusBar from '../../containers/StatusBar';
@@ -527,7 +527,7 @@ class RoomInfoEditView extends React.Component<IRoomInfoEditViewProps, IRoomInfo
 						{...scrollPersistTaps}
 					>
 						<View style={styles.avatarContainer}>
-							<Avatar type={room.t} text={room.name} rid={room.rid} size={100} handleEdit={this.handleEditAvatar} />
+							<AvatarWithEdit type={room.t} text={room.name} rid={room.rid} size={100} handleEdit={this.handleEditAvatar} />
 						</View>
 						<FormTextInput
 							inputRef={e => {

app/views/RoomInfoView/index.tsx

@@ -10,7 +10,7 @@ import { Observable, Subscription } from 'rxjs';
 
 import { CustomIcon, TIconsName } from '../../containers/CustomIcon';
 import Status from '../../containers/Status';
-import Avatar from '../../containers/Avatar';
+import { AvatarWithEdit } from '../../containers/Avatar';
 import sharedStyles from '../Styles';
 import RoomTypeIcon from '../../containers/RoomTypeIcon';
 import I18n from '../../i18n';
@@ -183,17 +183,17 @@ class RoomInfoView extends React.Component<IRoomInfoViewProps, IRoomInfoViewStat
 			title: t === SubscriptionType.DIRECT ? I18n.t('User_Info') : I18n.t('Room_Info'),
 			headerRight: showEdit
 				? () => (
-					<HeaderButton.Container>
-						<HeaderButton.Item
-							iconName='edit'
-							onPress={() => {
-								const isLivechat = t === SubscriptionType.OMNICHANNEL;
-								logEvent(events[`RI_GO_${isLivechat ? 'LIVECHAT' : 'RI'}_EDIT`]);
-								navigation.navigate(isLivechat ? 'LivechatEditView' : 'RoomInfoEditView', { rid, room, roomUser });
-							}}
-							testID='room-info-view-edit-button'
-						/>
-					</HeaderButton.Container>
+						<HeaderButton.Container>
+							<HeaderButton.Item
+								iconName='edit'
+								onPress={() => {
+									const isLivechat = t === SubscriptionType.OMNICHANNEL;
+									logEvent(events[`RI_GO_${isLivechat ? 'LIVECHAT' : 'RI'}_EDIT`]);
+									navigation.navigate(isLivechat ? 'LivechatEditView' : 'RoomInfoEditView', { rid, room, roomUser });
+								}}
+								testID='room-info-view-edit-button'
+							/>
+						</HeaderButton.Container>
 				  )
 				: undefined
 		});
@@ -404,7 +404,7 @@ class RoomInfoView extends React.Component<IRoomInfoViewProps, IRoomInfoViewStat
 		const { navigation } = this.props;
 		const { room } = this.state;
 		navigation.navigate('ChangeAvatarView', { titleHeader: I18n.t('Room_Info'), room, t: this.t });
-	}
+	};
 
 	renderAvatar = (room: ISubscription, roomUser: IUserParsed) => {
 		const { theme } = this.props;
@@ -412,7 +412,7 @@ class RoomInfoView extends React.Component<IRoomInfoViewProps, IRoomInfoViewStat
 		const showAvatarEdit = showEdit && this.t !== SubscriptionType.OMNICHANNEL;
 
 		return (
-			<Avatar
+			<AvatarWithEdit
 				text={room.name || roomUser.username}
 				style={styles.avatar}
 				type={this.t}
@@ -425,7 +425,7 @@ class RoomInfoView extends React.Component<IRoomInfoViewProps, IRoomInfoViewStat
 						<Status size={20} id={roomUser._id} />
 					</View>
 				) : null}
-			</Avatar>
+			</AvatarWithEdit>
 		);
 	};