1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
|
import React, {useState, useEffect} from 'react';
import {StyleSheet, TouchableOpacity} from 'react-native';
import {RootState} from '../../store/rootreducer';
import {ScreenType} from '../../types';
import {Avatar} from '../common';
import {useDispatch, useSelector} from 'react-redux';
import {loadUserData, resetHeaderAndProfileImage} from '../../store/actions';
import PurplePlus from '../../assets/icons/purple-plus.svg';
import {patchProfile, validateImageLink} from '../../utils';
import {useIsFocused} from '@react-navigation/native';
const PROFILE_DIM = 100;
interface TaggAvatarProps {
style?: object;
userXId: string | undefined;
screenType: ScreenType;
editable: boolean;
}
const TaggAvatar: React.FC<TaggAvatarProps> = ({
style,
screenType,
userXId,
editable = false,
}) => {
const {avatar, user} = useSelector((state: RootState) =>
userXId ? state.userX[screenType][userXId] : state.user,
);
const dispatch = useDispatch();
const [needsUpdate, setNeedsUpdate] = useState(false);
const [updating, setUpdating] = useState(false);
const [loading, setLoading] = useState(true);
const [validImage, setValidImage] = useState<boolean>(true);
const isFocused = useIsFocused();
useEffect(() => {
checkAvatar(avatar);
setLoading(false);
}, []);
useEffect(() => {
checkAvatar(avatar);
}, [avatar, isFocused]);
useEffect(() => {
checkAvatar(avatar);
if (needsUpdate) {
const userId = user.userId;
const username = user.username;
dispatch(resetHeaderAndProfileImage());
dispatch(loadUserData({userId, username}));
}
}, [dispatch, needsUpdate]);
const handleNewImage = async () => {
setLoading(true);
const result = await patchProfile('profile', user.userId);
setLoading(true);
if (result) {
setUpdating(true);
setNeedsUpdate(true);
setLoading(false);
} else {
setLoading(false);
}
};
const checkAvatar = async (url: string | undefined) => {
const valid = await validateImageLink(url);
if (valid !== validImage) {
setValidImage(valid);
}
};
return (
<>
<Avatar
style={[styles.image, style]}
uri={avatar}
loading={loading}
loadingStyle={styles.loadingLarge}
/>
{editable &&
!validImage &&
userXId === undefined &&
!loading &&
!updating && (
<TouchableOpacity
accessible={true}
accessibilityLabel="ADD PROFILE PICTURE"
onPress={() => handleNewImage()}>
<PurplePlus style={styles.plus} />
</TouchableOpacity>
)}
</>
);
};
const styles = StyleSheet.create({
image: {
height: PROFILE_DIM,
width: PROFILE_DIM,
borderRadius: PROFILE_DIM / 2,
overflow: 'hidden',
},
plus: {
position: 'absolute',
bottom: 35,
right: 0,
},
loadingLarge: {
height: PROFILE_DIM * 0.8,
width: PROFILE_DIM * 0.8,
alignSelf: 'center',
justifyContent: 'center',
aspectRatio: 2,
},
});
export default TaggAvatar;
|
