diff options
Diffstat (limited to 'src/components/profile/Cover.tsx')
-rw-r--r-- | src/components/profile/Cover.tsx | 108 |
1 files changed, 14 insertions, 94 deletions
diff --git a/src/components/profile/Cover.tsx b/src/components/profile/Cover.tsx index 5d5b4234..27777b64 100644 --- a/src/components/profile/Cover.tsx +++ b/src/components/profile/Cover.tsx @@ -1,93 +1,28 @@ -import React, {useState, useEffect} from 'react'; -import { - Image, - StyleSheet, - View, - TouchableOpacity, - Text, - ImageBackground, -} from 'react-native'; +import React from 'react'; +import {Image, StyleSheet, View} from 'react-native'; +import {useSelector} from 'react-redux'; import {COVER_HEIGHT, IMAGE_WIDTH} from '../../constants'; -import {ScreenType} from '../../types'; -import GreyPurplePlus from '../../assets/icons/grey-purple-plus.svg'; -import {useDispatch, useSelector} from 'react-redux'; -import {loadUserData, resetHeaderAndProfileImage} from '../../store/actions'; import {RootState} from '../../store/rootreducer'; -import {normalize, patchProfile, validateImageLink} from '../../utils'; +import {ScreenType} from '../../types'; interface CoverProps { userXId: string | undefined; screenType: ScreenType; } const Cover: React.FC<CoverProps> = ({userXId, screenType}) => { - const dispatch = useDispatch(); - const {cover, user} = useSelector((state: RootState) => + const {cover} = useSelector((state: RootState) => userXId ? state.userX[screenType][userXId] : state.user, ); - const [needsUpdate, setNeedsUpdate] = useState(false); - const [loading, setLoading] = useState(false); - const [validImage, setValidImage] = useState<boolean>(true); - - useEffect(() => { - checkAvatar(cover); - }, []); - - useEffect(() => { - 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('header', user.userId); - setLoading(true); - if (result) { - setNeedsUpdate(true); - } else { - setLoading(false); - } - }; - - const checkAvatar = async (url: string | undefined) => { - const valid = await validateImageLink(url); - if (valid !== validImage) { - setValidImage(valid); - } - }; - - if (!validImage && userXId === undefined && !loading) { - return ( - <View style={[styles.container]}> - <ImageBackground - style={styles.image} - defaultSource={require('../../assets/images/cover-placeholder.png')} - source={{uri: cover, cache: 'reload'}}> - <TouchableOpacity - accessible={true} - accessibilityLabel="ADD HEADER PICTURE" - onPress={() => handleNewImage()}> - <GreyPurplePlus style={styles.plus} /> - <Text style={styles.text}>Add Picture</Text> - </TouchableOpacity> - </ImageBackground> - </View> - ); - } else { - return ( - <View style={styles.container}> - <Image - style={styles.image} - defaultSource={require('../../assets/images/cover-placeholder.png')} - source={{uri: cover, cache: 'reload'}} - /> - </View> - ); - } + return ( + <View style={[styles.container]}> + <Image + style={styles.image} + defaultSource={require('../../assets/images/cover-placeholder.png')} + source={{uri: cover, cache: 'reload'}} + /> + </View> + ); }; const styles = StyleSheet.create({ @@ -98,20 +33,5 @@ const styles = StyleSheet.create({ width: IMAGE_WIDTH, height: COVER_HEIGHT, }, - plus: { - position: 'absolute', - top: 75, - right: 125, - }, - text: { - color: 'white', - position: 'absolute', - fontSize: normalize(16), - top: 80, - right: 20, - }, - touch: { - flex: 1, - }, }); export default Cover; |