Merge pull request #42 from sendbird/feat/chat-v4

[UIKIT-1973] Feat/migration to chat v4

Author: bang9

.eslintignore

@@ -5,3 +5,4 @@ ios
 .eslintrc.js
 **/*.config.js
 **/scripts/*.js
+docs-validation/*

.prettierignore

@@ -0,0 +1 @@
+docs-validation/*

docs-validation/1_introduction/Authentication.tsx

@@ -0,0 +1,106 @@
+import React from 'react';
+
+import type { FileType } from '@sendbird/uikit-react-native';
+const PROFILE_FILE: FileType = { name: '', size: 0, type: '', uri: '' };
+
+/**
+ * Connect to the Sendbird server
+ * {@link https://sendbird.com/docs/uikit/v3/react-native/introduction/authentication#2-connect-to-the-sendbird-server}
+ * */
+import { useConnection } from '@sendbird/uikit-react-native';
+
+const Component = () => {
+  const { connect } = useConnection();
+
+  connect('USER_ID', { nickname: 'NICKNAME', accessToken: 'ACCESS_TOKEN' })
+    .then((_user) => {
+      // 1. The user is online and connected to the server.
+      // 2. The user is offline but you can access user information stored
+      // in the local cache.
+    })
+    .catch((_err) => {
+      // The user is offline and you can't access any user information stored
+      // in the local cache.
+    });
+};
+/** ------------------ **/
+
+/**
+ * Disconnect from the Sendbird server
+ * {@link https://sendbird.com/docs/uikit/v3/react-native/introduction/authentication#2-disconnect-from-the-sendbird-server}
+ * */
+const Component2 = () => {
+  const { disconnect } = useConnection();
+  disconnect();
+}
+/** ------------------ **/
+
+/**
+ * Retrieve online status of current user
+ * {@link https://sendbird.com/docs/uikit/v3/react-native/introduction/authentication#2-retrieve-online-status-of-current-user}
+ * */
+import { useSendbirdChat } from '@sendbird/uikit-react-native';
+
+const Component3 = () => {
+  const { currentUser } = useSendbirdChat();
+
+  if (currentUser) {
+    // User is online.
+  } else {
+    // User is offline.
+  }
+}
+/** ------------------ **/
+
+/**
+ * Register for push notifications
+ * {@link https://sendbird.com/docs/uikit/v3/react-native/introduction/authentication#2-register-for-push-notifications}
+ * */
+import RNFBMessaging from '@react-native-firebase/messaging';
+import * as Permissions from 'react-native-permissions';
+import { SendbirdUIKitContainer, createNativeNotificationService } from '@sendbird/uikit-react-native';
+
+const NotificationService = createNativeNotificationService({
+  messagingModule: RNFBMessaging,
+  permissionModule: Permissions,
+});
+
+const App = () => {
+  return (
+    <SendbirdUIKitContainer
+      // @ts-ignore
+      platformServices={{ notification: NotificationService }}
+    />
+  );
+};
+/** ------------------ **/
+
+/**
+ * Unregister push notifications
+ * {@link https://sendbird.com/docs/uikit/v3/react-native/introduction/authentication#2-unregister-push-notifications}
+ * */
+const App2 = () => {
+  return (
+    // @ts-ignore
+    <SendbirdUIKitContainer
+      chatOptions={{ enableAutoPushTokenRegistration: false }}
+    />
+  );
+};
+/** ------------------ **/
+
+/**
+ * Update user profile
+ * {@link https://sendbird.com/docs/uikit/v3/react-native/introduction/authentication#2-update-user-profile}
+ * */
+const Component4 = () => {
+  const { updateCurrentUserInfo } = useSendbirdChat();
+
+  const update = async () => {
+    const updatedUserWithUrl = await updateCurrentUserInfo('NICKNAME', 'PROFILE_URL');
+
+    // Or you can update the profile image file.
+    const updatedUserWithFile = await updateCurrentUserInfo('NICKNAME', PROFILE_FILE);
+  }
+}
+/** ------------------ **/

docs-validation/1_introduction/NativeModules.tsx

