feat: Implement the all highlights page. Fixes #620

3 files changed, 18 insertions, 7 deletions

diff --git a/packages/shared-react/hooks/highlights.ts b/packages/shared-react/hooks/highlights.ts
index 299ed697..257a1ed4 100644
--- a/packages/shared-react/hooks/highlights.ts
+++ b/packages/shared-react/hooks/highlights.ts
@@ -10,6 +10,7 @@ export function useCreateHighlight(
       apiUtils.highlights.getForBookmark.invalidate({
         bookmarkId: req.bookmarkId,
       });
+      apiUtils.highlights.getAll.invalidate();
       return opts[0]?.onSuccess?.(res, req, meta);
     },
   });
@@ -25,6 +26,7 @@ export function useUpdateHighlight(
       apiUtils.highlights.getForBookmark.invalidate({
         bookmarkId: res.bookmarkId,
       });
+      apiUtils.highlights.getAll.invalidate();
       return opts[0]?.onSuccess?.(res, req, meta);
     },
   });
@@ -40,6 +42,7 @@ export function useDeleteHighlight(
       apiUtils.highlights.getForBookmark.invalidate({
         bookmarkId: res.bookmarkId,
       });
+      apiUtils.highlights.getAll.invalidate();
       return opts[0]?.onSuccess?.(res, req, meta);
     },
   });
diff --git a/packages/shared/types/highlights.ts b/packages/shared/types/highlights.ts
index 9bda6029..ff4b7e7f 100644
--- a/packages/shared/types/highlights.ts
+++ b/packages/shared/types/highlights.ts
@@ -1,5 +1,7 @@
 import { z } from "zod";
 
+import { zCursorV2 } from "./pagination";
+
 export const DEFAULT_NUM_HIGHLIGHTS_PER_PAGE = 20;
 
 const zHighlightColorSchema = z.enum(["yellow", "red", "green", "blue"]);
@@ -31,3 +33,11 @@ export const zUpdateHighlightSchema = z.object({
   highlightId: z.string(),
   color: zHighlightColorSchema.optional(),
 });
+
+export const zGetAllHighlightsResponseSchema = z.object({
+  highlights: z.array(zHighlightSchema),
+  nextCursor: zCursorV2.nullable(),
+});
+export type ZGetAllHighlightsResponse = z.infer<
+  typeof zGetAllHighlightsResponseSchema
+>;
diff --git a/packages/trpc/routers/highlights.ts b/packages/trpc/routers/highlights.ts
index e4446679..86da560b 100644
--- a/packages/trpc/routers/highlights.ts
+++ b/packages/trpc/routers/highlights.ts
@@ -1,10 +1,11 @@
 import { experimental_trpcMiddleware, TRPCError } from "@trpc/server";
-import { and, eq, lt, lte, or } from "drizzle-orm";
+import { and, desc, eq, lt, lte, or } from "drizzle-orm";
 import { z } from "zod";
 
 import { highlights } from "@hoarder/db/schema";
 import {
   DEFAULT_NUM_HIGHLIGHTS_PER_PAGE,
+  zGetAllHighlightsResponseSchema,
   zHighlightSchema,
   zNewHighlightSchema,
   zUpdateHighlightSchema,
@@ -76,6 +77,7 @@ export const highlightsAppRouter = router({
           eq(highlights.bookmarkId, input.bookmarkId),
           eq(highlights.userId, ctx.user.id),
         ),
+        orderBy: [desc(highlights.createdAt), desc(highlights.id)],
       });
       return { highlights: results };
     }),
@@ -102,12 +104,7 @@ export const highlightsAppRouter = router({
         limit: z.number().optional().default(DEFAULT_NUM_HIGHLIGHTS_PER_PAGE),
       }),
     )
-    .output(
-      z.object({
-        highlights: z.array(zHighlightSchema),
-        nextCursor: zCursorV2.nullable(),
-      }),
-    )
+    .output(zGetAllHighlightsResponseSchema)
     .query(async ({ input, ctx }) => {
       const results = await ctx.db.query.highlights.findMany({
         where: and(
@@ -123,6 +120,7 @@ export const highlightsAppRouter = router({
             : undefined,
         ),
         limit: input.limit + 1,
+        orderBy: [desc(highlights.createdAt), desc(highlights.id)],
       });
       let nextCursor: z.infer<typeof zCursorV2> | null = null;
       if (results.length > input.limit) {