From 26e97301a26b541685554339b73f976aaae48359 Mon Sep 17 00:00:00 2001
From: Joseph Chalabi <chalabi.joseph@gmail.com>
Date: Tue, 24 Dec 2024 00:10:51 -0700
Subject: [PATCH] fix: use screen height for page sizes

---
 components/bank/components/historyBox.tsx     |  2 +-
 .../groups/components/groupControls.tsx       |  8 +-
 components/groups/components/myGroups.tsx     | 73 +++++++++++++++----
 hooks/useQueries.ts                           |  2 +-
 pages/bank.tsx                                | 64 ++++++++++++++--
 5 files changed, 122 insertions(+), 27 deletions(-)

diff --git a/components/bank/components/historyBox.tsx b/components/bank/components/historyBox.tsx
index d26124e..a91724f 100644
--- a/components/bank/components/historyBox.tsx
+++ b/components/bank/components/historyBox.tsx
@@ -173,7 +173,7 @@ export function HistoryBox({
           <div aria-label="skeleton" className="space-y-2">
             {[...Array(skeletonGroupCount)].map((_, groupIndex) => (
               <div key={groupIndex}>
-                <div className="skeleton h-4 w-24 mb-2"></div>
+                <div className="skeleton h-4 w-24 mb-2 mt-2"></div>
                 <div className="space-y-2">
                   {[...Array(skeletonTxCount)].map((_, txIndex) => (
                     <div
diff --git a/components/groups/components/groupControls.tsx b/components/groups/components/groupControls.tsx
index 2d67eff..1a2312b 100644
--- a/components/groups/components/groupControls.tsx
+++ b/components/groups/components/groupControls.tsx
@@ -23,7 +23,7 @@ import { TokenList } from '@/components';
 import { CombinedBalanceInfo, ExtendedMetadataSDKType } from '@/utils';
 import DenomList from '@/components/factory/components/DenomList';
 
-type GroupProposalsProps = {
+type GroupControlsProps = {
   policyAddress: string;
   groupName: string;
   onBack: () => void;
@@ -47,7 +47,7 @@ type GroupProposalsProps = {
   skeletonTxCount: number;
 };
 
-export default function GroupProposals({
+export default function GroupControls({
   policyAddress,
   groupName,
   onBack,
@@ -69,7 +69,7 @@ export default function GroupProposals({
   pageSize,
   skeletonGroupCount,
   skeletonTxCount,
-}: GroupProposalsProps) {
+}: GroupControlsProps) {
   const { proposals, isProposalsLoading, isProposalsError, refetchProposals } =
     useProposalsByPolicyAccount(policyAddress);
 
@@ -275,7 +275,7 @@ export default function GroupProposals({
         </div>
       </div>
 
-      <div role="tablist" className="tabs tabs-bordered tabs-xs md:tabs-lg flex flex-row">
+      <div role="tablist" className="tabs tabs-bordered tabs-md md:tabs-lg flex flex-row">
         <button
           role={'tab'}
           className={`font-bold tab ${activeTab === 'proposals' ? 'tab-active' : ''}`}
diff --git a/components/groups/components/myGroups.tsx b/components/groups/components/myGroups.tsx
index e4f5e66..be93dcb 100644
--- a/components/groups/components/myGroups.tsx
+++ b/components/groups/components/myGroups.tsx
@@ -15,14 +15,14 @@ import {
   MFX_TOKEN_DATA,
   truncateString,
 } from '@/utils';
-import React, { useState, useEffect, useMemo } from 'react';
+import React, { useState, useEffect, useMemo, useCallback } from 'react';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
 import {
   ProposalSDKType,
   ThresholdDecisionPolicySDKType,
 } from '@liftedinit/manifestjs/dist/codegen/cosmos/group/v1/types';
-import GroupProposals from './groupControls';
+import GroupControls from './groupControls';
 import { useBalance } from '@/hooks/useQueries';
 import { shiftDigits } from '@/utils';
 import { TruncatedAddressWithCopy } from '@/components/react/addressCopy';
@@ -49,8 +49,59 @@ export function YourGroups({
   const [searchTerm, setSearchTerm] = useState('');
   const [currentPage, setCurrentPage] = useState(1);
   const isMobile = useIsMobile();
+  const [pageSize, setPageSize] = useState({ groupInfo: 7, history: 6, skeleton: 7 });
 
-  const pageSize = isMobile ? 4 : 8;
+  const updatePageSizes = useCallback(() => {
+    const height = window.innerHeight;
+
+    // Small screens (mobile)
+    if (height < 768) {
+      setPageSize({
+        groupInfo: 4,
+        history: 3,
+        skeleton: 4,
+      });
+      return;
+    }
+
+    // Adjust based on height for larger screens
+    if (height < 800) {
+      setPageSize({
+        groupInfo: 5,
+        history: 5,
+        skeleton: 5,
+      });
+    } else if (height < 1000) {
+      setPageSize({
+        groupInfo: 7,
+        history: 6,
+        skeleton: 7,
+      });
+    } else {
+      // For very tall screens
+      setPageSize({
+        groupInfo: 9,
+        history: 8,
+        skeleton: 9,
+      });
+    }
+  }, []);
+
+  useEffect(() => {
+    // Initial setup
+    updatePageSizes();
+
+    // Add resize listener
+    window.addEventListener('resize', updatePageSizes);
+
+    // Cleanup
+    return () => window.removeEventListener('resize', updatePageSizes);
+  }, [updatePageSizes]);
+
+  const pageSizeGroupInfo = pageSize.groupInfo;
+  const pageSizeHistory = pageSize.history;
+  const skeletonGroupCount = 1;
+  const skeletonTxCount = pageSize.skeleton;
 
   const [selectedGroup, setSelectedGroup] = useState<{
     policyAddress: string;
@@ -65,10 +116,10 @@ export function YourGroups({
     (group.ipfsMetadata?.title || 'Untitled Group').toLowerCase().includes(searchTerm.toLowerCase())
   );
 
-  const totalPages = Math.ceil(filteredGroups.length / pageSize);
+  const totalPages = Math.ceil(filteredGroups.length / pageSize.groupInfo);
   const paginatedGroups = filteredGroups.slice(
-    (currentPage - 1) * pageSize,
-    currentPage * pageSize
+    (currentPage - 1) * pageSize.groupInfo,
+    currentPage * pageSize.groupInfo
   );
 
   useEffect(() => {
@@ -120,11 +171,6 @@ export function YourGroups({
     useTokenFactoryDenomsMetadata();
   const [currentPageGroupInfo, setCurrentPageGroupInfo] = useState(1);
 
-  const pageSizeGroupInfo = isMobile ? 4 : 7;
-  const pageSizeHistory = isMobile ? 4 : 6;
-  const skeletonGroupCount = 1;
-  const skeletonTxCount = isMobile ? 4 : 7;
-
   const {
     sendTxs,
     totalPages: totalPagesGroupInfo,
@@ -143,9 +189,6 @@ export function YourGroups({
   const { totalSupply, isTotalSupplyLoading, isTotalSupplyError, refetchTotalSupply } =
     useTotalSupply();
 
-  useEffect(() => {
-    console.log('denomError', denomError);
-  }, [denomError]);
   const refetchData = () => {
     refetchDenoms();
     refetchMetadatas();
@@ -422,7 +465,7 @@ export function YourGroups({
         }`}
       >
         {selectedGroup && (
-          <GroupProposals
+          <GroupControls
             policyAddress={selectedGroup.policyAddress}
             groupName={selectedGroup.name}
             onBack={handleBack}
diff --git a/hooks/useQueries.ts b/hooks/useQueries.ts
index 2688236..26909e3 100644
--- a/hooks/useQueries.ts
+++ b/hooks/useQueries.ts
@@ -903,7 +903,7 @@ export const useGetFilteredTxAndSuccessfulProposals = (
       const transactions = dataResponse.data
         .flatMap((tx: any) => transformTransactions(tx, address))
         .filter((tx: any) => tx !== null)
-        // Add secondary sort in JavaScript to ensure consistent ordering
+        // Add secondary JS sort
         .sort((a: any, b: any) => {
           // Sort by timestamp descending (newest first)
           const dateComparison =
diff --git a/pages/bank.tsx b/pages/bank.tsx
index 77c56c5..ea232bb 100644
--- a/pages/bank.tsx
+++ b/pages/bank.tsx
@@ -8,8 +8,8 @@ import {
   useTokenFactoryDenomsMetadata,
 } from '@/hooks';
 import { useChain } from '@cosmos-kit/react';
-import Head from 'next/head';
-import React, { useMemo, useState } from 'react';
+
+import React, { useMemo, useState, useCallback, useEffect } from 'react';
 import { BankIcon } from '@/components/icons';
 import { CombinedBalanceInfo } from '@/utils/types';
 import { MFX_TOKEN_DATA } from '@/utils/constants';
@@ -30,11 +30,58 @@ export default function Bank() {
   const [activeTab, setActiveTab] = useState('assets');
 
   const isMobile = useIsMobile();
-  const pageSize = isMobile ? 4 : 7;
-  const tokenListPageSize = isMobile ? 6 : 8;
+  const [pageSize, setPageSize] = useState({
+    tokenList: 8,
+    history: 7,
+    skeleton: 9,
+  });
+
+  const updatePageSizes = useCallback(() => {
+    const height = window.innerHeight;
+
+    // Small screens (mobile)
+    if (height < 700) {
+      setPageSize({
+        tokenList: 5,
+        history: 4,
+        skeleton: 5,
+      });
+      return;
+    }
+
+    // Adjust based on height for larger screens
+    if (height < 800) {
+      setPageSize({
+        tokenList: 6,
+        history: 5,
+        skeleton: 7,
+      });
+    } else if (height < 1300) {
+      setPageSize({
+        tokenList: 8,
+        history: 7,
+        skeleton: 9,
+      });
+    } else {
+      // For very tall screens
+      setPageSize({
+        tokenList: 10,
+        history: 9,
+        skeleton: 11,
+      });
+    }
+  }, []);
+
+  useEffect(() => {
+    updatePageSizes();
+    window.addEventListener('resize', updatePageSizes);
+    return () => window.removeEventListener('resize', updatePageSizes);
+  }, [updatePageSizes]);
 
   const skeletonGroupCount = 1;
-  const skeletonTxCount = isMobile ? 5 : 9;
+  const skeletonTxCount = pageSize.skeleton;
+  const tokenListPageSize = pageSize.tokenList;
+  const historyPageSize = pageSize.history;
 
   const {
     sendTxs,
@@ -42,7 +89,12 @@ export default function Bank() {
     isLoading: txLoading,
     isError,
     refetch: refetchHistory,
-  } = useGetFilteredTxAndSuccessfulProposals(env.indexerUrl, address ?? '', currentPage, pageSize);
+  } = useGetFilteredTxAndSuccessfulProposals(
+    env.indexerUrl,
+    address ?? '',
+    currentPage,
+    historyPageSize
+  );
 
   const combinedBalances = useMemo(() => {
     if (!balances || !resolvedBalances || !metadatas) return [];