minor tweaks
This commit is contained in:
parent
0ce1fdcbf2
commit
744565ad21
|
@ -13,6 +13,8 @@ import I18n from '../../i18n';
|
||||||
import { useTheme } from '../../theme';
|
import { useTheme } from '../../theme';
|
||||||
import styles from './styles';
|
import styles from './styles';
|
||||||
|
|
||||||
|
type IAvatarContainer = IAvatar & { isUserProfile?: boolean; handleEdit?: () => void };
|
||||||
|
|
||||||
const AvatarContainer = ({
|
const AvatarContainer = ({
|
||||||
style,
|
style,
|
||||||
text = '',
|
text = '',
|
||||||
|
@ -28,7 +30,7 @@ const AvatarContainer = ({
|
||||||
rid,
|
rid,
|
||||||
handleEdit,
|
handleEdit,
|
||||||
isUserProfile
|
isUserProfile
|
||||||
}: IAvatar & { isUserProfile?: boolean; handleEdit?: () => void }): React.ReactElement => {
|
}: IAvatarContainer): React.ReactElement => {
|
||||||
const subscription = useRef<Subscription>();
|
const subscription = useRef<Subscription>();
|
||||||
const [avatarETag, setAvatarETag] = useState<string | undefined>('');
|
const [avatarETag, setAvatarETag] = useState<string | undefined>('');
|
||||||
const previousAvatarEtag = useRef<string | undefined>('');
|
const previousAvatarEtag = useRef<string | undefined>('');
|
||||||
|
@ -128,6 +130,7 @@ const AvatarContainer = ({
|
||||||
onPress={handleEdit}
|
onPress={handleEdit}
|
||||||
testID='avatar-edit-button'
|
testID='avatar-edit-button'
|
||||||
style={styles.editAvatarButton}
|
style={styles.editAvatarButton}
|
||||||
|
color={colors.titleText}
|
||||||
/>
|
/>
|
||||||
) : null}
|
) : null}
|
||||||
</>
|
</>
|
||||||
|
|
|
@ -2,7 +2,7 @@ import { StyleSheet } from 'react-native';
|
||||||
|
|
||||||
export default StyleSheet.create({
|
export default StyleSheet.create({
|
||||||
editAvatarButton: {
|
editAvatarButton: {
|
||||||
marginTop: 8,
|
marginTop: 16,
|
||||||
paddingVertical: 8,
|
paddingVertical: 8,
|
||||||
paddingHorizontal: 12,
|
paddingHorizontal: 12,
|
||||||
marginBottom: 0
|
marginBottom: 0
|
||||||
|
|
|
@ -97,7 +97,7 @@ const ChatsStackNavigator = () => {
|
||||||
<ChatsStack.Screen name='SelectListView' component={SelectListView} options={SelectListView.navigationOptions} />
|
<ChatsStack.Screen name='SelectListView' component={SelectListView} options={SelectListView.navigationOptions} />
|
||||||
<ChatsStack.Screen name='RoomInfoView' component={RoomInfoView} options={RoomInfoView.navigationOptions} />
|
<ChatsStack.Screen name='RoomInfoView' component={RoomInfoView} options={RoomInfoView.navigationOptions} />
|
||||||
<ChatsStack.Screen name='RoomInfoEditView' component={RoomInfoEditView} options={RoomInfoEditView.navigationOptions} />
|
<ChatsStack.Screen name='RoomInfoEditView' component={RoomInfoEditView} options={RoomInfoEditView.navigationOptions} />
|
||||||
<ProfileStack.Screen name='ChangeAvatarView' component={ChangeAvatarView} />
|
<ChatsStack.Screen name='ChangeAvatarView' component={ChangeAvatarView} />
|
||||||
<ChatsStack.Screen name='RoomMembersView' component={RoomMembersView} />
|
<ChatsStack.Screen name='RoomMembersView' component={RoomMembersView} />
|
||||||
<ChatsStack.Screen name='DiscussionsView' component={DiscussionsView} />
|
<ChatsStack.Screen name='DiscussionsView' component={DiscussionsView} />
|
||||||
<ChatsStack.Screen
|
<ChatsStack.Screen
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
import React, { useState, useEffect } from 'react';
|
import React, { useState, useEffect } from 'react';
|
||||||
import { Text, View, TouchableOpacity } from 'react-native';
|
import { Text, View } from 'react-native';
|
||||||
|
|
||||||
import { IAvatar, IUser } from '../../definitions';
|
import { IAvatar, IUser } from '../../definitions';
|
||||||
import { Services } from '../../lib/services';
|
import { Services } from '../../lib/services';
|
||||||
|
@ -7,29 +7,20 @@ import I18n from '../../i18n';
|
||||||
import Avatar from '../../containers/Avatar';
|
import Avatar from '../../containers/Avatar';
|
||||||
import styles from './styles';
|
import styles from './styles';
|
||||||
import { useTheme } from '../../theme';
|
import { useTheme } from '../../theme';
|
||||||
|
import Touch from '../../containers/Touch';
|
||||||
|
|
||||||
const Item = ({
|
const Item = ({ item, onPress, text, testID }: { item?: IAvatar; testID?: string; onPress: Function; text?: string }) => {
|
||||||
item,
|
|
||||||
onPress,
|
|
||||||
text,
|
|
||||||
testID
|
|
||||||
}: {
|
|
||||||
item?: IAvatar;
|
|
||||||
testID?: string;
|
|
||||||
onPress: (value?: IAvatar) => void;
|
|
||||||
text?: string;
|
|
||||||
}) => {
|
|
||||||
const { colors } = useTheme();
|
const { colors } = useTheme();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<TouchableOpacity
|
<Touch
|
||||||
key={item?.service}
|
key={item?.service}
|
||||||
testID={testID}
|
testID={testID}
|
||||||
onPress={() => onPress(item)}
|
onPress={() => onPress(item)}
|
||||||
style={[styles.avatarButton, { backgroundColor: colors.borderColor }]}
|
style={[styles.avatarButton, { backgroundColor: colors.borderColor }]}
|
||||||
>
|
>
|
||||||
<Avatar avatar={item?.url} text={text} size={64} />
|
<Avatar avatar={item?.url} text={text} size={64} />
|
||||||
</TouchableOpacity>
|
</Touch>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
const AvatarSuggestion = ({
|
const AvatarSuggestion = ({
|
||||||
|
@ -37,14 +28,14 @@ const AvatarSuggestion = ({
|
||||||
user,
|
user,
|
||||||
resetAvatar
|
resetAvatar
|
||||||
}: {
|
}: {
|
||||||
onPress: (value?: IAvatar) => void;
|
onPress: (value: IAvatar | null) => void;
|
||||||
user?: IUser;
|
user?: IUser;
|
||||||
resetAvatar?: () => void;
|
resetAvatar?: () => void;
|
||||||
}) => {
|
}) => {
|
||||||
const [avatarSuggestions, setAvatarSuggestions] = useState<IAvatar[]>([]);
|
const [avatarSuggestions, setAvatarSuggestions] = useState<IAvatar[]>([]);
|
||||||
|
|
||||||
const { colors } = useTheme();
|
const { colors } = useTheme();
|
||||||
|
|
||||||
const getAvatarSuggestion = async () => {
|
const getAvatarSuggestion = async () => {
|
||||||
const result = await Services.getAvatarSuggestion();
|
const result = await Services.getAvatarSuggestion();
|
||||||
const suggestions = Object.keys(result).map(service => {
|
const suggestions = Object.keys(result).map(service => {
|
||||||
|
|
|
@ -27,7 +27,7 @@ import AvatarSuggestion from './AvatarSuggestion';
|
||||||
import log from '../../lib/methods/helpers/log';
|
import log from '../../lib/methods/helpers/log';
|
||||||
|
|
||||||
const ChangeAvatarView = () => {
|
const ChangeAvatarView = () => {
|
||||||
const [avatar, setAvatarState] = useState<IAvatar>();
|
const [avatar, setAvatarState] = useState<IAvatar | null>(null);
|
||||||
|
|
||||||
const [textAvatar, setTextAvatar] = useState('');
|
const [textAvatar, setTextAvatar] = useState('');
|
||||||
const [saving, setSaving] = useState(false);
|
const [saving, setSaving] = useState(false);
|
||||||
|
@ -68,7 +68,7 @@ const ChangeAvatarView = () => {
|
||||||
});
|
});
|
||||||
}, [navigation]);
|
}, [navigation]);
|
||||||
|
|
||||||
const setAvatar = (value?: IAvatar) => {
|
const setAvatar = (value: IAvatar | null) => {
|
||||||
avatarUrl.current = value?.url;
|
avatarUrl.current = value?.url;
|
||||||
setAvatarState(value);
|
setAvatarState(value);
|
||||||
};
|
};
|
||||||
|
@ -103,7 +103,7 @@ const ChangeAvatarView = () => {
|
||||||
};
|
};
|
||||||
|
|
||||||
const resetAvatar = () => {
|
const resetAvatar = () => {
|
||||||
setAvatar(undefined);
|
setAvatar(null);
|
||||||
setTextAvatar(`@${user.username}`);
|
setTextAvatar(`@${user.username}`);
|
||||||
avatarUrl.current = `@${user.username}`;
|
avatarUrl.current = `@${user.username}`;
|
||||||
};
|
};
|
||||||
|
|
|
@ -93,7 +93,7 @@ const NewMessageView = () => {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<UserItem
|
<UserItem
|
||||||
id={item._id}
|
id={itemModel.id || itemSearch._id}
|
||||||
name={useRealName && itemSearch.fname ? itemSearch.fname : itemModel.name}
|
name={useRealName && itemSearch.fname ? itemSearch.fname : itemModel.name}
|
||||||
username={itemSearch.search ? itemSearch.username : itemModel.name}
|
username={itemSearch.search ? itemSearch.username : itemModel.name}
|
||||||
onPress={() => goRoom(itemModel)}
|
onPress={() => goRoom(itemModel)}
|
||||||
|
|
Loading…
Reference in New Issue