Skip to content

Commit

Permalink
docs: update introduction
Browse files Browse the repository at this point in the history
  • Loading branch information
bang9 committed Oct 7, 2022
1 parent ce78817 commit 3173e38
Show file tree
Hide file tree
Showing 4 changed files with 103 additions and 114 deletions.
88 changes: 43 additions & 45 deletions docs-validation/1_introduction/Authentication.tsx
Original file line number Diff line number Diff line change
@@ -1,75 +1,73 @@
import RNFBMessaging from '@react-native-firebase/messaging';
import React from 'react';
import * as Permissions from 'react-native-permissions';

import {
FileType,
SendbirdUIKitContainer,
createNativeNotificationService,
useConnection,
useSendbirdChat,
} from '@sendbird/uikit-react-native';

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}
* */
// TODO: import useConnection
// TODO: wrap with function 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.
});
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}
* */
// TODO: wrap with function component
const { disconnect } = useConnection();
disconnect();
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}
* */
// TODO: import useSendbirdChat
// TODO: wrap with function component
const { currentUser } = useSendbirdChat();
import { useSendbirdChat } from '@sendbird/uikit-react-native';

if (currentUser) {
// User is online.
} else {
// User is offline.
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}
* */
// TODO: import createNativeNotificationService
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,
});

// TODO: wrap container with component
const App = () => {
return (
<SendbirdUIKitContainer
appId={''}
// @ts-ignore
platformServices={{ notification: NotificationService }}
/>
Expand All @@ -81,14 +79,10 @@ const App = () => {
* Unregister push notifications
* {@link https://sendbird.com/docs/uikit/v3/react-native/introduction/authentication#2-unregister-push-notifications}
* */

// TODO: wrap container with component
const App2 = () => {
return (
// @ts-ignore
<SendbirdUIKitContainer
appId={''}
// @ts-ignore
platformServices={{}}
chatOptions={{ enableAutoPushTokenRegistration: false }}
/>
);
Expand All @@ -99,10 +93,14 @@ const App2 = () => {
* Update user profile
* {@link https://sendbird.com/docs/uikit/v3/react-native/introduction/authentication#2-update-user-profile}
* */
const { updateCurrentUserInfo } = useSendbirdChat();
const Component4 = () => {
const { updateCurrentUserInfo } = useSendbirdChat();

const updatedUserWithUrl = await updateCurrentUserInfo('NICKNAME', 'PROFILE_URL');
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);
// Or you can update the profile image file.
const updatedUserWithFile = await updateCurrentUserInfo('NICKNAME', PROFILE_FILE);
}
}
/** ------------------ **/
44 changes: 22 additions & 22 deletions docs-validation/1_introduction/NativeModules.tsx
Original file line number Diff line number Diff line change
@@ -1,23 +1,4 @@
import Clipboard from '@react-native-clipboard/clipboard';
import CameraRoll from '@react-native-community/cameraroll';
import RNFBMessaging from '@react-native-firebase/messaging';
import * as ExpoAV from 'expo-av';
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 ExpoThumbnail from 'expo-video-thumbnails';
import * as CreateThumbnail from 'react-native-create-thumbnail';
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 Video from 'react-native-video';

import {
FileServiceInterface,
createExpoClipboardService,
createExpoFileService,
createExpoMediaService,
Expand All @@ -32,6 +13,16 @@ import {
* 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,
Expand All @@ -54,8 +45,17 @@ const NativeMediaService = createNativeMediaService({
* Helper functions#Expo CLI
* {@link https://sendbird.com/docs/uikit/v3/react-native/introduction/native-modules#2-helper-functions-3-expo-cli}
* */
const ExpoClipboardService = createExpoClipboardService(ExpoClipboard);
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,
Expand All @@ -64,6 +64,6 @@ const ExpoFileService = createExpoFileService({
});
const ExpoMediaService = createExpoMediaService({
avModule: ExpoAV,
thumbnailModule: ExpoThumbnail,
});
thumbnailModule: ExpoVideoThumbnail
})
/** ------------------ **/
18 changes: 4 additions & 14 deletions docs-validation/1_introduction/ScreenNavigation.tsx
Original file line number Diff line number Diff line change
@@ -1,25 +1,15 @@
import React from 'react';

import { createGroupChannelListFragment } from '@sendbird/uikit-react-native';

const GroupChannelScreen = () => <React.Fragment />;
const Navigation = {
push: (_id: string, _data: object) => 0,
registerComponent: (_name: string, _get: Function) => 0,
};

//
//
//
//
//
//

/**
* 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}
* */
// TODO: import createGroupChannelListFragment
// @ts-ignore
import { Navigation } from 'react-native-navigation';
import { createGroupChannelListFragment } from '@sendbird/uikit-react-native';

const GroupChannelListFragment = createGroupChannelListFragment();

const GroupChannelListScreen = (props: { componentId: string }) => {
Expand Down
67 changes: 34 additions & 33 deletions docs-validation/1_introduction/SendYourFirstMessage.tsx
Original file line number Diff line number Diff line change
@@ -1,35 +1,26 @@
import AsyncStorage from '@react-native-async-storage/async-storage';
import Clipboard from '@react-native-clipboard/clipboard';
import CameraRoll from '@react-native-community/cameraroll';
import RNFBMessaging from '@react-native-firebase/messaging';
import { NavigationContainer, useNavigation, useRoute } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import React from 'react';
import { Pressable, Text, View } from 'react-native';
import * as CreateThumbnail from 'react-native-create-thumbnail';
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 Video from 'react-native-video';

/**
* Implement platform service interfaces using native modules
* {@link https://sendbird.com/docs/uikit/v3/react-native/introduction/send-first-message#2-get-started-3-step-4-implement-platform-service-interfaces-using-native-modules}
* */
import {
SendbirdUIKitContainer,
createGroupChannelCreateFragment,
createGroupChannelFragment,
createGroupChannelListFragment,
createNativeClipboardService,
createNativeFileService,
createNativeMediaService,
createNativeNotificationService,
useConnection,
useSendbirdChat,
} from '@sendbird/uikit-react-native';

/**
* Implement platform service interfaces using native modules
* {@link https://sendbird.com/docs/uikit/v3/react-native/introduction/send-first-message#2-get-started-3-step-4-implement-platform-service-interfaces-using-native-modules}
* */
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 ClipboardService = createNativeClipboardService(Clipboard);
const NotificationService = createNativeNotificationService({
messagingModule: RNFBMessaging,
Expand All @@ -52,11 +43,13 @@ const MediaService = createNativeMediaService({
* Wrap your app in SendbirdUIKitContainer
* {@link https://sendbird.com/docs/uikit/v3/react-native/introduction/send-first-message#2-get-started-3-step-5-wrap-your-app-in-sendbirduikitcontainer}
* */
// TODO: APP_ID to string
import { SendbirdUIKitContainer } from '@sendbird/uikit-react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';

const App = () => {
return (
<SendbirdUIKitContainer
appId={APP_ID}
appId={'APP_ID'}
chatOptions={{ localCacheStorage: AsyncStorage }}
platformServices={{
file: FileService,
Expand All @@ -75,7 +68,14 @@ const App = () => {
* Create a fragment and module components
* {@link https://sendbird.com/docs/uikit/v3/react-native/introduction/send-first-message#2-get-started-3-step-7-create-a-fragment-and-module-components}
* */
//TODO: import useSendbirdChat
import { useNavigation, useRoute } from '@react-navigation/native';
import {
useSendbirdChat,
createGroupChannelListFragment,
createGroupChannelCreateFragment,
createGroupChannelFragment,
} from '@sendbird/uikit-react-native';

const GroupChannelListFragment = createGroupChannelListFragment();
const GroupChannelCreateFragment = createGroupChannelCreateFragment();
const GroupChannelFragment = createGroupChannelFragment();
Expand Down Expand Up @@ -122,7 +122,7 @@ const GroupChannelScreen = () => {
const { params } = useRoute<any>();

const { sdk } = useSendbirdChat();
const channel = sdk.GroupChannel.buildFromSerializedData(params.serializedChannel);
const channel = sdk.groupChannel.buildGroupChannelFromSerializedData(params.serializedChannel);

return (
<GroupChannelFragment
Expand Down Expand Up @@ -150,11 +150,10 @@ const GroupChannelScreen = () => {
* Register navigation library to the screen
* {@link https://sendbird.com/docs/uikit/v3/react-native/introduction/send-first-message#2-get-started-3-step-8-register-navigation-library-to-the-screen}
* */
// TODO: APP_ID to string
// TODO: import NavigationContainer
// TODO: remove import useConnection
const RootStack = createNativeStackNavigator();
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

const RootStack = createNativeStackNavigator();
const Navigation = () => {
const { currentUser } = useSendbirdChat();

Expand All @@ -178,7 +177,7 @@ const Navigation = () => {
const App2 = () => {
return (
<SendbirdUIKitContainer
appId={APP_ID}
appId={'APP_ID'}
chatOptions={{ localCacheStorage: AsyncStorage }}
platformServices={{
file: FileService,
Expand All @@ -196,7 +195,9 @@ const App2 = () => {
* Connect to the Sendbird server
* {@link https://sendbird.com/docs/uikit/v3/react-native/introduction/send-first-message#2-get-started-3-step-9-connect-to-the-sendbird-server}
* */
// TODO: import useConnection
import { Pressable, Text, View } from 'react-native';
import { useConnection } from '@sendbird/uikit-react-native';

const SignInScreen = () => {
const { connect } = useConnection();

Expand Down

0 comments on commit 3173e38

Please sign in to comment.