Merge branch 'feature/react-query' of https://github.com/abouolia/Ratteb into feature/react-query

client/src/containers/Alerts/Currencies/CurrencyDeleteAlert.js

@@ -0,0 +1,75 @@
+import React from 'react';
+import {
+  FormattedMessage as T,
+  FormattedHTMLMessage,
+  useIntl,
+} from 'react-intl';
+import { Intent, Alert } from '@blueprintjs/core';
+import { AppToaster } from 'components';
+
+import { useDeleteCurrency } from 'hooks/query';
+
+import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
+import withAlertActions from 'containers/Alert/withAlertActions';
+
+import { compose } from 'utils';
+
+/**
+ * Currency delete alerts.
+ */
+function CurrencyDeleteAlert({
+  name,
+
+  // #withAlertStoreConnect
+  isOpen,
+  payload: { currency_code },
+
+  // #withAlertActions
+  closeAlert,
+}) {
+  const { formatMessage } = useIntl();
+  const { mutateAsync: deleteCurrency, isLoading } = useDeleteCurrency();
+
+  // handle cancel delete currency alert.
+  const handleCancelCurrencyDelete = () => closeAlert(name);
+
+  // handle alert confirm delete currency.
+  const handleConfirmCurrencyDelete = () => {
+    deleteCurrency(currency_code)
+      .then((response) => {
+        AppToaster.show({
+          message: formatMessage({
+            id: 'the_currency_has_been_deleted_successfully',
+          }),
+          intent: Intent.SUCCESS,
+        });
+        closeAlert(name);
+      })
+      .catch(() => {
+        closeAlert(name);
+      });
+  };
+
+  return (
+    <Alert
+      cancelButtonText={<T id={'cancel'} />}
+      confirmButtonText={<T id={'delete'} />}
+      intent={Intent.DANGER}
+      isOpen={isOpen}
+      onCancel={handleCancelCurrencyDelete}
+      onConfirm={handleConfirmCurrencyDelete}
+      loading={isLoading}
+    >
+      <p>
+        <FormattedHTMLMessage
+          id={'once_delete_this_currency_you_will_able_to_restore_it'}
+        />
+      </p>
+    </Alert>
+  );
+}
+
+export default compose(
+  withAlertStoreConnect(),
+  withAlertActions,
+)(CurrencyDeleteAlert);

client/src/containers/Dialogs/CurrencyFormDialog/CurrencyFormDialogContent.js

