@trycourier/courier-react-native/lib/example/src/pages/preferences/PreferencesCustom.js

Inbox, Push Notifications, and Preferences for React Native

import Courier from "@trycourier/courier-react-native";
import { addListener } from "../../Emitter";
import React, { useEffect, useState } from "react";
import { ActivityIndicator, Dimensions, FlatList, Platform, RefreshControl, StyleSheet, Text, TouchableOpacity, View } from "react-native";
const ListItem = (props) => {
    const SCREEN_WIDTH = Dimensions.get("screen").width;
    const styles = StyleSheet.create({
        container: {
            width: SCREEN_WIDTH,
        },
        text: {
            fontFamily: Platform.select({
                ios: 'Courier',
                android: 'monospace',
                default: 'monospace',
            }),
            fontSize: 16,
        }
    });
    return (React.createElement(TouchableOpacity, { style: styles.container, onPress: props.onClick },
        React.createElement(View, { style: { padding: 16 } },
            React.createElement(Text, { style: styles.text }, JSON.stringify(props.topic, null, 2)))));
};
const PreferencesCustom = ({ navigation }) => {
    const [isLoading, setIsLoading] = useState(false);
    const [userId, setUserId] = useState();
    const [topics, setTopics] = useState([]);
    const [isRefreshing, setIsRefreshing] = useState(false);
    useEffect(() => {
        const initUser = async () => {
            const id = await Courier.shared.getUserId();
            setUserId(id);
        };
        initUser();
        const handleSaveClicked = (_) => {
            if (userId) {
                getPrefs();
            }
        };
        // Add listener when component mounts
        addListener('saveButtonClicked', handleSaveClicked);
    }, []);
    useEffect(() => {
        if (userId) {
            getPrefs();
        }
    }, [userId]);
    async function getPrefs(refresh = false) {
        const client = await Courier.shared.getClient();
        if (!client) {
            return;
        }
        if (refresh) {
            setIsRefreshing(true);
        }
        else {
            setIsLoading(true);
        }
        try {
            console.log('getPrefs');
            const res = await client.preferences.getUserPreferences();
            setTopics(res.items);
        }
        catch (e) {
            console.log(e);
        }
        if (refresh) {
            setIsRefreshing(false);
        }
        else {
            setIsLoading(false);
        }
    }
    const onItemClick = (topic) => {
        navigation.push('PreferencesDetail', { id: topic.topicId });
    };
    const styles = StyleSheet.create({
        container: {
            flex: 1,
            justifyContent: 'center',
            alignItems: 'center',
        },
        text: {
            marginBottom: 10,
        },
    });
    return (React.createElement(View, { style: styles.container },
        isLoading && (React.createElement(ActivityIndicator, { size: "small" })),
        !isLoading && (React.createElement(FlatList, { data: topics, renderItem: ({ item }) => React.createElement(ListItem, { topic: item, onClick: () => onItemClick(item) }), keyExtractor: (item) => item.topicId ?? 'empty', refreshControl: React.createElement(RefreshControl, { refreshing: isRefreshing, onRefresh: () => getPrefs(true) }) }))));
};
export default PreferencesCustom;