chore: select refactor

new-lamassu-admin/src/pages/Commissions/components/CommissionsList.js

@@ -7,13 +7,8 @@ import { Select } from 'src/components/inputs'
 import {
   overridesDefaults,
   getCommissions,
-  getMachineCoins,
   getListCommissionsSchema,
-  commissionsList,
-  sortCommissionsBy,
-  filterCommissions,
-  SHOW_ALL,
-  ORDER_OPTIONS
+  commissionsList
 } from 'src/pages/Commissions/helper'
 
 const styles = {
@@ -34,35 +29,110 @@ const styles = {
   }
 }
 
+const SHOW_ALL = {
+  code: 'SHOW_ALL',
+  display: 'Show all'
+}
+
+const ORDER_OPTIONS = [
+  {
+    code: 'machine',
+    display: 'Machine Name'
+  },
+  {
+    code: 'cryptoCurrencies',
+    display: 'Cryptocurrency'
+  },
+  {
+    code: 'cashIn',
+    display: 'Cash-in'
+  },
+  {
+    code: 'cashOut',
+    display: 'Cash-out'
+  },
+  {
+    code: 'fixedFee',
+    display: 'Fixed Fee'
+  },
+  {
+    code: 'minimumTx',
+    display: 'Minimum Tx'
+  }
+]
+
 const useStyles = makeStyles(styles)
 
+const getElement = (code, display) => ({
+  code: code,
+  display: display || code
+})
+
+const sortCommissionsBy = prop => {
+  switch (prop) {
+    case ORDER_OPTIONS[0]:
+      return R.sortBy(R.find(R.propEq('code', R.prop('machine'))))
+    case ORDER_OPTIONS[1]:
+      return R.sortBy(R.path(['cryptoCurrencies', 0]))
+    default:
+      return R.sortBy(R.prop(prop.code))
+  }
+}
+
+const filterCommissions = (coinFilter, machineFilter) =>
+  R.compose(
+    R.filter(
+      it => (machineFilter === SHOW_ALL) | (machineFilter.code === it.machine)
+    ),
+    R.filter(
+      it =>
+        (coinFilter === SHOW_ALL) | (coinFilter.code === it.cryptoCurrencies[0])
+    )
+  )
+
 const CommissionsList = memo(
   ({ config, localeConfig, currency, data, error, saveOverrides }) => {
     const classes = useStyles()
 
     const [machineFilter, setMachineFilter] = useState(SHOW_ALL)
     const [coinFilter, setCoinFilter] = useState(SHOW_ALL)
-    const [orderProp, setOrderProp] = useState('Machine name')
+    const [orderProp, setOrderProp] = useState(ORDER_OPTIONS[0])
 
-    const cryptoCurrencies = R.prop('cryptoCurrencies', localeConfig)
+    const coins = R.prop('cryptoCurrencies', localeConfig)
 
-    const machines = R.prop('machines', data)
-    const machinesIds = R.map(R.prop('deviceId'))(machines)
-    const machinesNames = R.map(R.prop('name'))(machines)
+    const getMachineCoins = deviceId => {
+      const override = R.prop('overrides', localeConfig)?.find(
+        R.propEq('machine', deviceId)
+      )
 
-    const machinesCoins = R.map(m =>
-      R.xprod([m], getMachineCoins(m, localeConfig))
-    )(machinesIds)
+      const machineCoins = override
+        ? R.prop('cryptoCurrencies', override)
+        : coins
 
-    const machinesCoinsTuples = R.unnest(machinesCoins)
+      return R.xprod([deviceId], machineCoins)
+    }
+
+    const getMachineElement = it =>
+      getElement(R.prop('deviceId', it), R.prop('name', it))
+
+    const cryptoData = R.map(getElement)(coins)
+
+    const machineData = R.sortBy(
+      R.prop('display'),
+      R.map(getMachineElement)(R.prop('machines', data))
+    )
+
+    const machinesCoinsTuples = R.unnest(
+      R.map(getMachineCoins)(machineData.map(R.prop('code')))
+    )
 
     const commissions = R.map(([deviceId, cryptoCode]) =>
       getCommissions(cryptoCode, deviceId, config)
     )(machinesCoinsTuples)
 
     const tableData = R.compose(
-      sortCommissionsBy(orderProp, machines),
-      filterCommissions(coinFilter, machineFilter, machines)
+      sortCommissionsBy(orderProp),
+      filterCommissions(coinFilter, machineFilter)
     )(commissions)
 
     return (
@@ -72,14 +142,14 @@ const CommissionsList = memo(
             onSelectedItemChange={setMachineFilter}
             label="Machines"
             default={SHOW_ALL}
-            items={[SHOW_ALL].concat(R.sortBy(R.identity, machinesNames))}
+            items={[SHOW_ALL].concat(machineData)}
             selectedItem={machineFilter}
           />
           <Select
             onSelectedItemChange={setCoinFilter}
             label="Cryptocurrency"
             default={SHOW_ALL}
-            items={[SHOW_ALL].concat(cryptoCurrencies)}
+            items={[SHOW_ALL].concat(cryptoData)}
             selectedItem={coinFilter}
           />
           <Select