Add tag functionality to posts and implement Tags screen
This commit is contained in:
@@ -1,5 +1,5 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Text, Pressable, FlatList, StyleSheet, View, Share } from 'react-native';
|
||||
import { Text, Pressable, FlatList, StyleSheet, View, Share, Alert, Linking } from 'react-native';
|
||||
import Hyperlink from 'react-native-hyperlink'
|
||||
import { Button, Card, Chip } from 'react-native-paper';
|
||||
import API from './../API.js';
|
||||
@@ -14,6 +14,7 @@ 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) => {
|
||||
@@ -67,6 +68,29 @@ let Post = (props) => {
|
||||
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
|
||||
});
|
||||
};
|
||||
return (
|
||||
<Card style={styles.card}>
|
||||
<Card.Content style={{
|
||||
@@ -74,34 +98,40 @@ let Post = (props) => {
|
||||
margin: 0,
|
||||
marginBottom: 0
|
||||
}}>
|
||||
<Hyperlink linkDefault={true} linkStyle={{ color: '#2980b9' }}>
|
||||
{!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
|
||||
});
|
||||
}
|
||||
}}>
|
||||
<Text style={{ fontSize: 16, padding: 3, paddingLeft: 40 }}>{
|
||||
cleanContent
|
||||
}</Text>
|
||||
</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} />
|
||||
{!post.nonOrganicType ?
|
||||
<View>
|
||||
<ProfilePhotoCircle profileid={post.profileid} />
|
||||
<View style={{ flexDirection: 'row', alignItems: 'center', margin: 0, marginLeft: 37, marginTop: -14, paddingBottom: 2 }}>
|
||||
{toProfileText}
|
||||
|
||||
</View>
|
||||
}
|
||||
</Hyperlink>
|
||||
<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
|
||||
@@ -114,7 +144,7 @@ let Post = (props) => {
|
||||
{likes}
|
||||
</Button>
|
||||
<Button icon="forum" labelStyle={{ fontSize: 17 }} style={{ flow: 1 }}
|
||||
onPress={() => {
|
||||
onPress={() => {
|
||||
// changeshowCommentsB(!showCommentsB) // Show comments
|
||||
// Change view to single post
|
||||
navigation.navigate("SinglePost", {
|
||||
@@ -148,11 +178,11 @@ let Post = (props) => {
|
||||
{showCommentsB && <NewComment postid={post._id} newComentAdded={newComentAdded} />}
|
||||
{
|
||||
showCommentsB &&
|
||||
<FlatList
|
||||
data={post.comments}
|
||||
renderItem={renderComment}
|
||||
keyExtractor={item => item.createdAt}
|
||||
/>
|
||||
<FlatList
|
||||
data={post.comments}
|
||||
renderItem={renderComment}
|
||||
keyExtractor={item => item.createdAt}
|
||||
/>
|
||||
}
|
||||
</Card>
|
||||
);
|
||||
@@ -178,5 +208,18 @@ const styles = StyleSheet.create({
|
||||
margin: 8,
|
||||
marginTop: 0,
|
||||
padding: 8
|
||||
}
|
||||
},
|
||||
text: {
|
||||
fontSize: 16,
|
||||
padding: 3,
|
||||
paddingLeft: 40
|
||||
},
|
||||
tag: {
|
||||
color: '#77B5FE',
|
||||
textDecorationLine: 'underline',
|
||||
},
|
||||
link: {
|
||||
color: '#77B5FE',
|
||||
textDecorationLine: 'underline',
|
||||
},
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user