From 9669d7f9e5f21cee3c33bac5a90418218206488e Mon Sep 17 00:00:00 2001
From: TITI <162849030+0xtiti@users.noreply.github.com>
Date: Mon, 22 Jul 2024 17:52:02 -0300
Subject: [PATCH] feat: search chain by id (#8)

closes ZKS-112
---
 public/locales/en/common.json      |  3 ++-
 public/locales/es/common.json      |  3 ++-
 src/components/NotFound.tsx        | 11 +++++++++++
 src/components/index.ts            |  1 +
 src/containers/Dashboard/index.tsx | 23 ++++++++++++++++-------
 5 files changed, 32 insertions(+), 9 deletions(-)
 create mode 100644 src/components/NotFound.tsx

diff --git a/public/locales/en/common.json b/public/locales/en/common.json
index 5451f12..58bc09c 100644
--- a/public/locales/en/common.json
+++ b/public/locales/en/common.json
@@ -11,7 +11,8 @@
       "nativeToken": "Native token",
       "tvl": "TVL - L1",
       "type": "Type",
-      "search": "Search by chain name or id..."
+      "search": "Search by chain name or id...",
+      "notFound": "Chain not found"
     }
   },
   "CHAINPAGE": {
diff --git a/public/locales/es/common.json b/public/locales/es/common.json
index 6c8e324..f85b9a8 100644
--- a/public/locales/es/common.json
+++ b/public/locales/es/common.json
@@ -11,7 +11,8 @@
       "nativeToken": "Token nativo",
       "tvl": "TVL - L1",
       "type": "Tipo",
-      "search": "Buscar por nombre o ID de la cadena..."
+      "search": "Buscar por nombre o ID de la cadena...",
+      "notFound": "Cadena no encontrada"
     }
   },
   "CHAINPAGE": {
diff --git a/src/components/NotFound.tsx b/src/components/NotFound.tsx
new file mode 100644
index 0000000..358cdd8
--- /dev/null
+++ b/src/components/NotFound.tsx
@@ -0,0 +1,11 @@
+interface NotFoundProps {
+  text: string;
+}
+
+export const NotFound = ({ text }: NotFoundProps) => {
+  return (
+    <div>
+      <p>{text}</p>
+    </div>
+  );
+};
diff --git a/src/components/index.ts b/src/components/index.ts
index e2912ee..7657955 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -6,3 +6,4 @@ export * from './SearchBar';
 export * from './TotalValueLocked';
 export * from './Title';
 export * from './TitleBanner';
+export * from './NotFound';
diff --git a/src/containers/Dashboard/index.tsx b/src/containers/Dashboard/index.tsx
index eb023e4..8410897 100644
--- a/src/containers/Dashboard/index.tsx
+++ b/src/containers/Dashboard/index.tsx
@@ -1,7 +1,7 @@
 import { useTranslation } from 'next-i18next';
 import { useState } from 'react';
 
-import { SearchBar, Table, Title } from '~/components';
+import { NotFound, SearchBar, Table, Title } from '~/components';
 import { useData } from '~/hooks';
 
 export const Dashboard = () => {
@@ -9,15 +9,23 @@ export const Dashboard = () => {
   const { ecosystemData } = useData();
   const [searchTerm, setSearchTerm] = useState<string>('');
 
+  const filteredChains = ecosystemData?.chains.filter((chain) => {
+    const chainIdStr = String(chain.id);
+    const formattedSearchTerm = String(searchTerm).toLowerCase();
+
+    // Check if either chain name or chain ID matches the search term
+    const matchesName = chain.name.toLowerCase().includes(formattedSearchTerm);
+    const matchesId = chainIdStr.includes(formattedSearchTerm);
+
+    return matchesName || matchesId;
+  });
+
+  const availableChains = filteredChains?.length > 0;
+
   const handleChange = (value: string) => {
     setSearchTerm(value);
   };
 
-  // Filter chains based on search term
-  const filteredChains = ecosystemData?.chains.filter((chain) =>
-    chain.name.toLowerCase().includes(searchTerm.toLowerCase()),
-  );
-
   return (
     <section>
       <header>
@@ -25,7 +33,8 @@ export const Dashboard = () => {
         <SearchBar value={searchTerm} onChange={handleChange} />
       </header>
 
-      <Table chains={filteredChains} />
+      {availableChains && <Table chains={filteredChains} />}
+      {!availableChains && <NotFound text={t('HOME.DASHBOARD.notFound')} />}
     </section>
   );
 };