@trycourier/courier-react-native 2.0.0-beta2 → 2.0.0-beta4

package/src/hooks/CourierProvider.tsx

@@ -0,0 +1,355 @@
+import React, { createContext, ReactNode, useContext, useEffect, useState } from 'react';
+import { InboxMessage } from 'src/models/InboxMessage';
+import Courier, { CourierPushListener, CourierInboxListener, CourierAuthenticationListener, iOSForegroundPresentationOptions } from '..';
+
+let authListener: CourierAuthenticationListener | undefined = undefined
+let pushListener: CourierPushListener | undefined = undefined
+let inboxListener: CourierInboxListener | undefined = undefined
+
+interface CourierAuthContext {
+  start: () => void;
+  isLoading: boolean;
+  error?: string;
+  userId?: string;
+  signIn: (props: { accessToken: string; clientKey?: string; userId: string }) => Promise<void>;
+  signOut: () => Promise<void>;
+}
+
+interface CourierPushContext {
+  start: () => void;
+  delivered: any;
+  clicked: any;
+  tokens: {
+    apns?: string;
+    fcm?: string;
+  };
+  notificationPermissionStatus?: string;
+  requestNotificationPermission: () => Promise<void>;
+}
+
+interface CourierInboxContext {
+  start: () => void;
+  isLoading: boolean;
+  error?: string;
+  messages: InboxMessage[];
+  unreadMessageCount: number;
+  totalMessageCount: number;
+  canPaginate: boolean;
+  iOSForegroundPresentationOptions: (options: iOSForegroundPresentationOptions[]) => void;
+  setPaginationLimit: (limit: number) => void;
+  fetchNextPageOfMessages: () => Promise<InboxMessage[]>;
+  refresh: () => Promise<void>;
+  isRefreshing: boolean;
+  readAllMessages: () => Promise<void>;
+  readMessage: (messageId: string) => Promise<void>;
+  unreadMessage: (messageId: string) => Promise<void>;
+}
+
+interface CourierContext {
+  auth: CourierAuthContext;
+  push: CourierPushContext;
+  inbox: CourierInboxContext;
+}
+
+const CourierContext = createContext<CourierContext | undefined>(undefined);
+
+export const CourierProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
+
+  // Auth
+  const [auth_userId, auth_setUserId] = useState<string | undefined>(undefined);
+  const [auth_isLoading, auth_setIsLoading] = useState<boolean>(false);
+  const [auth_error, auth_setError] = useState<string | undefined>(undefined);
+
+  // Push
+  const [push_pushNotificationDelivered, inbox_setPushNotificationDelivered] = useState<any>(undefined);
+  const [push_pushNotificationClicked, inbox_setPushNotificationClicked] = useState<any>(undefined);
+  const [push_apnsToken, push_setApnsToken] = useState<string | undefined>(undefined);
+  const [push_fcmToken, push_setFcmToken] = useState<string | undefined>(undefined);
+  const [push_notificationPermission, push_setNotificationPermission] = useState<string | undefined>(undefined);
+
+  // Inbox
+  const [inbox_isLoading, inbox_setIsLoading] = useState<boolean>(false);
+  const [inbox_isRefreshing, inbox_setIsRefreshing] = useState<boolean>(false);
+  const [inbox_error, inbox_setError] = useState<string | undefined>(undefined);
+  const [inbox_messages, inbox_setMessages] = useState<InboxMessage[]>([]);
+  const [inbox_unreadMessageCount, inbox_setUnreadMessageCount] = useState<number>(0);
+  const [inbox_totalMessageCount, inbox_setTotalMessageCount] = useState<number>(0);
+  const [inbox_canPaginate, inbox_setCanPaginate] = useState<boolean>(false);
+
+  useEffect(() => {
+
+    // Get the initial values
+    const userId = Courier.shared.userId;
+    auth_setUserId(userId);
+
+    // Permissions
+    syncNotificationPermissions();
+
+    // Push tokens
+    syncTokens();
+
+  }, []);
+
+  useEffect(() => {
+
+    return () => {
+      authListener?.remove();
+      pushListener?.remove();
+      inboxListener?.remove();
+    }
+
+  }, []);
+
+  const startAuth = () => {
+
+    if (!authListener) {
+
+      authListener = Courier.shared.addAuthenticationListener({
+        onUserChanged: (userId) => auth_setUserId(userId)
+      });
+      
+    }
+
+  }
+
+  const startPush = () => {
+
+    if (!pushListener) {
+
+      pushListener = Courier.shared.addPushNotificationListener({
+        onPushNotificationDelivered: (push) => inbox_setPushNotificationDelivered(push),
+        onPushNotificationClicked: (push) => inbox_setPushNotificationClicked(push)
+      });
+      
+    }
+
+  }
+
+  const startInbox = () => {
+
+    if (!inboxListener) {
+
+      inboxListener = Courier.shared.addInboxListener({
+        onInitialLoad: () => {
+          inbox_setIsLoading(true);
+          inbox_setError(undefined);
+        },
+        onError: (error) => {
+          inbox_setIsLoading(false);
+          inbox_setError(error);
+        },
+        onMessagesChanged: (messages, unreadMessageCount, totalMessageCount, canPaginate) => {
+          inbox_setIsLoading(false);
+          inbox_setError(undefined);
+          inbox_setMessages(messages);
+          inbox_setUnreadMessageCount(unreadMessageCount);
+          inbox_setTotalMessageCount(totalMessageCount);
+          inbox_setCanPaginate(canPaginate);
+        }
+      });
+      
+    }
+
+  }
+
+  const signIn = async (props: { accessToken: string, clientKey?: string, userId: string }): Promise<void> => {
+    
+    auth_setIsLoading(true);
+    auth_setError(undefined);
+
+    try {
+      await Courier.shared.signIn(props);
+    } catch (error) {
+      auth_setError(error as string);
+    }
+
+    auth_setIsLoading(false);
+
+  };
+
+  const signOut = async (): Promise<void> => {
+    
+    auth_setIsLoading(true);
+    auth_setError(undefined);
+
+    try {
+      await Courier.shared.signOut();
+    } catch (error) {
+      auth_setError(error as string);
+    }
+
+    auth_setIsLoading(false);
+
+  };
+
+  const syncNotificationPermissions = async () => {
+
+    const status = await Courier.shared.getNotificationPermissionStatus();
+    push_setNotificationPermission(status);
+
+  }
+
+  const syncTokens = () => {
+
+    // APNS
+    const apnsToken = Courier.shared.apnsToken;
+    push_setApnsToken(apnsToken);
+
+    const fcmToken = Courier.shared.fcmToken;
+    push_setFcmToken(fcmToken);
+
+  }
+
+  const requestNotificationPermission = async () => {
+    const status = await Courier.shared.requestNotificationPermission();
+    push_setNotificationPermission(status);
+  };
+
+  const iOSForegroundPresentationOptions = (options: iOSForegroundPresentationOptions[]) => {
+    Courier.shared.iOSForegroundPresentationOptions({
+      options: options,
+    });
+  }
+
+  const setPaginationLimit = (limit: number) => {
+    Courier.shared.setInboxPaginationLimit({ limit });
+  };
+
+  const fetchNextPageOfMessages = (): Promise<InboxMessage[]> => {
+    return Courier.shared.fetchNextPageOfMessages();
+  };
+
+  const refresh = async () => {
+    inbox_setIsRefreshing(true);
+    await Courier.shared.refreshInbox();
+    inbox_setIsRefreshing(false);
+  };
+
+  const readAllMessages = () => {
+
+    // Skip if no user is found
+    if (!Courier.shared.userId) {
+      return Promise.resolve();
+    }
+
+    // Read the messages
+    return Courier.shared.readAllInboxMessages();
+
+  };
+
+  const readMessage = (messageId: string) => {
+    return Courier.shared.readMessage({ messageId });
+  };
+
+  const unreadMessage = (messageId: string) => {
+    return Courier.shared.unreadMessage({ messageId });
+  };
+
+  return (
+    <CourierContext.Provider value={{
+      auth: {
+        start: startAuth,
+        isLoading: auth_isLoading,
+        error: auth_error,
+        userId: auth_userId,
+        signIn,
+        signOut
+      },
+      push: {
+        start: startPush,
+        delivered: push_pushNotificationDelivered,
+        clicked: push_pushNotificationClicked,
+        tokens: {
+          fcm: push_fcmToken,
+          apns: push_apnsToken,
+        },
+        notificationPermissionStatus: push_notificationPermission,
+        requestNotificationPermission,
+      },
+      inbox: {
+        start: startInbox,
+        isLoading: inbox_isLoading,
+        error: inbox_error,
+        messages: inbox_messages,
+        unreadMessageCount: inbox_unreadMessageCount,
+        totalMessageCount: inbox_totalMessageCount,
+        canPaginate: inbox_canPaginate,
+        iOSForegroundPresentationOptions,
+        setPaginationLimit,
+        fetchNextPageOfMessages,
+        refresh,
+        isRefreshing: inbox_isRefreshing,
+        readAllMessages,
+        readMessage,
+        unreadMessage,
+      }
+    }}>
+      {children}
+    </CourierContext.Provider>
+  );
+  
+};
+
+// Auth Hook
+export const useCourierAuth = (): CourierAuthContext => {
+
+  const context = useContext(CourierContext);
+
+  if (!context) {
+    throw new Error('useCourierAuth must be used within an CourierProvider');
+  }
+
+  context.auth.start();
+
+  return context.auth;
+
+};
+
+// Push Hook
+export const useCourierPush = (): CourierPushContext => {
+
+  const context = useContext(CourierContext);
+
+  if (!context) {
+    throw new Error('useCourierPush must be used within an CourierProvider');
+  }
+
+  context.push.start();
+
+  return context.push;
+
+};
+
+interface UseCourierInboxProps {
+  paginationLimit?: number;
+  iOS?: {
+    foregroundPresentationOptions?: iOSForegroundPresentationOptions[]
+  }
+}
+
+// Inbox Hook
+export const useCourierInbox = (props: UseCourierInboxProps = {}): CourierInboxContext => {
+
+  const context = useContext(CourierContext);
+
+  if (!context) {
+    throw new Error('useCourierInbox must be used within an CourierProvider');
+  }
+
+  // Set the initial pagination limit if needed
+  const limit = props.paginationLimit;
+  if (limit) {
+    context.inbox?.setPaginationLimit(limit);
+  }
+
+  // Set the presentation options
+  const options = props.iOS?.foregroundPresentationOptions;
+  if (options) {
+    context.inbox?.iOSForegroundPresentationOptions(options);
+  }
+
+  context.inbox?.start();
+
+  return context.inbox;
+
+};

