Skip to content

Commit 82a9e73

Browse files
committed
Hooks
1 parent 28672c7 commit 82a9e73

File tree

10 files changed

+549
-249
lines changed

10 files changed

+549
-249
lines changed

example/src/App.tsx

Lines changed: 5 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,18 @@
11
import { NavigationContainer } from '@react-navigation/native';
2-
import Courier, { CourierInboxProvider } from '@trycourier/courier-react-native';
3-
import React, { useEffect } from 'react';
4-
import { Alert } from 'react-native';
2+
import { CourierProvider } from '@trycourier/courier-react-native';
3+
import React from 'react';
54
import Navigation from './Navigation';
65

76
export default function App() {
87

9-
useEffect(() => {
10-
11-
const listener = Courier.shared.addPushNotificationListener({
12-
onPushNotificationClicked: (push) => {
13-
Alert.alert(`Push Clicked\n${JSON.stringify(push)}`);
14-
},
15-
onPushNotificationDelivered: (push) => {
16-
Alert.alert(`Push Delivered\n${JSON.stringify(push)}`);
17-
},
18-
});
19-
20-
return () => {
21-
listener.remove()
22-
}
23-
24-
}, []);
25-
26-
// IMPORTANT: Please add `CourierInboxProvider` if you want to access inbox events
8+
// IMPORTANT: Please add `CourierProvider` if you want to access realtime Courier events
279

2810
return (
29-
<CourierInboxProvider>
11+
<CourierProvider listeners={['auth', 'push', 'inbox']}>
3012
<NavigationContainer>
3113
<Navigation />
3214
</NavigationContainer>
33-
</CourierInboxProvider>
15+
</CourierProvider>
3416
);
3517

3618
}

example/src/Navigation.tsx

Lines changed: 43 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
import React from 'react';
1+
import React, { useEffect } from 'react';
22
import { BottomTabNavigationOptions, createBottomTabNavigator } from '@react-navigation/bottom-tabs';
3-
import { Button } from 'react-native';
4-
import { useCourierInbox } from '@trycourier/courier-react-native';
3+
import { Alert, Button } from 'react-native';
4+
import { useCourier } from '@trycourier/courier-react-native';
55
import InboxCustom from './pages/InboxCustom';
66
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
77
import InboxDefault from './pages/InboxDefault';
@@ -13,24 +13,60 @@ const Tab = createBottomTabNavigator();
1313

