Add owner swipe-delete and localized all-photos hint
This commit is contained in:
Adolfo Reyna
@@ -1,6 +1,6 @@
|
||||
// Import necessary dependencies
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { View, TouchableHighlight, StyleSheet, FlatList, TouchableWithoutFeedback, Share } from 'react-native';
|
||||
import { View, TouchableHighlight, StyleSheet, FlatList, TouchableWithoutFeedback, TouchableOpacity, Share } from 'react-native';
|
||||
import { Button, Text, ProgressBar } from 'react-native-paper';
|
||||
import API from './../API.js';
|
||||
import VideoPlayer from './VideoPlayer.js';
|
||||
@@ -13,6 +13,7 @@ import { useNavigation } from '@react-navigation/native';
|
||||
import { Image } from 'expo-image'; // Import Image from expo-image
|
||||
import * as FileSystem from 'expo-file-system';
|
||||
import * as Sharing from 'expo-sharing';
|
||||
import i18n from "../i18nMessages.js";
|
||||
|
||||
// Extract Vimeo video ID from content string
|
||||
const videoIdF = (content) => {
|
||||
@@ -72,6 +73,7 @@ let Media = (props) => {
|
||||
// Extracting tags from content
|
||||
const imagesTag = imagesTagF(props.content, props.imageWidth || 1000, props.imageHeight || 1000);
|
||||
const imagesTagLimited = imagesTag.slice(0, 10);
|
||||
const isImagesCapped = imagesTag.length > imagesTagLimited.length;
|
||||
const imageStyle = imagesTag.length === 1 ? styles.image : styles.multipleImage;
|
||||
const videosId = videoIdF(props.content);
|
||||
const hlsUrl = hlsIdF(props.content);
|
||||
@@ -229,6 +231,7 @@ let Media = (props) => {
|
||||
return (
|
||||
<View style={{ paddingTop: 10, paddingBottom: 3 }}>
|
||||
{imagesTag.length > 2 ? (
|
||||
<>
|
||||
<FlatList
|
||||
horizontal
|
||||
data={imagesTagLimited}
|
||||
@@ -242,6 +245,12 @@ let Media = (props) => {
|
||||
}}
|
||||
showsHorizontalScrollIndicator={false}
|
||||
/>
|
||||
{isImagesCapped ? (
|
||||
<TouchableOpacity onPress={() => navigateToSlideshow(0)} style={styles.seeAllPhotosWrap}>
|
||||
<Text style={styles.seeAllPhotosText}>{i18n.t("message.clickToSeeAllPhotos")}</Text>
|
||||
</TouchableOpacity>
|
||||
) : <></>}
|
||||
</>
|
||||
) : (
|
||||
<View style={{ flexDirection: "row" }}>
|
||||
{imagesTag.map((image, i) => (
|
||||
@@ -294,5 +303,15 @@ const styles = StyleSheet.create({
|
||||
iframe: {
|
||||
width: "100%",
|
||||
minHeight: 300,
|
||||
}
|
||||
},
|
||||
seeAllPhotosWrap: {
|
||||
paddingTop: 2,
|
||||
paddingBottom: 6,
|
||||
paddingLeft: 6,
|
||||
},
|
||||
seeAllPhotosText: {
|
||||
color: "#5f6368",
|
||||
textDecorationLine: "underline",
|
||||
fontSize: 13,
|
||||
},
|
||||
});
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Text, Pressable, FlatList, StyleSheet, View, Share, Alert, Linking } from 'react-native';
|
||||
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';
|
||||
@@ -21,8 +21,12 @@ let Post = (props) => {
|
||||
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();
|
||||
@@ -90,7 +94,51 @@ let Post = (props) => {
|
||||
url: url
|
||||
});
|
||||
};
|
||||
return (
|
||||
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,
|
||||
@@ -185,6 +233,20 @@ let Post = (props) => {
|
||||
}
|
||||
</Card>
|
||||
);
|
||||
if (!isOwner) return postCard;
|
||||
|
||||
return (
|
||||
<View style={styles.swipeWrap}>
|
||||
<View style={styles.deleteActionWrap}>
|
||||
<Pressable style={styles.deleteActionBtn} onPress={confirmDelete}>
|
||||
<Text style={styles.deleteActionText}>Delete</Text>
|
||||
</Pressable>
|
||||
</View>
|
||||
<Animated.View style={{ transform: [{ translateX: swipeX }] }} {...panResponder.panHandlers}>
|
||||
{postCard}
|
||||
</Animated.View>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
export default React.memo(Post);
|
||||
@@ -203,6 +265,30 @@ const styles = StyleSheet.create({
|
||||
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,
|
||||
|
||||
@@ -78,6 +78,7 @@ const messages = {
|
||||
localMinistry: "Local Ministry",
|
||||
ocupation: "Ocupation",
|
||||
country: 'Country',
|
||||
clickToSeeAllPhotos: "Click to see all photos",
|
||||
},
|
||||
},
|
||||
es: {
|
||||
@@ -151,6 +152,7 @@ const messages = {
|
||||
localMinistry: 'Ministerio local',
|
||||
ocupation: 'Ocupación',
|
||||
country: 'País',
|
||||
clickToSeeAllPhotos: "Haz clic para ver todas las fotos",
|
||||
}
|
||||
},
|
||||
fr: {
|
||||
@@ -224,6 +226,7 @@ const messages = {
|
||||
localMinistry: 'Ministère local',
|
||||
ocupation: 'Occupation',
|
||||
country: 'Pays',
|
||||
clickToSeeAllPhotos: "Cliquez pour voir toutes les photos",
|
||||
}
|
||||
},
|
||||
da: {
|
||||
@@ -297,6 +300,7 @@ const messages = {
|
||||
localMinistry: "Lokalt ministerium",
|
||||
ocupation: "Beskæftigelse",
|
||||
country: 'Land',
|
||||
clickToSeeAllPhotos: "Klik for at se alle billeder",
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user