Add tag functionality to posts and implement Tags screen

This commit is contained in:
Adolfo Reyna
2025-02-28 00:21:00 -05:00
parent f5c7ff38dd
commit 8cdcfefa0d
6 changed files with 177 additions and 34 deletions

View File

@@ -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',
},
});