From 62ea0388ffbf59dbf970c96f50937ac36768f4d9 Mon Sep 17 00:00:00 2001
From: Enrique Ortiz <hi@enriqueortiz.dev>
Date: Mon, 6 Jul 2020 18:06:20 -0400
Subject: [PATCH 1/4] Agent Filtering: Move page reset to 0 to be an effect

---
 .../app/src/components/useFilteredTransactions.js   | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/apps/agent/app/src/components/useFilteredTransactions.js b/apps/agent/app/src/components/useFilteredTransactions.js
index bf42f98dd6..faa81ace19 100644
--- a/apps/agent/app/src/components/useFilteredTransactions.js
+++ b/apps/agent/app/src/components/useFilteredTransactions.js
@@ -1,4 +1,4 @@
-import { useState, useCallback, useMemo } from 'react'
+import { useState, useCallback, useEffect, useMemo } from 'react'
 import { endOfDay, isWithinInterval, startOfDay } from 'date-fns'
 import { TRANSACTION_TYPES } from '../transaction-types'
 import { addressesEqual } from '../lib/web3-utils'
@@ -14,20 +14,23 @@ function useFilteredTransactions({ transactions, tokens }) {
     INITIAL_TRANSACTION_TYPE
   )
   const [selectedToken, setSelectedToken] = useState(INITIAL_TOKEN)
