EMI-ExpoAPP/components/ProfileHeader.js

import React, { useState, useEffect } from 'react';
import { View, Share, TouchableOpacity } from 'react-native';
import { Avatar, Button, Card, Title, Paragraph } from 'react-native-paper';
import UserName from './UserName';
import FollowButton from './basics/FollowButton';
import { useNavigation } from '@react-navigation/native';
import { useSnapshot } from 'valtio';
import GlobalState from '../contexts/GlobalState.js';

const DefaultPhoto = "https://social.emmint.com/uploads/e6f9be6d665dc43417701bf16a90122c.png";

const ProfileHeader = ({ profileObj }) => {
    const navigation = useNavigation();
    const viewer = useSnapshot(GlobalState).me || {};
    const safeProfileObj = profileObj || {};
    const safeProfile = safeProfileObj.profile || {};
    let photoUrl = safeProfile.photo ? 'https://social.emmint.com/' + safeProfile.photo + '?width=1000&height=1000' : DefaultPhoto;
    const canEditProfileImage = !!(
        safeProfileObj?._id &&
        !safeProfileObj?.isGroup &&
        String(safeProfileObj._id) === String(viewer?._id || '')
    );

    const handlePressPhoto = () => {
        if (!canEditProfileImage) return;
        navigation.navigate("ProfileSettings");
    };

    return (
        <>
            <Card elevation={3}>
                <TouchableOpacity activeOpacity={canEditProfileImage ? 0.8 : 1} onPress={handlePressPhoto}>
                    <Card.Cover source={{ uri: photoUrl, cache: 'force-cache' }} style={{
                        height: 300
                    }} />
                </TouchableOpacity>
                <Card.Content style={{}}>
                    <Title style={{ position: "absolute", top: -60, left: 10, backgroundColor: "rgba(255,255,255,0.4)", padding: 10 }}>
                        <UserName profileid={safeProfileObj._id} />
                    </Title>
                    <Paragraph style={{ paddingTop: 10 }}>{safeProfile.description || ""}</Paragraph>
                    <View style={{
                        position: "absolute",
                        top: -290,
                        right: 10,
                        width: 50,
                        height: 50,
                        backgroundColor: "#ddd",
                        borderRadius: 25,
                        opacity: 0.7
                    }}>
                        <FollowButton profile={safeProfileObj} />
                    </View>
                    <View style={{
                        position: "absolute",
                        top: -290,
                        right: 80,
                        width: 50,
                        height: 50,
                        backgroundColor: "#ddd",
                        borderRadius: 25,
                        opacity: 0.7
                    }}>
                        <Button icon="ios-share" labelStyle={{ fontSize: 24, paddingTop:10 }} onPress={() => {
                            Share.share({
                                message: "https://social.emmint.com/feed/" + safeProfileObj._id,
                                title: (safeProfile.firstName || "") + " " + (safeProfile.lastName || "")
                            });
                        }}></Button>
                    </View>
                </Card.Content>
            </Card>
            {/*
            <Card.Title
                title={<UserName profileid={profileObj._id} />}
                subtitle={profileObj.profile.description}
                left={(props) => <Avatar.Image {...props} source={{ uri: 'https://social.emmint.com/' + profileObj.profile.photo }} />}
                right={(props) => <IconButton {...props} icon="more-vert" onPress={() => { }} />}
            />
            */}
        </>
    );

}

export default React.memo(ProfileHeader);