/
createGroupChannelMutedMembersFragment.tsx
103 lines (92 loc) · 3.69 KB
/
createGroupChannelMutedMembersFragment.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
import React from 'react';
import { useChannelHandler, useUserList } from '@sendbird/uikit-chat-hooks';
import { useActionMenu } from '@sendbird/uikit-react-native-foundation';
import { NOOP, isDifferentChannel, useFreshCallback, useUniqHandlerId } from '@sendbird/uikit-utils';
import StatusComposition from '../components/StatusComposition';
import UserActionBar from '../components/UserActionBar';
import { createGroupChannelMutedMembersModule } from '../domain/groupChannelMutedMembers';
import type {
GroupChannelMutedMembersFragment,
GroupChannelMutedMembersModule,
} from '../domain/groupChannelMutedMembers/types';
import { useLocalization, useSendbirdChat } from '../hooks/useContext';
const createGroupChannelMutedMembersFragment = (
initModule?: Partial<GroupChannelMutedMembersModule>,
): GroupChannelMutedMembersFragment => {
const GroupChannelMutedMembersModule = createGroupChannelMutedMembersModule(initModule);
return ({
onPressHeaderLeft = NOOP,
channel,
renderUser,
queryCreator = () => channel.createMutedUserListQuery({ limit: 20 }),
}) => {
const handlerId = useUniqHandlerId('GroupChannelMutedMembersFragment');
const { STRINGS } = useLocalization();
const { sdk, currentUser } = useSendbirdChat();
const { openMenu } = useActionMenu();
const { users, deleteUser, upsertUser, loading, refresh, error, next } = useUserList(sdk, { queryCreator });
useChannelHandler(sdk, handlerId, {
onUserMuted(eventChannel, user) {
if (isDifferentChannel(eventChannel, channel)) return;
upsertUser(user);
},
onUserUnmuted(eventChannel, user) {
if (isDifferentChannel(eventChannel, channel)) return;
deleteUser(user.userId);
},
onUserLeft(eventChannel, user) {
if (isDifferentChannel(eventChannel, channel)) return;
deleteUser(user.userId);
},
onUserBanned(eventChannel, user) {
if (isDifferentChannel(eventChannel, channel)) return;
deleteUser(user.userId);
},
});
const _renderUser: NonNullable<typeof renderUser> = useFreshCallback((props) => {
if (renderUser) return renderUser(props);
const { user } = props;
return (
<UserActionBar
muted
uri={user.profileUrl}
name={
(user.nickname || STRINGS.LABELS.USER_NO_NAME) +
(user.userId === currentUser?.userId ? STRINGS.LABELS.USER_BAR_ME_POSTFIX : '')
}
disabled={user.userId === currentUser?.userId}
onPressActionMenu={() => {
openMenu({
title: user.nickname || STRINGS.LABELS.USER_NO_NAME,
menuItems: [
{
title: STRINGS.LABELS.UNMUTE,
onPress: () => channel.unmuteUser(user).then(() => deleteUser(user.userId)),
},
],
});
}}
/>
);
});
return (
<GroupChannelMutedMembersModule.Provider channel={channel}>
<GroupChannelMutedMembersModule.Header onPressHeaderLeft={onPressHeaderLeft} />
<StatusComposition
loading={loading}
LoadingComponent={<GroupChannelMutedMembersModule.StatusLoading />}
error={Boolean(error)}
ErrorComponent={<GroupChannelMutedMembersModule.StatusError onPressRetry={refresh} />}
>
<GroupChannelMutedMembersModule.List
mutedMembers={users}
onLoadNext={next}
renderUser={_renderUser}
ListEmptyComponent={<GroupChannelMutedMembersModule.StatusEmpty />}
/>
</StatusComposition>
</GroupChannelMutedMembersModule.Provider>
);
};
};
export default createGroupChannelMutedMembersFragment;