@@ -11,13 +11,13 @@ import 'style/pages/Currency/CurrencyFormDialog.scss';
 function CurrencyFormDialogContent({
   // #ownProp
   action,
-  currency,
+  currencyCode,
   dialogName,
 }) {
   return (
     <CurrencyFormProvider
       isEditMode={action}
-      currency={currency}
+      currency={currencyCode}
       dialogName={dialogName}
     >
       <CurrencyForm />

client/src/containers/Dialogs/CurrencyFormDialog/index.js

@@ -13,7 +13,7 @@ const CurrencyFormDialogContent = lazy(() =>
  */
 function CurrencyFormDialog({
   dialogName,
-  payload = { action: '', id: null },
+  payload = { action: '', id: null, currency: '' },
   isOpen,
 }) {
   return (
@@ -34,7 +34,7 @@ function CurrencyFormDialog({
       <DialogSuspense>
         <CurrencyFormDialogContent
           dialogName={dialogName}
-          currencyId={payload.currencyCode}
+          currencyCode={payload.currency}
           action={payload.action}
         />
       </DialogSuspense>

client/src/containers/Preferences/Currencies/CurrenciesAlerts.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import CurrencyDeleteAlert from 'containers/Alerts/Currencies/CurrencyDeleteAlert';
+
+export default function CurrenciesAlerts() {
+  return (
+    <div>
+      <CurrencyDeleteAlert name={'currency-delete'} />
+    </div>
+  );
+}

client/src/containers/Preferences/Currencies/CurrenciesDataTable.js

@@ -1,133 +1,69 @@
-import React, { useCallback, useMemo } from 'react';
+import React, { useCallback } from 'react';
-import {
+import { compose } from 'utils';
-  Intent,
-  Button,
-  Popover,
-  Menu,
-  MenuItem,
-  Position,
-} from '@blueprintjs/core';
-import { withRouter } from 'react-router';
-import { useIntl } from 'react-intl';
-import { compose, saveInvoke } from 'utils';
 
-import { DataTable, Icon } from 'components';
+import { DataTable } from 'components';
+
+import { useCurrenciesContext } from './CurrenciesProvider';
+import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
+
+import { ActionMenuList, useCurrenciesTableColumns } from './components';
 
-import withDashboardActions from 'containers/Dashboard/withDashboardActions';
-import withCurrencies from 'containers/Currencies/withCurrencies';
 import withDialogActions from 'containers/Dialog/withDialogActions';
+import withAlertActions from 'containers/Alert/withAlertActions';
 
+/**
+ * Currencies table.
+ */
 function CurrenciesDataTable({
-  // #withCurrencies
-  currenciesList,
-  currenciesLoading,
-
   // #ownProps
-  onFetchData,
+  tableProps,
-  onDeleteCurrency,
 
   // #withDialog.
   openDialog,
-}) {
-  const { formatMessage } = useIntl();
 
+  // #withAlertActions
+  openAlert,
+}) {
+  const { currencies, isCurrenciesLoading } = useCurrenciesContext();
+
+  // Table columns.
+  const columns = useCurrenciesTableColumns();
+
+  // Handle Edit Currency.
   const handleEditCurrency = useCallback(
     (currency) => {
       openDialog('currency-form', {
         action: 'edit',
-        currencyCode: currency.currency_code,
+        currency: currency,
       });
     },
     [openDialog],
   );
 
-  const actionMenuList = useCallback(
+  // Handle delete currency.
-    (currency) => (
+  const handleDeleteCurrency = ({ currency_code }) => {
-      <Menu>
+    openAlert('currency-delete', { currency_code: currency_code });
-        <MenuItem
+  };
-          icon={<Icon icon="pen-18" />}
+  
-          text={formatMessage({ id: 'edit_currency' })}
-          onClick={() => handleEditCurrency(currency)}
-        />
-        <MenuItem
-          icon={<Icon icon="trash-16" iconSize={16} />}
-          text={formatMessage({ id: 'delete_currency' })}
-          onClick={() => onDeleteCurrency(currency)}
-          intent={Intent.DANGER}
-        />
-      </Menu>
-    ),
-    [handleEditCurrency, onDeleteCurrency, formatMessage],
-  );
-
-  const onRowContextMenu = useCallback(
-    (cell) => {
-      return actionMenuList(cell.row.original);
-    },
-    [actionMenuList],
-  );
-
-  const columns = useMemo(
-    () => [
-      {
-        Header: formatMessage({ id: 'currency_name' }),
-        accessor: 'currency_name',
-        width: 150,
-      },
-      {
-        Header: formatMessage({ id: 'currency_code' }),
-        accessor: 'currency_code',
-        className: 'currency_code',
-        width: 120,
-      },
-      {
-        Header: 'Currency sign',
-        width: 120,
-      },
-      {
-        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 handleDataTableFetchData = useCallback(
-    (...args) => {
-      saveInvoke(onFetchData, ...args);
-    },
-    [onFetchData],
-  );
-
   return (
     <DataTable
       columns={columns}
-      data={currenciesList}
+      data={currencies}
-      loading={currenciesLoading}
+      loading={isCurrenciesLoading}
-      onFetchData={handleDataTableFetchData}
+      progressBarLoading={isCurrenciesLoading}
+      TableLoadingRenderer={TableSkeletonRows}
       noInitialFetch={true}
-      rowContextMenu={onRowContextMenu}
+      payload={{
+        onDeleteCurrency: handleDeleteCurrency,
+        onEditCurrency: handleEditCurrency,
+      }}
+      rowContextMenu={ActionMenuList}
+      {...tableProps}
     />
   );
 }
 
 export default compose(
-  withRouter,
-  withDashboardActions,
   withDialogActions,
-  withCurrencies(({ currenciesList, currenciesLoading }) => ({
+  withAlertActions,
-    currenciesList,
-    currenciesLoading,
-  })),
 )(CurrenciesDataTable);

client/src/containers/Preferences/Currencies/CurrenciesList.js

@@ -1,97 +1,31 @@
-import React, { useCallback, useState, useEffect } from 'react';
+import React, { useEffect } from 'react';
-import { Alert, Intent } from '@blueprintjs/core';
-import { useQuery } from 'react-query';
-import {
-  FormattedMessage as T,
-  FormattedHTMLMessage,
-  useIntl,
-} from 'react-intl';
 
+import { FormattedMessage as T, useIntl } from 'react-intl';
+
+import { CurrenciesProvider } from './CurrenciesProvider';
 import CurrenciesDataTable from './CurrenciesDataTable';
-import AppToaster from 'components/AppToaster';
+import CurrenciesAlerts from './CurrenciesAlerts';
 
 import withDashboardActions from 'containers/Dashboard/withDashboardActions';
-import withCurrenciesActions from 'containers/Currencies/withCurrenciesActions';
 
 import { compose } from 'utils';
 
-// Currencies landing list page.
 function CurrenciesList({
-  // #withCurrenciesActions
-  requestDeleteCurrency,
-  requestFetchCurrencies,
-
   // #withDashboardActions
   changePreferencesPageTitle,
 }) {
-  const [deleteCurrencyState, setDeleteCurrencyState] = useState(false);
   const { formatMessage } = useIntl();
 
-  const fetchCurrencies = useQuery(
-    'currencies-table',
-    () => requestFetchCurrencies(),
-    { enabled: true },
-  );
-
   useEffect(() => {
     changePreferencesPageTitle(formatMessage({ id: 'currencies' }));
   }, [changePreferencesPageTitle, formatMessage]);
 
-  const handleEditCurrency = useCallback(() => {}, []);
-
-  // Handle click and cancel/confirm currency delete
-  const handleDeleteCurrency = useCallback((currency) => {
-    setDeleteCurrencyState(currency);
-  }, [setDeleteCurrencyState]);
-
-  // handle cancel delete currency alert.
-  const handleCancelCurrencyDelete = () => {
-    setDeleteCurrencyState(false);
-  };
-
-  // Handle confirm Currency delete
-  const handleConfirmCurrencyDelete = useCallback(
-    (refetch) => {
-      requestDeleteCurrency(deleteCurrencyState.currency_code)
-        .then((response) => {
-          setDeleteCurrencyState(false);
-          AppToaster.show({
-            message: formatMessage({
-              id: 'the_currency_has_been_deleted_successfully',
-            }),
-            intent: Intent.SUCCESS,
-          });
-        })
-        .catch((errors) => {
-          setDeleteCurrencyState(false);
-        });
-    },
-    [deleteCurrencyState, requestDeleteCurrency, formatMessage],
-  );
-
   return (
-    <>
+    <CurrenciesProvider>
-      <CurrenciesDataTable
+      <CurrenciesDataTable />
-        onDeleteCurrency={handleDeleteCurrency}
+      <CurrenciesAlerts />
-        onEditCurrency={handleEditCurrency}
+    </CurrenciesProvider>
-      />
-      <Alert
-        cancelButtonText={<T id={'cancel'} />}
-        confirmButtonText={<T id={'delete'} />}
-        intent={Intent.DANGER}
-        isOpen={deleteCurrencyState}
-        onCancel={handleCancelCurrencyDelete}
-        onConfirm={handleConfirmCurrencyDelete}
-      >
-        <p>
-          Once you delete this currency, you won't be able to restore it later. Are you sure you want to delete ?
-        </p>
-      </Alert>
-    </>
   );
 }
 
-export default compose(
+export default compose(withDashboardActions)(CurrenciesList);
-  withDashboardActions,
-  withCurrenciesActions,
-)(CurrenciesList);

client/src/containers/Preferences/Currencies/CurrenciesProvider.js

@@ -0,0 +1,27 @@
+import React, { createContext, useContext } from 'react';
+import { useCurrencies } from 'hooks/query';
+
+const CurrenciesContext = createContext();
+
+/**
+ * currencies provider.
+ */
+function CurrenciesProvider({ ...props }) {
+  // fetches the currencies list.
+  const { data: currencies, isFetching: isCurrenciesLoading } = useCurrencies();
+
+  const state = {
+    currencies,
+    isCurrenciesLoading,
+  };
+
+  return (
+    <>
+      <CurrenciesContext.Provider value={state} {...props} />
+    </>
+  );
+}
+
+const useCurrenciesContext = () => useContext(CurrenciesContext);
+
+export { CurrenciesProvider, useCurrenciesContext };

client/src/containers/Preferences/Currencies/components.js

@@ -0,0 +1,84 @@
+import React, { useMemo } from 'react';
+import {
+  Menu,
+  Popover,
+  Button,
+  Position,
+  MenuItem,
+  Intent,
+} from '@blueprintjs/core';
+import { useIntl } from 'react-intl';
+import { Icon } from 'components';
+import { safeCallback } from 'utils';
+
+/**
+ * Row actions menu list.
+ */
+export function ActionMenuList({
+  row: { original },
+  payload: { onEditCurrency, onDeleteCurrency },
+}) {
+  const { formatMessage } = useIntl();
+  return (
+    <Menu>
+      <MenuItem
+        icon={<Icon icon="pen-18" />}
+        text={formatMessage({ id: 'edit_currency' })}
+        onClick={safeCallback(onEditCurrency, original)}
+      />
+      <MenuItem
+        icon={<Icon icon="trash-16" iconSize={16} />}
+        text={formatMessage({ id: 'delete_currency' })}
+        onClick={safeCallback(onDeleteCurrency, original)}
+        intent={Intent.DANGER}
+      />
+    </Menu>
+  );
+}
+
+/**
+ * Actions cell.
+ */
+export const ActionsCell = (props) => {
+  return (
+    <Popover
+      position={Position.RIGHT_BOTTOM}
+      content={<ActionMenuList {...props} />}
+    >
+      <Button icon={<Icon icon="more-h-16" iconSize={16} />} />
+    </Popover>
+  );
+};
+
+export function useCurrenciesTableColumns() {
+  const { formatMessage } = useIntl();
+
+  return useMemo(
+    () => [
+      {
+        Header: formatMessage({ id: 'currency_name' }),
+        accessor: 'currency_name',
+        width: 150,
+      },
+      {
+        Header: formatMessage({ id: 'currency_code' }),
+        accessor: 'currency_code',
+        className: 'currency_code',
+        width: 120,
+      },
+      {
+        Header: 'Currency sign',
+        width: 120,
+      },
+      {
+        id: 'actions',
+        Header: '',
+        Cell: ActionsCell,
+        className: 'actions',
+        width: 50,
+        disableResizing: true,
+      },
+    ],
+    [formatMessage],
+  );
+}

client/src/lang/en/index.js

@@ -359,6 +359,7 @@ export default {
   select_date_format: 'Select Date Format',
   select_time_zone: 'Select Time Zone',
   select_currency: 'Select Currency',
+  once_delete_this_currency_you_will_able_to_restore_it: `Once you delete this currency, you won\'t be able to restore it later. Are you sure you want to delete this item?`,
   select_parent_category: 'Select Parent Category',
   the_options_has_been_created_successfully:
     'The options has been created successfully',