From 39f3d561d734db882e724c50812ed9c0466736c9 Mon Sep 17 00:00:00 2001
From: bgptr <bgptr@protonmail.com>
Date: Wed, 1 Dec 2021 16:55:52 +0100
Subject: [PATCH] add Filter by Hash functionality to Ticket History view

---
 .../TicketsPage/MyTicketsTab/MyTicketsTab.jsx |  9 +++++++
 .../MyTicketsTab/MyTicketsTab.module.css      |  5 ++--
 .../views/TicketsPage/MyTicketsTab/Page.jsx   | 26 ++++++++++++++++++-
 .../views/TicketsPage/MyTicketsTab/hooks.js   |  3 +++
 app/selectors.js                              |  5 ++++
 5 files changed, 44 insertions(+), 4 deletions(-)

diff --git a/app/components/views/TicketsPage/MyTicketsTab/MyTicketsTab.jsx b/app/components/views/TicketsPage/MyTicketsTab/MyTicketsTab.jsx
index 0e664293c6..3e8cb790e6 100644
--- a/app/components/views/TicketsPage/MyTicketsTab/MyTicketsTab.jsx
+++ b/app/components/views/TicketsPage/MyTicketsTab/MyTicketsTab.jsx
@@ -92,6 +92,7 @@ const selectTicketTypeFromFilter = (filter) => {
 
 const MyTickets = ({ toggleIsLegacy }) => {
   const {
+    intl,
     tickets,
     tsDate,
     noMoreTickets,
@@ -113,6 +114,7 @@ const MyTickets = ({ toggleIsLegacy }) => {
   const [selectedSortOrderKey, setSortOrderKey] = useState(
     ticketsFilter.listDirection
   );
+  const [searchText, setSearchText] = useState(ticketsFilter.search);
 
   const onChangeFilter = (filter) => {
     const newFilter = { ...ticketsFilter, ...filter };
@@ -129,11 +131,18 @@ const MyTickets = ({ toggleIsLegacy }) => {
     setSortOrderKey(type.value);
   };
 
+  const onChangeSearchText = (searchText) => {
+    onChangeFilter({ search: searchText });
+    setSearchText(searchText);
+  };
   const loadMoreThreshold = 90 + Math.max(0, window.innerHeight - 765);
 
   return (
     <TicketListPage
       {...{
+        intl,
+        searchText,
+        onChangeSearchText,
         selectedTicketTypeKey,
         selectedSortOrderKey,
         loadMoreThreshold,
diff --git a/app/components/views/TicketsPage/MyTicketsTab/MyTicketsTab.module.css b/app/components/views/TicketsPage/MyTicketsTab/MyTicketsTab.module.css
index 0efe6a0f50..6ffd940e7f 100644
--- a/app/components/views/TicketsPage/MyTicketsTab/MyTicketsTab.module.css
+++ b/app/components/views/TicketsPage/MyTicketsTab/MyTicketsTab.module.css
@@ -10,11 +10,10 @@
 }
 
 .ticketsButtons {
-  text-align: right;
-  margin-right: 20px;
   margin-left: auto;
   display: flex;
-  align-items: center;
+  line-height: 1.2rem;
+  padding-top: 0.5rem;
 }
 
 .subtitle {
diff --git a/app/components/views/TicketsPage/MyTicketsTab/Page.jsx b/app/components/views/TicketsPage/MyTicketsTab/Page.jsx
index 658319ea21..73de0caf9a 100644
--- a/app/components/views/TicketsPage/MyTicketsTab/Page.jsx
+++ b/app/components/views/TicketsPage/MyTicketsTab/Page.jsx
@@ -1,4 +1,4 @@
-import { FormattedMessage as T } from "react-intl";
+import { FormattedMessage as T, defineMessages } from "react-intl";
 import { Tooltip, Paginator } from "pi-ui";
 import InfiniteScroll from "react-infinite-scroller";
 import {
@@ -9,8 +9,19 @@ import {
 import { TxHistory, Subtitle } from "shared";
 import { EyeFilterMenu, QRModalButton } from "buttons";
 import styles from "./MyTicketsTab.module.css";
+import { TextInput } from "inputs";
+
+const messages = defineMessages({
+  filterByHashPlaceholder: {
+    id: "txhistory.filterByHashPlaceholder",
+    defaultMessage: "Filter by Hash"
+  }
+});
 
 const subtitleMenu = ({
+  intl,
+  searchText,
+  onChangeSearchText,
   sortTypes,
   ticketTypes,
   selectedSortOrderKey,
@@ -24,6 +35,13 @@ const subtitleMenu = ({
   prepareQRs
 }) => (
   <div className={styles.ticketsButtons}>
+    <TextInput
+      id="filterByHashInput"
+      type="text"
+      placeholder={intl.formatMessage(messages.filterByHashPlaceholder)}
+      value={searchText}
+      onChange={(e) => onChangeSearchText(e.target.value)}
+    />
     <Tooltip
       contentClassName={styles.sortByTooltip}
       content={<T id="tickets.sortby.tooltip" m="Sort By" />}>
@@ -84,6 +102,9 @@ const subtitleMenu = ({
 );
 
 const TicketListPage = ({
+  intl,
+  searchText,
+  onChangeSearchText,
   tickets,
   noMoreTickets,
   getTickets,
@@ -112,6 +133,9 @@ const TicketListPage = ({
         title={<T id="mytickets.subtitle" m="My Tickets" />}
         className={styles.subtitle}
         children={subtitleMenu({
+          intl,
+          searchText,
+          onChangeSearchText,
           sortTypes,
           ticketTypes,
           selectedSortOrderKey,
diff --git a/app/components/views/TicketsPage/MyTicketsTab/hooks.js b/app/components/views/TicketsPage/MyTicketsTab/hooks.js
index be529a6dec..5512c138c5 100644
--- a/app/components/views/TicketsPage/MyTicketsTab/hooks.js
+++ b/app/components/views/TicketsPage/MyTicketsTab/hooks.js
@@ -6,8 +6,10 @@ import * as ta from "actions/TransactionActions";
 import { UNMINED, IMMATURE, LIVE } from "constants";
 import { isEqual } from "lodash";
 import QRCode from "qrcode";
+import { useIntl } from "react-intl";
 
 export const useTicketsList = () => {
+  const intl = useIntl();
   const dispatch = useDispatch();
 
   // selectors
@@ -76,6 +78,7 @@ export const useTicketsList = () => {
   }, [tickets, qrHashes]);
 
   return {
+    intl,
     tickets,
     tsDate,
     noMoreTickets,
diff --git a/app/selectors.js b/app/selectors.js
index b844b4a9de..69c6495c17 100644
--- a/app/selectors.js
+++ b/app/selectors.js
@@ -865,6 +865,11 @@ export const filteredStakeTxs = createSelector(
   (transactions, filter) => {
     const filteredTxs = Object.keys(transactions)
       .map((hash) => transactions[hash])
+      .filter((v) =>
+        filter.search
+          ? v.txHash.toLowerCase().includes(filter.search.toLowerCase())
+          : true
+      )
       .filter((v) => (filter.status ? filter.status === v.status : true));
 
     return filteredTxs;