ppc_amnet/amnet-native/app/CardManager.tsx

import * as Clipboard from "expo-clipboard";
import {FlatList, Platform, View} from "react-native";
import React, {useCallback, useMemo} from "react";
import {Button, useTheme} from "react-native-paper";
import {CreditCard, Plus} from "lucide-react-native";
import ContextMenu from "react-native-context-menu-view";

import {ICCard} from "../components/ICCard";
import {EmptyStatePlaceholder} from "../components/EmptyStatePlaceholder";

import {AMCard} from "../models/AMCard";
import RealmContext from "../models/RealmContext";

const {useQuery, useRealm} = RealmContext;

function CardEntry(props: { card: AMCard, navigation: any }) {
    const realm = useRealm();
    const callback = useCallback(async (indexPath: number[]) => {
        if (!props.card.isValid()) {
            return;
        }

        switch (indexPath.toString()) {
            // copy card access code
            case "0":
            case "0,0":
                await Clipboard.setStringAsync(props.card.code);
                return;

            // edit card
            case "1,0":
                props.navigation.navigate('edit-card', {cardId: props.card._id.toHexString()});
                return;

            // remove card
            case "1,1":
                AMCard.delete(realm, props.card);
                return;
        }
    }, [realm, props.card, props.navigation]);

    return (
        <ContextMenu
            onPress={e => callback(e.nativeEvent?.indexPath)}
            actions={[
                {title: "Copy Card Number", systemIcon: "doc.on.doc"},
                {
                    title: Platform.OS === 'ios' ? "" : "Additional Actions",
                    inlineChildren: true,
                    actions: [
                        {title: "Edit Card", systemIcon: "square.and.pencil"},
                        {title: "Delete Card", destructive: true, systemIcon: "trash"}]
                }]}>
            <ICCard card={props.card} showFullCardNumber/>
        </ContextMenu>
    );
}

export default function CardManager({navigation}) {
    const theme = useTheme();
    const query = useQuery(AMCard);
    const cards = useMemo(() => query.sorted("added", false), [query]);

    if (!cards.length) {
        return (
            <View style={{flex: 1, gap: 10, justifyContent: "center", alignItems: "center"}}>
                <EmptyStatePlaceholder message="No cards added yet" icon={<CreditCard color="gray"/>}/>
                <Button mode="text"
                        onPress={() => navigation.navigate('add-card')}
                        icon={() => <Plus size={18} color={theme.colors.primary}/>}>Add Card</Button>
            </View>
        )
    }

    return (
        <FlatList contentInsetAdjustmentBehavior="always"
                  style={{padding: 16, paddingTop: 24}}
                  data={cards}
                  keyExtractor={i => i._id.toString()}
                  contentContainerStyle={{paddingBottom: 120}}
                  renderItem={i => <CardEntry card={i.item} navigation={navigation}/>}
                  ItemSeparatorComponent={() => <View style={{height: 15}}/>}
                  ListFooterComponent={() => Platform.OS === "ios" ? null : (
                      <Button mode="text"
                              onPress={() => navigation.navigate('add-card')}
                              style={{marginTop: 15, marginBottom: 25}}
                              icon={() => <Plus size={18} color={theme.colors.primary}/>}>Add Card</Button>
                  )}
        />
    )
}