fix Merge conflict.

client/src/components/Accounts/AccountsActionsBar.js

@@ -10,11 +10,11 @@ import {
   Menu,
   Popover,
   PopoverInteractionKind,
-  Position,
-} from "@blueprintjs/core";
+  Position
+} from '@blueprintjs/core';
 import classNames from 'classnames';
-import {connect} from 'react-redux';
-import {useRouteMatch} from 'react-router-dom';
+import { connect } from 'react-redux';
+import { useRouteMatch } from 'react-router-dom';
 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
 import DialogConnect from 'connectors/Dialog.connector';
 import AccountsConnect from 'connectors/Accounts.connector';
@@ -52,22 +52,24 @@ function AccountsActionsBar({
           content={<Menu>{viewsMenuItems}</Menu>}
           minimal={true}
           interactionKind={PopoverInteractionKind.HOVER}
-          position={Position.BOTTOM_LEFT}>
-          
+          position={Position.BOTTOM_LEFT}
+        >
           <Button
             className={classNames(Classes.MINIMAL, 'button--table-views')}
-            icon={ <Icon icon="table" /> }
-            text="Table Views"
-            rightIcon={'caret-down'} />
+            icon={<Icon icon='table' />}
+            text='Table Views'
+            rightIcon={'caret-down'}
+          />
         </Popover>
 
         <NavbarDivider />
 
         <Button
           className={Classes.MINIMAL}
-          icon={ <Icon icon="plus" /> }
-          text="New Account"
-          onClick={onClickNewAccount} />
+          icon={<Icon icon='plus' />}
+          text='New Account'
+          onClick={onClickNewAccount}
+        />
 
         <Popover
           content={filterDropdown}
@@ -84,32 +86,38 @@ function AccountsActionsBar({
         {hasBulkActionsSelected && (
           <Button
             className={Classes.MINIMAL}
-            icon={ <Icon icon="trash" />} 
-            text="Archive" />)}
+            icon={<Icon icon='trash' />}
+            text='Archive'
+          />
+        )}
 
         {hasBulkActionsSelected && (
           <Button
             className={Classes.MINIMAL}
-            icon={ <Icon icon="trash" />} 
-            text="Delete" />)}
+            icon={<Icon icon='trash' />}
+            text='Delete'
+          />
+        )}
 
         <Button
           className={Classes.MINIMAL}
-          icon={ <Icon icon="file-import" /> }
-          text="Import" />
+          icon={<Icon icon='file-import' />}
+          text='Import'
+        />
 
         <Button
           className={Classes.MINIMAL}
-          icon={ <Icon icon="file-export" /> }
-          text="Export" />
+          icon={<Icon icon='file-export' />}
+          text='Export'
+        />
       </NavbarGroup>
     </DashboardActionsBar>
-  )
+  );
 }
 
-const mapStateToProps = (state) => {
+const mapStateToProps = state => {
   return {
-    bulkActions: state.accounts.bulkActions,
+    bulkActions: state.accounts.bulkActions
   };
 };
 
@@ -118,4 +126,4 @@ export default compose(
   AccountsConnect,
   ResourceConnect,
   connect(mapStateToProps),
-)(AccountsActionsBar);
+)(AccountsActionsBar);

client/src/components/Accounts/AccountsDataTable.js

@@ -3,9 +3,9 @@ import {
   ColumnsDirective,
   ColumnDirective,
   Inject,
-  Sort,
+  Sort
 } from '@syncfusion/ej2-react-grids';
-import React, {useEffect} from 'react';
+import React, { useEffect } from 'react';
 import {
   Button,
   Popover,
@@ -13,9 +13,9 @@ import {
   MenuItem,
   MenuDivider,
   Position,
-  Checkbox,
+  Checkbox
 } from '@blueprintjs/core';
-import {useParams} from 'react-router-dom';
+import { useParams } from 'react-router-dom';
 import useAsync from 'hooks/async';
 import Icon from 'components/Icon';
 import { handleBooleanChange, compose } from 'utils';
@@ -71,96 +71,118 @@ function AccountsDataTable({
     }
   }, [customViewId]);
 
