tiny fixes and fixing TS errors

apps/mobile/components/bookmarks/UpdatingBookmarkList.tsx

@@ -11,7 +11,7 @@ export default function UpdatingBookmarkList({
   query,
   header,
 }: {
-  query: ZGetBookmarksRequest;
+  query: Omit<ZGetBookmarksRequest, "sortOrder">; // Sort order is not supported in mobile yet
   header?: React.ReactElement;
 }) {
   const apiUtils = api.useUtils();

apps/web/components/dashboard/SortOrderToggle.tsx

@@ -5,20 +5,14 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
-import { useSortOrder } from "@/lib/hooks/useSortOrder";
 import { useTranslation } from "@/lib/i18n/client";
+import { useSortOrderStore } from "@/lib/store/useSortOrderStore";
 import { Check, SortAsc, SortDesc } from "lucide-react";
 
-import { ZSortOrder } from "@hoarder/shared/types/bookmarks";
-
 export default function SortOrderToggle() {
   const { t } = useTranslation();
 
-  const { sortOrder: currentSort, setSortOrder } = useSortOrder();
-
-  const updateSort = async (newSort: ZSortOrder) => {
-    setSortOrder(newSort);
-  };
+  const { sortOrder: currentSort, setSortOrder } = useSortOrderStore();
 
   return (
     <DropdownMenu>
@@ -38,7 +32,7 @@ export default function SortOrderToggle() {
       <DropdownMenuContent className="w-fit">
         <DropdownMenuItem
           className="cursor-pointer justify-between"
-          onClick={() => updateSort("desc")}
+          onClick={() => setSortOrder("desc")}
         >
           <div className="flex items-center">
             <SortDesc size={16} className="mr-2" />
@@ -48,7 +42,7 @@ export default function SortOrderToggle() {
         </DropdownMenuItem>
         <DropdownMenuItem
           className="cursor-pointer justify-between"
-          onClick={() => updateSort("asc")}
+          onClick={() => setSortOrder("asc")}
         >
           <div className="flex items-center">
             <SortAsc size={16} className="mr-2" />

apps/web/components/dashboard/bookmarks/Bookmarks.tsx

@@ -13,7 +13,7 @@ export default async function Bookmarks({
   showDivider,
   showEditorCard = false,
 }: {
-  query: ZGetBookmarksRequest;
+  query: Omit<ZGetBookmarksRequest, "sortOrder">; // Sort order is handled by the store
   header?: React.ReactNode;
   showDivider?: boolean;
   showEditorCard?: boolean;

apps/web/components/dashboard/bookmarks/UpdatableBookmarksGrid.tsx

@@ -2,7 +2,7 @@
 
 import { useEffect } from "react";
 import UploadDropzone from "@/components/dashboard/UploadDropzone";
-import { useSortOrder } from "@/lib/hooks/useSortOrder";
+import { useSortOrderStore } from "@/lib/store/useSortOrderStore";
 import { api } from "@/lib/trpc";
 
 import type {
@@ -18,18 +18,14 @@ export default function UpdatableBookmarksGrid({
   bookmarks: initialBookmarks,
   showEditorCard = false,
 }: {
-  query: ZGetBookmarksRequest;
+  query: Omit<ZGetBookmarksRequest, "sortOrder">; // Sort order is handled by the store
   bookmarks: ZGetBookmarksResponse;
   showEditorCard?: boolean;
   itemsPerPage?: number;
 }) {
-  const { sortOrder } = useSortOrder();
+  const sortOrder = useSortOrderStore((state) => state.sortOrder);
 
-  // Merge the sort order from URL with existing query params
-  const finalQuery = {
-    ...query,
-    sortOrder,
-  };
+  const finalQuery = { ...query, sortOrder };
 
   const { data, fetchNextPage, hasNextPage, isFetchingNextPage, refetch } =
     api.bookmarks.getBookmarks.useInfiniteQuery(
@@ -60,7 +56,7 @@ export default function UpdatableBookmarksGrid({
   );
 
   return (
-    <BookmarkGridContextProvider query={query}>
+    <BookmarkGridContextProvider query={finalQuery}>
       {showEditorCard ? <UploadDropzone>{grid}</UploadDropzone> : grid}
     </BookmarkGridContextProvider>
   );

apps/web/lib/hooks/bookmark-search.ts

@@ -1,6 +1,6 @@
 import { useEffect, useMemo, useState } from "react";
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
-import { useSortOrder } from "@/lib/hooks/useSortOrder";
+import { useSortOrderStore } from "@/lib/store/useSortOrderStore";
 import { api } from "@/lib/trpc";
 import { keepPreviousData } from "@tanstack/react-query";
 
@@ -55,7 +55,7 @@ export function useDoBookmarkSearch() {
 
 export function useBookmarkSearch() {
   const { searchQuery } = useSearchQuery();
-  const { sortOrder } = useSortOrder();
+  const sortOrder = useSortOrderStore((state) => state.sortOrder);
 
   const {
     data,
@@ -65,6 +65,7 @@ export function useBookmarkSearch() {
     hasNextPage,
     fetchNextPage,
     isFetchingNextPage,
+    refetch,
   } = api.bookmarks.searchBookmarks.useInfiniteQuery(
     {
       text: searchQuery,
@@ -78,6 +79,10 @@ export function useBookmarkSearch() {
     },
   );
 
+  useEffect(() => {
+    refetch();
+  }, [refetch, sortOrder]);
+
   if (error) {
     throw error;
   }

apps/web/lib/store/useSortOrderStore.ts

@@ -8,6 +8,6 @@ interface SortOrderState {
 }
 
 export const useSortOrderStore = create<SortOrderState>((set) => ({
-  sortOrder: "desc" as ZSortOrder, // default sort order
+  sortOrder: "desc", // default sort order
   setSortOrder: (sortOrder) => set({ sortOrder }),
 }));