feat: enhance AppsPreviewTable and appsQuery with ordering options and recent usage filter

Author: ErwanDecoster

src/modules/apps/AppsPreviewTable.tsx

@@ -1,5 +1,6 @@
 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';
@@ -8,25 +9,38 @@ import { DataTable } from '@/components/DataTable';
 import AppIcon from '@/components/icons/AppIcon';
 import { Button } from '@/components/ui/button';
 import useUserStore from '@/stores/useUser.store';
-import { createPlaceholderDataFnForQueryKey } from '@/utils/createPlaceholderDataFnForQueryKey';
+import { createPlaceholderDataFn } 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();
 
-  const queryKey = [chainId, 'apps_preview'];
+  // Pertinent ordering: usageCount desc + recent usage constraint (last 14 days)
+  const recentFrom = Math.floor(Date.now() / 1000) - 14 * 24 * 60 * 60;
+  const orderBy: App_OrderBy = App_OrderBy.UsageCount;
+  const orderDirection: OrderDirection = OrderDirection.Desc;
+  const queryKey = [
+    chainId,
+    'apps_preview',
+    orderBy,
+    orderDirection,
+    recentFrom,
+  ];
   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: createPlaceholderDataFnForQueryKey(queryKey),
+    placeholderData: createPlaceholderDataFn(),
   });
 
   const formattedData =