-  useEffect(() => () => {
-    // Clear page subtitle when unmount the page.
-    changePageSubtitle('');
-  }, []);
+  useEffect(
+    () => () => {
+      // Clear page subtitle when unmount the page.
+      changePageSubtitle('');
+    },
+    []
+  );
 
-  const handleEditAccount = (account) => () => {
-    openDialog('account-form', {action: 'edit', id: account.id});
+  const handleEditAccount = account => () => {
+    openDialog('account-form', { action: 'edit', id: account.id });
   };
-  const actionMenuList = (account) =>
-    (<Menu>
-      <MenuItem text="View Details" />
+  const actionMenuList = account => (
+    <Menu>
+      <MenuItem text='View Details' />
       <MenuDivider />
-      <MenuItem text="Edit Account" onClick={handleEditAccount(account)} />
-      <MenuItem text="New Account" />
+      <MenuItem text='Edit Account' onClick={handleEditAccount(account)} />
+      <MenuItem text='New Account' />
       <MenuDivider />
-      <MenuItem text="Inactivate Account" onClick={() => onInactiveAccount(account)} />
-      <MenuItem text="Delete Account" onClick={() => onDeleteAccount(account)} />
-    </Menu>);
-  
-  const handleClickCheckboxBulk = (account) => handleBooleanChange((value) => {
-    if (value) {
-      addBulkActionAccount(account.id);
-    } else {
-      removeBulkActionAccount(account.id);
-    }
-  });
+      <MenuItem
+        text='Inactivate Account'
+        onClick={() => onInactiveAccount(account)}
+      />
+      <MenuItem
+        text='Delete Account'
+        onClick={() => onDeleteAccount(account)}
+      />
+    </Menu>
+  );
+
+  const handleClickCheckboxBulk = account =>
+    handleBooleanChange(value => {
+      if (value) {
+        addBulkActionAccount(account.id);
+      } else {
+        removeBulkActionAccount(account.id);
+      }
+    });
 
   const columns = [
     {
       field: '',
       headerText: '',
-      template: (account) => (<Checkbox onChange={handleClickCheckboxBulk(account)} />),
-      customAttributes: {class: 'checkbox-row'}
+      template: account => (
+        <Checkbox onChange={handleClickCheckboxBulk(account)} />
+      ),
+      customAttributes: { class: 'checkbox-row' }
     },
     {
       field: 'name',
       headerText: 'Account Name',
-      customAttributes: {class: 'account-name'},
+      customAttributes: { class: 'account-name' }
     },
     {
       field: 'code',
-      headerText: 'Code',
+      headerText: 'Code'
     },
     {
       field: 'type.name',
-      headerText: 'Type',
+      headerText: 'Type'
     },
     {
       headerText: 'Normal',
-      template: (column) => {
+      template: column => {
         const type = column.type ? column.type.normal : '';
-        return type === 'credit' ? (<Icon icon={'arrow-down'} />) : ((<Icon icon={'arrow-up'} />));
+        return type === 'credit' ? (
+          <Icon icon={'arrow-down'} />
+        ) : (
+          <Icon icon={'arrow-up'} />
+        );
       },
-      customAttributes: {class: 'account-normal'},
+      customAttributes: { class: 'account-normal' }
     },
     {
       field: 'balance',
       headerText: 'Balance',
-      template: (column, data) => { return <span>$10,000</span>; },
+      template: (column, data) => {
+        return <span>$10,000</span>;
+      }
     },
     {
       headerText: '',
-      template: (account) => (
-        <Popover content={actionMenuList(account)} position={Position.RIGHT_BOTTOM}>
-          <Button icon={<Icon icon="ellipsis-h" />} />
+      template: account => (
+        <Popover
+          content={actionMenuList(account)}
+          position={Position.RIGHT_BOTTOM}
+        >
+          <Button icon={<Icon icon='ellipsis-h' />} />
         </Popover>
-      ),
+      )
     }
   ];
 
-  const dataStateChange = (state) => {
-    
-  }
+  const dataStateChange = state => {};
   return (
     <LoadingIndicator loading={fetchHook.pending} spinnerSize={30}>
       <GridComponent
         allowSorting={true}
         allowGrouping={true}
-        dataSource={{result: accounts, count: 12}}
+        dataSource={{ result: accounts, count: 12 }}
         dataStateChange={dataStateChange}
-        >
+      >
         <ColumnsDirective>
-          {columns.map((column) => {
-            return (<ColumnDirective
-              field={column.field}
-              headerText={column.headerText}
-              template={column.template}
-              allowSorting={true}
-              customAttributes={column.customAttributes}
-              />);
+          {columns.map(column => {
+            return (
+              <ColumnDirective
+                field={column.field}
+                headerText={column.headerText}
+                template={column.template}
+                allowSorting={true}
+                customAttributes={column.customAttributes}
+              />
+            );
           })}
         </ColumnsDirective>
         <Inject services={[Sort]} />
@@ -173,5 +195,5 @@ export default compose(
   AccountsConnect,
   DialogConnect,
   DashboardConnect,
-  ViewConnect,
-)(AccountsDataTable);
+  ViewConnect
+)(AccountsDataTable);

client/src/components/Accounts/AccountsViewsTabs.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import {useHistory} from 'react-router';
-import {connect} from 'react-redux';
+import { useHistory } from 'react-router';
+import { connect } from 'react-redux';
 import {
   Alignment,
   Navbar,
@@ -8,11 +8,11 @@ import {
   Tabs,
   Tab,
   Button
-} from "@blueprintjs/core";
-import {useParams} from 'react-router-dom';
+} from '@blueprintjs/core';
+import { useParams } from 'react-router-dom';
 import Icon from 'components/Icon';
-import {Link} from 'react-router-dom';
-import {compose} from 'utils';
+import { Link } from 'react-router-dom';
+import { compose } from 'utils';
 import AccountsConnect from 'connectors/Accounts.connector';
 
 function AccountsViewsTabs({ views }) {
@@ -22,33 +22,34 @@ function AccountsViewsTabs({ views }) {
   const handleClickNewView = () => {
     history.push('/dashboard/custom_views/accounts/new');
   };
-  const tabs = views.map((view) => {
+  const tabs = views.map(view => {
     const baseUrl = '/dashboard/accounts';
-    const link = (<Link to={`${baseUrl}/${view.id}/custom_view`}>{ view.name }</Link>);
-    return (<Tab id={`custom_view_${view.id}`} title={link} />);
+    const link = (
+      <Link to={`${baseUrl}/${view.id}/custom_view`}>{view.name}</Link>
+    );
+    return <Tab id={`custom_view_${view.id}`} title={link} />;
   });
   return (
-    <Navbar className="navbar--dashboard-views">
-      <NavbarGroup
-        align={Alignment.LEFT}>
+    <Navbar className='navbar--dashboard-views'>
+      <NavbarGroup align={Alignment.LEFT}>
         <Tabs
-          id="navbar"
+          id='navbar'
           large={true}
           selectedTabId={`custom_view_${customViewId}`}
-          className="tabs--dashboard-views">
-          <Tab 
-            id="all"
-            title={<Link to={`/dashboard/accounts`}>All</Link>} />
+          className='tabs--dashboard-views'
+        >
+          <Tab id='all' title={<Link to={`/dashboard/accounts`}>All</Link>} />
 
-          { tabs }
+          {tabs}
           <Button
-            className="button--new-view"
-            icon={<Icon icon="plus" />}
-            onClick={handleClickNewView} />
+            className='button--new-view'
+            icon={<Icon icon='plus' />}
+            onClick={handleClickNewView}
+          />
         </Tabs>
       </NavbarGroup>
     </Navbar>
   );
 }
 
-export default compose(AccountsConnect)(AccountsViewsTabs);
+export default compose(AccountsConnect)(AccountsViewsTabs);