Skip to content

Commit

Permalink
feat(uikit): added open channel fragment
Browse files Browse the repository at this point in the history
  • Loading branch information
bang9 committed Feb 16, 2023
1 parent 3d95e7b commit 6250770
Show file tree
Hide file tree
Showing 23 changed files with 929 additions and 179 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -55,27 +55,26 @@ export const useOpenChannelListWithQuery: UseOpenChannelList = (sdk, userId, opt
updateLoading(false);
}, [init, userId]);

useChannelHandler(sdk, HOOK_NAME, {
onChannelChanged: (channel) => updateChannels([channel]),
onChannelFrozen: (channel) => updateChannels([channel]),
onChannelUnfrozen: (channel) => updateChannels([channel]),
onChannelMemberCountChanged: (channels) => updateChannels(channels),
onChannelDeleted: (url) => deleteChannels([url]),
onUserJoined: (channel) => updateChannels([channel]),
onUserLeft: (channel, user) => {
const isMe = user.userId === userId;
if (isMe) deleteChannels([channel.url]);
else updateChannels([channel]);
useChannelHandler(
sdk,
HOOK_NAME,
{
onChannelChanged: (channel) => updateChannels([channel]),
onChannelFrozen: (channel) => updateChannels([channel]),
onChannelUnfrozen: (channel) => updateChannels([channel]),
onChannelParticipantCountChanged: (channel) => updateChannels([channel]),
onChannelDeleted: (url) => deleteChannels([url]),
onUserBanned(channel, user) {
const isMe = user.userId === userId;
if (isMe) deleteChannels([channel.url]);
else updateChannels([channel]);
},
onMessageReceived(channel) {
updateChannelsAndMarkAsDelivered([channel]);
},
},
onUserBanned(channel, user) {
const isMe = user.userId === userId;
if (isMe) deleteChannels([channel.url]);
else updateChannels([channel]);
},
onMessageReceived(channel) {
updateChannelsAndMarkAsDelivered([channel]);
},
});
'open',
);

const refresh = useFreshCallback(async () => {
updateRefreshing(true);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -68,55 +68,57 @@ export const useOpenChannelMessagesWithQuery: UseOpenChannelMessages = (sdk, cha
}
};

useChannelHandler(sdk, HOOK_NAME, {
// Messages
onMessageReceived(eventChannel, message) {
if (isDifferentChannel(channel, eventChannel)) return;
channelMarkAsRead();
updateNextMessages([message], false, sdk.currentUser.userId);
},
onMessageUpdated(eventChannel, message) {
if (isDifferentChannel(channel, eventChannel)) return;
updateMessages([message], false, sdk.currentUser.userId);
},
onMessageDeleted(eventChannel, messageId) {
if (isDifferentChannel(channel, eventChannel)) return;
deleteMessages([messageId], []);
deleteNextMessages([messageId], []);
},
// Channels
onChannelChanged: channelUpdater,
onChannelFrozen: channelUpdater,
onChannelUnfrozen: channelUpdater,
onChannelHidden: channelUpdater,
onChannelMemberCountChanged(channels) {
const foundChannel = channels.find((c) => !isDifferentChannel(c, channel));
if (foundChannel) channelUpdater(foundChannel);
},
onChannelDeleted(channelUrl, type) {
if (channel.url === channelUrl && type === 'open') {
options?.onChannelDeleted?.();
}
},
// Users
onOperatorUpdated: channelUpdater,
onUserLeft: channelUpdater,
// onUserEntered: channelUpdater,
// onUserExited: channelUpdater,
onUserJoined: channelUpdater,
onUserUnbanned: channelUpdater,
onUserMuted: channelUpdater,
onUserUnmuted: channelUpdater,
onUserBanned(eventChannel, bannedUser) {
if (isDifferentChannel(channel, eventChannel)) return;

if (bannedUser.userId === sdk.currentUser.userId) {
options?.onChannelDeleted?.();
} else {
useChannelHandler(
sdk,
HOOK_NAME,
{
// Messages
onMessageReceived(eventChannel, message) {
if (isDifferentChannel(channel, eventChannel)) return;
channelMarkAsRead();
updateNextMessages([message], false, sdk.currentUser.userId);
},
onMessageUpdated(eventChannel, message) {
if (isDifferentChannel(channel, eventChannel)) return;
updateMessages([message], false, sdk.currentUser.userId);
},
onMessageDeleted(eventChannel, messageId) {
if (isDifferentChannel(channel, eventChannel)) return;
deleteMessages([messageId], []);
deleteNextMessages([messageId], []);
},
// Channels
onChannelChanged: channelUpdater,
onChannelFrozen: channelUpdater,
onChannelUnfrozen: channelUpdater,
onChannelParticipantCountChanged(eventChannel) {
if (isDifferentChannel(channel, eventChannel)) return;
channelUpdater(eventChannel);
}
},
onChannelDeleted(channelUrl, type) {
if (channel.url === channelUrl && type === 'open') {
options?.onChannelDeleted?.();
}
},
// Users
onOperatorUpdated: channelUpdater,
onUserEntered: channelUpdater,
onUserExited: channelUpdater,
onUserUnbanned: channelUpdater,
onUserMuted: channelUpdater,
onUserUnmuted: channelUpdater,
onUserBanned(eventChannel, bannedUser) {
if (isDifferentChannel(channel, eventChannel)) return;

if (bannedUser.userId === sdk.currentUser.userId) {
options?.onChannelDeleted?.();
} else {
channelUpdater(eventChannel);
}
},
},
});
'open',
);

useAsyncEffect(async () => {
updateLoading(true);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -75,19 +75,19 @@ const EditInput = forwardRef<RNTextInput, EditInputProps>(function EditInput(
autoFocus={autoFocus}
onChangeText={onChangeText}
style={styles.input}
placeholder={STRINGS.GROUP_CHANNEL.INPUT_PLACEHOLDER_ACTIVE}
placeholder={STRINGS.LABELS.CHANNEL_INPUT_PLACEHOLDER_ACTIVE}
onSelectionChange={onSelectionChange}
>
{mentionManager.textToMentionedComponents(text, mentionedUsers)}
</TextInput>
</View>
<View style={{ marginTop: 8, flexDirection: 'row' }}>
<Button variant={'text'} onPress={onPressCancel}>
{STRINGS.GROUP_CHANNEL.INPUT_EDIT_CANCEL}
{STRINGS.LABELS.CHANNEL_INPUT_EDIT_CANCEL}
</Button>
<View style={styles.space} />
<Button variant={'contained'} onPress={onPressSave}>
{STRINGS.GROUP_CHANNEL.INPUT_EDIT_OK}
{STRINGS.LABELS.CHANNEL_INPUT_EDIT_OK}
</Button>
</View>
</View>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@ const SendInput = forwardRef<RNTextInput, SendInputProps>(function SendInput(
openSheet({
sheetItems: [
{
title: STRINGS.GROUP_CHANNEL.DIALOG_ATTACHMENT_CAMERA,
title: STRINGS.LABELS.CHANNEL_INPUT_ATTACHMENT_CAMERA,
icon: 'camera',
onPress: async () => {
const mediaFile = await fileService.openCamera({
Expand Down Expand Up @@ -117,7 +117,7 @@ const SendInput = forwardRef<RNTextInput, SendInputProps>(function SendInput(
},
},
{
title: STRINGS.GROUP_CHANNEL.DIALOG_ATTACHMENT_PHOTO_LIBRARY,
title: STRINGS.LABELS.CHANNEL_INPUT_ATTACHMENT_PHOTO_LIBRARY,
icon: 'photo',
onPress: async () => {
const mediaFiles = await fileService.openMediaLibrary({
Expand Down Expand Up @@ -167,7 +167,7 @@ const SendInput = forwardRef<RNTextInput, SendInputProps>(function SendInput(
},
},
{
title: STRINGS.GROUP_CHANNEL.DIALOG_ATTACHMENT_FILES,
title: STRINGS.LABELS.CHANNEL_INPUT_ATTACHMENT_FILES,
icon: 'document',
onPress: async () => {
const documentFile = await fileService.openDocument({
Expand Down Expand Up @@ -224,9 +224,9 @@ const SendInput = forwardRef<RNTextInput, SendInputProps>(function SendInput(
placeholder={conditionChaining(
[inputFrozen, inputMuted],
[
STRINGS.GROUP_CHANNEL.INPUT_PLACEHOLDER_DISABLED,
STRINGS.GROUP_CHANNEL.INPUT_PLACEHOLDER_MUTED,
STRINGS.GROUP_CHANNEL.INPUT_PLACEHOLDER_ACTIVE,
STRINGS.LABELS.CHANNEL_INPUT_PLACEHOLDER_DISABLED,
STRINGS.LABELS.CHANNEL_INPUT_PLACEHOLDER_MUTED,
STRINGS.LABELS.CHANNEL_INPUT_PLACEHOLDER_ACTIVE,
],
)}
>
Expand Down
6 changes: 3 additions & 3 deletions packages/uikit-react-native/src/components/FileViewer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -104,13 +104,13 @@ const FileViewer = ({
onPressDelete(fileMessage);
} else {
alert({
title: STRINGS.GROUP_CHANNEL.DIALOG_MESSAGE_DELETE_CONFIRM_TITLE,
title: STRINGS.LABELS.CHANNEL_MESSAGE_DELETE_CONFIRM_TITLE,
buttons: [
{
text: STRINGS.GROUP_CHANNEL.DIALOG_MESSAGE_DELETE_CONFIRM_CANCEL,
text: STRINGS.LABELS.CHANNEL_MESSAGE_DELETE_CONFIRM_CANCEL,
},
{
text: STRINGS.GROUP_CHANNEL.DIALOG_MESSAGE_DELETE_CONFIRM_OK,
text: STRINGS.LABELS.CHANNEL_MESSAGE_DELETE_CONFIRM_OK,
style: 'destructive',
onPress: () => {
deleteMessage()
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,121 @@
import React from 'react';
import { Pressable, PressableProps, View } from 'react-native';

import { Text, createStyleSheet } from '@sendbird/uikit-react-native-foundation';
import { calcMessageGrouping, conditionChaining, useIIFE } from '@sendbird/uikit-utils';

import { DEFAULT_LONG_PRESS_DELAY } from '../../constants';
import type { OpenChannelProps } from '../../domain/openChannel/types';
import MessageContainer from '../MessageRenderer/MessageContainer';
import MessageDateSeparator from '../MessageRenderer/MessageDateSeparator';
import MessageIncomingAvatar from '../MessageRenderer/MessageIncomingAvatar';
import MessageIncomingSenderName from '../MessageRenderer/MessageIncomingSenderName';
import MessageTime from '../MessageRenderer/MessageTime';

const OpenChannelMessageRenderer: OpenChannelProps['Fragment']['renderMessage'] = ({
message,
onPress,
onLongPress,
...rest
}) => {
const { groupWithPrev, groupWithNext } = calcMessageGrouping(
Boolean(rest.enableMessageGrouping),
message,
rest.prevMessage,
rest.nextMessage,
);

const messageComponent = useIIFE(() => {
const pressableProps: PressableProps = {
style: styles.msgContainer,
disabled: !onPress && !onLongPress,
onPress,
onLongPress,
delayLongPress: DEFAULT_LONG_PRESS_DELAY,
};

// const messageProps = { ...rest, groupWithNext, groupWithPrev };

if (message.isUserMessage()) {
return <Pressable {...pressableProps}>{() => <Text>{'User message_' + message.message}</Text>}</Pressable>;
}

if (message.isFileMessage()) {
return <Pressable {...pressableProps}>{() => <Text>{'File message'}</Text>}</Pressable>;
}

if (message.isAdminMessage()) {
return <Text>{'Admin message'}</Text>;
}

return <Pressable {...pressableProps}>{() => <Text>{'Unknown message'}</Text>}</Pressable>;
});

return (
<MessageContainer>
<MessageDateSeparator message={message} prevMessage={rest.prevMessage} />
<View
style={[
conditionChaining(
[groupWithNext, Boolean(rest.nextMessage)],
[styles.chatGroup, styles.chatNonGroup, styles.chatLastMessage],
),
]}
>
<MessageIncomingAvatar message={message} grouping={groupWithPrev} />
<View style={styles.bubbleContainer}>
<MessageIncomingSenderName message={message} grouping={groupWithPrev} />
<View style={styles.bubbleWrapper}>
{messageComponent}
<MessageTime message={message} grouping={groupWithPrev} style={styles.timeIncoming} />
</View>
</View>
</View>
</MessageContainer>
);
};

const styles = createStyleSheet({
chatIncoming: {
flexDirection: 'row',
justifyContent: 'flex-start',
alignItems: 'flex-end',
},
chatOutgoing: {
flexDirection: 'row',
justifyContent: 'flex-end',
alignItems: 'flex-end',
},
timeIncoming: {
marginLeft: 4,
},
timeOutgoing: {
marginRight: 4,
},
chatGroup: {
marginBottom: 2,
},
chatNonGroup: {
marginBottom: 16,
},
chatLastMessage: {
marginBottom: 16,
},
msgContainer: {
maxWidth: 240,
},
bubbleContainer: {
flexShrink: 1,
},
bubbleWrapper: {
flexDirection: 'row',
alignItems: 'flex-end',
},
outgoingContainer: {
flexDirection: 'row',
alignItems: 'flex-end',
justifyContent: 'center',
},
});

export default React.memo(OpenChannelMessageRenderer);
Loading

0 comments on commit 6250770

Please sign in to comment.