node-red-contrib-chatbot
Version:
REDBot a Chat bot for a full featured chat bot for Telegram, Facebook Messenger and Slack. Almost no coding skills required
217 lines (199 loc) • 6.43 kB
JavaScript
import React, { useState, useRef } from 'react';
import { Table, Icon, ButtonGroup, Button, ButtonToolbar } from 'rsuite';
import gql from 'graphql-tag';
const { Column, HeaderCell, Cell } = Table;
import PageContainer from '../../../src/components/page-container';
import Breadcrumbs from '../../../src/components/breadcrumbs';
import Language from '../../../src/components/language';
import SmartDate from '../../../src/components/smart-date';
import CustomTable from '../../../src/components/table';
import { Input } from '../../../src/components/table-filters';
import ContextModal from '../../../src/components/context-modal';
import useCurrentUser from '../../../src/hooks/current-user';
import useMCContext from '../../../src/hooks/mc-context';
import ExportButton from '../../../src/components/export-button';
import '../styles/users.scss';
import useUsers from '../hooks/users';
import useMergeUser from '../hooks/merge-user';
import ModalUser from '../views/modal-user';
const USERS = gql`
query ($limit: Int, $offset: Int, $order: String, $username: String, $userId: String, $chatbotId: String) {
counters {
rows: users {
count(username: $username, userId: $userId, chatbotId: $chatbotId)
}
}
rows: users(limit: $limit, offset: $offset, order: $order, username: $username, userId: $userId, chatbotId: $chatbotId) {
id,
username,
userId,
first_name,
last_name,
username,
language,
payload,
createdAt,
email,
chatIds {
id,
transport,
chatId
}
}
}
`;
const Users = () => {
const table = useRef();
const [ user, setUser ] = useState(null);
const [ context, setContext ] = useState(null);
const { saving, error, deleteUser, editUser } = useUsers();
const { can } = useCurrentUser();
const { state } = useMCContext();
const { mergeModal, mergeUser } = useMergeUser({
onComplete: () => table.current.refetch()
});
const disabled = saving;
return (
<PageContainer className="page-users">
<Breadcrumbs pages={['Users']}/>
{user != null && (
<ModalUser
user={user}
error={error}
disabled={disabled}
onCancel={() => setUser(null)}
onSubmit={async user => {
await editUser({ variables: { id: user.id, user }})
setUser(null);
table.current.refetch();
}}
/>)}
{context != null && (
<ContextModal
user={context}
onSubmit={() => setContext(null)}
onCancel={() => setContext(null)}
/>
)}
{mergeModal}
<CustomTable
ref={table}
query={USERS}
height={600}
labels={{
empty: 'No users yet'
}}
initialSortField="createdAt"
initialSortDirection="desc"
variables={{ chatbotId: state.chatbotId }}
toolbar={(
<ButtonToolbar>
<ExportButton
table="users"
disabled={disabled}
/>
<Button appearance="primary" onClick={() => table.current.refetch()}>Refresh</Button>
</ButtonToolbar>
)}
filtersSchema={[
{
name: 'userId',
label: 'userId',
control: Input
},
{
name: 'username',
label: 'Username',
control: Input
}
]}
autoHeight
>
<Column width={60} align="center">
<HeaderCell>Id</HeaderCell>
<Cell dataKey="id" />
</Column>
<Column width={100} resizable>
<HeaderCell>userId</HeaderCell>
<Cell>{({ userId }) => <span className="cell-type-id">{userId}</span>}</Cell>
</Column>
<Column width={140} resizable>
<HeaderCell>Subscribed</HeaderCell>
<Cell>
{({ createdAt }) => <SmartDate date={createdAt} />}
</Cell>
</Column>
<Column width={150} resizable>
<HeaderCell>Username</HeaderCell>
<Cell dataKey="username"/>
</Column>
<Column width={200} resizable>
<HeaderCell>First Name</HeaderCell>
<Cell dataKey="first_name"/>
</Column>
<Column width={200} resizable>
<HeaderCell>Last Name</HeaderCell>
<Cell dataKey="last_name"/>
</Column>
<Column width={50} resizable>
<HeaderCell>Language</HeaderCell>
<Cell>
{({ language }) => <Language>{language}</Language>}
</Cell>
</Column>
<Column width={300} flexGrow={1}>
<HeaderCell>Email</HeaderCell>
<Cell dataKey="email"/>
</Column>
<Column width={160}>
<HeaderCell>Action</HeaderCell>
<Cell>
{user => (
<ButtonGroup>
{can('users.context.edit') && (
<Button
size="xs"
onClick={() => setContext(user)}
>
<Icon icon="database" />
</Button>
)}
{can('users.edit') && (
<Button
size="xs"
onClick={() => setUser(user)}
>
<Icon icon="edit2" />
</Button>
)}
{user.chatIds.length !== 0 && can('users.merge') && (
<Button
size="xs"
onClick={() => mergeUser(user)}
>
<Icon icon="user-plus"/>
</Button>
)}
{can('users.edit') && (
<Button
size="xs"
onClick={() => {
const name = [user.first_name, user.last_name].join(' ');
if (confirm(`Delete user${!_.isEmpty(name.trim()) ? ` "${name}"` : ''} (${user.userId})?`)) {
deleteUser({ variables: { id: user.id }})
.then(table.current.refetch);
}
}}
>
<Icon icon="trash" />
</Button>
)}
</ButtonGroup>
)}
</Cell>
</Column>
</CustomTable>
</PageContainer>
);
};
export default Users;