EMI-ExpoAPP/components/Post.js

import React, { useState } from 'react';
import { Text, ScrollView, FlatList, StyleSheet, View } from 'react-native';
import Hyperlink from 'react-native-hyperlink'
import { Button, Card, Chip } from 'react-native-paper';
import API from './../API.js';
import UserName from './UserName.js';
import Media from './Media.js';
import Comment from "./Comment";
import NewComment from './NewComment.js';
import Moment from 'moment';
import { useSnapshot } from 'valtio';
import GlobalState from '../contexts/GlobalState.js';

let Post = (props) => {
    const gState = useSnapshot(GlobalState);
    const viewer = gState.me;
    let [showCommentsB, changeshowCommentsB] = useState(false);
    let [post, changePost] = useState(props.post);
    let [likes, changeLikes] = useState(Object.keys(post.reactions).length);
    let [bookmarked, changeBookmarked] = useState(post.bookmarks && post.bookmarks.includes(viewer._id));
    let toProfileText = post.toProfile && post.toProfile !== post.profileid ?
        <Text> {">"} <UserName profileid={post.toProfile} /></Text> : undefined;
    let cleanContent = post.content.replace(/@[A-z]+:.+\w/g, '');
    //cleanContent = convertLinks(cleanContent);
    const newComentAdded = (commentData) => {
        let newPostObj = { ...post };
        newPostObj.comments.push(commentData);
        changePost(newPostObj);
    };
    const newPostReaction = () => {
        let newPostObj = { ...post };
        if (!newPostObj.reactions[viewer._id]) {
            changeLikes(likes + 1);
            newPostObj.reactions[viewer._id] = { type: "like" };
            API.newPostReaction(post._id);
        } else {
            changeLikes(likes - 1);
            delete newPostObj.reactions[viewer._id];
            API.removePostReaction(viewer._id);
        }
        changePost(newPostObj);
    }
    const newPostBookmark = () => {
        if (!post.bookmarks || !post.bookmarks.includes(viewer._id)) {
            changeBookmarked(true);
            if (!post.bookmarks) post.bookmarks = [];
            post.bookmarks.push(viewer._id);
            API.newPostBookmark(post._id);
        } else {
            changeBookmarked(false);
            post.bookmarks = post.bookmarks.filter(id => id != viewer._id);
            API.removePostReaction(post._id)
        }
    }
    const renderComment = ({ item }) => (
        <Comment comment={item} postid={post._id} />
    );
    return (
        <Card style={styles.card}>
            <Card.Content>
                <Hyperlink linkDefault={ true } linkStyle={{}}>
                    {!post.nonOrganicType ?
                        <View>
                            <Text style={styles.userName}>
                                <UserName profileid={post.profileid}/>
                                {toProfileText}
                                <Text style={{ fontWeight: 'normal', fontSize: 12 }}>
                                    {" " + Moment(post.createdAt).fromNow()}
                                </Text>
                            </Text>
                            <Text style={{ fontSize: 18 }}>{cleanContent}</Text>
                            <Media content={post.content} postId={post._id} />
                        </View> :
                        <View>
                            <Chip icon="new-releases" style={{ width: 100 }} >News</Chip>
                            <Text style={{ fontSize: 18 }}>{cleanContent}</Text>
                            <Media content={post.content} />
                        </View>
                    }
                </Hyperlink>
            </Card.Content>
            <Card.Actions style={{ flexDirection: "row", flow: 4, justifyContent: 'space-evenly', fontSize: 18 }}>
                <Button
                    icon={post.reactions[viewer._id] ? "favorite" : "favorite-border"}
                    labelStyle={{ fontSize: 18 }}
                    style={{ flow: 1 }}
                    onPress={newPostReaction}
                >
                    {likes}
                </Button>
                <Button icon="forum" labelStyle={{ fontSize: 18 }} style={{ flow: 1 }} onPress={() => { changeshowCommentsB(!showCommentsB) }} >{post.comments.length}</Button>
                <Button icon="ios-share" style={{ flow: 1 }} labelStyle={{ fontSize: 18 }}></Button>
                <Button
                    icon={!bookmarked ? "bookmark-outline" : "bookmark"}
                    style={{ flow: 1 }}
                    labelStyle={{ fontSize: 18 }}
                    onPress={newPostBookmark}
                >
                </Button>
            </Card.Actions>
            {showCommentsB && <NewComment postid={post._id} newComentAdded={newComentAdded} />}
            {
                showCommentsB &&
                <ScrollView style={{ maxHeight: 300 }}>
                    <FlatList
                        data={post.comments}
                        renderItem={renderComment}
                        keyExtractor={item => item.createdAt}
                    /></ScrollView>
            }
        </Card>
    );
}

export default React.memo(Post);

const styles = StyleSheet.create({
    userName: {
        fontSize: 14,
        fontWeight: 'bold',
        marginBottom: 5,
        fontSize: 18,
    },
    card: {
        margin: 8,
        backgroundColor: "#FFFFFF"
    },
    comment: {
        margin: 8,
        marginTop: 0,
        padding: 8
    }
});