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

import React, { useCallback } from 'react';

import { compose } from 'utils';
import { DataTable } from 'components';
import { useResendInvitation } from 'hooks/query';
import AppToaster from 'components/AppToaster';

import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';

import withDialogActions from 'containers/Dialog/withDialogActions';
import withAlertActions from 'containers/Alert/withAlertActions';

import { ActionsMenu, useUsersListColumns } from './components';
import { useUsersListContext } from './UsersProvider';
import { Intent } from '@blueprintjs/core';

/**
 * Users datatable.
 */
function UsersDataTable({
  // #withDialogActions
  openDialog,

  // #withAlertActions
  openAlert,
}) {
  // Handle edit user action.
  const handleEditUserAction = useCallback(
    (user) => {
      openDialog('user-form', { action: 'edit', userId: user.id });
    },
    [openDialog],
  );
  // Handle inactivate user action.
  const handleInactivateUser = useCallback(
    (user) => {
      openAlert('user-inactivate', { userId: user.id });
    },
    [openAlert]
  );
  // Handle activate user action.
  const handleActivateuser = useCallback(
    (user) => {
      openAlert('user-activate', { userId: user.id });
    },
    [openAlert]
  );
  // Handle delete user action.
  const handleDeleteUser = useCallback(
    (user) => {
      openAlert('user-delete', { userId: user.id });
    },
    [openAlert]
  );

  const { mutateAsync: resendInviation } = useResendInvitation();

  const handleResendInvitation = useCallback(
    (user) => {
      resendInviation(user.id).then(() => {
        AppToaster.show({
          message: 'User invitation has been re-sent to the user.',
          intent: Intent.SUCCESS
        });
      }).catch(({ response: { data: { errors } } }) => {
        if (errors.find(e => e.type === 'USER_RECENTLY_INVITED')) {
          AppToaster.show({
            message: 'This person was recently invited. No need to invite them again just yet.',
            intent: Intent.DANGER
          });
        }
      });
    }
  )
  // Users list columns.
  const columns = useUsersListColumns();

  // Users list context.
  const { users, isUsersLoading, isUsersFetching } = useUsersListContext();

  return (
    <DataTable
      columns={columns}
      data={users}
      loading={isUsersLoading}
      headerLoading={isUsersLoading}
      progressBarLoading={isUsersFetching}
      TableLoadingRenderer={TableSkeletonRows}
      noInitialFetch={true}
      ContextMenu={ActionsMenu}
      payload={{
        onEdit: handleEditUserAction,
        onActivate: handleActivateuser,
        onInactivate: handleInactivateUser,
        onDelete: handleDeleteUser,
        onResendInvitation: handleResendInvitation
      }}
    />
  );
}

export default compose(
  withDialogActions,
  withAlertActions
)(UsersDataTable);