@@ -40,7 +54,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" />
-          Latest apps deployed
+          Most pertinent apps
           {apps.data && apps.isError && (
             <span className="text-muted-foreground text-sm font-light">
               (outdated)

src/modules/apps/appsQuery.ts

@@ -1,17 +1,22 @@
 import { graphql } from '@/graphql/poco/gql';
 
+// @ts-expect-error Updated query signature; regenerate codegen after change.
 export const appsQuery = graphql(`
   query Apps(
     $length: Int = 20
     $skip: Int = 0
     $nextSkip: Int = 20
     $nextNextSkip: Int = 40
+    $orderBy: App_orderBy = timestamp
+    $orderDirection: OrderDirection = desc
+    $recentFrom: BigInt = 0
   ) {
     apps(
       first: $length
       skip: $skip
-      orderBy: timestamp
-      orderDirection: desc
+      where: { lastUsageTimestamp_gte: $recentFrom }
+      orderBy: $orderBy
+      orderDirection: $orderDirection
     ) {
       address: id
       owner {
@@ -23,6 +28,7 @@ export const appsQuery = graphql(`
       multiaddr
       checksum
       mrenclave
+      lastUsageTimestamp
       transfers(orderBy: timestamp, orderDirection: desc) {
         transaction {
           txHash: id
@@ -34,16 +40,18 @@ export const appsQuery = graphql(`
     appsHasNext: apps(
       first: 1
       skip: $nextSkip
-      orderBy: timestamp
-      orderDirection: desc
+      orderBy: $orderBy
+      orderDirection: $orderDirection
+      where: { lastUsageTimestamp_gte: $recentFrom }
     ) {
       address: id
     }
     appsHasNextNext: apps(
       first: 1
       skip: $nextNextSkip
-      orderBy: timestamp
-      orderDirection: desc
+      orderBy: $orderBy
+      orderDirection: $orderDirection
+      where: { lastUsageTimestamp_gte: $recentFrom }
     ) {
       address: id
     }

src/routes/$chainSlug/_layout/apps.tsx

@@ -1,33 +1,55 @@
 import { TABLE_LENGTH, TABLE_REFETCH_INTERVAL } from '@/config';
 import { execute } from '@/graphql/poco/execute';
+import { App_OrderBy, OrderDirection } from '@/graphql/poco/graphql';
 import { useQuery } from '@tanstack/react-query';
 import { createFileRoute } from '@tanstack/react-router';
-import { LoaderCircle } from 'lucide-react';
+import { LoaderCircle, SlidersHorizontal } from 'lucide-react';
 import { DataTable } from '@/components/DataTable';
 import { PaginatedNavigation } from '@/components/PaginatedNavigation';
 import AppIcon from '@/components/icons/AppIcon';
 import { BackButton } from '@/components/ui/BackButton';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+} from '@/components/ui/select';
+import { useFilterParam } from '@/hooks/useFilterParam';
 import { usePageParam } from '@/hooks/usePageParam';
 import { ErrorAlert } from '@/modules/ErrorAlert';
 import { AppBreadcrumbsList } from '@/modules/apps/AppBreadcrumbs';
 import { appsQuery } from '@/modules/apps/appsQuery';
 import { columns } from '@/modules/apps/appsTable/columns';
 import { SearcherBar } from '@/modules/search/SearcherBar';
 import useUserStore from '@/stores/useUser.store';
-import { createPlaceholderDataFnForQueryKey } from '@/utils/createPlaceholderDataFnForQueryKey';
+import { createPlaceholderDataFn } from '@/utils/createPlaceholderDataFnForQueryKey';
 import { getAdditionalPages } from '@/utils/format';
 
 export const Route = createFileRoute('/$chainSlug/_layout/apps')({
   component: AppsRoute,
 });
 
-function useAppsData(currentPage: number) {
+function useAppsData(currentPage: number, orderFilter: string) {
   const { chainId } = useUserStore();
   const skip = currentPage * TABLE_LENGTH;
   const nextSkip = skip + TABLE_LENGTH;
   const nextNextSkip = skip + 2 * TABLE_LENGTH;
 
-  const queryKey = [chainId, 'apps', currentPage];
+  const orderBy = orderFilter === 'pertinent' ? 'usageCount' : 'timestamp';
+  const orderDirection = orderFilter === 'oldest' ? 'asc' : 'desc';
+  const recentFrom =
+    orderFilter === 'pertinent'
+      ? Math.floor(Date.now() / 1000) - 14 * 24 * 60 * 60
+      : 0;
+
+  const queryKey = [
+    chainId,
+    'apps',
+    currentPage,
+    orderBy,
+    orderDirection,
+    recentFrom,
+  ];
   const { data, isLoading, isRefetching, isError, errorUpdateCount } = useQuery(
     {
       queryKey,
@@ -37,10 +59,13 @@ function useAppsData(currentPage: number) {
           skip,
           nextSkip,
           nextNextSkip,
+          orderBy: orderBy as App_OrderBy,
+          orderDirection: orderDirection as OrderDirection,
+          recentFrom: recentFrom,
         }),
       refetchInterval: TABLE_REFETCH_INTERVAL,
       enabled: !!chainId,
-      placeholderData: createPlaceholderDataFnForQueryKey(queryKey),
+      placeholderData: createPlaceholderDataFn(),
     }
   );
 
@@ -68,20 +93,55 @@ function useAppsData(currentPage: number) {
 }
 
 function AppsRoute() {
+  const orders = [
+    { id: 1, value: 'recent', name: 'Recently deployed' },
+    { id: 2, value: 'oldest', name: 'Oldest deployed' },
+    { id: 3, value: 'pertinent', name: 'Most pertinent' },
+  ];
+  const allowedOrderValues = orders.map((o) => o.value);
   const [currentPage, setCurrentPage] = usePageParam('appsPage');
+  const [orderBy, setOrderBy] = useFilterParam(
+    'appsOrderBy',
+    allowedOrderValues,
+    'pertinent'
+  );
   const {
     data,
     isLoading,
     isRefetching,
     isError,
     hasPastError,
     additionalPages,
-  } = useAppsData(currentPage - 1);
+  } = useAppsData(currentPage - 1, orderBy);
+
+  function handleOrderChange(value: string) {
+    setOrderBy(value);
+    setCurrentPage(1);
+  }
 
   return (
     <div className="mt-8 grid gap-6">
       <div className="mt-6 flex flex-col justify-between lg:flex-row">
-        <SearcherBar className="py-6 lg:order-last lg:mr-0 lg:max-w-md lg:py-0 xl:max-w-xl" />
+        <div className="flex flex-col items-stretch gap-4 py-6 sm:flex-row lg:order-last lg:mr-0 lg:py-0">
+          <SearcherBar className="lg:max-w-md xl:max-w-xl" />
+          <Select
+            value={orderBy?.toString()}
+            onValueChange={handleOrderChange}
+            defaultValue="pertinent"
+          >
+            <SelectTrigger className="m-auto box-content h-9! rounded-2xl">
+              <SlidersHorizontal />
+              Order by
+            </SelectTrigger>
+            <SelectContent>
+              {orders.map((order) => (
+                <SelectItem key={order.id} value={order.value}>
+                  {order.name}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
         <div className="space-y-2">
           <h1 className="flex items-center gap-2 font-sans text-2xl font-extrabold">
             <AppIcon size={24} />
@@ -116,6 +176,7 @@ function AppsRoute() {
         currentPage={currentPage}
         totalPages={currentPage + additionalPages}
         onPageChange={setCurrentPage}
+        filterKey={orderBy}
       />
     </div>
   );