re-structure to monorepo.

packages/webapp/src/containers/ExchangeRates/ExchangeRateActionsBar.tsx

@@ -0,0 +1,147 @@
+// @ts-nocheck
+import React, { useCallback, useState, useMemo } from 'react';
+import intl from 'react-intl-universal';
+import classNames from 'classnames';
+import {
+  NavbarGroup,
+  NavbarDivider,
+  Button,
+  Classes,
+  Intent,
+  Popover,
+  Position,
+  PopoverInteractionKind,
+  Alignment,
+} from '@blueprintjs/core';
+import {
+  Icon,
+  If,
+  DashboardActionsBar,
+  FormattedMessage as T,
+} from '@/components';
+import { connect } from 'react-redux';
+
+import { useRefreshExchangeRate } from '@/hooks/query/exchangeRates';
+import withDialogActions from '@/containers/Dialog/withDialogActions';
+import withResourceDetail from '@/containers/Resources/withResourceDetails';
+import withExchangeRatesActions from './withExchangeRatesActions';
+import { compose } from '@/utils';
+
+/**
+ * Exchange rate actions bar.
+ */
+function ExchangeRateActionsBar({
+  // #withDialogActions.
+  openDialog,
+
+  // #withResourceDetail
+  resourceFields,
+
+  //#withExchangeRatesActions
+  addExchangeRatesTableQueries,
+
+  // #ownProps
+  selectedRows = [],
+  onDeleteExchangeRate,
+  onFilterChanged,
+  onBulkDelete,
+}) {
+  const [filterCount, setFilterCount] = useState(0);
+
+  const onClickNewExchangeRate = () => {
+    openDialog('exchangeRate-form', {});
+  };
+
+  // Exchange rates refresh action.
+  const { refresh } = useRefreshExchangeRate();
+
+  // Handle click a refresh sale estimates
+  const handleRefreshBtnClick = () => {
+    refresh();
+  };
+
+  const hasSelectedRows = useMemo(
+    () => selectedRows.length > 0,
+    [selectedRows],
+  );
+
+  const handelBulkDelete = useCallback(() => {
+    onBulkDelete && onBulkDelete(selectedRows.map((r) => r.id));
+  }, [onBulkDelete, selectedRows]);
+
+  return (
+    <DashboardActionsBar>
+      <NavbarGroup>
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon="plus" />}
+          text={<T id={'new_exchange_rate'} />}
+          onClick={onClickNewExchangeRate}
+        />
+        <NavbarDivider />
+
+        <Popover
+          minimal={true}
+          // content={filterDropdown}
+          interactionKind={PopoverInteractionKind.CLICK}
+          position={Position.BOTTOM_LEFT}
+        >
+          <Button
+            className={classNames(Classes.MINIMAL, 'button--filter')}
+            text={
+              filterCount <= 0 ? (
+                <T id={'filter'} />
+              ) : (
+                `${filterCount} ${intl.get('filters_applied')}`
+              )
+            }
+            icon={<Icon icon="filter-16" iconSize={16} />}
+          />
+        </Popover>
+
+        <If condition={hasSelectedRows}>
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon="trash-16" iconSize={16} />}
+            text={<T id={'delete'} />}
+            intent={Intent.DANGER}
+            onClick={handelBulkDelete}
+          />
+        </If>
+
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon="file-import-16" iconSize={16} />}
+          text={<T id={'import'} />}
+        />
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon="file-export-16" iconSize={16} />}
+          text={<T id={'export'} />}
+        />
+      </NavbarGroup>
+      <NavbarGroup align={Alignment.RIGHT}>
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon="refresh-16" iconSize={14} />}
+          onClick={handleRefreshBtnClick}
+        />
+      </NavbarGroup>
+    </DashboardActionsBar>
+  );
+}
+
+const mapStateToProps = (state, props) => ({
+  resourceName: '',
+});
+
+const withExchangeRateActionBar = connect(mapStateToProps);
+
+export default compose(
+  withExchangeRateActionBar,
+  withDialogActions,
+  withResourceDetail(({ resourceFields }) => ({
+    resourceFields,
+  })),
+  withExchangeRatesActions,
+)(ExchangeRateActionsBar);

packages/webapp/src/containers/ExchangeRates/ExchangeRateTable.tsx

