WIP Fix & last tasks

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

@@ -1,4 +1,4 @@
-import React, { useCallback, useState, useMemo } from 'react';
+import React, { useCallback, useState, useMemo, useEffect } from 'react';
 import {
   Button,
   Popover,
@@ -8,7 +8,7 @@ import {
   Alert,
   Intent,
 } from '@blueprintjs/core';
-import { useQuery } from 'react-query';
+import { useQuery, queryCache } from 'react-query';
 
 import Icon from 'components/Icon';
 import { compose } from 'utils';
@@ -18,133 +18,165 @@ import LoadingIndicator from 'components/LoadingIndicator';
 import DataTable from 'components/DataTable';
 import AppToaster from 'components/AppToaster';
 
-import withDashboard from 'connectors/Dashboard.connector';
+import withDashboard from 'containers/Dashboard/withDashboard';
+
 import withCurrencies from 'containers/Currencies/withCurrencies';
 import withCurrenciesActions from 'containers/Currencies/withCurrenciesActions';
-import { FormattedMessage as T, useIntl } from 'react-intl';
-
+import {
+  FormattedMessage as T,
+  FormattedHTMLMessage,
+  useIntl,
+} from 'react-intl';
 
 function CurrenciesList({
   // #withCurrencies
-  currenciesList,
 
+  currenciesList,
+  currenciesLoading,
   // #withCurrenciesActions
   requestDeleteCurrency,
   requestFetchCurrencies,
 
   // #withDialog
   openDialog,
+  changePreferencesPageTitle,
+
+  // #ownProps
   onFetchData,
 }) {
   const [deleteCurrencyState, setDeleteCurrencyState] = useState(false);
-  const { formatMessage } = useIntl()
-  const fetchCurrencies = useQuery(['currencies-table'],
-    () => requestFetchCurrencies());
+  const [tableLoading, setTableLoading] = useState(false);
+  const [initialMount, setInitialMount] = useState(false);
 
-  // const handleEditCurrency = (currency) => {
-  //   openDialog('currency-form', {
-  //     action: 'edit',
-  //     currencyCode: currency.currency_code,
-  //   });
-  // };
-  const handleEditCurrency =useCallback((currency)=>{
-    openDialog('currency-form', {
-          action: 'edit',
-          currencyCode: currency.currency_code,
-        });
-  },[openDialog])
+  const { formatMessage } = useIntl();
 
+  const fetchCurrencies = useQuery('currencies-table', () =>
+    requestFetchCurrencies(),
+  );
 
-  // const onDeleteCurrency = (currency) => {
-  //   setDeleteCurrencyState(currency);
-  // };
+  useEffect(() => {
+    changePreferencesPageTitle(formatMessage({ id: 'currencies' }));
+  }, [changePreferencesPageTitle, formatMessage]);
 
-  const onDeleteCurrency =useCallback((currency)=>{setDeleteCurrencyState(currency);},[])
+  const handleEditCurrency = useCallback(
+    (currency) => {
+      openDialog('currency-form', {
+        action: 'edit',
+        currencyCode: currency.currency_code,
+      });
+    },
+    [openDialog],
+  );
+
+  const onDeleteCurrency = useCallback((currency) => {
+    setDeleteCurrencyState(currency);
+  }, []);
   const handleCancelCurrencyDelete = () => {
     setDeleteCurrencyState(false);
   };
 
-  const handleConfirmCurrencyDelete = useCallback(() => {
-    requestDeleteCurrency(deleteCurrencyState.currency_code).then(
-      (response) => {
-        setDeleteCurrencyState(false);
-        AppToaster.show({
-          message: formatMessage({id:'the_currency_has_been_successfully_deleted'}),
+  const handleConfirmCurrencyDelete = useCallback(
+    (refetch) => {
+      requestDeleteCurrency(deleteCurrencyState.currency_code)
+        .then((response) => {
+          setDeleteCurrencyState(false);
+          AppToaster.show({
+            message: formatMessage({
+              id: 'the_currency_has_been_successfully_deleted',
+            }),
+            intent: Intent.SUCCESS,
+          });
+        })
+        .catch((errors) => {
+          setDeleteCurrencyState(false);
         });
-      }
-    );
-  }, [requestDeleteCurrency,deleteCurrencyState,formatMessage]);
-
-  const actionMenuList = useCallback((currency) => (
-    <Menu>
-      <MenuItem
-        text={<T id={'edit_currency'} />}
-        onClick={() => handleEditCurrency(currency)} />
-
-      <MenuItem
-        text={<T id={'delete_currency'} />}
-        onClick={() => onDeleteCurrency(currency)}
-      />
-    </Menu>
-  ), [handleEditCurrency,onDeleteCurrency]);
-
-  const columns = useMemo(() => [
-    {
-      Header: formatMessage({id:'currency_name'}),
-      accessor: 'currency_name',
-      width: 100,
     },
-    {
-      Header: formatMessage({id:'currency_code'}),
-      accessor: 'currency_code',
-      className: 'currency_code',
-      width: 100,
-    },
-    {
-      Header: 'Currency sign',
-      width: 50,
-    },
-    {
-      id: 'actions',
-      Header: '',
-      Cell: ({ cell }) => (
-        <Popover
-          content={actionMenuList(cell.row.original)}
-          position={Position.RIGHT_TOP}
-        >
-          <Button icon={<Icon icon='ellipsis-h' />} />
-        </Popover>
-      ),
-      className: 'actions',
-      width: 50,
-    },
-  ], [actionMenuList,formatMessage]);
+    [deleteCurrencyState, requestDeleteCurrency, formatMessage],
+  );
 
-  const handleDatatableFetchData = useCallback(() => {
+  const actionMenuList = useCallback(
+    (currency) => (
+      <Menu>
+        <MenuItem
+          text={<T id={'edit_currency'} />}
+          onClick={() => handleEditCurrency(currency)}
+        />
+
+        <MenuItem
+          text={<T id={'delete_currency'} />}
+          onClick={() => onDeleteCurrency(currency)}
+          intent={Intent.DANGER}
+        />
+      </Menu>
+    ),
+    [handleEditCurrency, onDeleteCurrency],
+  );
+
+  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_TOP}
+          >
+            <Button icon={<Icon icon="ellipsis-h" />} />
+          </Popover>
+        ),
+        className: 'actions',
+        width: 50,
+      },
+    ],
+    [actionMenuList, formatMessage],
+  );
+
+  const handleDataTableFetchData = useCallback(() => {
     onFetchData && onFetchData();
-  }, [onFetchData]);
+  }, []);
 
   return (
-    <LoadingIndicator>
+    <LoadingIndicator loading={fetchCurrencies.isFetching}>
       <DataTable
+        noInitialFetch={true}
         columns={columns}
         data={currenciesList}
-        loading={fetchCurrencies.isFetching}
+        onFetchData={handleDataTableFetchData()}
+        loading={currenciesLoading && !initialMount}
         selectionColumn={false}
+        manualSortBy={true}
+        expandable={false}
       />
 
       <Alert
-        cancelButtonText={<T id={'cancel'}/>}
-        confirmButtonText={<T id={'move_to_trash'}/>}
-        icon='trash'
+        cancelButtonText={<T id={'cancel'} />}
+        confirmButtonText={<T id={'delete'} />}
+        icon="trash"
         intent={Intent.DANGER}
         isOpen={deleteCurrencyState}
         onCancel={handleCancelCurrencyDelete}
         onConfirm={handleConfirmCurrencyDelete}
       >
         <p>
-          Are you sure you want to move <b>filename</b> to Trash? You will be
-          able to restore it later, but it will become private to you.
+          <FormattedHTMLMessage
+            id={'once_delete_this_currency_you_will_able_to_restore_it'}
+          />
         </p>
       </Alert>
     </LoadingIndicator>
@@ -152,10 +184,10 @@ function CurrenciesList({
 }
 
 export default compose(
+  DialogConnect,
+  withDashboard,
   withCurrencies(({ currenciesList }) => ({
     currenciesList,
   })),
   withCurrenciesActions,
-  DialogConnect,
-  withDashboard
 )(CurrenciesList);