react-native-event-logger/dist/screens/EventDebugScreen.js

A React Native event tracking library with debug capabilities

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useCallback, useEffect } from "react";
import { FlatList, StyleSheet, View, Text, TouchableOpacity, SafeAreaView, TextInput } from "react-native";
import { useState } from "react";
import ListAccordion from "../components/ListAccordion";
import { useEventTracker } from "../context/EventTrackerContext";
import { Colors } from "../constants/colors";
const EventDebugScreen = () => {
    const { events, clearEvents } = useEventTracker();
    const [filteredEvents, setFilteredEvents] = useState(events);
    const [isSearch, setIsSearch] = useState(false);
    const [searchText, setSearchText] = useState("");
    useEffect(() => {
        if (searchText) {
            const filtered = events.filter((event) => event.eventName.toLowerCase().includes(searchText.toLowerCase()));
            setFilteredEvents(filtered);
        }
        else {
            setFilteredEvents(events);
        }
    }, [searchText]);
    useEffect(() => {
        setFilteredEvents(events);
    }, [events]);
    const handlePressSearch = useCallback(() => {
        setIsSearch(true);
    }, [setIsSearch]);
    const handleInputBlur = useCallback(() => {
        setIsSearch(false);
    }, [setIsSearch]);
    const handlePressClose = () => {
        // This would typically navigate back, but we'll just clear events for now
        clearEvents();
    };
    const handleClearLogs = () => {
        clearEvents();
    };
    const handleSearch = useCallback((searchText) => {
        setSearchText(searchText);
    }, [setSearchText, searchText]);
    const renderItem = ({ item }) => {
        const eventName = item === null || item === void 0 ? void 0 : item.eventName;
        const eventTime = item === null || item === void 0 ? void 0 : item.timestamp;
        const eventProperties = item === null || item === void 0 ? void 0 : item.params;
        const validationError = item === null || item === void 0 ? void 0 : item.validationError;
        const eventType = item === null || item === void 0 ? void 0 : item.eventType;
        return (_jsx(View, Object.assign({ style: Styles.renderView }, { children: _jsx(ListAccordion, Object.assign({ title: eventName, eventTime: eventTime, validationError: validationError, eventType: eventType }, { children: Object.entries(eventProperties)
                    .sort(([keyA], [keyB]) => keyA.localeCompare(keyB))
                    .map(([key, value]) => (_jsxs(View, Object.assign({ style: Styles.renderItemContainer }, { children: [_jsx(Text, Object.assign({ style: Styles.renderItemKey }, { children: key })), _jsx(Text, Object.assign({ style: Styles.renderItemText }, { children: String(value) }))] }), key))) })) })));
    };
    return (_jsxs(SafeAreaView, Object.assign({ style: Styles.main }, { children: [isSearch ? _jsxs(View, Object.assign({ style: { flexDirection: "row", gap: 10, alignItems: "center", justifyContent: "center", paddingHorizontal: 16, borderBottomWidth: 1, borderBottomColor: Colors.background.tertiary, paddingVertical: 16 } }, { children: [_jsx(TextInput, { onChangeText: (text) => handleSearch(text), placeholder: "Search events", onBlur: handleInputBlur, style: { width: "80%", borderWidth: 1, borderRadius: 6, paddingHorizontal: 16, paddingVertical: 12, color: Colors.primary } }), _jsx(TouchableOpacity, Object.assign({ style: Styles.inputSearchCloseButton, onPress: handleInputBlur }, { children: _jsx(Text, Object.assign({ style: Styles.searchCloseButtonText }, { children: "Close" })) }))] })) : _jsxs(View, Object.assign({ style: Styles.headerContainer }, { children: [_jsx(Text, Object.assign({ style: Styles.headerHeading1 }, { children: "Events Logs" })), _jsxs(View, Object.assign({ style: { flexDirection: "row", gap: 8 } }, { children: [_jsx(TouchableOpacity, Object.assign({ style: Styles.searchButton, onPress: handlePressSearch }, { children: _jsx(Text, Object.assign({ style: Styles.buttonText }, { children: "search" })) })), _jsx(TouchableOpacity, Object.assign({ style: Styles.clearButton, onPress: handleClearLogs }, { children: _jsx(Text, Object.assign({ style: Styles.clearButtonText }, { children: "Clear" })) }))] }))] })), _jsx(View, Object.assign({ style: Styles.listContainer }, { children: _jsx(FlatList, { data: filteredEvents, renderItem: renderItem, keyExtractor: (item) => item.id, showsVerticalScrollIndicator: false, ListEmptyComponent: _jsx(View, Object.assign({ style: { flex: 1, justifyContent: "center", alignItems: "center", paddingVertical: 24 } }, { children: _jsx(Text, Object.assign({ style: { color: Colors.text.secondary, fontSize: 16, fontWeight: "500" } }, { children: "No events found" })) })) }) }))] })));
};
export default EventDebugScreen;
const Styles = StyleSheet.create({
    main: {
        flex: 1,
    },
    headerContainer: {
        flexDirection: "row",
        paddingHorizontal: 16,
        paddingVertical: 12,
        backgroundColor: Colors.primary,
        justifyContent: "space-between",
        alignItems: "center",
    },
    headerHeading1: {
        color: Colors.text.inverse,
        fontSize: 24,
        fontWeight: "600",
    },
    closeButton: {
        backgroundColor: Colors.button.secondary,
        paddingHorizontal: 16,
        paddingVertical: 8,
        borderRadius: 6,
    },
    clearButton: {
        backgroundColor: Colors.button.danger,
        paddingHorizontal: 16,
        paddingVertical: 8,
        borderRadius: 6,
    },
    buttonText: {
        color: Colors.text.inverse,
        fontSize: 14,
        fontWeight: "500",
    },
    clearButtonText: {
        color: Colors.text.inverse,
        fontSize: 14,
        fontWeight: "500",
    },
    listContainer: {
        flex: 1,
    },
    renderView: {
        paddingHorizontal: 10,
        justifyContent: "center",
    },
    ListHeading: {
        fontSize: 24,
    },
    renderItemText: {
        fontSize: 16,
        lineHeight: 20,
        color: Colors.text.secondary,
    },
    renderItemContainer: {
        marginBottom: 10,
        backgroundColor: Colors.background.primary,
        flexDirection: "row",
        justifyContent: "space-between",
        alignItems: "center",
        borderRadius: 10,
        paddingHorizontal: 10,
        paddingVertical: 12,
        gap: 6,
    },
    renderItemKey: {
        color: Colors.text.primary,
        fontWeight: "600",
        fontSize: 18,
    },
    searchButton: {
        backgroundColor: Colors.button.secondary,
        paddingHorizontal: 16,
        paddingVertical: 8,
        borderRadius: 6,
    },
    inputSearchCloseButton: {
        backgroundColor: Colors.button.secondary,
        paddingHorizontal: 16,
        paddingVertical: 12,
        borderRadius: 6,
    },
    searchCloseButtonText: {
        color: Colors.text.inverse,
        fontSize: 16,
        fontWeight: "500",
    }
});
//# sourceMappingURL=EventDebugScreen.js.map