bigcapital/client/src/containers/ExchangeRates/ExchangeRateTable.js

import React, { useCallback, useMemo, useState, useEffect } from 'react';
import Icon from 'components/Icon';
import DialogConnect from 'connectors/Dialog.connector';
import DataTable from 'components/DataTable';
import { Button, Popover, Menu, MenuItem, Position,Intent } from '@blueprintjs/core';
import { FormattedMessage as T, useIntl } from 'react-intl';
import LoadingIndicator from 'components/LoadingIndicator';
import withExchangeRatesActions from 'containers/ExchangeRates/withExchangeRatesActions';
import withExchangeRates from 'containers/ExchangeRates/withExchangeRates';

import { compose } from 'utils';

function ExchangeRateTable({
  // #withExchangeRates
  exchangeRatesList,
  exchangeRatesLoading,
  // #withDialog.
  openDialog,

  // own properties
  loading,
  onFetchData,
  onDeleteExchangeRate,
  onEditExchangeRate,
  onSelectedRowsChange,
}) {
  const [initialMount, setInitialMount] = useState(false);
  const { formatMessage } = useIntl();

  const handelEditExchangeRate = (exchange_rate) => () => {
    openDialog('exchangeRate-form', { action: 'edit', id: exchange_rate.id });
    onEditExchangeRate(exchange_rate.id);
  };

  const handleDeleteExchangeRate = (exchange_rate) => () => {
    onDeleteExchangeRate(exchange_rate);
  };

  const actionMenuList = useCallback(
    (ExchangeRate) => (
      <Menu>
        <MenuItem
          text={<T id={'edit_exchange_rate'} />}
          onClick={handelEditExchangeRate(ExchangeRate)}
        />
        <MenuItem
          text={<T id={'delete_exchange_rate'} />}
          intent={Intent.DANGER}
          onClick={handleDeleteExchangeRate(ExchangeRate)}
        />
      </Menu>
    ),
    [handelEditExchangeRate, handleDeleteExchangeRate],
  );

  const columns = useMemo(
    () => [
      {
        id: 'date',
        Header: formatMessage({ id: 'date' }),
        // accessor: 'date',
        width: 150,
      },
      {
        id: 'currency_code',
        Header: formatMessage({ id: 'currency_code' }),
        accessor: 'currency_code',
        className: 'currency_code',
        width: 150,
      },
      {
        id: 'exchange_rate',
        Header: formatMessage({ id: 'exchange_rate' }),
        accessor: 'exchange_rate',
        className: 'exchange_rate',
        width: 150,
      },
      {
        id: 'actions',
        Header: '',
        Cell: ({ cell }) => (
          <Popover
            content={actionMenuList(cell.row.original)}
            position={Position.RIGHT_BOTTOM}
          >
            <Button icon={<Icon icon="ellipsis-h" />} />
          </Popover>
        ),
        className: 'actions',
        width: 50,
        disableResizing: false,
      },
    ],
    [actionMenuList, formatMessage],
  );

  const selectionColumn = useMemo(
    () => ({
      minWidth: 42,
      width: 42,
      maxWidth: 42,
    }),
    [],
  );

  const handelFetchData = useCallback(
    (...params) => {
      onFetchData && onFetchData(...params);
    },
    [onFetchData],
  );

  const handelSelectedRowsChange = useCallback(
    (selectRows) => {
      onSelectedRowsChange &&
        onSelectedRowsChange(selectRows.map((c) => c.original));
    },
    [onSelectedRowsChange],
  );

  return (
    <LoadingIndicator loading={loading} mount={false}>
    <DataTable
      columns={columns}
      data={exchangeRatesList}
      onFetchData={handelFetchData}
      loading={exchangeRatesLoading && !initialMount}
      manualSortBy={true}
      selectionColumn={selectionColumn}
      expandable={true}
      treeGraph={true}
      onSelectedRowsChange={handelSelectedRowsChange}
      spinnerProps={{ size: 30 }}
    />
    </LoadingIndicator>
  );
}

export default compose(
  DialogConnect,
  withExchangeRatesActions,
  withExchangeRates(({ exchangeRatesList, exchangeRatesLoading }) => ({
    exchangeRatesList,
    exchangeRatesLoading,
  })),
)(ExchangeRateTable);