@@ -0,0 +1,69 @@
+import {
+  createExpoClipboardService,
+  createExpoFileService,
+  createExpoMediaService,
+  createExpoNotificationService,
+  createNativeClipboardService,
+  createNativeFileService,
+  createNativeMediaService,
+  createNativeNotificationService,
+} from '@sendbird/uikit-react-native';
+
+/**
+ * Helper functions#React Native CLI
+ * {@link https://sendbird.com/docs/uikit/v3/react-native/introduction/native-modules#2-helper-functions-3-react-native-cli}
+ * */
+import Clipboard from '@react-native-clipboard/clipboard';
+import CameraRoll from '@react-native-community/cameraroll';
+import RNFBMessaging from '@react-native-firebase/messaging';
+import Video from 'react-native-video';
+import * as DocumentPicker from 'react-native-document-picker';
+import * as FileAccess from 'react-native-file-access';
+import * as ImagePicker from 'react-native-image-picker';
+import * as Permissions from 'react-native-permissions';
+import * as CreateThumbnail from 'react-native-create-thumbnail';
+
+const NativeClipboardService = createNativeClipboardService(Clipboard);
+const NativeNotificationService = createNativeNotificationService({
+  messagingModule: RNFBMessaging,
+  permissionModule: Permissions,
+});
+const NativeFileService = createNativeFileService({
+  fsModule: FileAccess,
+  permissionModule: Permissions,
+  imagePickerModule: ImagePicker,
+  mediaLibraryModule: CameraRoll,
+  documentPickerModule: DocumentPicker,
+});
+const NativeMediaService = createNativeMediaService({
+  VideoComponent: Video,
+  thumbnailModule: CreateThumbnail,
+});
+/** ------------------ **/
+
+/**
+ * Helper functions#Expo CLI
+ * {@link https://sendbird.com/docs/uikit/v3/react-native/introduction/native-modules#2-helper-functions-3-expo-cli}
+ * */
+import * as ExpoClipboard from 'expo-clipboard';
+import * as ExpoDocumentPicker from 'expo-document-picker';
+import * as ExpoFS from 'expo-file-system';
+import * as ExpoImagePicker from 'expo-image-picker';
+import * as ExpoMediaLibrary from 'expo-media-library';
+import * as ExpoNotifications from 'expo-notifications';
+import * as ExpoAV from 'expo-av';
+import * as ExpoVideoThumbnail from 'expo-video-thumbnails';
+
+const ExpoNotificationService = createExpoNotificationService(ExpoNotifications);
+const ExpoClipboardService = createExpoClipboardService(ExpoClipboard);
+const ExpoFileService = createExpoFileService({
+  fsModule: ExpoFS,
+  imagePickerModule: ExpoImagePicker,
+  mediaLibraryModule: ExpoMediaLibrary,
+  documentPickerModule: ExpoDocumentPicker,
+});
+const ExpoMediaService = createExpoMediaService({
+  avModule: ExpoAV,
+  thumbnailModule: ExpoVideoThumbnail
+})
+/** ------------------ **/

docs-validation/1_introduction/ScreenNavigation.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+
+const GroupChannelScreen = () => <React.Fragment />;
+
+/**
+ * Set up navigation in a fragment
+ * {@link https://sendbird.com/docs/uikit/v3/react-native/introduction/screen-navigation#2-set-up-navigation-in-a-fragment}
+ * */
+// @ts-ignore
+import { Navigation } from 'react-native-navigation';
+import { createGroupChannelListFragment } from '@sendbird/uikit-react-native';
+
+const GroupChannelListFragment = createGroupChannelListFragment();
+
+const GroupChannelListScreen = (props: { componentId: string }) => {
+  return (
+    <GroupChannelListFragment
+      onPressCreateChannel={() => {
+        // Navigate to create group channel screen.
+      }}
+      onPressChannel={(channel) => {
+        // Navigate to group channel screen.
+        Navigation.push(props.componentId, {
+          component: {
+            name: 'GroupChannel',
+            passProps: { channel },
+          },
+        });
+      }}
+    />
+  );
+};
+/** ------------------ **/
+
+/**
+ * Integrate navigation library
+ * {@link https://sendbird.com/docs/uikit/v3/react-native/introduction/screen-navigation#2-integrate-navigation-library}
+ * */
+Navigation.registerComponent('GroupChannel', () => GroupChannelScreen);
+Navigation.registerComponent('GroupChannelList', () => GroupChannelListScreen);
+/** ------------------ **/