+
+  useEffect(() => setPage(0), [
+    selectedDateRange,
+    selectedToken,
+    selectedTransactionType,
+  ])
+
   const handleSelectedDateRangeChange = useCallback(range => {
-    setPage(0)
     setSelectedDateRange(range)
   }, [])
   const handleTokenChange = useCallback(index => {
-    setPage(0)
     setSelectedToken(index || INITIAL_TOKEN)
   }, [])
   const handleTransactionTypeChange = useCallback(index => {
-    setPage(0)
     setSelectedTransactionType(index || INITIAL_TRANSACTION_TYPE)
   }, [])
   const handleClearFilters = useCallback(() => {
-    setPage(0)
     setSelectedTransactionType(INITIAL_TRANSACTION_TYPE)
     setSelectedToken(INITIAL_TOKEN)
     setSelectedDateRange(INITIAL_DATE_RANGE)

From e5c7b2f5622ece0db071d38766a39d97bbdf77e6 Mon Sep 17 00:00:00 2001
From: Enrique Ortiz <hi@enriqueortiz.dev>
Date: Mon, 6 Jul 2020 18:42:51 -0400
Subject: [PATCH 2/4] Filtering: make transactionTypes be provided by
 useFilteredTransactions hook

---
 apps/agent/app/src/components/Transactions.js          | 10 +++++++---
 .../app/src/components/useFilteredTransactions.js      |  8 ++++++--
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/apps/agent/app/src/components/Transactions.js b/apps/agent/app/src/components/Transactions.js
index 6332947980..b5b438d4eb 100644
--- a/apps/agent/app/src/components/Transactions.js
+++ b/apps/agent/app/src/components/Transactions.js
@@ -26,7 +26,6 @@ import {
 import { useIdentity } from './IdentityManager/IdentityManager'
 import LocalIdentityBadge from './LocalIdentityBadge/LocalIdentityBadge'
 import TransactionFilters from './TransactionFilters'
-import { TRANSACTION_TYPES_LABELS } from '../transaction-types'
 import useDownloadData from './useDownloadData'
 import useFilteredTransactions from './useFilteredTransactions'
 import { ISO_SHORT_FORMAT, ISO_LONG_FORMAT } from '../lib/date-utils'
@@ -57,8 +56,13 @@ const Transactions = React.memo(function Transactions({
     selectedToken,
     selectedTransactionType,
     symbols,
+    transactionTypes,
   } = useFilteredTransactions({ transactions, tokens })
 
+  const transactionLabels = useMemo(() => Object.values(transactionTypes), [
+    transactionTypes,
+  ])
+
   const tokenDetails = tokens.reduce(
     (details, { address, decimals, symbol }) => {
       details[toChecksumAddress(address)] = {
@@ -140,7 +144,7 @@ const Transactions = React.memo(function Transactions({
                 symbols={symbols}
                 tokenFilter={selectedToken}
                 transactionTypeFilter={selectedTransactionType}
-                transactionTypes={Object.values(TRANSACTION_TYPES_LABELS)}
+                transactionTypes={transactionLabels}
               />
             )}
             <Button
@@ -225,7 +229,7 @@ const Transactions = React.memo(function Transactions({
               color: ${theme.surfaceContent};
             `}
           >
-            {TRANSACTION_TYPES_LABELS[type]}
+            {transactionTypes[type]}
           </div>
         )
         const referenceNode = (
diff --git a/apps/agent/app/src/components/useFilteredTransactions.js b/apps/agent/app/src/components/useFilteredTransactions.js
index faa81ace19..5c8c05512b 100644
--- a/apps/agent/app/src/components/useFilteredTransactions.js
+++ b/apps/agent/app/src/components/useFilteredTransactions.js
@@ -1,6 +1,9 @@
 import { useState, useCallback, useEffect, useMemo } from 'react'
 import { endOfDay, isWithinInterval, startOfDay } from 'date-fns'
-import { TRANSACTION_TYPES } from '../transaction-types'
+import {
+  TRANSACTION_TYPES,
+  TRANSACTION_TYPES_LABELS,
+} from '../transaction-types'
 import { addressesEqual } from '../lib/web3-utils'
 
 const INITIAL_DATE_RANGE = { start: null, end: null }
@@ -10,10 +13,10 @@ const INITIAL_TOKEN = -1
 function useFilteredTransactions({ transactions, tokens }) {
   const [page, setPage] = useState(0)
   const [selectedDateRange, setSelectedDateRange] = useState(INITIAL_DATE_RANGE)
+  const [selectedToken, setSelectedToken] = useState(INITIAL_TOKEN)
   const [selectedTransactionType, setSelectedTransactionType] = useState(
     INITIAL_TRANSACTION_TYPE
   )
-  const [selectedToken, setSelectedToken] = useState(INITIAL_TOKEN)
 
   useEffect(() => setPage(0), [
     selectedDateRange,
@@ -103,6 +106,7 @@ function useFilteredTransactions({ transactions, tokens }) {
     selectedToken,
     selectedTransactionType,
     symbols,
+    transactionTypes: TRANSACTION_TYPES_LABELS,
   }
 }
 

From 73bd6ddf2814c3976edd99c5391fa681d16c70e3 Mon Sep 17 00:00:00 2001
From: Enrique Ortiz <hi@enriqueortiz.dev>
Date: Thu, 9 Jul 2020 09:39:00 -0400
Subject: [PATCH 3/4] Agent: Implement individual date filtering

---
 .../src/components/useFilteredTransactions.js | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/apps/agent/app/src/components/useFilteredTransactions.js b/apps/agent/app/src/components/useFilteredTransactions.js
index 5c8c05512b..4c411e8a29 100644
--- a/apps/agent/app/src/components/useFilteredTransactions.js
+++ b/apps/agent/app/src/components/useFilteredTransactions.js
@@ -1,5 +1,5 @@
 import { useState, useCallback, useEffect, useMemo } from 'react'
-import { endOfDay, isWithinInterval, startOfDay } from 'date-fns'
+import { endOfDay, isAfter, isBefore, startOfDay } from 'date-fns'
 import {
   TRANSACTION_TYPES,
   TRANSACTION_TYPES_LABELS,
@@ -54,15 +54,17 @@ function useFilteredTransactions({ transactions, tokens }) {
           return false
         }
 
-        // Exclude by date range
+        // filter separately by start and end date
         if (
-          // We're not checking for an end date because we will always
-          // have a start date for defining a range.
           selectedDateRange.start &&
-          !isWithinInterval(new Date(date), {
-            start: startOfDay(selectedDateRange.start),
-            end: endOfDay(selectedDateRange.end),
-          })
+          isBefore(new Date(date), startOfDay(selectedDateRange.start))
+        ) {
+          return false
+        }
+
+        if (
+          selectedDateRange.start &&
+          isAfter(new Date(date), endOfDay(selectedDateRange.end))
         ) {
           return false
         }
@@ -93,6 +95,7 @@ function useFilteredTransactions({ transactions, tokens }) {
     (selectedToken > 0 ||
       selectedTransactionType > 0 ||
       selectedDateRange.start)
+
   return {
     emptyResultsViaFilters,
     filteredTransactions,

From 72d60664a814b8900d8ba576b3c0def9671fbf70 Mon Sep 17 00:00:00 2001
From: Enrique Ortiz <enrique@aragon.one>
Date: Mon, 13 Jul 2020 13:16:26 -0400
Subject: [PATCH 4/4] Add proper spelling :)

Co-authored-by: Andy Hook <hello@andy-hook.co.uk>
---
 apps/agent/app/src/components/useFilteredTransactions.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/agent/app/src/components/useFilteredTransactions.js b/apps/agent/app/src/components/useFilteredTransactions.js
index 4c411e8a29..9e379c6e6b 100644
--- a/apps/agent/app/src/components/useFilteredTransactions.js
+++ b/apps/agent/app/src/components/useFilteredTransactions.js
@@ -54,7 +54,7 @@ function useFilteredTransactions({ transactions, tokens }) {
           return false
         }
 
-        // filter separately by start and end date
+        // Filter separately by start and end date
         if (
           selectedDateRange.start &&
           isBefore(new Date(date), startOfDay(selectedDateRange.start))