311 lines
11 KiB
JavaScript
311 lines
11 KiB
JavaScript
import React, { useMemo, useRef, useState } from 'react';
|
|
import { Text, Pressable, FlatList, StyleSheet, View, Share, Alert, Linking, Animated, PanResponder } from 'react-native';
|
|
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';
|
|
import i18n from "../i18nMessages.js";
|
|
import ProfilePhotoCircle from './ProfilePhotoCircle.js';
|
|
import { posthog } from './../PostHog.js';
|
|
import { useNavigation } from '@react-navigation/native';
|
|
import ParsedText from 'react-native-parsed-text';
|
|
|
|
|
|
let Post = (props) => {
|
|
const gState = useSnapshot(GlobalState);
|
|
const viewer = gState.me;
|
|
let [showCommentsB, changeshowCommentsB] = useState(props.showComments || false);
|
|
let [post, changePost] = useState(props.post);
|
|
const [deleted, setDeleted] = useState(false);
|
|
let [likes, changeLikes] = useState(Object.keys(post.reactions).length);
|
|
let [bookmarked, changeBookmarked] = useState(post.bookmarks && post.bookmarks.includes(viewer._id));
|
|
const isOwner = String(post.profileid || '') === String(viewer?._id || '');
|
|
const swipeX = useRef(new Animated.Value(0)).current;
|
|
const SWIPE_WIDTH = 86;
|
|
let toProfileText = post.toProfile && post.toProfile !== post.profileid ?
|
|
<ProfilePhotoCircle profileid={post.toProfile} small={true} /> : undefined;
|
|
let cleanContent = post.content.replace(/@[A-z]+:.+\w/g, '').trim();
|
|
const navigation = useNavigation();
|
|
//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);
|
|
posthog.capture(
|
|
'post_clicked',
|
|
{
|
|
post_id: 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.removePostBookmark(post._id)
|
|
}
|
|
}
|
|
const renderComment = ({ item }) => (
|
|
<Comment comment={item} postid={post._id} />
|
|
);
|
|
const handleTagPress = (tag) => {
|
|
// Alert.alert("tag pressed", `You pressed the tag: ${tag}`);
|
|
// You can navigate to another screen or perform any other action here
|
|
//remove hastag from tag
|
|
tag = tag.replace("#", "");
|
|
navigation.navigate("Tags", { tag: tag });
|
|
};
|
|
const handleLinkPress = (url) => {
|
|
Linking.canOpenURL(url)
|
|
.then((supported) => {
|
|
if (supported) {
|
|
Linking.openURL(url);
|
|
} else {
|
|
Alert.alert('Error', 'Unable to open the link.');
|
|
}
|
|
})
|
|
.catch((err) => console.error('An error occurred', err));
|
|
};
|
|
const handleLinkLongPress = (url) => {
|
|
Share.share({
|
|
url: url
|
|
});
|
|
};
|
|
const closeSwipe = () => {
|
|
Animated.spring(swipeX, { toValue: 0, useNativeDriver: true }).start();
|
|
};
|
|
const deletePost = async () => {
|
|
const result = await API.deletePost(post._id);
|
|
if (result?.status !== "ok") {
|
|
Alert.alert("Could not delete post", result?.status || "Please try again.");
|
|
return closeSwipe();
|
|
}
|
|
setDeleted(true);
|
|
};
|
|
const confirmDelete = () => {
|
|
Alert.alert(
|
|
"Delete post?",
|
|
"This action cannot be undone.",
|
|
[
|
|
{ text: "Cancel", style: "cancel", onPress: closeSwipe },
|
|
{ text: "Delete", style: "destructive", onPress: deletePost },
|
|
]
|
|
);
|
|
};
|
|
const panResponder = useMemo(() => PanResponder.create({
|
|
onMoveShouldSetPanResponder: (_, gestureState) =>
|
|
isOwner &&
|
|
Math.abs(gestureState.dx) > 8 &&
|
|
Math.abs(gestureState.dx) > Math.abs(gestureState.dy),
|
|
onPanResponderMove: (_, gestureState) => {
|
|
if (gestureState.dx > 0) {
|
|
swipeX.setValue(0);
|
|
return;
|
|
}
|
|
swipeX.setValue(Math.max(gestureState.dx, -SWIPE_WIDTH));
|
|
},
|
|
onPanResponderRelease: (_, gestureState) => {
|
|
const open = gestureState.dx < -SWIPE_WIDTH / 2;
|
|
Animated.spring(swipeX, {
|
|
toValue: open ? -SWIPE_WIDTH : 0,
|
|
useNativeDriver: true,
|
|
}).start();
|
|
},
|
|
onPanResponderTerminate: closeSwipe,
|
|
}), [isOwner, swipeX]);
|
|
if (deleted) return null;
|
|
|
|
const postCard = (
|
|
<Card style={styles.card}>
|
|
<Card.Content style={{
|
|
padding: 0,
|
|
margin: 0,
|
|
marginBottom: 0
|
|
}}>
|
|
|
|
{!post.nonOrganicType ?
|
|
<View>
|
|
<ProfilePhotoCircle profileid={post.profileid} />
|
|
<View style={{ flexDirection: 'row', alignItems: 'center', margin: 0, marginLeft: 37, marginTop: -14, paddingBottom: 2 }}>
|
|
{toProfileText}
|
|
|
|
</View>
|
|
<Pressable onLongPress={() => {
|
|
if (cleanContent.length > 10) {
|
|
Share.share({
|
|
message: cleanContent
|
|
});
|
|
}
|
|
}}>
|
|
<ParsedText
|
|
style={styles.text}
|
|
parse={[
|
|
{ pattern: /#(\w+)/, style: styles.tag, onPress: handleTagPress },
|
|
{ pattern: /(https?:\/\/[^\s]+)/, style: styles.link, onPress: handleLinkPress, onLongPress: handleLinkLongPress },
|
|
]}
|
|
>
|
|
{cleanContent}
|
|
</ParsedText>
|
|
</Pressable>
|
|
|
|
<Media content={post.content} postId={post._id} post={post} style={{ paddingTop: 2 }} />
|
|
</View> :
|
|
<View>
|
|
<Chip icon="new-releases" style={{ width: 100 }} >{i18n.t("message.news")}</Chip>
|
|
<Text style={{ fontSize: 18 }}>{cleanContent}</Text>
|
|
<Media content={post.content} />
|
|
</View>
|
|
}
|
|
</Card.Content>
|
|
<Card.Actions style={{ flexDirection: "row", flow: 4, fontSize: 16, marginLeft: 36, marginTop: -10 }}>
|
|
<Button
|
|
icon={post.reactions[viewer._id] ? "favorite" : "favorite-border"}
|
|
labelStyle={{ fontSize: 17 }}
|
|
style={{ flow: 1 }}
|
|
onPress={newPostReaction}
|
|
color="#555"
|
|
>
|
|
{likes}
|
|
</Button>
|
|
<Button icon="forum" labelStyle={{ fontSize: 17 }} style={{ flow: 1 }}
|
|
onPress={() => {
|
|
// changeshowCommentsB(!showCommentsB) // Show comments
|
|
// Change view to single post
|
|
navigation.navigate("SinglePost", {
|
|
postid: post._id,
|
|
});
|
|
}}
|
|
color="#555"
|
|
>
|
|
{post.comments.length}
|
|
</Button>
|
|
<Button icon="ios-share" style={{ flow: 1 }} labelStyle={{ fontSize: 17 }}
|
|
color="#555"
|
|
onPress={() => {
|
|
Share.share({
|
|
//message: "https://social.emmint.com/post/" + props.post._id,
|
|
url: "https://social.emmint.com/feed/post/" + props.post._id
|
|
});
|
|
}}></Button>
|
|
<Button
|
|
icon={!bookmarked ? "bookmark-outline" : "bookmark"}
|
|
style={{ flow: 1 }}
|
|
labelStyle={{ fontSize: 17 }}
|
|
onPress={newPostBookmark}
|
|
color="#555"
|
|
>
|
|
</Button>
|
|
<Text style={{ fontWeight: 'normal', fontSize: 12 }}>
|
|
{" " + Moment(post.createdAt).fromNow()}
|
|
</Text>
|
|
</Card.Actions>
|
|
{showCommentsB && <NewComment postid={post._id} newComentAdded={newComentAdded} />}
|
|
{
|
|
showCommentsB &&
|
|
<FlatList
|
|
data={post.comments}
|
|
renderItem={renderComment}
|
|
keyExtractor={item => item.createdAt}
|
|
/>
|
|
}
|
|
</Card>
|
|
);
|
|
if (!isOwner) return postCard;
|
|
|
|
return (
|
|
<View style={styles.swipeWrap}>
|
|
<View style={styles.deleteActionWrap}>
|
|
<Pressable style={styles.deleteActionBtn} onPress={confirmDelete}>
|
|
<Text style={styles.deleteActionText}>{i18n.t("message.delete")}</Text>
|
|
</Pressable>
|
|
</View>
|
|
<Animated.View style={{ transform: [{ translateX: swipeX }] }} {...panResponder.panHandlers}>
|
|
{postCard}
|
|
</Animated.View>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
export default React.memo(Post);
|
|
|
|
const styles = StyleSheet.create({
|
|
userName: {
|
|
fontSize: 14,
|
|
fontWeight: 'bold',
|
|
marginBottom: 5,
|
|
fontSize: 17,
|
|
},
|
|
card: {
|
|
margin: 0,
|
|
backgroundColor: "#FAFAFA",
|
|
borderRadius: 0,
|
|
marginBottom: 2,
|
|
padding: 0
|
|
},
|
|
swipeWrap: {
|
|
position: "relative",
|
|
backgroundColor: "#edf2f7",
|
|
},
|
|
deleteActionWrap: {
|
|
position: "absolute",
|
|
right: 0,
|
|
top: 0,
|
|
bottom: 2,
|
|
width: 86,
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
backgroundColor: "#b3261e",
|
|
},
|
|
deleteActionBtn: {
|
|
width: "100%",
|
|
height: "100%",
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
},
|
|
deleteActionText: {
|
|
color: "#fff",
|
|
fontWeight: "700",
|
|
},
|
|
comment: {
|
|
margin: 8,
|
|
marginTop: 0,
|
|
padding: 8
|
|
},
|
|
text: {
|
|
fontSize: 16,
|
|
padding: 3,
|
|
paddingLeft: 40
|
|
},
|
|
tag: {
|
|
color: '#77B5FE',
|
|
textDecorationLine: 'underline',
|
|
},
|
|
link: {
|
|
color: '#77B5FE',
|
|
textDecorationLine: 'underline',
|
|
},
|
|
});
|