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

Inbox, Push Notifications, and Preferences for React Native

import React, { useEffect, useState } from "react";
import { ActivityIndicator, Button, Platform, ScrollView, StyleSheet, Switch, Text, View } from "react-native";
import SegmentedControl from '@react-native-segmented-control/segmented-control';
import Courier, { CourierUserPreferencesChannel, CourierUserPreferencesStatus } from "@trycourier/courier-react-native";
import { emitEvent } from "../../Emitter";
import Toast from 'react-native-toast-message';
const PreferencesDetail = ({ route, navigation }) => {
    const styles = StyleSheet.create({
        container: {
            flex: 1,
            padding: 20,
        },
        switchItem: {
            flexDirection: 'row',
            alignItems: 'center',
            justifyContent: 'space-between',
            borderBottomWidth: 1,
            borderBottomColor: '#ccc',
        },
        text: {
            fontFamily: Platform.select({
                ios: 'Courier',
                android: 'monospace',
                default: 'monospace',
            }),
            fontSize: 16,
        },
        section: {
            marginBottom: 20,
        },
        title: {
            fontWeight: 'bold',
            marginBottom: 8,
        },
        loading: {
            flex: 1,
            justifyContent: 'center',
            alignItems: 'center',
        },
    });
    const statuses = [
        { status: CourierUserPreferencesStatus.OptedIn, name: "OPTED_IN" },
        { status: CourierUserPreferencesStatus.OptedOut, name: "OPTED_OUT" },
        { status: CourierUserPreferencesStatus.Required, name: "REQUIRED" }
    ];
    const { id } = route.params;
    const [isLoading, setIsLoading] = useState(false);
    const [statusIndex, setStatusIndex] = useState(0);
    const [useCustomRouting, setUseCustomRouting] = useState(false);
    const [routingChannels, setRoutingChannels] = useState([]);
    useEffect(() => {
        navigation.setOptions({
            headerTitle: id,
        });
        getTopic(id);
    }, []);
    async function getTopic(topicId) {
        const client = await Courier.shared.getClient();
        if (!client) {
            return;
        }
        setIsLoading(true);
        try {
            const topic = await client.preferences.getUserPreferenceTopic({ topicId });
            setStatusIndex(statuses.findIndex(status => status.status === topic.status) || 0);
            setUseCustomRouting(topic.hasCustomRouting || false);
            setRoutingChannels(topic.customRouting || []);
        }
        catch (error) {
            console.error("Error fetching topic:", error);
        }
        finally {
            setIsLoading(false);
        }
    }
    async function savePreferences() {
        const client = await Courier.shared.getClient();
        if (!client) {
            return;
        }
        setIsLoading(true);
        try {
            await client.preferences.putUserPreferenceTopic({
                topicId: id,
                status: statuses[statusIndex]?.status || CourierUserPreferencesStatus.OptedIn,
                hasCustomRouting: useCustomRouting,
                customRouting: routingChannels,
            });
            emitEvent('saveButtonClicked', {});
            navigation.goBack();
        }
        catch (error) {
            console.error("Error saving preferences:", error);
            Toast.show({
                type: 'error',
                text1: error.message,
            });
        }
        finally {
            setIsLoading(false);
        }
    }
    return (React.createElement(React.Fragment, null, isLoading ? (React.createElement(View, { style: styles.loading },
        React.createElement(ActivityIndicator, { size: "small" }))) : (React.createElement(ScrollView, { style: styles.container },
        React.createElement(View, { style: styles.section },
            React.createElement(Text, { style: styles.title }, "Status"),
            React.createElement(SegmentedControl, { values: statuses.map(status => status.name), selectedIndex: statusIndex, fontStyle: styles.text, onChange: ({ nativeEvent }) => setStatusIndex(nativeEvent.selectedSegmentIndex) })),
        React.createElement(View, { style: styles.section },
            React.createElement(Text, { style: styles.title }, "Use Custom Routing"),
            React.createElement(View, { style: styles.switchItem },
                React.createElement(Text, { style: styles.text }, "Use Custom Routing"),
                React.createElement(Switch, { value: useCustomRouting, onValueChange: value => {
                        setUseCustomRouting(value);
                    } }))),
        React.createElement(View, { style: styles.section },
            React.createElement(Text, { style: styles.title }, "Routing Channels"),
            Object.values(CourierUserPreferencesChannel).map(channel => (React.createElement(View, { key: channel, style: styles.switchItem },
                React.createElement(Text, { style: styles.text }, channel),
                React.createElement(Switch, { value: routingChannels.includes(channel), onValueChange: value => {
                        setRoutingChannels(prevChannels => value
                            ? [...prevChannels, channel]
                            : prevChannels.filter(c => c !== channel));
                    } }))))),
        React.createElement(View, { style: styles.section },
            React.createElement(Button, { onPress: () => savePreferences(), title: "Save" }))))));
};
export default PreferencesDetail;