chore: eslint continuation

new-lamassu-admin/eslint.config.js

@@ -13,13 +13,20 @@ export default [
         process: 'readonly'
       }
     },
+    settings: {
+      react: {
+        version: '16'
+      }
+    }
   },
   pluginJs.configs.recommended,
   pluginReact.configs.flat.recommended,
   {
     rules: {
       'react/prop-types': 'off',
-      'react/display-name': 'off'
+      'react/display-name': 'off',
+      'react/no-unescaped-entities': 'off',
+      'no-unused-vars': 'off',
     }
   }
 ]

new-lamassu-admin/src/components/buttons/SimpleButton.jsx

@@ -1,59 +0,0 @@
-import { makeStyles } from '@material-ui/core/styles'
-import classnames from 'classnames'
-import React, { memo } from 'react'
-
-import baseButtonStyles from './BaseButton.styles'
-
-const { baseButton, primary } = baseButtonStyles
-
-const styles = {
-  button: {
-    extend: baseButton,
-    borderRadius: baseButton.height / 2,
-    outline: 0,
-    padding: '0 20px'
-  },
-  primary,
-  buttonIcon: {
-    marginTop: 4,
-    marginRight: 4,
-    '& svg': {
-      width: 20,
-      height: 20,
-      overflow: 'visible'
-    }
-  },
-  buttonIconActive: {} // required to extend primary
-}
-
-const useStyles = makeStyles(styles)
-
-const SimpleButton = memo(
-  ({ className, Icon, InverseIcon, children, color, size, ...props }) => {
-    const classes = useStyles()
-
-    return (
-      <button
-        className={classnames(classes.primary, classes.button, className)}
-        {...props}>
-        {Icon && (
-          <div className={classes.buttonIcon}>
-            <Icon />
-          </div>
-        )}
-        {InverseIcon && (
-          <div
-            className={classnames(
-              classes.buttonIcon,
-              classes.buttonIconActive
-            )}>
-            <InverseIcon />
-          </div>
-        )}
-        {children}
-      </button>
-    )
-  }
-)
-
-export default SimpleButton

new-lamassu-admin/src/components/editableTable/Row.jsx

