fastcomments-react-native-sdk/src/components/notification-list.js

React Native FastComments Components. Add live commenting to any React Native application.

import { jsx as _jsx } from "react/jsx-runtime";
import { memo } from 'react';
import { useEffect, useState } from 'react';
import { ActivityIndicator, Alert, FlatList, useWindowDimensions, View } from "react-native";
import { RenderHTMLConfigProvider, TRenderEngineProvider } from "react-native-render-html";
import { NotificationListItem } from "./notification-list-item";
import { getDefaultAvatarSrc } from "../services/default-avatar";
import { CheckBox } from "./checkbox";
import { changePageSubscriptionStateForUser, getNotificationTranslations, getUserNotifications } from "../services/notifications";
import { getMergedTranslations } from "../services/translations";
const NotificationListItemMemo = memo(props => NotificationListItem(props), (prevProps, nextProps) => {
    if (prevProps.notification.viewed !== nextProps.notification.viewed) {
        return false;
    }
    if (prevProps.notification.optedOut !== nextProps.notification.optedOut) {
        return false;
    }
    return true;
});
export function NotificationList({ imageAssets, onNotificationSelected, state, styles, translations }) {
    const [isLoading, setLoading] = useState(true);
    const [isFetchingNextPage, setIsFetchingNextPage] = useState(false);
    const [notificationTranslations, setNotificationTranslations] = useState();
    const [notifications, setNotifications] = useState([]);
    const [isSubscribed, setIsSubscribed] = useState(false);
    const { width } = useWindowDimensions();
    const loadAsync = async () => {
        setLoading(true);
        const [notificationTranslationsResponse, notificationsState] = await Promise.all([
            getNotificationTranslations(state.config),
            getUserNotifications({
                config: state.config
            }),
        ]);
        setNotificationTranslations(notificationTranslationsResponse.translations);
        setNotifications(notificationsState.notifications);
        setIsSubscribed(notificationsState.isSubscribed);
        setLoading(false);
    };
    useEffect(() => {
        loadAsync();
    }, []);
    if (isLoading) {
        return _jsx(View, { children: _jsx(ActivityIndicator, { size: "small" }) });
    }
    const subscribeHeader = notificationTranslations && _jsx(View, { style: styles.notificationList?.subscriptionHeader, children: _jsx(CheckBox, { imageAssets: imageAssets, imageStyle: styles.notificationList?.subscriptionHeaderCheckBoxImage, onValueChange: (value) => {
                (async function () {
                    const response = await changePageSubscriptionStateForUser({
                        config: state.config,
                        isSubscribed: value
                    });
                    if (response.status === 'success') {
                        setIsSubscribed(value);
                    }
                    else {
                        const mergedTranslations = getMergedTranslations(translations, response);
                        Alert.alert(":(", mergedTranslations.ERROR_MESSAGE, [
                            {
                                text: mergedTranslations.DISMISS
                            }
                        ]);
                    }
                })();
            }, style: styles.notificationList?.subscriptionHeaderCheckBox, text: notificationTranslations.SUBSCRIBE_TO_THIS_PAGE, value: isSubscribed, textStyle: styles.notificationList?.subscriptionHeaderCheckBoxText }) });
    const footerLoadingIndicator = _jsx(View, { children: isFetchingNextPage
            ? _jsx(ActivityIndicator, { size: "small" })
            : null });
    const onEndReached = async ({ distanceFromEnd }) => {
        if (distanceFromEnd < 0 || notifications.length < 20) {
            return;
        }
        setIsFetchingNextPage(true);
        const notificationsState = await getUserNotifications({
            config: state.config,
            afterId: notifications[notifications.length - 1]?._id
        });
        setNotifications([
            ...notifications,
            ...notificationsState.notifications
        ]);
        setIsSubscribed(notificationsState.isSubscribed);
        setIsFetchingNextPage(false);
    };
    const renderItem = (info) => _jsx(NotificationListItemMemo, { config: state.config, defaultAvatar: getDefaultAvatarSrc(imageAssets), imageAssets: imageAssets, notification: info.item, notificationTranslations: notificationTranslations, onNotificationSelected: onNotificationSelected, styles: styles, translations: translations, width: width });
    return _jsx(View, { style: styles.notificationList?.root, children: _jsx(TRenderEngineProvider, { baseStyle: styles.notificationList?.notificationText, children: _jsx(RenderHTMLConfigProvider, { children: _jsx(FlatList, { data: notifications, keyExtractor: notification => notification._id, maxToRenderPerBatch: 30, onEndReachedThreshold: 0.3, onEndReached: onEndReached, renderItem: renderItem, ListHeaderComponent: subscribeHeader, ListFooterComponent: footerLoadingIndicator }) }) }) });
}