verdnatura-chat/app/views/CreateDiscussionView/SelectUsers.tsx

99 lines
2.7 KiB
TypeScript
Raw Normal View History

import React, { useState } from 'react';
import { Text } from 'react-native';
import { BLOCK_CONTEXT } from '@rocket.chat/ui-kit';
import { Q } from '@nozbe/watermelondb';
import debounce from '../../utils/debounce';
import { avatarURL } from '../../utils/avatar';
import RocketChat from '../../lib/rocketchat';
import database from '../../lib/database';
import I18n from '../../i18n';
import { MultiSelect } from '../../containers/UIKit/MultiSelect';
import { themes } from '../../constants/colors';
import styles from './styles';
import { ICreateDiscussionViewSelectUsers } from './interfaces';
import { SubscriptionType } from '../../definitions/ISubscription';
interface IUser {
name: string;
username: string;
}
const SelectUsers = ({
server,
token,
userId,
selected,
onUserSelect,
blockUnauthenticatedAccess,
serverVersion,
theme
}: ICreateDiscussionViewSelectUsers): JSX.Element => {
const [users, setUsers] = useState<any[]>([]);
const getUsers = debounce(async (keyword = '') => {
try {
const db = database.active;
const usersCollection = db.get('users');
const res = await RocketChat.search({ text: keyword, filterRooms: false });
let items = [
...users.filter((u: IUser) => selected.includes(u.name)),
...res.filter((r: IUser) => !users.find((u: IUser) => u.name === r.name))
];
const records = await usersCollection.query(Q.where('username', Q.oneOf(items.map(u => u.name)))).fetch();
items = items.map(item => {
const index = records.findIndex((r: IUser) => r.username === item.name);
if (index > -1) {
const record = records[index];
return {
uids: item.uids,
usernames: item.usernames,
prid: item.prid,
fname: item.fname,
name: item.name,
avatarETag: record.avatarETag
};
}
return item;
});
setUsers(items);
} catch {
// do nothing
}
}, 300);
const getAvatar = (item: any) =>
avatarURL({
text: RocketChat.getRoomAvatar(item),
type: SubscriptionType.DIRECT,
user: { id: userId, token },
server,
avatarETag: item.avatarETag,
blockUnauthenticatedAccess,
serverVersion
});
return (
<>
<Text style={[styles.label, { color: themes[theme].titleText }]}>{I18n.t('Invite_users')}</Text>
<MultiSelect
theme={theme}
inputStyle={styles.inputStyle}
onSearch={getUsers}
onChange={onUserSelect}
options={users.map((user: IUser) => ({
value: user.name,
text: { text: RocketChat.getRoomTitle(user) },
imageUrl: getAvatar(user)
}))}
onClose={() => setUsers(users.filter((u: IUser) => selected.includes(u.name)))}
placeholder={{ text: `${I18n.t('Select_Users')}...` }}
context={BLOCK_CONTEXT.FORM}
multiselect
/>
</>
);
};
export default SelectUsers;