Avatar refactored

app/containers/Avatar.js

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { StyleSheet, Text, View } from 'react-native';
 import { CachedImage } from 'react-native-img-cache';
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
 import avatarInitialsAndColor from '../utils/avatarInitialsAndColor';
 
 const styles = StyleSheet.create({
@@ -21,7 +22,7 @@ const styles = StyleSheet.create({
 class Avatar extends React.PureComponent {
 	render() {
 		const {
-			text = '', size = 25, baseUrl, borderRadius = 4, style, avatar
+			text = '', size = 25, baseUrl, borderRadius = 4, style, avatar, type = 'd'
 		} = this.props;
 		const { initials, color } = avatarInitialsAndColor(`${ text }`);
 
@@ -42,19 +43,32 @@ class Avatar extends React.PureComponent {
 			borderRadius
 		};
 
-		const uri = avatar || `${ baseUrl }/avatar/${ text }`;
-		const image = (avatar || baseUrl) && (
-			<CachedImage
-				style={[styles.avatar, avatarStyle]}
-				source={{ uri }}
-			/>
-		);
+		if (type === 'd') {
+			const uri = avatar || `${ baseUrl }/avatar/${ text }`;
+			const image = (avatar || baseUrl) && (
+				<CachedImage
+					style={[styles.avatar, avatarStyle]}
+					source={{ uri }}
+				/>
+			);
+			return (
+				<View style={[styles.iconContainer, iconContainerStyle, style]}>
+					<Text style={[styles.avatarInitials, avatarInitialsStyle]}>{initials}</Text>
+					{image}
+				</View>);
+		}
+
+		const icon = {
+			c: 'pound',
+			p: 'lock',
+			l: 'account'
+		}[type];
 
 		return (
 			<View style={[styles.iconContainer, iconContainerStyle, style]}>
-				<Text style={[styles.avatarInitials, avatarInitialsStyle]}>{initials}</Text>
-				{image}
-			</View>);
+				<MaterialCommunityIcons name={icon} style={[styles.avatarInitials, avatarInitialsStyle]} />
+			</View>
+		);
 	}
 }
 
@@ -64,6 +78,7 @@ Avatar.propTypes = {
 	text: PropTypes.string.isRequired,
 	avatar: PropTypes.string,
 	size: PropTypes.number,
-	borderRadius: PropTypes.number
+	borderRadius: PropTypes.number,
+	type: PropTypes.string
 };
 export default Avatar;

app/presentation/RoomItem.js

@@ -1,10 +1,8 @@
 import React from 'react';
 import moment from 'moment';
-import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
 import PropTypes from 'prop-types';
 import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
 import Avatar from '../containers/Avatar';
-import avatarInitialsAndColor from '../utils/avatarInitialsAndColor';
 
 const styles = StyleSheet.create({
 	container: {
@@ -49,22 +47,6 @@ const styles = StyleSheet.create({
 		fontSize: 10,
 		height: 10,
 		color: '#888'
-	},
-	iconContainer: {
-		height: 40,
-		width: 40,
-		borderRadius: 4,
-		overflow: 'hidden',
-		justifyContent: 'center',
-		alignItems: 'center'
-	},
-	icon: {
-		fontSize: 20,
-		color: '#fff'
-	},
-	avatarInitials: {
-		fontSize: 20,
-		color: '#ffffff'
 	}
 });
 
@@ -84,30 +66,7 @@ export default class RoomItem extends React.PureComponent {
 
 	get icon() {
 		const { type, name, baseUrl } = this.props;
-
-		const icon = {
-			d: 'at',
-			c: 'pound',
-			p: 'lock',
-			l: 'account'
-		}[type];
-
-		if (!icon) {
-			return null;
-		}
-
-		if (type === 'd') {
-			return (
-				<Avatar text={name} baseUrl={baseUrl} size={40} />
-			);
-		}
-		const { color } = avatarInitialsAndColor(name);
-
-		return (
-			<View style={[styles.iconContainer, { backgroundColor: color }]}>
-				<MaterialCommunityIcons name={icon} style={styles.icon} />
-			</View>
-		);
+		return <Avatar text={name} baseUrl={baseUrl} size={40} type={type} />;
 	}
 
 	renderNumber = (unread, userMentions) => {

app/views/RoomView/Header/index.js

@@ -57,11 +57,7 @@ export default class extends React.Component {
 
 	isDirect = () => this.state.room && this.state.room.t === 'd';
 
-	renderLeft() {
-		return (
-			<HeaderBackButton onPress={() => this.props.navigation.goBack(null)} tintColor='#292E35' />
-		);
-	}
+	renderLeft = () => <HeaderBackButton onPress={() => this.props.navigation.goBack(null)} tintColor='#292E35' />;
 
 	renderTitle() {
 		if (!this.state.roomName) {
@@ -78,6 +74,7 @@ export default class extends React.Component {
 					size={24}
 					style={{ marginRight: 5 }}
 					baseUrl={this.props.baseUrl}
+					type={this.state.room.t}
 				/>
 				<View style={{ flexDirection: 'column' }}>
 					<Text style={styles.title}>{this.state.roomName}</Text>