From c5d9beea0481d87421968ddee72e48c1f7885309 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jos=C3=A9=20Oliveira?= <josepfo.w@gmail.com>
Date: Wed, 18 Aug 2021 13:26:24 +0100
Subject: [PATCH] feat: simplified tx exports

---
 .../src/components/LogsDownloaderPopper.js    | 49 ++++++++++++++-----
 .../src/pages/Transactions/Transactions.js    | 16 ++++--
 2 files changed, 51 insertions(+), 14 deletions(-)

diff --git a/new-lamassu-admin/src/components/LogsDownloaderPopper.js b/new-lamassu-admin/src/components/LogsDownloaderPopper.js
index 8e26dcd7..d0fc8f2b 100644
--- a/new-lamassu-admin/src/components/LogsDownloaderPopper.js
+++ b/new-lamassu-admin/src/components/LogsDownloaderPopper.js
@@ -129,22 +129,31 @@ const styles = {
 const useStyles = makeStyles(styles)
 const ALL = 'all'
 const RANGE = 'range'
+const ADVANCED = 'advanced'
+const SIMPLIFIED = 'simplified'
 
 const LogsDownloaderPopover = ({
   name,
-  query,
+  queries,
   args,
   title,
   getLogs,
-  timezone
+  timezone,
+  getSimplifiedLogs
 }) => {
   const [selectedRadio, setSelectedRadio] = useState(ALL)
+  const [selectedAdvancedRadio, setSelectedAdvancedRadio] = useState(ADVANCED)
+
   const [range, setRange] = useState({ from: null, until: null })
   const [anchorEl, setAnchorEl] = useState(null)
-  const [fetchLogs] = useLazyQuery(query, {
+  const [fetchLogs] = useLazyQuery(queries[0], {
     onCompleted: data => createLogsFile(getLogs(data), range)
   })
 
+  const [fetchSimplifiedLogs] = useLazyQuery(queries[1], {
+    onCompleted: data => createLogsFile(getSimplifiedLogs(data), range)
+  })
+
   const classes = useStyles()
 
   const dateRangePickerClasses = {
@@ -158,6 +167,12 @@ const LogsDownloaderPopover = ({
     if (selectedRadio === ALL) setRange({ from: null, until: null })
   }
 
+  const handleAdvancedRadioButtons = evt => {
+    const selectedAdvancedRadio = R.path(['target', 'value'])(evt)
+    setSelectedAdvancedRadio(selectedAdvancedRadio)
+    if (selectedAdvancedRadio === ALL) setRange({ from: null, until: null })
+  }
+
   const handleRangeChange = useCallback(
     (from, until) => {
       setRange({ from, until })
@@ -165,9 +180,11 @@ const LogsDownloaderPopover = ({
     [setRange]
   )
 
-  const downloadLogs = (range, args, fetchLogs) => {
+  const downloadLogs = (range, args) => {
+    const fetch =
+      selectedAdvancedRadio === SIMPLIFIED ? fetchSimplifiedLogs : fetchLogs
     if (selectedRadio === ALL) {
-      fetchLogs({
+      fetch({
         variables: {
           ...args
         }
@@ -179,7 +196,7 @@ const LogsDownloaderPopover = ({
     if (moment(range.from).isSame(range.until, 'day')) range.until = moment()
 
     if (selectedRadio === RANGE) {
-      fetchLogs({
+      fetch({
         variables: {
           ...args,
           from: range.from,
@@ -218,7 +235,9 @@ const LogsDownloaderPopover = ({
 
   const radioButtonOptions = [
     { display: 'All logs', code: ALL },
-    { display: 'Date range', code: RANGE }
+    { display: 'Date range', code: RANGE },
+    { display: 'Advanced logs', code: ADVANCED },
+    { display: 'Simplified logs', code: SIMPLIFIED }
   ]
 
   const open = Boolean(anchorEl)
@@ -240,7 +259,7 @@ const LogsDownloaderPopover = ({
               <RadioGroup
                 name="logs-select"
                 value={selectedRadio}
-                options={radioButtonOptions}
+                options={radioButtonOptions.slice(0, 2)}
                 ariaLabel="logs-select"
                 onChange={handleRadioButtons}
                 className={classes.radioButtons}
@@ -265,10 +284,18 @@ const LogsDownloaderPopover = ({
                 />
               </div>
             )}
+            <div className={classes.radioButtonsContainer}>
+              <RadioGroup
+                name="simplified-tx-logs"
+                value={selectedAdvancedRadio}
+                options={radioButtonOptions.slice(2, 4)}
+                ariaLabel="simplified-tx-logs"
+                onChange={handleAdvancedRadioButtons}
+                className={classes.radioButtons}
+              />
+            </div>
             <div className={classes.download}>
-              <Link
-                color="primary"
-                onClick={() => downloadLogs(range, args, fetchLogs)}>
+              <Link color="primary" onClick={() => downloadLogs(range, args)}>
                 Download
               </Link>
             </div>
diff --git a/new-lamassu-admin/src/pages/Transactions/Transactions.js b/new-lamassu-admin/src/pages/Transactions/Transactions.js
index cd50bde5..fc62fedb 100644
--- a/new-lamassu-admin/src/pages/Transactions/Transactions.js
+++ b/new-lamassu-admin/src/pages/Transactions/Transactions.js
@@ -56,6 +56,12 @@ const GET_TRANSACTION_FILTERS = gql`
   }
 `
 
+const GET_SIMPLIFIED_TRANSACTIONS_CSV = gql`
+  query transactions($limit: Int, $from: Date, $until: Date) {
+    simplifiedTransactionsCsv(limit: $limit, from: $from, until: $until)
+  }
+`
+
 const GET_TRANSACTIONS = gql`
   query transactions(
     $limit: Int
@@ -276,10 +282,14 @@ const Transactions = () => {
               <LogsDowloaderPopover
                 title="Download logs"
                 name="transactions"
-                query={GET_TRANSACTIONS_CSV}
-                args={{ timezone }}
+                queries={[
+                  GET_TRANSACTIONS_CSV,
+                  GET_SIMPLIFIED_TRANSACTIONS_CSV
+                ]}
                 getLogs={logs => R.path(['transactionsCsv'])(logs)}
-                timezone={timezone}
+                getSimplifiedLogs={logs =>
+                  R.path(['simplifiedTransactionsCsv'])(logs)
+                }
               />
             </div>
           )}