@trycourier/courier-react-native
Version:
Inbox, Push Notifications, and Preferences for React Native
142 lines (141 loc) • 5.92 kB
JavaScript
import Courier from '@trycourier/courier-react-native';
import React, { useEffect, useState } from 'react';
import { View, Text, FlatList, StyleSheet, TouchableOpacity, RefreshControl, ActivityIndicator, Platform } from 'react-native';
const InboxCustom = () => {
const [isRefreshing, setIsRefreshing] = useState(false);
const [isLoading, setIsLoading] = useState(false);
const [error, setError] = useState(null);
const [messages, setMessages] = useState([]);
const [canPaginate, setCanPaginate] = useState(false);
useEffect(() => {
const initInbox = async () => {
await Courier.shared.setInboxPaginationLimit(100);
const inboxListener = await Courier.shared.addInboxListener({
onInitialLoad(isRefresh) {
if (isRefresh) {
setIsRefreshing(true);
}
else {
setIsLoading(true);
}
},
onError(error) {
setIsLoading(false);
setError(error);
},
onFeedChanged(messageSet) {
setIsLoading(false);
setError(null);
setMessages(messageSet.messages);
setCanPaginate(messageSet.canPaginate);
},
onMessageChanged(feed, index, message) {
if (feed === 'feed') {
setMessages(prevMessages => {
const newMessages = [...prevMessages];
newMessages[index] = message;
return newMessages;
});
}
},
onMessageAdded(feed, index, message) {
if (feed === 'feed') {
setMessages(prevMessages => {
const newMessages = [...prevMessages];
newMessages.splice(index, 0, message);
return newMessages;
});
}
},
onMessageRemoved(feed, index) {
if (feed === 'feed') {
setMessages(prevMessages => {
const newMessages = [...prevMessages];
newMessages.splice(index, 1);
return newMessages;
});
}
},
onPageAdded(feed, messageSet) {
if (feed === 'feed') {
setMessages(prevMessages => [...prevMessages, ...messageSet.messages]);
setCanPaginate(messageSet.canPaginate);
}
}
});
return inboxListener;
};
let inboxListener;
initInbox().then(listener => {
inboxListener = listener;
});
return () => {
if (inboxListener) {
inboxListener.remove();
}
};
}, []);
const ListItem = (props) => {
const styles = StyleSheet.create({
container: {
padding: 20,
borderBottomWidth: 1,
borderBottomColor: '#ccc',
},
unread: {
backgroundColor: 'red'
},
text: {
width: Platform.OS === 'ios' ? undefined : '100%',
fontFamily: Platform.select({
ios: 'Courier',
android: 'monospace',
default: 'monospace',
}),
fontSize: 16,
},
});
const isRead = props.message.read;
async function toggleMessage() {
const messageId = props.message.messageId;
await Courier.shared.clickMessage({ messageId: messageId });
isRead ? await Courier.shared.unreadMessage({ messageId: messageId }) : await Courier.shared.readMessage({ messageId: messageId });
console.log(props.message);
}
return (React.createElement(TouchableOpacity, { style: [styles.container, isRead ? undefined : styles.unread], onPress: toggleMessage },
React.createElement(Text, { style: styles.text }, JSON.stringify(props.message, null, 2))));
};
const PaginationItem = () => {
return (React.createElement(View, { style: { paddingVertical: 20 } },
React.createElement(ActivityIndicator, { size: "small" })));
};
const refresh = async () => {
setIsRefreshing(true);
await Courier.shared.refreshInbox();
setIsRefreshing(false);
};
function buildContent() {
if (isLoading) {
return React.createElement(Text, null, "Loading");
}
if (error) {
return React.createElement(Text, null, error);
}
return (React.createElement(FlatList, { data: messages, keyExtractor: message => message.messageId, renderItem: message => React.createElement(ListItem, { message: message.item }), refreshControl: React.createElement(RefreshControl, { refreshing: isRefreshing, onRefresh: refresh }), ListFooterComponent: () => {
return canPaginate ? React.createElement(PaginationItem, null) : null;
}, onEndReached: () => {
if (canPaginate) {
Courier.shared.fetchNextPageOfMessages({ inboxMessageFeed: 'feed' });
}
} }));
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
});
return (React.createElement(View, { style: styles.container }, buildContent()));
};
export default InboxCustom;