@@ -0,0 +1,110 @@
+// @ts-nocheck
+import React, { useCallback } from 'react';
+
+import {
+  DataTable,
+  TableSkeletonRows,
+  TableSkeletonHeader,
+} from '@/components';
+
+import { useExchangeRatesContext } from './ExchangeRatesProvider';
+import { useExchangeRatesTableColumns, ActionMenuList } from './components';
+
+import withExchangeRates from './withExchangeRates';
+import withExchangeRatesActions from './withExchangeRatesActions';
+
+import withDialogActions from '@/containers/Dialog/withDialogActions';
+import withAlertActions from '@/containers/Alert/withAlertActions';
+import { compose } from '@/utils';
+
+/**
+ * Exchange rates table.
+ */
+function ExchangeRateTable({
+  // #ownProps
+  tableProps,
+
+  // #withDialogActions.
+  openDialog,
+
+  // #withAlertActions
+  openAlert,
+
+  // #withExchangeRatesActions
+  setExchangeRateTableState,
+
+  // #withExchangeRates
+  exchangeRatesTableState,
+}) {
+  const {
+    isExchangeRatesFetching,
+    isExchangeRatesLoading,
+
+    exchangesRates,
+    pagination,
+  } = useExchangeRatesContext();
+
+  // Table columns.
+  const columns = useExchangeRatesTableColumns();
+
+  // Handle delete exchange rate.
+  const handleDeleteExchangeRate = ({ id }) => {
+    openAlert('exchange-rate-delete', { exchangeRateId: id });
+  };
+
+  // Handle Edit exchange rate.
+  const handelEditExchangeRate = (exchangeRate) => {
+    openDialog('exchangeRate-form', {
+      action: 'edit',
+      exchangeRate: exchangeRate,
+    });
+  };
+
+  const handleFetchData = useCallback(
+    ({ pageSize, pageIndex, sortBy }) => {
+      setExchangeRateTableState({
+        pageIndex,
+        pageSize,
+        sortBy,
+      });
+    },
+    [setExchangeRateTableState],
+  );
+
+  return (
+    <DataTable
+      noInitialFetch={true}
+      columns={columns}
+      data={exchangesRates}
+      initialState={exchangeRatesTableState}
+      loading={isExchangeRatesLoading}
+      headerLoading={isExchangeRatesLoading}
+      progressBarLoading={isExchangeRatesFetching}
+      selectionColumn={true}
+      expandable={true}
+      sticky={true}
+      manualSortBy={true}
+      onFetchData={handleFetchData}
+      pagination={true}
+      manualPagination={true}
+      pagesCount={pagination.pagesCount}
+      TableLoadingRenderer={TableSkeletonRows}
+      TableHeaderSkeletonRenderer={TableSkeletonHeader}
+      ContextMenu={ActionMenuList}
+      payload={{
+        onDeleteExchangeRate: handleDeleteExchangeRate,
+        onEditExchangeRate: handelEditExchangeRate,
+      }}
+      {...tableProps}
+    />
+  );
+}
+
+export default compose(
+  withDialogActions,
+  withAlertActions,
+  withExchangeRates(({ exchangeRatesTableState }) => ({
+    exchangeRatesTableState,
+  })),
+  withExchangeRatesActions,
+)(ExchangeRateTable);

packages/webapp/src/containers/ExchangeRates/ExchangeRatesAlerts.tsx

@@ -0,0 +1,10 @@
+// @ts-nocheck
+import React from 'react';
+
+const ExchangeRateDeleteAlert = React.lazy(
+  () => import('@/containers/Alerts/ExchangeRates/ExchangeRateDeleteAlert'),
+);
+
+export default [
+  { name: 'exchange-rate-delete', component: ExchangeRateDeleteAlert },
+];

packages/webapp/src/containers/ExchangeRates/ExchangeRatesList.tsx

@@ -0,0 +1,38 @@
+// @ts-nocheck
+import React from 'react';
+
+import { DashboardContentTable, DashboardPageContent } from '@/components';
+
+import ExchangeRateTable from './ExchangeRateTable';
+import ExchangeRateActionsBar from './ExchangeRateActionsBar';
+
+import { ExchangeRatesProvider } from './ExchangeRatesProvider';
+import { transformTableStateToQuery, compose } from '@/utils';
+import withExchangeRates from './withExchangeRates';
+
+/**
+ * Exchange Rates list.
+ */
+function ExchangeRatesList({
+  // #withExchangeRates
+  exchangeRatesTableState,
+}) {
+  return (
+    <ExchangeRatesProvider
+      query={transformTableStateToQuery(exchangeRatesTableState)}
+    >
+      <ExchangeRateActionsBar />
+
+      <DashboardPageContent>
+        <DashboardContentTable>
+          <ExchangeRateTable />
+        </DashboardContentTable>
+      </DashboardPageContent>
+    </ExchangeRatesProvider>
+  );
+}
+export default compose(
+  withExchangeRates(({ exchangeRatesTableState }) => ({
+    exchangeRatesTableState,
+  })),
+)(ExchangeRatesList);

packages/webapp/src/containers/ExchangeRates/ExchangeRatesProvider.tsx

