fix: Fix RecentSubmissions Sort Order Update

Author: ethnclark

frontend/src/components/RecentSubmissions.tsx

@@ -33,7 +33,8 @@ export default function RecentSubmissions({
   const botId = useBotId();
 
   // Get global filter state from Zustand
-  const { statusFilter, sortOrder, setStatusFilter } = useFeedFilterStore();
+  const { statusFilter, sortOrder, setStatusFilter, setSortOrder } =
+    useFeedFilterStore();
 
   // Local filter state (before applying)
   const [localStatusFilter, setLocalStatusFilter] =
@@ -56,11 +57,14 @@ export default function RecentSubmissions({
   }, [searchQuery]);
 
   // Fetch submissions with infinite scroll
-  //   const ITEMS_PER_PAGE = 20;
-  const { data, fetchNextPage, hasNextPage, isFetchingNextPage, status } =
-    useFeedItems(feedId);
-
-  // const { data: items = [] } = useFeedItems(feedId);
+  const ITEMS_PER_PAGE = 20;
+  const {
+    data,
+    fetchNextPage,
+    hasNextPage = false,
+    isFetchingNextPage = false,
+    status,
+  } = useFeedItems(feedId, ITEMS_PER_PAGE, statusFilter);
 
   // Get the items from the transformed data
   const items = data?.items || [];
@@ -101,7 +105,7 @@ export default function RecentSubmissions({
     // Update global filter state
     setStatusFilter(localStatusFilter);
     // Update other global filters (would need to add these to the store)
-    // setSortOrder(localSortOrder);
+    setSortOrder(localSortOrder);
     // setPlatform(localPlatform);
 
     // Close the filter panel
@@ -211,8 +215,8 @@ export default function RecentSubmissions({
       <InfiniteFeed
         items={filteredItems}
         fetchNextPage={fetchNextPage}
-        hasNextPage={hasNextPage && debouncedSearchQuery.trim() === ""}
-        isFetchingNextPage={isFetchingNextPage}
+        hasNextPage={!!hasNextPage && debouncedSearchQuery.trim() === ""}
+        isFetchingNextPage={!!isFetchingNextPage}
         status={status}
         loadingMessage="Loading more submissions..."
         noMoreItemsMessage="No more submissions to load"

frontend/src/lib/api.ts

@@ -15,21 +15,50 @@ export function useFeedConfig(feedId: string) {
   });
 }
 
-export function useFeedItems(feedId: string) {
-  return useQuery<SubmissionWithFeedData[]>({
-    queryKey: ["feed-items", feedId],
-    queryFn: async () => {
-      const response = await fetch(`/api/feed/${feedId}`);
+export function useFeedItems(
+  feedId: string,
+  limit: number = 20,
+  status?: string,
+) {
+  return useInfiniteQuery<
+    PaginatedResponse<SubmissionWithFeedData>,
+    Error,
+    TransformedInfiniteData<SubmissionWithFeedData>,
+    [string, string, string | undefined],
+    number
+  >({
+    queryKey: ["feed-items-paginated", feedId, status],
+    queryFn: async ({ pageParam = 0 }) => {
+      const statusParam = status ? `status=${status}` : "";
+      const pageParamStr = `page=${pageParam}`;
+      const limitParam = `limit=${limit}`;
+
+      // Build query string with available parameters
+      const queryParams = [statusParam, pageParamStr, limitParam]
+        .filter((param) => param !== "")
+        .join("&");
+
+      const url = `/api/feed/${feedId}?${queryParams}`;
+      const response = await fetch(url);
       if (!response.ok) {
         throw new Error("Failed to fetch feed items");
       }
       return response.json();
     },
-    // Poll every 10 seconds
+    initialPageParam: 0,
+    getNextPageParam: (lastPage) => {
+      if (!lastPage || !lastPage.pagination) return undefined;
+      return lastPage.pagination.hasNextPage
+        ? lastPage.pagination.page + 1
+        : undefined;
+    },
+    select: (data) => ({
+      pages: data.pages,
+      pageParams: data.pageParams,
+      items: data.pages.flatMap((page) => (Array.isArray(page) ? page : [])),
+    }),
     refetchInterval: 10000,
-    // Refetch on window focus
     refetchOnWindowFocus: true,
-    // Refetch when regaining network connection
     refetchOnReconnect: true,
   });
 }
@@ -163,7 +192,7 @@ export function useAllSubmissions(limit: number = 20, status?: string) {
     },
     initialPageParam: 0,
     getNextPageParam: (lastPage) => {
-      // Use the pagination metadata to determine if there's a next page
+      if (!lastPage || !lastPage.pagination) return undefined;
       return lastPage.pagination.hasNextPage
         ? lastPage.pagination.page + 1
         : undefined;
@@ -172,8 +201,9 @@ export function useAllSubmissions(limit: number = 20, status?: string) {
     select: (data) => ({
       pages: data.pages,
       pageParams: data.pageParams,
-      // Add a flattened items array for easier access
-      items: data.pages.flatMap((page) => page.items),
+      items: data.pages.flatMap((page) =>
+        Array.isArray(page.items) ? page.items : [],
+      ),
     }),
     // Poll every 10 seconds
     refetchInterval: 10000,