package/src/index.tsx

@@ -3,11 +3,22 @@ import {
   NativeEventEmitter,
   EmitterSubscription,
   Platform,
+  DeviceEventEmitter,
 } from 'react-native';
 
+// Imports
 import { CourierInboxListener } from './models/CourierInboxListener';
+import { CourierPushListener } from './models/CourierPushListener';
+import { CourierAuthenticationListener } from './models/CourierAuthenticationListener';
 import { InboxMessage } from './models/InboxMessage';
+
+// Exports
 export { CourierInboxView } from './views/CourierInboxView';
+export { CourierProvider, useCourierAuth, useCourierPush, useCourierInbox } from './hooks/CourierProvider';
+export { CourierInboxListener } from './models/CourierInboxListener';
+export { CourierPushListener } from './models/CourierPushListener';
+export { CourierAuthenticationListener } from './models/CourierAuthenticationListener';
+export type iOSForegroundPresentationOptions = 'sound' | 'badge' | 'list' | 'banner';
 
 const LINKING_ERROR =
   `The package '@trycourier/courier-react-native' doesn't seem to be linked. Make sure: \n\n` +
@@ -32,6 +43,9 @@ const CourierEventEmitter = new NativeEventEmitter(
 
 class Courier {
 
+  readonly PUSH_NOTIFICATION_CLICKED = 'pushNotificationClicked';
+  readonly PUSH_NOTIFICATION_DELIVERED = 'pushNotificationDelivered';
+
   private static _sharedInstance: Courier;
   private _isDebugging = false;
   private debugListener: EmitterSubscription | undefined;
@@ -57,16 +71,7 @@ class Courier {
 
   private async setDefaults() {
     this.setIsDebugging(__DEV__);
-    // try {
-    //   await Promise.all([
-    //     this.setIsDebugging(__DEV__),
-    //     // this.iOSForegroundPresentationOptions({
-    //     //   options: ['sound', 'badge', 'list', 'banner'],
-    //     // }),
-    //   ]);
-    // } catch (error) {
-    //   console.log(error);
-    // }
+    this.iOSForegroundPresentationOptions({ options: ['sound', 'badge', 'list', 'banner'] });
   }
 
   /**
@@ -99,12 +104,143 @@ class Courier {
     return this._isDebugging;
   }
 
+  /**
+   * TODO
+   * @param props 
+   * @returns 
+   */
+  public iOSForegroundPresentationOptions(props: { options: iOSForegroundPresentationOptions[] }): string {
+
+    // Only works on iOS
+    if (Platform.OS !== 'ios') return 'unsupported';
+
+    const normalizedParams = Array.from(new Set(props.options));
+    return CourierReactNativeModules.iOSForegroundPresentationOptions({
+      options: normalizedParams,
+    });
+
+  }
+
+  /**
+   * Sets the current Apple Push Notification Service (APNS) token
+   * using Courier token management apis
+   * @example const apnsToken = await Courier.apnsToken
+   */
+   get apnsToken(): string | undefined {
+    if (Platform.OS !== 'ios') return undefined;
+    return CourierReactNativeModules.getApnsToken();
+  }
+
+  /**
+   * Sets the current Firebase Cloud Messaging (FCM) token
+   * using Courier token management apis
+   * @example const fcmToken = await Courier.fcmToken
+   */
+  get fcmToken(): string | undefined {
+    return CourierReactNativeModules.getFcmToken();
+  }
+
+  /**
+   * Sets the current Firebase Cloud Messaging (FCM) token
+   * using Courier token management apis
+   * @example await setFcmToken('asdf...asdf')
+   */
+  public setFcmToken(props: { token: string }): Promise<void> {
+    return CourierReactNativeModules.setFcmToken(props.token);
+  }
+
+  /**
+   * Gets notification permission status at a system level.
+   * @example const permissionStatus = await Courier.getNotificationPermissionStatus()
+   */
+  public getNotificationPermissionStatus(): Promise<string> {
+    return CourierReactNativeModules.getNotificationPermissionStatus();
+  }
+
+  /**
+   * Requests notification permission status at a system level.
+   * Returns the string associated with the permission status.
+   * Will return the current status and will not present a popup
+   * if the user has already been asked for permission.
+   * @example const permissionStatus = await Courier.requestNotificationPermission()
+   */
+  public requestNotificationPermission(): Promise<string> {
+    return CourierReactNativeModules.requestNotificationPermission();
+  }
+
+  /**
+   * @example 
+  TODO
+  * @returns  function that can be used to unsubscribe from registered listeners
+  */
+  public addPushNotificationListener(props: { onPushNotificationClicked?: (push: any) => void, onPushNotificationDelivered?: (push: any) => void }): CourierPushListener {
+    
+    const pushListener = new CourierPushListener();
+
+    if (Platform.OS === 'android') {
+
+      if (props.onPushNotificationClicked) {
+        pushListener.onNotificationClickedListener = DeviceEventEmitter.addListener(this.PUSH_NOTIFICATION_CLICKED, (event: any) => {
+          try {
+            props.onPushNotificationClicked!(JSON.parse(event));
+          } catch (error) {
+            console.log(error);
+          }
+        });
+      }
+
+      if (props.onPushNotificationDelivered) {
+        pushListener.onNotificationDeliveredListener = DeviceEventEmitter.addListener(this.PUSH_NOTIFICATION_DELIVERED, (event: any) => {
+          try {
+            props.onPushNotificationDelivered!(JSON.parse(event));
+          } catch (error) {
+            console.log(error);
+          }
+        });
+      }
+
+    }
+
+    if (Platform.OS === 'ios') {
+
+      if (props.onPushNotificationClicked) {
+        pushListener.onNotificationClickedListener = CourierEventEmitter.addListener(this.PUSH_NOTIFICATION_CLICKED, (event: any) => {
+          try {
+            props.onPushNotificationClicked!(JSON.parse(event));
+          } catch (error) {
+            console.log(error);
+          }
+        });
+      }
+
+      if (props.onPushNotificationDelivered) {
+        pushListener.onNotificationDeliveredListener = CourierEventEmitter.addListener(this.PUSH_NOTIFICATION_DELIVERED, (event: any) => {
+          try {
+            props.onPushNotificationDelivered!(JSON.parse(event));
+          } catch (error) {
+            console.log(error);
+          }
+        });
+      }
+
+    }
+
+    // When listener is registered
+    // Attempt to fetch the last message that was clicked
+    // This is needed for when the app is killed and the
+    // user launched the app by clicking on a notifications
+    CourierReactNativeModules.registerPushNotificationClickedOnKilledState();
+
+    return pushListener
+
+  }
+
   /**
    * Returns the current user id stored in local native storage
    * @example const userId = await Courier.userId
    */
-  get userId(): Promise<string | undefined> {
-    return CourierReactNativeModules.getUserId();
+  get userId(): string | undefined {
+    return CourierReactNativeModules.getUserId() ?? undefined
   }
 
   /**
@@ -127,6 +263,43 @@ class Courier {
     return CourierReactNativeModules.signIn(props.accessToken, props.clientKey ?? null, props.userId);
   }
 
+  /**
+   * TODO
+   * @param props 
+   * @returns 
+   */
+   public signOut(): Promise<void> {
+    return CourierReactNativeModules.signOut();
+  }
+
+  /**
+   * TODO
+   * @param props 
+   * @returns 
+   */
+   public addAuthenticationListener(props: { onUserChanged: (userId?: string) => void }): CourierAuthenticationListener {
+
+    const authListener = new CourierAuthenticationListener();
+
+    authListener.onUserChanged = CourierEventEmitter.addListener('courierAuthUserChanged', event => {
+      props.onUserChanged(event)
+    });
+
+    authListener.listenerId = CourierReactNativeModules.addAuthenticationListener();
+
+    return authListener;
+
+  }
+
+  /**
+   * TODO
+   * @param props 
+   * @returns 
+   */
+  public removeAuthenticationListener(props: { listenerId: string }): string {
+    return CourierReactNativeModules.removeAuthenticationListener(props.listenerId);
+  }
+
   /**
    * TODO
    * @param props 
@@ -187,7 +360,7 @@ class Courier {
       });
     }
 
-    inboxListener.listenerId = CourierReactNativeModules.addInboxListener(null);
+    inboxListener.listenerId = CourierReactNativeModules.addInboxListener();
 
     return inboxListener;
 

package/src/models/CourierAuthenticationListener.tsx

@@ -0,0 +1,19 @@
+import { EmitterSubscription } from "react-native";
+import Courier from "..";
+
+export class CourierAuthenticationListener {
+
+  public listenerId?: string
+  public onUserChanged?: EmitterSubscription
+
+  public remove() {
+
+    if (this.listenerId) {
+      Courier.shared.removeInboxListener({ listenerId: this.listenerId });
+    }
+
+    this.onUserChanged?.remove();
+    
+  }
+
+}

package/src/models/CourierPushListener.tsx

@@ -0,0 +1,13 @@
+import { EmitterSubscription } from "react-native";
+
+export class CourierPushListener {
+
+  public onNotificationClickedListener?: EmitterSubscription
+  public onNotificationDeliveredListener?: EmitterSubscription
+
+  public remove() {
+    this.onNotificationClickedListener?.remove();
+    this.onNotificationDeliveredListener?.remove();
+  }
+
+}

package/src/views/CourierInboxView.tsx

@@ -5,8 +5,10 @@ import { InboxAction } from "src/models/InboxAction";
 import { InboxMessage } from "src/models/InboxMessage";
 
 type CourierInboxViewProps = {
-  lightTheme?: CourierInboxTheme;
-  darkTheme?: CourierInboxTheme;
+  theme?: { 
+    light?: CourierInboxTheme, 
+    dark?: CourierInboxTheme 
+  };
   onClickInboxMessageAtIndex?: (message: InboxMessage, index: number) => void;
   onClickInboxActionForMessageAtIndex?: (action: InboxAction, message: InboxMessage, index: number) => void;
   onScrollInbox?: (offsetY: number, offsetX: number) => void;
@@ -73,8 +75,7 @@ export const CourierInboxView = (props: CourierInboxViewProps) => {
 
   return (
     <CourierInbox 
-      lightTheme={props.lightTheme} 
-      darkTheme={props.darkTheme}
+      theme={props.theme ?? { light: undefined, dark: undefined }} 
       onClickInboxMessageAtIndex={onClickInboxMessageAtIndex}
       onClickInboxActionForMessageAtIndex={onClickInboxActionForMessageAtIndex}
       onScrollInbox={onScrollInbox}