- Data table sticky header.

- Mini sidebar toggle.
- Refactor withDashboard and withDashboardActions.

client/src/containers/ExchangeRates/ExchangeRate.js

@@ -1,8 +1,12 @@
-import React, { useEffect, useState, useCallback,useMemo } from 'react';
+import React, { useEffect, useState, useCallback, useMemo } from 'react';
 import { useQuery } from 'react-query';
 import { useParams } from 'react-router-dom';
 import { Alert, Intent } from '@blueprintjs/core';
-import { FormattedMessage as T, useIntl, FormattedHTMLMessage } from 'react-intl';
+import {
+  FormattedMessage as T,
+  useIntl,
+  FormattedHTMLMessage,
+} from 'react-intl';
 import AppToaster from 'components/AppToaster';
 
 import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
@@ -10,15 +14,14 @@ import DashboardInsider from 'components/Dashboard/DashboardInsider';
 import ExchangeRateTable from './ExchangeRateTable';
 import ExchangeRateActionsBar from './ExchangeRateActionsBar';
 
-import withDashboardActions from 'containers/Dashboard/withDashboard';
+import withDashboardActions from 'containers/Dashboard/withDashboardActions';
 import withResourceActions from 'containers/Resources/withResourcesActions';
 import withExchangeRatesActions from 'containers/ExchangeRates/withExchangeRatesActions';
 
 import { compose } from 'utils';
 
-
 function ExchangeRate({
-  // #withDashboard
+  // #withDashboardActions
   changePageTitle,
 
   //#withResourceActions
@@ -29,7 +32,6 @@ function ExchangeRate({
   requestDeleteExchangeRate,
   addExchangeRatesTableQueries,
   requestDeleteBulkExchangeRates,
-
 }) {
   const { id } = useParams();
   const [deleteExchangeRate, setDeleteExchangeRate] = useState(false);
@@ -37,21 +39,21 @@ function ExchangeRate({
   const { formatMessage } = useIntl();
   const [bulkDelete, setBulkDelete] = useState(false);
 
-   const fetchExchangeRates = useQuery('exchange-rates-table',
-    () => requestFetchExchangeRates());
-
+  const fetchExchangeRates = useQuery('exchange-rates-table', () =>
+    requestFetchExchangeRates(),
+  );
 
   useEffect(() => {
     id
-      ? changePageTitle(formatMessage({id:'exchange_rate_details'}))
-      : changePageTitle(formatMessage({id:'exchange_rate_list'}));
-  }, [id, changePageTitle,formatMessage]);
+      ? changePageTitle(formatMessage({ id: 'exchange_rate_details' }))
+      : changePageTitle(formatMessage({ id: 'exchange_rate_list' }));
+  }, [id, changePageTitle, formatMessage]);
 
   const handelDeleteExchangeRate = useCallback(
     (exchange_rate) => {
       setDeleteExchangeRate(exchange_rate);
     },
-    [setDeleteExchangeRate]
+    [setDeleteExchangeRate],
   );
 
   const handelEditExchangeRate = (exchange_rate) => {};
@@ -64,10 +66,12 @@ function ExchangeRate({
     requestDeleteExchangeRate(deleteExchangeRate.id).then(() => {
       setDeleteExchangeRate(false);
       AppToaster.show({
-        message: formatMessage({id:'the_exchange_rate_has_been_successfully_deleted'}),
+        message: formatMessage({
+          id: 'the_exchange_rate_has_been_successfully_deleted',
+        }),
       });
     });
-  }, [deleteExchangeRate, requestDeleteExchangeRate,formatMessage]);
+  }, [deleteExchangeRate, requestDeleteExchangeRate, formatMessage]);
 
   // Handle fetch data of Exchange_rates datatable.
   const handleFetchData = useCallback(
@@ -81,50 +85,50 @@ function ExchangeRate({
           : {}),
       });
     },
-    [addExchangeRatesTableQueries]
+    [addExchangeRatesTableQueries],
   );
 
   const handleSelectedRowsChange = useCallback(
     (exchange_rates) => {
       setSelectedRows(exchange_rates);
     },
-    [setSelectedRows]
+    [setSelectedRows],
   );
 
- // Handle Exchange Rates bulk delete.
- const handleBulkDelete = useCallback(
-  (exchangeRates) => {
-    setBulkDelete(exchangeRates);
-  },
-  [setBulkDelete]
-);
+  // Handle Exchange Rates bulk delete.
+  const handleBulkDelete = useCallback(
+    (exchangeRates) => {
+      setBulkDelete(exchangeRates);
+    },
+    [setBulkDelete],
+  );
 
