fix: improve individual discount loading

lib/customers.js

@@ -487,6 +487,14 @@ function batch () {
     }, customers)))
 }
 
+function getSlimCustomerByIdBatch (ids) {
+  const sql = `SELECT id, phone, id_card_data 
+    FROM customers 
+    WHERE id = ANY($1::uuid[])`
+  return db.any(sql, [ids])
+    .then(customers => _.map(camelize, customers))
+}
+
 // TODO: getCustomersList and getCustomerById are very similar, so this should be refactored
 
 /**
@@ -1032,6 +1040,7 @@ module.exports = {
   get,
   getWithEmail,
   batch,
+  getSlimCustomerByIdBatch,
   getCustomersList,
   getCustomerById,
   getById,

lib/new-admin/graphql/resolvers/loyalty.resolver.js

@@ -1,6 +1,16 @@
+const DataLoader = require('dataloader')
+
 const loyalty = require('../../../loyalty')
+const { getSlimCustomerByIdBatch } = require('../../../customers')
+
+const customerLoader = new DataLoader(ids => {
+  return getSlimCustomerByIdBatch(ids)
+}, { cache: false })
 
 const resolvers = {
+  IndividualDiscount: {
+    customer: parent => customerLoader.load(parent.customerId)
+  },
   Query: {
     promoCodes: () => loyalty.getAvailablePromoCodes(),
     individualDiscounts: () => loyalty.getAvailableIndividualDiscounts()

lib/new-admin/graphql/types/loyalty.type.js

@@ -3,10 +3,16 @@ const gql = require('graphql-tag')
 const typeDef = gql`
   type IndividualDiscount {
     id: ID!
-    customerId: ID!
+    customer: DiscountCustomer!
     discount: Int
   }
   
+  type DiscountCustomer {
+    id: ID!
+    phone: String
+    idCardData: JSONObject
+  }
+
   type PromoCode {
     id: ID!
     code: String!

new-lamassu-admin/src/pages/LoyaltyPanel/IndividualDiscount.styles.js

@@ -49,6 +49,9 @@ const styles = {
   },
   error: {
     color: errorColor
+  },
+  disabled: {
+    cursor: 'wait'
   }
 }
 

new-lamassu-admin/src/pages/LoyaltyPanel/IndividualDiscounts.jsx

@@ -13,6 +13,7 @@ import { Link, Button, IconButton } from 'src/components/buttons'
 
 import styles from './IndividualDiscount.styles'
 import IndividualDiscountModal from './IndividualDiscountModal'
+import classnames from 'classnames'
 
 const useStyles = makeStyles(styles)
 
@@ -20,7 +21,11 @@ const GET_INDIVIDUAL_DISCOUNTS = gql`
   query individualDiscounts {
     individualDiscounts {
       id
-      customerId
+      customer {
+        id
+        phone
+        idCardData
+      }
       discount
     }
   }
@@ -62,7 +67,7 @@ const IndividualDiscounts = () => {
   const [showModal, setShowModal] = useState(false)
   const toggleModal = () => setShowModal(!showModal)
 
-  const { data: discountResponse, loading: discountLoading } = useQuery(
+  const { data: discountResponse, loading } = useQuery(
     GET_INDIVIDUAL_DISCOUNTS
   )
   const { data: customerData, loading: customerLoading } =
@@ -75,11 +80,6 @@ const IndividualDiscounts = () => {
     }
   )
 
-  const getCustomer = id => {
-    const customers = R.path(['customers'])(customerData)
-    return R.find(R.propEq('id', id))(customers)
-  }
-
   const [deleteDiscount] = useMutation(DELETE_DISCOUNT, {
     onError: ({ message }) => {
       const errorMessage = message ?? 'Error while deleting row'
@@ -96,11 +96,10 @@ const IndividualDiscounts = () => {
       textAlign: 'left',
       size: 'sm',
       view: t => {
-        const customer = getCustomer(t.customerId)
         return (
           <div className={classes.identification}>
             <PhoneIdIcon />
-            <span>{customer.phone}</span>
+            <span>{t.customer.phone}</span>
           </div>
         )
       }
@@ -111,7 +110,7 @@ const IndividualDiscounts = () => {
       textAlign: 'left',
       size: 'sm',
       view: t => {
-        const customer = getCustomer(t.customerId)
+        const customer = t.customer
         if (R.isNil(customer.idCardData)) {
           return <>{'-'}</>
         }
@@ -153,8 +152,6 @@ const IndividualDiscounts = () => {
     }
   ]
 
-  const loading = discountLoading || customerLoading
-
   return (
     <>
       {!loading && !R.isEmpty(discountResponse.individualDiscounts) && (
@@ -165,7 +162,7 @@ const IndividualDiscounts = () => {
             className={classes.tableWidth}
             display="flex"
             justifyContent="flex-end">
-            <Link color="primary" onClick={toggleModal}>
+            <Link color="primary" onClick={toggleModal} className={classnames({[classes.disabled]: customerLoading})} disabled={customerLoading}>
               Add new code
             </Link>
           </Box>