From bbaff462400bdd12fa6fa44fbe07f202bfe674d9 Mon Sep 17 00:00:00 2001
From: Neven Dyulgerov <neven.diulgerov@gmail.com>
Date: Fri, 29 Nov 2024 13:43:49 +0200
Subject: [PATCH 1/2] fix(apps/staking): Tweaks for blocks search

---
 apps/staking/src/components/SearchInput.tsx   |  5 ++--
 .../staking/src/pages/blocks/[[...block]].tsx | 27 ++++++++++++++-----
 2 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/apps/staking/src/components/SearchInput.tsx b/apps/staking/src/components/SearchInput.tsx
index 1425f2b4..10e01aa8 100644
--- a/apps/staking/src/components/SearchInput.tsx
+++ b/apps/staking/src/components/SearchInput.tsx
@@ -31,12 +31,12 @@ const SearchInput: FunctionComponent<SearchInputProps> = (props) => {
         'white',
         'dark.gray.tertiary'
     );
-    const iconColor = useColorModeValue('gray.900', 'white');
+    const textColor = useColorModeValue('gray.900', 'white');
 
     return (
         <InputGroup {...rest}>
             <InputLeftElement pointerEvents="none">
-                <SearchIcon color={iconColor} />
+                <SearchIcon color={textColor} />
             </InputLeftElement>
 
             <Input
@@ -44,6 +44,7 @@ const SearchInput: FunctionComponent<SearchInputProps> = (props) => {
                     color: placeholderColor,
                 }}
                 borderRadius="3px"
+                color={textColor}
                 placeholder={placeholder}
                 backgroundColor={searchBackgroundColor}
                 onChange={onSearchChange}
diff --git a/apps/staking/src/pages/blocks/[[...block]].tsx b/apps/staking/src/pages/blocks/[[...block]].tsx
index 48af3b68..4ce32849 100644
--- a/apps/staking/src/pages/blocks/[[...block]].tsx
+++ b/apps/staking/src/pages/blocks/[[...block]].tsx
@@ -9,7 +9,7 @@
 // WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A
 // PARTICULAR PURPOSE. See the GNU General Public License for more details.
 
-import React, { FC, FunctionComponent, useState } from 'react';
+import React, { FC, FunctionComponent, useState, useCallback } from 'react';
 import { useRouter } from 'next/router';
 import {
     Button,
@@ -18,10 +18,10 @@ import {
     Spinner,
     StackProps,
     Tag,
-    TagLabel,
     TagCloseButton,
-    VStack,
+    TagLabel,
     useColorModeValue,
+    VStack,
 } from '@chakra-ui/react';
 import { FaEllipsisH } from 'react-icons/fa';
 
@@ -34,6 +34,7 @@ import BlockCard from '../../components/block/BlockCard';
 import SearchInput from '../../components/SearchInput';
 import PageHeader from '../../components/PageHeader';
 import PageHead from '../../components/PageHead';
+import { debounce } from 'lodash/fp';
 
 interface FilterProps {
     label: string;
@@ -123,17 +124,26 @@ const Blocks: FC<BlocksProps> = ({ chainId }) => {
     blockId = blockId && blockId.length > 0 ? (blockId[0] as string) : '';
 
     const [searchKey, setSearchKey] = useState<string>(blockId);
+    const [debouncedSearchKey, setDebouncedSearchKey] = useState(searchKey);
 
     // list of all blocks, unfiltered
     const all = useBlocks(undefined, 20);
 
     // list of blocks filtered by producer
-    const byProducer = useBlocks({ producer: searchKey }, 20);
+    const byProducer = useBlocks({ producer: debouncedSearchKey }, 20);
 
     // list of blocks filtered by node
-    const byNode = useBlocks({ node: searchKey }, 20);
+    const byNode = useBlocks({ node: debouncedSearchKey }, 20);
     const pageBg = useColorModeValue('white', 'dark.gray.primary');
 
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- Lodash debounce needs to be set up like this in react context
+    const debounced = useCallback(
+        debounce(500, (nextValue: string) => {
+            setDebouncedSearchKey(nextValue);
+        }),
+        []
+    );
+
     return (
         <Layout>
             <PageHead title="Cartesi Proof of Stake Blocks" />
@@ -141,7 +151,12 @@ const Blocks: FC<BlocksProps> = ({ chainId }) => {
             <PageHeader title="Blocks">
                 <SearchInput
                     w={[100, 200, 400, 400]}
-                    onSearchChange={(e) => setSearchKey(e.target.value)}
+                    placeholder="Search by producer"
+                    onSearchChange={(e) => {
+                        const nextValue = e.target.value;
+                        debounced(nextValue);
+                        setSearchKey(nextValue);
+                    }}
                 />
             </PageHeader>
 

From e17405796a3bccbef40c7cf714c3c6fb13510dd6 Mon Sep 17 00:00:00 2001
From: Neven Dyulgerov <neven.diulgerov@gmail.com>
Date: Mon, 2 Dec 2024 13:05:53 +0200
Subject: [PATCH 2/2] chore(apps/staking): Refactoring

---
 apps/staking/src/pages/blocks/[[...block]].tsx | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/apps/staking/src/pages/blocks/[[...block]].tsx b/apps/staking/src/pages/blocks/[[...block]].tsx
index 4ce32849..1ca6fd8f 100644
--- a/apps/staking/src/pages/blocks/[[...block]].tsx
+++ b/apps/staking/src/pages/blocks/[[...block]].tsx
@@ -123,8 +123,7 @@ const Blocks: FC<BlocksProps> = ({ chainId }) => {
     // TODO: use blockId
     blockId = blockId && blockId.length > 0 ? (blockId[0] as string) : '';
 
-    const [searchKey, setSearchKey] = useState<string>(blockId);
-    const [debouncedSearchKey, setDebouncedSearchKey] = useState(searchKey);
+    const [debouncedSearchKey, setDebouncedSearchKey] = useState(blockId);
 
     // list of all blocks, unfiltered
     const all = useBlocks(undefined, 20);
@@ -155,7 +154,6 @@ const Blocks: FC<BlocksProps> = ({ chainId }) => {
                     onSearchChange={(e) => {
                         const nextValue = e.target.value;
                         debounced(nextValue);
-                        setSearchKey(nextValue);
                     }}
                 />
             </PageHeader>
@@ -164,7 +162,7 @@ const Blocks: FC<BlocksProps> = ({ chainId }) => {
                 <BlocksChart result={all} />
             </HStack>
 
-            {!searchKey && (
+            {!debouncedSearchKey && (
                 <BlockList
                     chainId={chainId}
                     result={all}
@@ -178,7 +176,7 @@ const Blocks: FC<BlocksProps> = ({ chainId }) => {
                 chainId={chainId}
                 result={byProducer}
                 filterField="producer"
-                filterValue={searchKey}
+                filterValue={debouncedSearchKey}
                 w="100%"
                 px="6vw"
                 py="5"
@@ -188,7 +186,7 @@ const Blocks: FC<BlocksProps> = ({ chainId }) => {
                 chainId={chainId}
                 result={byNode}
                 filterField="node"
-                filterValue={searchKey}
+                filterValue={debouncedSearchKey}
                 w="100%"
                 px="6vw"
                 py="5"