- //Handel cancel itemCategories bulk delete.
- const handleCancelBulkDelete =useCallback(()=>{
-  setBulkDelete(false)
-},[])
+  //Handel cancel itemCategories bulk delete.
+  const handleCancelBulkDelete = useCallback(() => {
+    setBulkDelete(false);
+  }, []);
 
-// handle confirm Exchange Rates bulk delete.
-const handleConfirmBulkDelete = useCallback(() => {
-  requestDeleteBulkExchangeRates(bulkDelete)
-    .then(() => {
-      setBulkDelete(false);
-      AppToaster.show({
-        message: formatMessage({
-          id: 'the_exchange_rates_has_been_successfully_deleted',
-        }),
-        intent: Intent.SUCCESS,
+  // handle confirm Exchange Rates bulk delete.
+  const handleConfirmBulkDelete = useCallback(() => {
+    requestDeleteBulkExchangeRates(bulkDelete)
+      .then(() => {
+        setBulkDelete(false);
+        AppToaster.show({
+          message: formatMessage({
+            id: 'the_exchange_rates_has_been_successfully_deleted',
+          }),
+          intent: Intent.SUCCESS,
+        });
+      })
+      .catch((errors) => {
+        setBulkDelete(false);
       });
-    })
-    .catch((errors) => {
-      setBulkDelete(false);
-    });
-}, [requestDeleteBulkExchangeRates, bulkDelete,formatMessage]);
-
+  }, [requestDeleteBulkExchangeRates, bulkDelete, formatMessage]);
 
   // Calculates the data table selected rows count.
-  const selectedRowsCount = useMemo(() => Object.values(selectedRows).length, [selectedRows]);
-
+  const selectedRowsCount = useMemo(() => Object.values(selectedRows).length, [
+    selectedRows,
+  ]);
 
   return (
     <DashboardInsider>
@@ -132,7 +136,6 @@ const handleConfirmBulkDelete = useCallback(() => {
         onDeleteExchangeRate={handelDeleteExchangeRate}
         selectedRows={selectedRows}
         onBulkDelete={handleBulkDelete}
-
       />
       <DashboardPageContent>
         <ExchangeRateTable
@@ -144,32 +147,37 @@ const handleConfirmBulkDelete = useCallback(() => {
         <Alert
           cancelButtonText={<T id={'cancel'} />}
           confirmButtonText={<T id={'move_to_trash'} />}
-          icon='trash'
+          icon="trash"
           intent={Intent.DANGER}
           isOpen={deleteExchangeRate}
           onCancel={handelCancelExchangeRateDelete}
           onConfirm={handelConfirmExchangeRateDelete}
         >
           <p>
-            <FormattedHTMLMessage id={'once_delete_this_exchange_rate_you_will_able_to_restore_it'}/>
+            <FormattedHTMLMessage
+              id={'once_delete_this_exchange_rate_you_will_able_to_restore_it'}
+            />
           </p>
         </Alert>
         <Alert
-        cancelButtonText={<T id={'cancel'} />}
-        confirmButtonText={`${formatMessage({id:'delete'})} (${selectedRowsCount})`}
-        icon='trash'
-        intent={Intent.DANGER}
-        isOpen={bulkDelete}
-        onCancel={handleCancelBulkDelete}
-        onConfirm={handleConfirmBulkDelete}
-      >
-        <p>
-          <FormattedHTMLMessage
-            id={'once_delete_these_exchange_rates_you_will_not_able_restore_them'}
-          />
-        </p>
-      </Alert>
-
+          cancelButtonText={<T id={'cancel'} />}
+          confirmButtonText={`${formatMessage({
+            id: 'delete',
+          })} (${selectedRowsCount})`}
+          icon="trash"
+          intent={Intent.DANGER}
+          isOpen={bulkDelete}
+          onCancel={handleCancelBulkDelete}
+          onConfirm={handleConfirmBulkDelete}
+        >
+          <p>
+            <FormattedHTMLMessage
+              id={
+                'once_delete_these_exchange_rates_you_will_not_able_restore_them'
+              }
+            />
+          </p>
+        </Alert>
       </DashboardPageContent>
     </DashboardInsider>
   );
@@ -178,5 +186,5 @@ const handleConfirmBulkDelete = useCallback(() => {
 export default compose(
   withExchangeRatesActions,
   withResourceActions,
-  withDashboardActions
+  withDashboardActions,
 )(ExchangeRate);