@@ -0,0 +1,42 @@
+// @ts-nocheck
+import React, { createContext } from 'react';
+import { transformTableQueryToParams } from '@/utils';
+
+import { DashboardInsider } from '@/components';
+import { useExchangeRates } from '@/hooks/query';
+
+const ExchangesRatesContext = createContext();
+
+/**
+ * Exchanges rates list provider.
+ */
+function ExchangeRatesProvider({ query, ...props }) {
+  const {
+    data: { exchangesRates, pagination, filterMeta },
+    isFetching: isExchangeRatesFetching,
+    isLoading: isExchangeRatesLoading,
+  } = useExchangeRates(
+    {
+      ...transformTableQueryToParams(query),
+    },
+    { keepPreviousData: true },
+  );
+
+  const state = {
+    isExchangeRatesFetching,
+    isExchangeRatesLoading,
+
+    exchangesRates,
+    pagination,
+  };
+
+  return (
+    <DashboardInsider name={'exchange-rate'}>
+      <ExchangesRatesContext.Provider value={state} {...props} />
+    </DashboardInsider>
+  );
+}
+
+const useExchangeRatesContext = () => React.useContext(ExchangesRatesContext);
+
+export { ExchangeRatesProvider, useExchangeRatesContext };

packages/webapp/src/containers/ExchangeRates/components.tsx

@@ -0,0 +1,91 @@
+// @ts-nocheck
+import React, { useMemo } from 'react';
+import moment from 'moment';
+import intl from 'react-intl-universal';
+import {
+  Menu,
+  Popover,
+  Button,
+  Position,
+  MenuItem,
+  MenuDivider,
+  Intent,
+} from '@blueprintjs/core';
+import { Icon, Money } from '@/components';
+import { safeCallback } from '@/utils';
+
+/**
+ * Row actions menu list.
+ */
+export function ActionMenuList({
+  row: { original },
+  payload: { onEditExchangeRate, onDeleteExchangeRate },
+}) {
+  return (
+    <Menu>
+      <MenuItem
+        icon={<Icon icon="pen-18" />}
+        text={intl.get('edit_exchange_rate')}
+        onClick={safeCallback(onEditExchangeRate, original)}
+      />
+      <MenuDivider />
+      <MenuItem
+        text={intl.get('delete_exchange_rate')}
+        intent={Intent.DANGER}
+        onClick={safeCallback(onDeleteExchangeRate, original)}
+        icon={<Icon icon="trash-16" iconSize={16} />}
+      />
+    </Menu>
+  );
+}
+
+/**
+ * Table actions cell.
+ */
+export function TableActionsCell(props) {
+  return (
+    <Popover
+      content={<ActionMenuList {...props} />}
+      position={Position.RIGHT_TOP}
+    >
+      <Button icon={<Icon icon="more-h-16" iconSize={16} />} />
+    </Popover>
+  );
+}
+
+export function useExchangeRatesTableColumns() {
+  return useMemo(
+    () => [
+      {
+        id: 'date',
+        Header: intl.get('date'),
+        accessor: (r) => moment(r.date).format('YYYY MMM DD'),
+        width: 150,
+      },
+      {
+        id: 'currency_code',
+        Header: intl.get('currency_code'),
+        accessor: 'currency_code',
+        className: 'currency_code',
+        width: 150,
+      },
+      {
+        id: 'exchange_rate',
+        Header: intl.get('exchange_rate'),
+        accessor: (r) => (
+          <Money amount={r.exchange_rate} currency={r.currency_code} />
+        ),
+        className: 'exchange_rate',
+        width: 150,
+      },
+      {
+        id: 'actions',
+        Header: '',
+        Cell: TableActionsCell,
+        className: 'actions',
+        width: 50,
+      },
+    ],
+    [],
+  );
+}

packages/webapp/src/containers/ExchangeRates/withExchangeRateDetail.tsx

@@ -0,0 +1,9 @@
+// @ts-nocheck
+import { connect } from 'react-redux';
+import { getExchangeRateById } from '@/store/ExchangeRate/exchange.selector';
+
+const mapStateToProps = (state, props) => ({
+  exchangeRate: getExchangeRateById(state, props),
+});
+
+export default connect(mapStateToProps);

packages/webapp/src/containers/ExchangeRates/withExchangeRates.tsx

@@ -0,0 +1,16 @@
+// @ts-nocheck
+import { connect } from 'react-redux';
+import { getExchangeRatesTableStateFactory } from '@/store/ExchangeRate/exchange.selector';
+
+export default (mapState) => {
+  const getExchangeRatesTableState = getExchangeRatesTableStateFactory();
+  
+  const mapStateToProps = (state, props) => {
+    const mapped = {
+      exchangeRatesTableState: getExchangeRatesTableState(state, props),
+    };
+    return mapState ? mapState(mapped, state, props) : mapped;
+  };
+
+  return connect(mapStateToProps);
+};

packages/webapp/src/containers/ExchangeRates/withExchangeRatesActions.tsx

@@ -0,0 +1,10 @@
+// @ts-nocheck
+import { connect } from 'react-redux';
+import { setExchangeRateTableState } from '@/store/ExchangeRate/exchange.actions';
+
+export const mapDispatchToProps = (dispatch) => ({
+  setExchangeRateTableState: (queries) =>
+    dispatch(setExchangeRateTableState(queries)),
+});
+
+export default connect(null, mapDispatchToProps);