ppc_amnet/amnet-native/app/card/CardEditorModal.tsx

import {BSON} from "realm";
import {StatusBar} from "expo-status-bar";
import {Card, Divider, Text, useTheme} from "react-native-paper";
import {useCallback, useEffect, useLayoutEffect, useState} from "react";
import {Platform, TextInput, TouchableOpacity, View} from "react-native";

import {useModalStyles} from "../../utils/ModalStyles";

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

const {useObject, useRealm} = RealmContext;

export default function CardEditorModal({navigation, route}) {
    if (!route.params || !route.params.cardId) {
        navigation.goBack();
        return;
    }

    const theme = useTheme();
    const modalStyles = useModalStyles();

    const realm = useRealm();
    const card = useObject(AMCard, BSON.ObjectId.createFromHexString(route.params.cardId));

    const [cardName, setCardName] = useState<string>('');

    const updateCardCallback = useCallback((newName: string) => {
        realm.write(() => {
            card.name = newName;
        });

        navigation.goBack();
    }, [realm, navigation]);

    useEffect(() => {
        if (card?.isValid() !== true) {
            navigation.goBack();
            return;
        }

        if (!cardName.length) {
            setCardName(card.name);
        }
    }, [card]);

    // header effects
    if (Platform.OS === 'ios') {
        useLayoutEffect(() => {
            navigation.setOptions({
                headerLeft: () => <TouchableOpacity onPress={() => navigation.goBack()}>
                    <Text variant="bodyMedium" style={modalStyles.headerText}>Cancel</Text>
                </TouchableOpacity>,
            });
        }, [navigation, modalStyles]);
    }

    useLayoutEffect(() => {
        navigation.setOptions({
            headerRight: () => <TouchableOpacity onPress={() => updateCardCallback(cardName)} disabled={!cardName.length}>
                <Text variant="bodyMedium" style={modalStyles.headerText}>Save</Text>
            </TouchableOpacity>
        });
    }, [cardName]);

    return (<>
        {Platform.OS === 'ios' && <StatusBar style="light"/>}
        <View style={modalStyles.rootLayout}>
            <Card mode="contained">
                <Card.Content>
                    <View style={modalStyles.formItemRow}>
                        <Text variant="bodyMedium" style={modalStyles.formItemName}>
                            Card Name
                        </Text>
                        <TextInput style={modalStyles.formItemInput}
                                   autoFocus
                                   numberOfLines={1}
                                   value={cardName}
                                   onChangeText={setCardName}
                                   placeholder="Primary Card"
                                   placeholderTextColor={theme.colors.outline}/>
                    </View>

                    <Divider style={{marginVertical: 15}}/>

                    <View style={modalStyles.formItemRow}>
                        <Text variant="bodyMedium" style={modalStyles.formItemName}>
                            Access Code
                        </Text>
                        <TextInput readOnly
                                   numberOfLines={1}
                                   value={card?.code.match(/.{1,4}/g)?.join(" ")}
                                   style={{...modalStyles.formItemInput, color: theme.colors.onSurfaceDisabled}}/>
                    </View>
                </Card.Content>
            </Card>
        </View>
    </>)
}