chore: select refactor

new-lamassu-admin/src/components/inputs/base/Select.js

@@ -4,7 +4,6 @@ import { useSelect } from 'downshift'
 import React from 'react'
 
 import { ReactComponent as Arrowdown } from 'src/styling/icons/action/arrow/regular.svg'
-import { toFirstUpper } from 'src/utils/string'
 
 import styles from './Select.styles'
 
@@ -35,19 +34,17 @@ function Select({ label, items, ...props }) {
   }
 
   return (
-    <div className={classnames(selectClassNames)}>
+    <div className={classnames(selectClassNames, className)}>
-      <label {...getLabelProps()}>{toFirstUpper(label)}</label>
+      <label {...getLabelProps()}>{label}</label>
       <button {...getToggleButtonProps()}>
-        <span className={classes.selectedItem}>
+        <span className={classes.selectedItem}>{selectedItem.display}</span>
-          {toFirstUpper(selectedItem)}
-        </span>
         <Arrowdown />
       </button>
       <ul {...getMenuProps()}>
         {isOpen &&
-          items.map((item, index) => (
+          items.map(({ code, display }, index) => (
-            <li key={`${item}${index}`} {...getItemProps({ item, index })}>
+            <li key={`${code}${index}`} {...getItemProps({ code, index })}>
-              <span>{toFirstUpper(item)}</span>
+              <span>{display}</span>
             </li>
           ))}
       </ul>

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

@@ -60,16 +60,16 @@ const Commissions = ({ name: SCREEN_KEY }) => {
   const saveOverridesFromList = it => (_, override) => {
     const cryptoOverriden = R.path(['cryptoCurrencies', 0], override)
 
-    const machineOverrides = R.map(removeCoinFromOverride(cryptoOverriden))(
+    const sameMachine = R.eqProps('machine', override)
-      R.filter(
+    const notSameOverride = it => !R.eqProps('cryptoCurrencies', override, it)
-        c =>
+
-          c.machine === override.machine &&
+    const filterMachine = R.filter(R.both(sameMachine, notSameOverride))
-          !c.cryptoCurrencies.every(c => c === cryptoOverriden)
+    const removeCoin = removeCoinFromOverride(cryptoOverriden)
-      )(it)
+
-    )
+    const machineOverrides = R.map(removeCoin)(filterMachine(it))
 
     const overrides = machineOverrides.concat(
-      R.filter(c => c.machine !== override.machine)(it)
+      R.filter(it => !sameMachine(it), it)
     )
 
     const config = {

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,
+  commissionsList
-  sortCommissionsBy,
-  filterCommissions,
-  SHOW_ALL,
-  ORDER_OPTIONS
 } 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 getMachineCoins = deviceId => {
-    const machinesIds = R.map(R.prop('deviceId'))(machines)
+      const override = R.prop('overrides', localeConfig)?.find(
-    const machinesNames = R.map(R.prop('name'))(machines)
+        R.propEq('machine', deviceId)
+      )
 
-    const machinesCoins = R.map(m =>
+      const machineCoins = override
-      R.xprod([m], getMachineCoins(m, localeConfig))
+        ? R.prop('cryptoCurrencies', override)
-    )(machinesIds)
+        : 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),
+      sortCommissionsBy(orderProp),
-      filterCommissions(coinFilter, machineFilter, machines)
+      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

new-lamassu-admin/src/pages/Commissions/helper.js

@@ -20,17 +20,6 @@ const ALL_COINS = {
   code: 'ALL_COINS'
 }
 
-const SHOW_ALL = 'Show all'
-
-const ORDER_OPTIONS = [
-  'Machine name',
-  'Cryptocurrency',
-  'Cash-in',
-  'Cash-out',
-  'Fixed Fee',
-  'Minimum Tx'
-]
-
 const cashInAndOutHeaderStyle = { marginLeft: 6 }
 
 const cashInHeader = (
@@ -405,19 +394,6 @@ const getCommissions = (cryptoCode, deviceId, config) => {
   return createCommissions(cryptoCode, deviceId, true, config)
 }
 
-const getMachineCoins = (deviceId, localeConfig) => {
-  const machineCoins = R.prop('cryptoCurrencies', localeConfig)
-
-  const overrides = R.prop('overrides', localeConfig)
-
-  if (overrides && !R.isEmpty(overrides)) {
-    const override = R.find(it => it.machine === deviceId)(overrides)
-
-    if (override !== undefined) return R.prop('cryptoCurrencies', override)
-  }
-  return machineCoins
-}
-
 const getListCommissionsSchema = () => {
   return Yup.object().shape({
     machine: Yup.string()
@@ -539,43 +515,6 @@ const getListCommissionsFields = (getData, currency, defaults) => {
   ]
 }
 
-const filterCommissions = (coinFilter, machineFilter, machines) =>
-  R.compose(
-    R.filter(byMachine(machineFilter, machines)),
-    R.filter(byCoin(coinFilter))
-  )
-
-const byMachine = (filter, machines) => it =>
-  (filter === SHOW_ALL) |
-  (filter === getView(machines, 'name', 'deviceId')(it.machine))
-
-const byCoin = filter => it =>
-  (filter === SHOW_ALL) | (filter === it.cryptoCurrencies[0])
-
-const sortCommissionsBy = (prop, machines) => {
-  switch (prop) {
-    case ORDER_OPTIONS[1]:
-      return R.sortBy(R.path(['cryptoCurrencies', 0]))
-    case ORDER_OPTIONS[2]:
-      return R.sortBy(R.prop('cashIn'))
-    case ORDER_OPTIONS[3]:
-      return R.sortBy(R.prop('cashOut'))
-    case ORDER_OPTIONS[4]:
-      return R.sortBy(R.prop('fixedFee'))
-    case ORDER_OPTIONS[5]:
-      return R.sortBy(R.prop('minimumTx'))
-    default:
-      return R.sortBy(
-        R.compose(getView(machines, 'name', 'deviceId'), R.prop('machine'))
-      )
-  }
-}
-
-const removeCoinFromOverride = crypto => override =>
-  R.mergeRight(override, {
-    cryptoCurrencies: R.without([crypto], override.cryptoCurrencies)
-  })
-
 export {
   mainFields,
   overrides,
@@ -585,15 +524,6 @@ export {
   overridesDefaults,
   getOrder,
   getCommissions,
-  getMachineCoins,
   getListCommissionsSchema,
-  commissionsList,
+  commissionsList
-  getView,
-  byMachine,
-  byCoin,
-  sortCommissionsBy,
-  filterCommissions,
-  removeCoinFromOverride,
-  SHOW_ALL,
-  ORDER_OPTIONS
 }

new-lamassu-admin/src/pages/ServerLogs.js

@@ -20,6 +20,7 @@ import {
 import { Info3 } from 'src/components/typography'
 import typographyStyles from 'src/components/typography/styles'
 import { offColor } from 'src/styling/variables'
+import { toFirstUpper } from 'src/utils/string'
 
 import logsStyles from './Logs.styles'
 
@@ -51,7 +52,7 @@ const styles = R.merge(logsStyles, localStyles)
 
 const useStyles = makeStyles(styles)
 
-const SHOW_ALL = 'Show all'
+const SHOW_ALL = { code: 'SHOW_ALL', display: 'Show all' }
 
 const formatDate = date => {
   return moment(date).format('YYYY-MM-DD HH:mm')
@@ -97,14 +98,22 @@ const Logs = () => {
     }
   })
 
+  const defaultLogLevels = [
+    { code: 'error', display: 'Error' },
+    { code: 'info', display: 'Info' },
+    { code: 'debug', display: 'Debug' }
+  ]
   const serverVersion = data?.serverVersion
   const processStates = data?.uptime ?? []
 
   const getLogLevels = R.compose(
     R.prepend(SHOW_ALL),
     R.uniq,
-    R.concat(['error', 'info', 'debug']),
+    R.concat(defaultLogLevels),
-    R.map(R.path(['logLevel'])),
+    R.map(it => ({
+      code: R.path(['logLevel'])(it),
+      display: toFirstUpper(R.path(['logLevel'])(it))
+    })),
     R.path(['serverLogs'])
   )
 
@@ -167,7 +176,8 @@ const Logs = () => {
               {data &&
                 data.serverLogs
                   .filter(
-                    log => logLevel === SHOW_ALL || log.logLevel === logLevel
+                    log =>
+                      logLevel === SHOW_ALL || log.logLevel === logLevel.code
                   )
                   .map((log, idx) => (
                     <TableRow key={idx} size="sm">