fix(preferences): fix preferences users page.

client/src/containers/Preferences/Users/UsersDataTable.js

@@ -1,178 +1,78 @@
-import React, { useCallback, useState, useMemo } from 'react';
-import {
-  Intent,
-  Button,
-  Popover,
-  Menu,
-  MenuDivider,
-  Tag,
-  MenuItem,
-  Position,
-} from '@blueprintjs/core';
-import { withRouter } from 'react-router';
-import { snakeCase } from 'lodash';
+import React, { useCallback } from 'react';
 
-import { FormattedMessage as T, useIntl } from 'react-intl';
-import { compose, firstLettersArgs } from 'utils';
-
-import { DataTable, Icon, If } from 'components';
+import { compose } from 'utils';
+import { DataTable } from 'components';
 
 import withDialogActions from 'containers/Dialog/withDialogActions';
-import withUsers from 'containers/Users/withUsers';
+import withAlertActions from 'containers/Alert/withAlertActions';
 
-const AvatarCell = (row) => {
-  return <span className={'avatar'}>{ firstLettersArgs(row.email) }</span>;
-}
+import { ActionsMenu, useUsersListColumns } from './components';
+import { useUsersListContext } from './UsersProvider';
 
+/**
+ * Users datatable.
+ */
 function UsersDataTable({
   // #withDialogActions
   openDialog,
 
-  // #withUsers
-  usersList,
-  usersLoading,
-
-  // #ownProps
-  loading,
-  onFetchData,
-  onInactiveUser,
-  onDeleteUser,
-  onSelectedRowsChange,
+  // #withAlertActions
+  openAlert,
 }) {
-  const { formatMessage } = useIntl();
-
-  const onEditUser = useCallback(
-    (user) => () => {
-      const form = Object.keys(user).reduce((obj, key) => {
-        const camelKey = snakeCase(key);
-        obj[camelKey] = user[key];
-        return obj;
-      }, {});
-
-      openDialog('userList-form', { action: 'edit', user: form });
+  // Handle edit user action.
+  const handleEditUserAction = useCallback(
+    (user) => {
+      openDialog('userList-form', { action: 'edit', userId: user.id });
     },
     [openDialog],
   );
-
-  const actionMenuList = useCallback(
-    (user) => (
-      <Menu>
-        <If condition={user.invite_accepted_at}>
-          <MenuItem
-            icon={<Icon icon="pen-18" />}
-            text={formatMessage({ id: 'edit_user' })}
-            onClick={onEditUser(user)}
-          />
-          <MenuDivider />
-
-          <MenuItem
-            text={formatMessage({ id: 'inactivate_user' })}
-            onClick={() => onInactiveUser(user)}
-          />
-        </If>
-
-        <MenuItem
-          icon={<Icon icon="trash-16" iconSize={16} />}
-          text={formatMessage({ id: 'delete_user' })}
-          onClick={() => onDeleteUser(user)}
-          intent={Intent.DANGER}
-        />
-      </Menu>
-    ),
-    [onInactiveUser, onDeleteUser, onEditUser, formatMessage],
-  );
-  const onRowContextMenu = useCallback(
-    (cell) => {
-      return actionMenuList(cell.row.original);
+  // Handle inactivate user action.
+  const handleInactivateUser = useCallback(
+    (user) => {
+      openAlert('user-inactivate', { userId: user.id });
     },
-    [actionMenuList],
+    [openAlert]
   );
-
-  const columns = useMemo(
-    () => [
-      {
-        id: 'avatar',
-        Header: '',
-        accessor: AvatarCell,
-        width: 100,
-      },
-      {
-        id: 'full_name',
-        Header: formatMessage({ id: 'full_name' }),
-        accessor: 'full_name',
-        width: 150,
-      },
-      {
-        id: 'email',
-        Header: formatMessage({ id: 'email' }),
-        accessor: 'email',
-        width: 150,
-      },
-      {
-        id: 'phone_number',
-        Header: formatMessage({ id: 'phone_number' }),
-        accessor: 'phone_number',
-        width: 120,
-      },
-      {
-        id: 'status',
-        Header: 'Status',
-        accessor: (user) =>
-          !user.invite_accepted_at ? (
-            <Tag minimal={true}>
-              <T id={'inviting'} />
-            </Tag>
-          ) : user.active ? (
-            <Tag intent={Intent.SUCCESS} minimal={true}>
-              <T id={'activate'} />
-            </Tag>
-          ) : (
-            <Tag intent={Intent.WARNING} minimal={true}>
-              <T id={'inactivate'} />
-            </Tag>
-          ),
-        width: 80,
-        className: 'status',
-      },
-      {
-        id: 'actions',
-        Header: '',
-        Cell: ({ cell }) => (
-          <Popover
-            content={actionMenuList(cell.row.original)}
-            position={Position.RIGHT_BOTTOM}
-          >
-            <Button icon={<Icon icon="more-h-16" iconSize={16} />} />
-          </Popover>
-        ),
-        className: 'actions',
-        width: 50,
-        disableResizing: true,
-      },
-    ],
-    [actionMenuList, formatMessage],
-  );
-
-  const handelDataTableFetchData = useCallback(
-    (...args) => {
-      onFetchData && onFetchData(...args);
+  // Handle activate user action.
+  const handleActivateuser = useCallback(
+    (user) => {
+      openAlert('user-activate', { userId: user.id });
     },
-    [onFetchData],
+    [openAlert]
   );
+  // Handle delete user action.
+  const handleDeleteUser = useCallback(
+    (user) => {
+      openAlert('user-delete', { userId: user.id });
+    },
+    [openAlert]
+  );
+  // Users list columns.
+  const columns = useUsersListColumns();
+
+  // Users list context.
+  const { users, isUsersLoading, isUsersFetching } = useUsersListContext();
+
   return (
     <DataTable
       columns={columns}
-      data={usersList}
-      loading={loading}
-      onFetchData={handelDataTableFetchData}
+      data={users}
+      loading={isUsersLoading}
+      headerLoading={isUsersLoading}
+      progressBarLoading={isUsersFetching}
       noInitialFetch={true}
-      rowContextMenu={onRowContextMenu}
+      ContextMenu={ActionsMenu}
+      payload={{
+        onEdit: handleEditUserAction,
+        onActivate: handleInactivateUser,
+        onInactivate: handleActivateuser,
+        onDelete: handleDeleteUser
+      }}
     />
   );
 }
 
 export default compose(
-  withRouter,
   withDialogActions,
-  withUsers(({ usersList, usersLoading }) => ({ usersList, usersLoading })),
+  withAlertActions
 )(UsersDataTable);