1414
const Navigation = () => {
1515

16-
const inbox = useCourierInbox({ paginationLimit: 100 });
16+
const courier = useCourier({
17+
inbox: {
18+
paginationLimit: 100
19+
}
20+
});
21+
22+
useEffect(() => {
23+
24+
console.log('Notification Permissions');
25+
console.log(courier.push?.notificationPermissionStatus);
26+
27+
}, [courier.push?.notificationPermissionStatus])
28+
29+
useEffect(() => {
30+
31+
console.log('Push Tokens');
32+
console.log(courier.push?.tokens);
33+
34+
}, [courier.push?.tokens])
35+
36+
useEffect(() => {
37+
38+
if (courier.push?.delivered) {
39+
console.log(courier.push?.delivered);
40+
Alert.alert('📬 Push Notification Delivered', JSON.stringify(courier.push?.delivered));
41+
}
42+
43+
}, [courier.push?.delivered]);
44+
45+
useEffect(() => {
46+
47+
if (courier.push?.clicked) {
48+
console.log(courier.push?.clicked);
49+
Alert.alert('👆 Push Notification Clicked', JSON.stringify(courier.push?.clicked));
50+
}
51+
52+
}, [courier.push?.clicked]);
1753

1854
const inboxOptions = (): BottomTabNavigationOptions => {
1955

2056
const badgeCount = () => {
2157

22-
if (inbox.error) {
58+
if (!courier.inbox || courier.inbox?.error) {
2359
return undefined
2460
}
2561

26-
return inbox.unreadMessageCount > 0 ? inbox.unreadMessageCount : undefined
62+
return courier.inbox?.unreadMessageCount > 0 ? courier.inbox?.unreadMessageCount : undefined
2763

2864
}
2965

3066
return {
3167
headerRight: () => (
3268
<Button
33-
onPress={() => inbox.readAllMessages()}
69+
onPress={() => courier.inbox?.readAllMessages()}
3470
title="Read All"
3571
/>
3672
),

example/src/pages/Auth.tsx

Lines changed: 22 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,61 +1,43 @@
1-
import Courier from "@trycourier/courier-react-native";
1+
import Courier, { useCourier } from "@trycourier/courier-react-native";
22
import React, { useEffect, useRef, useState } from "react";
3-
import { Button, Modal, StyleSheet, Text, TextInput, TouchableOpacity, View } from "react-native";
3+
import { ActivityIndicator, Button, Modal, StyleSheet, Text, TextInput, TouchableOpacity, View } from "react-native";
44

55
const Auth = () => {
66

7-
const [userId, setUserId] = useState<string | undefined>(undefined)
7+
const { auth, push } = useCourier();
88

99
useEffect(() => {
1010

1111
Courier.shared.iOSForegroundPresentationOptions({
1212
options: ['sound', 'badge', 'list', 'banner'],
1313
});
14-
15-
setUserId(Courier.shared.userId);
1614

1715
}, []);
1816

1917
async function signIn(userId: string) {
2018

2119
try {
22-
23-
await Courier.shared.signIn({
20+
21+
await auth?.signIn({
2422
accessToken: 'pk_prod_MVPCX80QWXMJ1HQMTZNBFE4ZQYJS',
2523
clientKey: 'MWVmNzI3ZDUtZDk2NS00OGU1LThjMjQtMDgwMjlkYjM1YWYx',
2624
userId: userId,
27-
});
25+
})
2826

29-
const requestStatus = await Courier.shared.requestNotificationPermission();
27+
const requestStatus = await push?.requestNotificationPermission();
3028
console.log('Request Notification Status: ' + requestStatus);
31-
32-
const getStatus = await Courier.shared.getNotificationPermissionStatus();
33-
console.log('Get Notification Status: ' + getStatus);
29+
console.log('Get Notification Status: ' + push?.notificationPermissionStatus);
3430

3531
} catch (e) {
3632

3733
console.error(e);
3834

3935
}
4036

41-
setUserId(Courier.shared.userId);
42-
4337
}
4438

4539
async function signOut() {
46-
47-
try {
48-
49-
await Courier.shared.signOut();
50-
51-
} catch (e) {
52-
53-
console.error(e);
54-
55-
}
56-
57-
setUserId(Courier.shared.userId);
58-
40+
await auth?.signOut();
5941
}
6042

6143
const styles = StyleSheet.create({
@@ -114,7 +96,7 @@ const Auth = () => {
11496

11597
const handleButtonPress = () => {
11698

117-
if (userId) {
99+
if (auth?.userId) {
118100
signOut();
119101
} else {
120102
setModalVisible(true);
@@ -163,8 +145,18 @@ const Auth = () => {
163145

164146
return (
165147
<View style={styles.container}>
166-
{userId && <Text style={styles.text}>{userId}</Text>}
167-
<AuthButton buttonText={userId ? 'Sign Out' : 'Sign In'} />
148+
149+
{auth?.isLoading && (
150+
<ActivityIndicator size="small" />
151+
)}
152+
153+
{!auth?.isLoading && (
154+
<>
155+
{auth?.userId && <Text style={styles.text}>{auth?.userId}</Text>}
156+
<AuthButton buttonText={auth?.userId ? 'Sign Out' : 'Sign In'} />
157+
</>
158+
)}
159+
168160
</View>
169161
);
170162

example/src/pages/InboxCustom.tsx

Lines changed: 16 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,15 @@
1-
import { useCourierInbox } from '@trycourier/courier-react-native';
1+
import { useCourier } from '@trycourier/courier-react-native';
22
import React from 'react';
33
import { View, Text, FlatList, StyleSheet, TouchableOpacity, RefreshControl, ActivityIndicator } from 'react-native';
44
import { InboxMessage } from 'src/models/InboxMessage';
55

66
const InboxCustom = () => {
77

8-
const inbox = useCourierInbox({ paginationLimit: 100 });
8+
const courier = useCourier({
9+
inbox: {
10+
paginationLimit: 100
11+
}
12+
});
913

1014
const ListItem = (props: { message: InboxMessage }) => {
1115

@@ -29,7 +33,7 @@ const InboxCustom = () => {
2933

3034
function toggleMessage() {
3135
const messageId = props.message.messageId;
32-
isRead ? inbox.unreadMessage(messageId) : inbox.readMessage(messageId);
36+
isRead ? courier.inbox?.unreadMessage(messageId) : courier.inbox?.readMessage(messageId);
3337
}
3438

3539
return (
@@ -52,31 +56,31 @@ const InboxCustom = () => {
5256

5357
function buildContent() {
5458

55-
if (inbox.isLoading) {
59+
if (courier.inbox?.isLoading) {
5660
return <Text>Loading</Text>
5761
}
5862

59-
if (inbox.error) {
60-
return <Text>{inbox.error}</Text>
63+
if (courier.inbox?.error) {
64+
return <Text>{courier.inbox?.error}</Text>
6165
}
6266

6367
return (
6468
<FlatList
65-
data={inbox.messages}
69+
data={courier.inbox?.messages}
6670
keyExtractor={message => message.messageId}
6771
renderItem={message => <ListItem message={message.item} />}
6872
refreshControl={
6973
<RefreshControl
70-
refreshing={inbox.isRefreshing}
71-
onRefresh={inbox.refresh}
74+
refreshing={courier.inbox?.isRefreshing ?? false}
75+
onRefresh={courier.inbox?.refresh}
7276
/>
7377
}
7478
ListFooterComponent={() => {
75-
return inbox.canPaginate ? <PaginationItem /> : null
79+
return courier.inbox?.canPaginate ? <PaginationItem /> : null
7680
}}
7781
onEndReached={() => {
78-
if (inbox.canPaginate) {
79-
inbox.fetchNextPageOfMessages()
82+
if (courier.inbox?.canPaginate) {
83+
courier.inbox?.fetchNextPageOfMessages()
8084
}
8185
}}
8286
/>

ios/CourierReactNativeModule.m

Lines changed: 24 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,14 +27,36 @@ @interface RCT_EXTERN_MODULE(CourierReactNativeModule, NSObject)
2727
getUserId
2828
)
2929

30+
RCT_EXTERN__BLOCKING_SYNCHRONOUS_METHOD(
31+
addAuthenticationListener
32+
)
33+
34+
RCT_EXTERN__BLOCKING_SYNCHRONOUS_METHOD(
35+
removeAuthenticationListener: (NSString*)listenerId
36+
)
37+
3038
RCT_EXTERN_METHOD(
3139
getNotificationPermissionStatus: (RCTPromiseResolveBlock)resolve
32-
withRejecter:(RCTPromiseRejectBlock)reject
40+
withRejecter: (RCTPromiseRejectBlock)reject
3341
)
3442

3543
RCT_EXTERN_METHOD(
3644
requestNotificationPermission: (RCTPromiseResolveBlock)resolve
37-
withRejecter:(RCTPromiseRejectBlock)reject
45+
withRejecter: (RCTPromiseRejectBlock)reject
46+
)
47+
48+
RCT_EXTERN__BLOCKING_SYNCHRONOUS_METHOD(
49+
getApnsToken
50+
)
51+
52+
RCT_EXTERN__BLOCKING_SYNCHRONOUS_METHOD(
53+
getFcmToken
54+
)
55+
56+
RCT_EXTERN_METHOD(
57+
setFcmToken: (NSString*)token
58+
withResolver: (RCTPromiseResolveBlock)resolve
59+
withRejecter: (RCTPromiseRejectBlock)reject
3860
)
3961

4062
RCT_EXTERN_METHOD(

0 commit comments

Comments
 (0)