Convert camelCase object keys to human friendly format

3 files changed, 70 insertions, 44 deletions

diff --git a/frontend/package.json b/frontend/package.json
index 09e26b17..a0c8cd46 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -21,6 +21,8 @@
     "craco-less": "1.16",
     "history": "^4.10.1",
     "js-base64": "^2.5.2",
+    "lodash": "^4.17.19",
+    "map-keys-deep-lodash": "^1.2.2",
     "prettier": "^2.0.5",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
diff --git a/frontend/src/components/activity/transaction-history/TransactionsList.tsx b/frontend/src/components/activity/transaction-history/TransactionsList.tsx
index ae49067a..0ebe7d54 100644
--- a/frontend/src/components/activity/transaction-history/TransactionsList.tsx
+++ b/frontend/src/components/activity/transaction-history/TransactionsList.tsx
@@ -1,6 +1,8 @@
 import React from 'react';
 import { DatePicker, Table } from 'antd';
 import JSONTree from 'react-json-tree';
+import _ from 'lodash';
+import mapKeysDeep from 'map-keys-deep-lodash';
 
 const { RangePicker } = DatePicker;
 
@@ -27,32 +29,32 @@ const theme = {
 const mainColumns = [
   {
     title: 'Reference ID',
-    dataIndex: 'accountServicerRef',
+    dataIndex: 'Account Servicer Ref',
   },
   {
     title: 'Status',
-    dataIndex: 'status',
+    dataIndex: 'Status',
   },
   {
     title: 'Creditor Debit Indicator',
-    dataIndex: 'creditDebitIndicator',
+    dataIndex: 'Credit Debit Indicator',
   },
   {
     title: 'Bank Transaction Code',
-    dataIndex: 'bankTransactionCode',
+    dataIndex: 'Bank Transaction Code',
   },
   {
     title: 'Value Date',
-    dataIndex: 'valueDate',
+    dataIndex: 'Value Date',
   },
   {
     title: 'Booking Date',
-    dataIndex: 'bookingDate',
+    dataIndex: 'Booking Date',
   },
 ];
 
 const TransactionsList = () => {
-  const tempTransactions = [
+  let tempTransactions = [
     {
       key: 'acctsvcrref-001',
       amount: 'EUR:100.00',
@@ -84,6 +86,7 @@ const TransactionsList = () => {
       },
     },
     {
+      key: 'acctsvcrref-002',
       amount: 'EUR:50.00',
       creditDebitIndicator: 'CRDT',
       status: 'BOOK',
@@ -143,44 +146,46 @@ const TransactionsList = () => {
         },
       },
     },
-    // {
-    //   amount: 'EUR:1000', // in currency of the account
-    //   creditDebitIndicator: 'CRDT',
-    //   status: 'BOOK',
-    //   bankTransactionCode: 'PMNT-RCDT-XBCT', // cross currency bank xfer
-    //   valueDate: '2020-07-04',
-    //   bookingDate: '2020-07-03',
-    //   accountServicerRef: 'acctsvcrref-002',
-    //   details: {
-    //     debtor: {
-    //       name: 'Mr USA',
-    //       postalAddress: {
-    //         country: 'US',
-    //         addressLines: ['42 Some Street', '4242 Somewhere'],
-    //       },
-    //     },
-    //     debtorAccount: {
-    //       otherId: {
-    //         id: '9876543',
-    //       },
-    //     },
-    //     debtorAgent: {
-    //       bic: 'BANKUSNY', // show in details section
-    //     },
-    //     currencyExchange: {
-    //       sourceCurrency: 'USD',
-    //       targetCurrency: 'EUR',
-    //       exchangeRate: '1.20', // depends on when currency switches over
-    //     },
-    //     instructedAmount: 'USD:1500', // party that initiated payment
-    //     interBankSettlementAmount: 'EUR:1250.0', // used for cross currency xfer (amount that bank exchanges betweeen each other)
-    //     counterValueAmount: 'EUR:1250.0', // amount before/after currency conversion before fees were applied
-    //     unstructuredRemittanceInformation: 'Invoice No. 4242',
-    //   },
-    // },
+    {
+      key: 'acctsvcrref-002-1',
+      amount: 'EUR:1000', // in currency of the account
+      creditDebitIndicator: 'CRDT',
+      status: 'BOOK',
+      bankTransactionCode: 'PMNT-RCDT-XBCT', // cross currency bank xfer
+      valueDate: '2020-07-04',
+      bookingDate: '2020-07-03',
+      accountServicerRef: 'acctsvcrref-002',
+      details: {
+        debtor: {
+          name: 'Mr USA',
+          postalAddress: {
+            country: 'US',
+            addressLines: ['42 Some Street', '4242 Somewhere'],
+          },
+        },
+        debtorAccount: {
+          otherId: {
+            id: '9876543',
+          },
+        },
+        debtorAgent: {
+          bic: 'BANKUSNY', // show in details section
+        },
+        currencyExchange: {
+          sourceCurrency: 'USD',
+          targetCurrency: 'EUR',
+          exchangeRate: '1.20', // depends on when currency switches over
+        },
+        instructedAmount: 'USD:1500', // party that initiated payment
+        interBankSettlementAmount: 'EUR:1250.0', // used for cross currency xfer (amount that bank exchanges betweeen each other)
+        counterValueAmount: 'EUR:1250.0', // amount before/after currency conversion before fees were applied
+        unstructuredRemittanceInformation: 'Invoice No. 4242',
+      },
+    },
     // {
     //   // ACH transaction (executes at the end of the day)/Most transactions are sent in real time now
     //   // Banks have inner transactions has a list inside the details view
+    //   key: 'acctsvcrref-005',
     //   amount: 'EUR:48.42',
     //   creditDebitIndicator: 'DBIT',
     //   status: 'BOOK',
@@ -242,6 +247,13 @@ const TransactionsList = () => {
     // },
   ];
 
+  let transactions = mapKeysDeep(tempTransactions, (value, key) => {
+    if (key === 'key') {
+      return key;
+    }
+    return _.startCase(key);
+  });
+
   return (
     <>
       <div className="activity-buttons-row">
@@ -249,10 +261,10 @@ const TransactionsList = () => {
       </div>
       <Table
         columns={mainColumns}
-        dataSource={tempTransactions}
+        dataSource={transactions}
         expandable={{
           expandedRowRender: (record) => (
-            <JSONTree data={record.details} theme={theme} />
+            <JSONTree data={record['Details']} theme={theme} />
           ),
         }}
       />
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index ab420add..cc6219ad 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -7296,6 +7296,11 @@ lodash.uniq@^4.5.0:
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.15.tgz#b447f6670a0455bbfeedd11392eff330ea097548"
   integrity sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==
 
+lodash@^4.17.19, lodash@~4.17.11:
+  version "4.17.19"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.19.tgz#e48ddedbe30b3321783c5b4301fbd353bc1e4a4b"
+  integrity sha512-JNvd8XER9GQX0v2qJgsaN/mzFCNA5BRe/j8JN9d+tWyGLSodKQHKFicdwNYzWwI3wjRnaKPsGj1XkBjx/F96DQ==
+
 loglevel@^1.6.6:
   version "1.6.8"
   resolved "https://registry.yarnpkg.com/loglevel/-/loglevel-1.6.8.tgz#8a25fb75d092230ecd4457270d80b54e28011171"
@@ -7361,6 +7366,13 @@ map-cache@^0.2.2:
   resolved "https://registry.yarnpkg.com/map-cache/-/map-cache-0.2.2.tgz#c32abd0bd6525d9b051645bb4f26ac5dc98a0dbf"
   integrity sha1-wyq9C9ZSXZsFFkW7TyasXcmKDb8=
 
+map-keys-deep-lodash@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/map-keys-deep-lodash/-/map-keys-deep-lodash-1.2.2.tgz#95a2804d1ff6524b046d40ffd258a960dd8fe902"
+  integrity sha512-VYWvT1hjvk4r3pXjEkVdo87R5gPjrpr0Y7ZWsu2g6Ce2+gKit588kx2TSoI0EgeYJAegMoxINl6bOAN5w7mRxw==
+  dependencies:
+    lodash "~4.17.11"
+
 map-visit@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/map-visit/-/map-visit-1.0.0.tgz#ecdca8f13144e660f1b5bd41f12f3479d98dfb8f"