From 3b4c8995bff02e1771c26cfe3b6756b9ecbd67a4 Mon Sep 17 00:00:00 2001
From: "Felix C. Morency" <1102868+fmorency@users.noreply.github.com>
Date: Thu, 19 Dec 2024 14:50:46 -0500
Subject: [PATCH] fix: tf layout and search

---
 components/factory/components/DenomList.tsx | 39 +++------
 pages/factory/index.tsx                     | 93 ++++++++++++---------
 2 files changed, 67 insertions(+), 65 deletions(-)

diff --git a/components/factory/components/DenomList.tsx b/components/factory/components/DenomList.tsx
index a99763b..4436560 100644
--- a/components/factory/components/DenomList.tsx
+++ b/components/factory/components/DenomList.tsx
@@ -13,14 +13,15 @@ import useIsMobile from '@/hooks/useIsMobile';
 import TransferModal from '@/components/factory/modals/TransferModal';
 
 type DenomListProps = {
-  denoms: ExtendedMetadataSDKType[]; // The list of denoms to display
-  isLoading: boolean; // Whether the denoms are still loading
-  refetchDenoms: () => void; // Function to refetch the denoms
-  refetchProposals?: () => void; // Function to refetch the proposals
-  address: string; // The address of the user
-  pageSize: number; // The number of denoms to display per page
-  isGroup?: boolean; // Whether the denoms are group tokens
-  admin: string; // The admin of the group tokens
+  denoms: ExtendedMetadataSDKType[];
+  isLoading: boolean;
+  refetchDenoms: () => void;
+  refetchProposals?: () => void;
+  address: string;
+  pageSize: number;
+  isGroup?: boolean;
+  admin: string;
+  searchTerm: string;
 };
 
 export default function DenomList({
@@ -32,8 +33,8 @@ export default function DenomList({
   pageSize,
   isGroup = false,
   admin,
+  searchTerm = '',
 }: Readonly<DenomListProps>) {
-  const [searchQuery, setSearchQuery] = useState('');
   const [currentPage, setCurrentPage] = useState(1);
   const [openUpdateDenomMetadataModal, setOpenUpdateDenomMetadataModal] = useState(false);
   const [openTransferDenomModal, setOpenTransferDenomModal] = useState(false);
@@ -46,8 +47,8 @@ export default function DenomList({
   >(null);
 
   const filteredDenoms = useMemo(() => {
-    return denoms.filter(denom => denom?.display.toLowerCase().includes(searchQuery.toLowerCase()));
-  }, [denoms, searchQuery]);
+    return denoms.filter(denom => denom?.display.toLowerCase().includes(searchTerm.toLowerCase()));
+  }, [denoms, searchTerm]);
 
   const totalPages = Math.ceil(filteredDenoms.length / pageSize);
   const paginatedDenoms = filteredDenoms.slice(
@@ -187,22 +188,6 @@ export default function DenomList({
   return (
     <div className="w-full mx-auto rounded-[24px] h-full flex flex-col">
       <div className="flex flex-col gap-4 mb-4">
-        {/*<div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">*/}
-        {/*  <div className="flex flex-col sm:flex-row items-start sm:items-center gap-4 w-full md:w-auto">*/}
-        {/*    {!isGroup && (*/}
-        {/*      <div className="relative w-full sm:w-[224px]">*/}
-        {/*        <input*/}
-        {/*          type="text"*/}
-        {/*          placeholder="Search for a token..."*/}
-        {/*          className="input input-bordered w-full h-[40px] rounded-[12px] border-none bg-secondary text-secondary-content pl-10 focus:outline-none focus-visible:ring-1 focus-visible:ring-primary"*/}
-        {/*          value={searchQuery}*/}
-        {/*          onChange={e => setSearchQuery(e.target.value)}*/}
-        {/*        />*/}
-        {/*        <SearchIcon className="h-6 w-6 absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" />*/}
-        {/*      </div>*/}
-        {/*    )}*/}
-        {/*  </div>*/}
-        {/*</div>*/}
         <div className="overflow-auto">
           <div className="max-w-8xl mx-auto">
             <table className="table w-full border-separate border-spacing-y-3">
diff --git a/pages/factory/index.tsx b/pages/factory/index.tsx
index a615f1e..9f349c4 100644
--- a/pages/factory/index.tsx
+++ b/pages/factory/index.tsx
@@ -1,4 +1,4 @@
-import { WalletNotConnected, FactoryIcon } from '@/components';
+import { WalletNotConnected, FactoryIcon, SearchIcon } from '@/components';
 import DenomList from '@/components/factory/components/DenomList';
 import {
   useTokenBalances,
@@ -9,7 +9,7 @@ import {
 
 import { useChain } from '@cosmos-kit/react';
 import Head from 'next/head';
-import React, { useMemo } from 'react';
+import React, { useMemo, useState } from 'react';
 import { ExtendedMetadataSDKType } from '@/utils';
 import env from '@/config/env';
 import useIsMobile from '../../hooks/useIsMobile';
@@ -65,6 +65,7 @@ export default function Factory() {
   }, [denoms, metadatas, balances, totalSupply]);
 
   const isDataReady = combinedData.length > 0;
+  const [searchTerm, setSearchTerm] = useState('');
 
   return (
     <div className="min-h-screen relative py-4 px-2 mx-auto text-white ">
@@ -119,44 +120,60 @@ export default function Factory() {
               icon={<FactoryIcon className="h-60 w-60 text-primary" />}
             />
           ) : (
-            <>
-              <div className="flex flex-col sm:flex-row items-start sm:items-center gap-4 w-full md:w-auto">
-                <h1
-                  className="text-secondary-content"
-                  style={{ fontSize: '20px', fontWeight: 700, lineHeight: '24px' }}
-                >
-                  Tokens
-                </h1>
-              </div>
-
-              <div className="flex flex-col w-full mt-4">
-                {isLoading ? (
-                  <DenomList
-                    denoms={combinedData}
-                    isLoading={isLoading}
-                    refetchDenoms={refetchData}
-                    pageSize={pageSize}
-                    address={address ?? ''}
-                    admin={address ?? ''}
-                  />
-                ) : isError ? (
-                  <div className="text-center my-auto text-error">
-                    Error loading tokens. Please try again.
+            <div className="relative w-full h-full overflow-hidden scrollbar-hide">
+              <div className="h-full flex flex-col p-4">
+                <div className="flex flex-col md:flex-row justify-between items-start md:items-center mb-4 gap-4">
+                  <div className="flex flex-col sm:flex-row items-start sm:items-center gap-4 w-full md:w-auto">
+                    <h1
+                      className="text-secondary-content"
+                      style={{ fontSize: '20px', fontWeight: 700, lineHeight: '24px' }}
+                    >
+                      Tokens
+                    </h1>
+                    <div className="relative w-full sm:w-[224px]">
+                      <input
+                        type="text"
+                        placeholder="Search for a token ..."
+                        className="input input-bordered w-full h-[40px] rounded-[12px] border-none bg-secondary text-secondary-content pl-10 focus:outline-none focus-visible:ring-1 focus-visible:ring-primary"
+                        value={searchTerm}
+                        onChange={e => setSearchTerm(e.target.value)}
+                      />
+                      <SearchIcon className="h-6 w-6 absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" />
+                    </div>
                   </div>
-                ) : !isDataReady ? (
-                  <div className="text-center my-auto">No token data available.</div>
-                ) : (
-                  <DenomList
-                    denoms={combinedData}
-                    isLoading={isLoading}
-                    refetchDenoms={refetchData}
-                    pageSize={pageSize}
-                    address={address ?? ''}
-                    admin={address ?? ''}
-                  />
-                )}
+                </div>
+
+                <div className="flex flex-col w-full mt-4">
+                  {isLoading ? (
+                    <DenomList
+                      denoms={combinedData}
+                      isLoading={isLoading}
+                      refetchDenoms={refetchData}
+                      pageSize={pageSize}
+                      address={address ?? ''}
+                      admin={address ?? ''}
+                      searchTerm={searchTerm}
+                    />
+                  ) : isError ? (
+                    <div className="text-center my-auto text-error">
+                      Error loading tokens. Please try again.
+                    </div>
+                  ) : !isDataReady ? (
+                    <div className="text-center my-auto">No token data available.</div>
+                  ) : (
+                    <DenomList
+                      denoms={combinedData}
+                      isLoading={isLoading}
+                      refetchDenoms={refetchData}
+                      pageSize={pageSize}
+                      address={address ?? ''}
+                      admin={address ?? ''}
+                      searchTerm={searchTerm}
+                    />
+                  )}
+                </div>
               </div>
-            </>
+            </div>
           )}
         </div>
       </div>