From dbda56083c8e81e3b9ba460e2636e210d5db6217 Mon Sep 17 00:00:00 2001
From: selankon <selankon@selankon.xyz>
Date: Fri, 28 Jun 2024 08:58:18 -0500
Subject: [PATCH] Implement search block (#16)

* Implement block filter

* Fix layout

On this way the filters are properly aligned at the end
---
 src/components/Blocks/BlocksList.tsx | 34 +++++++++++++++++++++++++++-
 src/layout/ListPageLayout.tsx        |  2 +-
 src/pages/blocks.tsx                 |  4 ++--
 3 files changed, 36 insertions(+), 4 deletions(-)

diff --git a/src/components/Blocks/BlocksList.tsx b/src/components/Blocks/BlocksList.tsx
index 9a33eb8..61d5350 100644
--- a/src/components/Blocks/BlocksList.tsx
+++ b/src/components/Blocks/BlocksList.tsx
@@ -1,4 +1,4 @@
-import { useParams } from 'react-router-dom'
+import { generatePath, useNavigate, useParams } from 'react-router-dom'
 import { RoutedPagination } from '~components/Pagination/Pagination'
 import { RoutedPaginationProvider } from '~components/Pagination/PaginationProvider'
 import { PaginationItemsPerPage, RoutePath } from '~constants'
@@ -7,6 +7,38 @@ import LoadingError from '~src/layout/LoadingError'
 import { useBlockList } from '~queries/blocks'
 import { useChainInfo } from '~queries/stats'
 import { BlockCard } from '~components/Blocks/BlockCard'
+import { useTranslation } from 'react-i18next'
+import { InputSearch } from '~src/layout/Inputs'
+
+export const BlocksFilter = () => {
+  const { t } = useTranslation()
+  const navigate = useNavigate()
+  const { data: stats, isLoading: isLoadingStats } = useChainInfo({
+    refetchInterval: 1000,
+  })
+
+  const blockCount = stats?.height || 0
+
+  return (
+    <InputSearch
+      maxW={'300px'}
+      placeholder={t('blocks.search_block')}
+      onChange={(value: string) => {
+        if (!blockCount) {
+          return
+        }
+        const num = parseInt(value)
+        let page = 0 // By default return to first page
+        if (!isNaN(num) && num >= 0) {
+          page = Math.ceil((blockCount - num + 1) / PaginationItemsPerPage)
+        }
+        navigate(generatePath(RoutePath.BlocksList, { page: page.toString() }))
+      }}
+      debounceTime={500}
+      type={'number'}
+    />
+  )
+}
 
 export const PaginatedBlocksList = () => {
   const { page }: { page?: number } = useParams()
diff --git a/src/layout/ListPageLayout.tsx b/src/layout/ListPageLayout.tsx
index a92aa63..3f0a674 100644
--- a/src/layout/ListPageLayout.tsx
+++ b/src/layout/ListPageLayout.tsx
@@ -21,7 +21,7 @@ const ListPageLayout = ({
           {subtitle && <Text color={'lighterText'}>{subtitle}</Text>}
         </Flex>
         {rightComponent && (
-          <Flex align={'end'} justify={'end'} w={'full'}>
+          <Flex align={'end'} justify={'end'}>
             {rightComponent}
           </Flex>
         )}
diff --git a/src/pages/blocks.tsx b/src/pages/blocks.tsx
index 880c8c1..cca8dff 100644
--- a/src/pages/blocks.tsx
+++ b/src/pages/blocks.tsx
@@ -1,7 +1,7 @@
 import ListPageLayout from '~src/layout/ListPageLayout'
 import { useTranslation } from 'react-i18next'
 import { useChainInfo } from '~queries/stats'
-import { PaginatedBlocksList } from '~components/Blocks/BlocksList'
+import { BlocksFilter, PaginatedBlocksList } from '~components/Blocks/BlocksList'
 
 const BlocksList = () => {
   const { t } = useTranslation()
@@ -10,7 +10,7 @@ const BlocksList = () => {
   const subtitle = !isLoadingStats && !!stats?.height ? t('blocks.blocks_count', { count: stats.height }) : ''
 
   return (
-    <ListPageLayout title={t('blocks.blocks_list')} subtitle={subtitle}>
+    <ListPageLayout title={t('blocks.blocks_list')} subtitle={subtitle} rightComponent={<BlocksFilter />}>
       <PaginatedBlocksList />
     </ListPageLayout>
   )