@@ -165,8 +165,9 @@ const ECol = ({ editing, focus, config, extraPaddingRight, extraPadding }) => {
 
   return (
     <div className={classes.fields}>
-      {R.map(f => (
+      {fields.map((f, idx) => (
         <Td
+          key={idx}
           className={{
             [classes.extraPaddingRight]: extraPaddingRight,
             [classes.extraPadding]: extraPadding,
@@ -204,7 +205,7 @@ const ECol = ({ editing, focus, config, extraPaddingRight, extraPadding }) => {
           )}
           {isHidden(values) && <StripesSvg />}
         </Td>
-      ))(fields)}
+      ))}
     </div>
   )
 }

new-lamassu-admin/src/components/layout/Header.jsx

@@ -141,7 +141,7 @@ const Header = memo(({ tree, user }) => {
                     className={classnames(classes.link, classes.whiteLink)}
                     activeClassName={classes.activeLink}>
                     <li className={classes.li}>
-                      <span className={classes.forceSize} forcesize={it.label}>
+                      <span className={classes.forceSize} data-forcesize={it.label}>
                         {it.label}
                       </span>
                     </li>

new-lamassu-admin/src/components/layout/Header.styles.js

@@ -90,7 +90,7 @@ const styles = {
     textAlign: 'center',
     '&:after': {
       display: 'block',
-      content: 'attr(forcesize)',
+      content: 'attr(data-forcesize)',
       fontWeight: 700,
       height: 0,
       overflow: 'hidden',

new-lamassu-admin/src/components/layout/Sidebar.jsx

@@ -26,7 +26,7 @@ const Sidebar = ({
       {loading && <P>Loading...</P>}
       {!loading &&
         data?.map((it, idx) => (
-          <div className={classes.linkWrapper} onClick={() => onClick(it)}>
+          <div key={idx} className={classes.linkWrapper} onClick={() => onClick(it)}>
             <div
               key={idx}
               className={classnames({

new-lamassu-admin/src/pages/Customers/CustomerData.jsx

@@ -485,7 +485,6 @@ const CustomerData = ({
         hasImage={hasImage}
         hasAdditionalData={hasAdditionalData}
         fields={fields}
-        children={children}
         validationSchema={validationSchema}
         initialValues={initialValues}
         save={save}
@@ -493,7 +492,7 @@ const CustomerData = ({
         deleteEditedData={deleteEditedData}
         retrieveAdditionalData={retrieveAdditionalData}
         checkAgainstSanctions={checkAgainstSanctions}
-        editable={editable}></EditableCard>
+        editable={editable}>{children}</EditableCard>
     )
   }
 
@@ -506,12 +505,11 @@ const CustomerData = ({
         title={title}
         key={idx}
         state={state}
-        children={children}
         initialValues={initialValues}
         titleIcon={titleIcon}
         editable={false}
         hasImage={hasImage}
-        fields={fields}></EditableCard>
+        fields={fields}>{children}</EditableCard>
     )
   }
 
@@ -522,23 +520,24 @@ const CustomerData = ({
       <div className={classes.header}>
         <H3 className={classes.title}>{'Customer data'}</H3>
         {// TODO: Remove false condition for next release
-        false && (
+        // false && (
-          <>
+        //   <>
-            <FeatureButton
+        //     <FeatureButton
-              active={!listView}
+        //       active={!listView}
-              className={classes.viewIcons}
+        //       className={classes.viewIcons}
-              Icon={OverviewIcon}
+        //       Icon={OverviewIcon}
-              InverseIcon={OverviewReversedIcon}
+        //       InverseIcon={OverviewReversedIcon}
-              onClick={() => setListView(false)}
+        //       onClick={() => setListView(false)}
-            />
+        //     />
-            <FeatureButton
+        //     <FeatureButton
-              active={listView}
+        //       active={listView}
-              className={classes.viewIcons}
+        //       className={classes.viewIcons}
-              Icon={CustomerListViewIcon}
+        //       Icon={CustomerListViewIcon}
-              InverseIcon={CustomerListViewReversedIcon}
+        //       InverseIcon={CustomerListViewReversedIcon}
-              onClick={() => setListView(true)}></FeatureButton>
+        //       onClick={() => setListView(true)}></FeatureButton>
-          </>
+        //   </>
-        )}
+        // )
+        }
       </div>
       <div>
         {!listView && customer && (

new-lamassu-admin/src/pages/Customers/CustomerNotes.jsx

@@ -58,16 +58,15 @@ const CustomerNotes = ({
       {R.isNil(editing) && (
         <div className={classes.notesChipList}>
           <NewNoteCard setOpenModal={setOpenModal} />
-          {R.map(
+          {customerNotes.map((it, idx) => (
-            it => (
               <NoteCard
+                key={idx}
                 note={it}
                 deleteNote={deleteNote}
                 handleClick={setEditing}
                 timezone={timezone}
               />
-            ),
+            )
-            customerNotes
           )}
         </div>
       )}

new-lamassu-admin/src/pages/Customers/CustomerPhotos.jsx

@@ -28,7 +28,7 @@ const CustomerPhotos = ({ photosData, timezone }) => {
       <div className={classes.photosChipList}>
         {photosData.map((elem, idx) => (
           <PhotoCard
-            idx={idx}
+            key={idx}
             date={elem.date}
             src={`/${elem.photoDir}/${elem.path}`}
             setPhotosDialog={setPhotosDialog}

new-lamassu-admin/src/pages/Customers/components/CreateCustomerModal.jsx

@@ -45,7 +45,9 @@ const getValidationSchema = countryCodes =>
           }, countryCodes)
 
           return R.any(it => it === true, validMap)
-        } catch (e) {}
+        } catch (e) {
+          return false
+        }
       })
       .trim()
   })

new-lamassu-admin/src/pages/Customers/components/CustomerSidebar.jsx

@@ -45,8 +45,9 @@ const CustomerSidebar = ({ isSelected, onClick }) => {
 
   return (
     <div className={classes.sidebar}>
-      {sideBarOptions?.map(({ Icon, InverseIcon, display, code }) => (
+      {sideBarOptions?.map(({ Icon, InverseIcon, display, code }, idx) => (
         <div
+          key={idx}
           className={classnames({
             [classes.activeLink]: isSelected(code),
             [classes.link]: true

new-lamassu-admin/src/pages/Customers/components/EditableCard.jsx

@@ -259,16 +259,16 @@ const EditableCard = ({
                   {!editing && (
                     <div className={classes.editButton}>
                       <div className={classes.deleteButton}>
-                        {false && (
+                        {/*{false && (*/}
-                          <ActionButton
+                        {/*  <ActionButton*/}
-                            color="primary"
+                        {/*    color="primary"*/}
-                            type="button"
+                        {/*    type="button"*/}
-                            Icon={DeleteIcon}
+                        {/*    Icon={DeleteIcon}*/}
-                            InverseIcon={DeleteReversedIcon}
+                        {/*    InverseIcon={DeleteReversedIcon}*/}
-                            onClick={() => deleteEditedData()}>
+                        {/*    onClick={() => deleteEditedData()}>*/}
-                            Delete
+                        {/*    Delete*/}
-                          </ActionButton>
+                        {/*  </ActionButton>*/}
-                        )}
+                        {/*)}*/}
                         {!hasAdditionalData && (
                           <ActionButton
                             color="primary"

new-lamassu-admin/src/pages/Customers/helper.jsx

@@ -1,3 +1,4 @@
+import React from 'react'
 import { makeStyles, Box } from '@material-ui/core'
 import classnames from 'classnames'
 import { parse, isValid, format } from 'date-fns/fp'
@@ -325,8 +326,9 @@ const ManualDataEntry = ({ selectedValues, customInfoRequirementOptions }) => {
       <div className={classes.field}>
         {!upload &&
           !isCustomInfoRequirement &&
-          elements.options.map(({ label, name }) => (
+          elements.options.map(({ label, name }, idx) => (
             <Field
+              key={idx}
               name={name}
               label={label}
               component={TextInput}

new-lamassu-admin/src/pages/Dashboard/SystemStatus/MachinesTable.jsx

@@ -107,16 +107,14 @@ const MachinesTable = ({ machines = [], numToRender }) => {
                   <TxInIcon />
                 </div>
               </HeaderCell> */}
-            {R.map(
+            {R.times(R.identity, maxNumberOfCassettes).map((it, idx) => (
-              it => (
+                <HeaderCell key={idx}>
-                <HeaderCell>
                   <div className={classes.header}>
                     <TxOutIcon />
                     <Label2 className={classes.label}> {it + 1}</Label2>
                   </div>
                 </HeaderCell>
-              ),
+              )
-              R.times(R.identity, maxNumberOfCassettes)
             )}
           </TableRow>
         </TableHead>
@@ -143,21 +141,19 @@ const MachinesTable = ({ machines = [], numToRender }) => {
                   <StyledCell>
                     <Status status={machine.statuses[0]} />
                   </StyledCell>
-                  {R.map(
+                  {R.range(1, maxNumberOfCassettes + 1).map((it, idx) =>
-                    it =>
                       machine.numberOfCassettes >= it ? (
-                        <StyledCell align="left">
+                        <StyledCell key={idx} align="left">
                           {makePercentageText(
                             it,
                             machine.cashUnits[`cassette${it}`]
                           )}
                         </StyledCell>
                       ) : (
-                        <StyledCell align="left">
+                        <StyledCell key={idx} align="left">
                           <TL2>{`— %`}</TL2>
                         </StyledCell>
-                      ),
+                      )
-                    R.range(1, maxNumberOfCassettes + 1)
                   )}
                 </TableRow>
               )

new-lamassu-admin/src/pages/Maintenance/CashUnitDetails.jsx

@@ -106,12 +106,12 @@ const CashUnitDetails = ({
       <div className={classes.billList}>
         <Label1>Cash box</Label1>
         {R.isEmpty(billCount) && <TL2 noMargin>Empty</TL2>}
-        {R.map(it => (
+        {(R.keys(billCount)).map((it, idx) => (
-          <span>
+          <span key={idx}>
             <TL2 noMargin>{billCount[it]}</TL2>
             <Chip label={`${it} ${currency}`} />
           </span>
-        ))(R.keys(billCount))}
+        ))}
       </div>
       <div className={classes.unitList}>
         {machine.numberOfRecyclers === 0 &&
@@ -149,8 +149,9 @@ const CashUnitDetails = ({
                 noMargin
                 className={classes.label}>{`Loading boxes`}</Label1>
               <div className={classes.loadingBoxes}>
-                {R.map(it => (
+                {(R.range(1, machine.numberOfCassettes + 1)).map((it, idx) => (
                   <CashOut
+                    key={idx}
                     width={60}
                     height={40}
                     currency={{ code: currency }}
@@ -167,7 +168,7 @@ const CashUnitDetails = ({
                     }
                     capacity={getCashUnitCapacity(machine.model, 'cassette')}
                   />
-                ))(R.range(1, machine.numberOfCassettes + 1))}
+                ))}
               </div>
             </div>
             <span className={classes.verticalLine} />

new-lamassu-admin/src/pages/Maintenance/helper.jsx

@@ -1,3 +1,4 @@
+import React from 'react'
 import * as R from 'ramda'
 import { CashIn, CashOutLite } from 'src/components/inputs/cashbox/Cashbox'
 import EditIcon from 'src/styling/icons/action/edit/enabled.svg?react'
@@ -56,8 +57,9 @@ const getElements = (
         return (
           <div className={classes.unitsRow}>
             <div className={classes.units}>
-              {R.map(it => (
+              {(R.range(1, m.numberOfCassettes + 1)).map((it, idx) => (
                 <CashOutLite
+                  key={idx}
                   width={'100%'}
                   currency={{ code: fiatCurrency }}
                   notes={m.cashUnits[`cassette${it}`]}
@@ -69,7 +71,7 @@ const getElements = (
                   }
                   capacity={getCashUnitCapacity(m.model, 'cassette')}
                 />
-              ))(R.range(1, m.numberOfCassettes + 1))}
+              ))}
             </div>
             <div className={classes.units}>
               {R.map(it => (

new-lamassu-admin/src/pages/Notifications/sections/Setup.jsx

@@ -132,8 +132,9 @@ const Setup = ({ wizard, forceDisable }) => {
         ))}
       </THead>
       <TBody>
-        {namespaces.map(namespace => (
+        {namespaces.map((namespace, idx) => (
           <Row
+            key={idx}
             namespace={namespace.name}
             forceDisable={namespace.forceDisable}
             save={R.compose(rawSave(null), toNamespace(namespace.name))}

new-lamassu-admin/src/pages/OperatorInfo/SMSNotices/SMSNoticesModal.jsx

@@ -34,13 +34,13 @@ const PREFILL = {
         name: 'has-code',
         message: 'The confirmation code is missing from the message!',
         exclusive: false,
-        test: value => value?.match(/#code/g || [])?.length > 0
+        test: value => value?.match(/#code/g)?.length > 0
       })
       .test({
         name: 'has-single-code',
         message: 'There should be a single confirmation code!',
         exclusive: false,
-        test: value => value?.match(/#code/g || [])?.length === 1
+        test: value => value?.match(/#code/g)?.length === 1
       })
   },
   cashOutDispenseReady: {
@@ -155,12 +155,13 @@ const SMSNoticesModal = ({
                   <Info2 noMargin>Values to attach</Info2>
                 )}
                 <div className={classes.chipButtons}>
-                  {R.map(
+                  {R.splitEvery(3, CHIPS[sms?.event]).map(
-                    it => (
+                    (it, idx) => (
-                      <div>
+                      <div key={idx}>
-                        {R.map(
+                        {it.map(
-                          ite => (
+                          (ite, idx2) => (
                             <Chip
+                              key={idx2}
                               label={ite.display}
                               size="small"
                               style={{ backgroundColor: zircon }}
@@ -176,12 +177,10 @@ const SMSNoticesModal = ({
                                 )
                               }}
                             />
-                          ),
+                          )
-                          it
                         )}
                       </div>
                     ),
-                    R.splitEvery(3, CHIPS[sms?.event])
                   )}
                 </div>
                 <div className={classes.footer}>

new-lamassu-admin/src/pages/Transactions/DetailsCard.jsx

@@ -202,9 +202,9 @@ const DetailsRow = ({ it: tx, timezone }) => {
   const walletScoreEl = (
     <div className={classes.walletScore}>
       <svg width={103} height={10}>
-        {R.map(
+        {R.range(0, 10).map((it, idx) => (
-          it => (
             <circle
+              key={idx}
               cx={it * 10 + 6}
               cy={4}
               r={3.5}
@@ -218,8 +218,7 @@ const DetailsRow = ({ it: tx, timezone }) => {
                   : offErrorColor
               }
             />
-          ),
+          )
-          R.range(0, 10)
         )}
       </svg>
       <P

new-lamassu-admin/src/pages/Wallet/helper.jsx

@@ -1,3 +1,4 @@
+import React from 'react'
 import { getCryptoCurrency } from '@lamassu/coins/lightUtils'
 import * as R from 'ramda'
 import * as Yup from 'yup'

new-lamassu-admin/src/routing/routes.jsx

@@ -120,12 +120,11 @@ const Routes = () => {
           in={true}
           mountOnEnter
           unmountOnExit
-          children={
+        >
             <div className={classes.wrapper}>
               <Dashboard />
             </div>
-          }
+        </Transition>
-        />
       </PrivateRoute>
       <PrivateRoute path="/machines" component={Machines} />
       <PrivateRoute path="/wizard" component={Wizard} />
@@ -141,19 +140,18 @@ const Routes = () => {
             in={!!matchPath(location.pathname, { path: route })}
             mountOnEnter
             unmountOnExit
-            children={
+          >
-              <div className={classes.wrapper}>
+            <div className={classes.wrapper}>
-                <PrivateRoute path={route} key={key}>
+              <PrivateRoute path={route} key={key}>
-                  <Page name={key} />
+                <Page name={key}/>
-                </PrivateRoute>
+              </PrivateRoute>
-              </div>
+            </div>
-            }
+          </Transition>
-          />
         </PrivateRoute>
-      ))}
+        ))}
-      <PublicRoute path="/404" />
+      <PublicRoute path="/404"/>
       <PublicRoute path="*">
-        <Redirect to={{ pathname: '/404' }} />
+        <Redirect to={{ pathname: '/404' }}/>
       </PublicRoute>
     </Switch>
   )