Add owner swipe-delete and localized all-photos hint

components/Post.js

@@ -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,