fix: revert bad merge "feature: add orderBy for workerpools and apps (#94)"

Author: PierreJeanjacquot

src/components/PaginatedNavigation.tsx

@@ -14,27 +14,20 @@ type PaginationControlsProps = {
   currentPage: number;
   totalPages: number;
   onPageChange: (page: number) => void;
-  // Optional key whose change can shrink/grow pages immediately (e.g. active filter)
-  filterKey?: string;
 };
 
 export const PaginatedNavigation = ({
   currentPage,
   totalPages,
   onPageChange,
-  filterKey,
 }: PaginationControlsProps) => {
   const { chainId } = useUserStore();
 
   const lastValidTotalPagesRef = useRef(1);
   const lastChainIdRef = useRef<number | null>(null);
   const chainChangeFrameRef = useRef(0);
 
-  const lastFilterKeyRef = useRef<string | undefined>(undefined);
-  const filterChangeFrameRef = useRef(0);
-
   const chainHasChanged = chainId !== lastChainIdRef.current;
-  const filterHasChanged = filterKey !== lastFilterKeyRef.current;
 
   if (chainHasChanged) {
     lastChainIdRef.current = chainId ?? null;
@@ -43,72 +36,66 @@ export const PaginatedNavigation = ({
     chainChangeFrameRef.current++;
   }
 
-  if (filterHasChanged) {
-    lastFilterKeyRef.current = filterKey;
-    filterChangeFrameRef.current = 0;
-  } else {
-    filterChangeFrameRef.current++;
-  }
-
   let stableTotalPages = lastValidTotalPagesRef.current;
 
   const isRecentChainChange = chainChangeFrameRef.current <= 5;
-  const isRecentFilterChange = filterChangeFrameRef.current <= 5;
-
-  if (
-    chainHasChanged ||
-    filterHasChanged ||
-    isRecentChainChange ||
-    isRecentFilterChange
-  ) {
+
+  if (chainHasChanged || isRecentChainChange) {
     stableTotalPages = Math.max(totalPages, 1);
   } else if (totalPages > 0 && totalPages >= lastValidTotalPagesRef.current) {
     stableTotalPages = totalPages;
   }
-  // Reset page if it no longer exists after filter change
-  if (filterHasChanged && currentPage > stableTotalPages) {
-    onPageChange(1);
-  }
 
   lastValidTotalPagesRef.current = stableTotalPages;
 
+  // Don't render pagination if no pages or invalid state
   if (!stableTotalPages || stableTotalPages <= 0 || currentPage <= 0) {
     return null;
   }
 
   const generatePages = () => {
     const pages: (number | 'ellipsis')[] = [];
 
+    // Mobile-first approach: show fewer pages on small screens
     const isMobile = typeof window !== 'undefined' && window.innerWidth < 640;
     const maxVisiblePages = isMobile ? 3 : 7;
 
     if (stableTotalPages <= maxVisiblePages) {
+      // Show all pages if within limit
       for (let i = 1; i <= stableTotalPages; i++) {
         pages.push(i);
       }
     } else if (isMobile) {
+      // Mobile: simplified pagination - only show current and neighbors
       if (currentPage === 1) {
+        // At start: 1 2 ... last
         pages.push(1, 2, 'ellipsis', stableTotalPages);
       } else if (currentPage === stableTotalPages) {
+        // At end: 1 ... (last-1) last
         pages.push(1, 'ellipsis', stableTotalPages - 1, stableTotalPages);
       } else {
+        // Middle: 1 ... current ... last
         pages.push(1, 'ellipsis', currentPage, 'ellipsis', stableTotalPages);
       }
     } else {
+      // Desktop: full pagination logic
       pages.push(1);
 
       if (currentPage <= 3) {
+        // Near beginning: 1 2 3 4 ... last
         for (let i = 2; i <= 4; i++) {
           pages.push(i);
         }
         pages.push('ellipsis');
         pages.push(stableTotalPages);
       } else if (currentPage >= stableTotalPages - 2) {
+        // Near end: 1 ... (last-3) (last-2) (last-1) last
         pages.push('ellipsis');
         for (let i = stableTotalPages - 3; i <= stableTotalPages; i++) {
           pages.push(i);
         }
       } else {
+        // In middle: 1 ... (current-1) current (current+1) ... last
         pages.push('ellipsis');
         for (let i = currentPage - 1; i <= currentPage + 1; i++) {
           pages.push(i);

src/components/ui/select.tsx

@@ -41,7 +41,7 @@ function SelectTrigger({
     >
       {children}
       <SelectPrimitive.Icon asChild>
-        <ChevronDownIcon className="text-foreground size-4" />
+        <ChevronDownIcon className="size-4" />
       </SelectPrimitive.Icon>
     </SelectPrimitive.Trigger>
   );

src/hooks/useFilterParam.ts

@@ -1,6 +1,5 @@
 import { PREVIEW_TABLE_LENGTH, PREVIEW_TABLE_REFETCH_INTERVAL } from '@/config';
 import { execute } from '@/graphql/poco/execute';
-import { App_OrderBy, OrderDirection } from '@/graphql/poco/graphql';
 import { cn } from '@/lib/utils';
 import { useQuery } from '@tanstack/react-query';
 import { LoaderCircle } from 'lucide-react';
@@ -9,39 +8,25 @@ import { DataTable } from '@/components/DataTable';
 import AppIcon from '@/components/icons/AppIcon';
 import { Button } from '@/components/ui/button';
 import useUserStore from '@/stores/useUser.store';
-import { createPlaceholderDataFn } from '@/utils/createPlaceholderDataFnForQueryKey';
-import { getRecentFromTimestamp } from '@/utils/format';
+import { createPlaceholderDataFnForQueryKey } from '@/utils/createPlaceholderDataFnForQueryKey';
 import { ErrorAlert } from '../ErrorAlert';
 import { appsQuery } from './appsQuery';
 import { columns } from './appsTable/columns';
 
 export function AppsPreviewTable({ className }: { className?: string }) {
   const { chainId } = useUserStore();
 
-  // Pertinent ordering: usageCount desc + recent usage constraint (last 14 days)
-  const recentFrom = getRecentFromTimestamp();
-  const orderBy: App_OrderBy = App_OrderBy.UsageCount;
-  const orderDirection: OrderDirection = OrderDirection.Desc;
-  const queryKey = [
-    chainId,
-    'apps_preview',
-    orderBy,
-    orderDirection,
-    recentFrom,
-  ];
+  const queryKey = [chainId, 'apps_preview'];
   const apps = useQuery({
     queryKey,
     queryFn: () =>
       execute(appsQuery, chainId, {
         length: PREVIEW_TABLE_LENGTH,
         skip: 0,
-        orderBy,
-        orderDirection,
-        recentFrom,
       }),
     refetchInterval: PREVIEW_TABLE_REFETCH_INTERVAL,
     enabled: !!chainId,
-    placeholderData: createPlaceholderDataFn(),
+    placeholderData: createPlaceholderDataFnForQueryKey(queryKey),
   });
 
   const formattedData =
@@ -55,7 +40,7 @@ export function AppsPreviewTable({ className }: { className?: string }) {
       <div className="flex items-center justify-between">
         <h2 className="flex items-center gap-2 font-sans">
           <AppIcon size={20} className="text-foreground" />
-          Most pertinent apps
+          Latest apps deployed
           {apps.data && apps.isError && (
             <span className="text-muted-foreground text-sm font-light">
               (outdated)

src/modules/apps/AppsPreviewTable.tsx

@@ -6,16 +6,12 @@ export const appsQuery = graphql(`
     $skip: Int = 0
     $nextSkip: Int = 20
     $nextNextSkip: Int = 40
-    $orderBy: App_orderBy = timestamp
-    $orderDirection: OrderDirection = desc
-    $recentFrom: BigInt = 0
   ) {
     apps(
       first: $length
       skip: $skip
-      where: { lastUsageTimestamp_gte: $recentFrom }
-      orderBy: $orderBy
-      orderDirection: $orderDirection
+      orderBy: timestamp
+      orderDirection: desc
     ) {
       address: id
       owner {
@@ -27,7 +23,6 @@ export const appsQuery = graphql(`
       multiaddr
       checksum
       mrenclave
-      lastUsageTimestamp
       transfers(orderBy: timestamp, orderDirection: desc) {
         transaction {
           txHash: id
@@ -39,18 +34,16 @@ export const appsQuery = graphql(`
     appsHasNext: apps(
       first: 1
       skip: $nextSkip
-      orderBy: $orderBy
-      orderDirection: $orderDirection
-      where: { lastUsageTimestamp_gte: $recentFrom }
+      orderBy: timestamp
+      orderDirection: desc
     ) {
       address: id
     }
     appsHasNextNext: apps(
       first: 1
       skip: $nextNextSkip
-      orderBy: $orderBy
-      orderDirection: $orderDirection
-      where: { lastUsageTimestamp_gte: $recentFrom }
+      orderBy: timestamp
+      orderDirection: desc
     ) {
       address: id
     }

src/modules/apps/appsQuery.ts

@@ -174,13 +174,8 @@ export function SearcherBar({
         />
       </div>
 
-      <div
-        className={cn(
-          'mt-4 flex justify-center gap-4 sm:hidden',
-          isError && 'mt-10'
-        )}
-      >
-        <div className="flex justify-center">
+      <div className={cn('mt-4 flex justify-center gap-4', isError && 'mt-10')}>
+        <div className="flex justify-center sm:hidden">
           <Button variant="outline" onClick={handleSearch} disabled={isPending}>
             {isPending ? 'Searching...' : 'Search'}
           </Button>

src/modules/search/SearcherBar.tsx

@@ -1,6 +1,5 @@
 import { PREVIEW_TABLE_LENGTH, PREVIEW_TABLE_REFETCH_INTERVAL } from '@/config';
 import { execute } from '@/graphql/poco/execute';
-import { Workerpool_OrderBy, OrderDirection } from '@/graphql/poco/graphql';
 import { cn } from '@/lib/utils';
 import { useQuery } from '@tanstack/react-query';
 import { LoaderCircle } from 'lucide-react';
@@ -9,39 +8,25 @@ import { DataTable } from '@/components/DataTable';
 import WorkerpoolIcon from '@/components/icons/WorkerpoolIcon';
 import { Button } from '@/components/ui/button';
 import useUserStore from '@/stores/useUser.store';
-import { createPlaceholderDataFn } from '@/utils/createPlaceholderDataFnForQueryKey';
-import { getRecentFromTimestamp } from '@/utils/format';
+import { createPlaceholderDataFnForQueryKey } from '@/utils/createPlaceholderDataFnForQueryKey';
 import { ErrorAlert } from '../ErrorAlert';
 import { workerpoolsQuery } from './workerpoolsQuery';
 import { columns } from './workerpoolsTable/columns';
 
 export function WorkerpoolsPreviewTable({ className }: { className?: string }) {
   const { chainId } = useUserStore();
 
-  // Pertinent ordering: usageCount desc + recent usage constraint (last 14 days)
-  const recentFrom = getRecentFromTimestamp();
-  const orderBy: Workerpool_OrderBy = Workerpool_OrderBy.UsageCount;
-  const orderDirection: OrderDirection = OrderDirection.Desc;
-  const queryKey = [
-    chainId,
-    'workerpools_preview',
-    orderBy,
-    orderDirection,
-    recentFrom,
-  ];
+  const queryKey = [chainId, 'workerpools_preview'];
   const workerpools = useQuery({
     queryKey,
     queryFn: () =>
       execute(workerpoolsQuery, chainId, {
         length: PREVIEW_TABLE_LENGTH,
         skip: 0,
-        orderBy,
-        orderDirection,
-        recentFrom,
       }),
     refetchInterval: PREVIEW_TABLE_REFETCH_INTERVAL,
     enabled: !!chainId,
-    placeholderData: createPlaceholderDataFn(),
+    placeholderData: createPlaceholderDataFnForQueryKey(queryKey),
   });
 
   const formattedData =
@@ -55,7 +40,7 @@ export function WorkerpoolsPreviewTable({ className }: { className?: string }) {
       <div className="flex items-center justify-between">
         <h2 className="flex items-center gap-2 font-sans">
           <WorkerpoolIcon size={20} className="text-foreground" />
-          Most pertinent workerpools
+          Latest workerpools deployed
           {workerpools.data && workerpools.isError && (
             <span className="text-muted-foreground text-sm font-light">
               (outdated)