refactor: simplify root loader (#487)

app/root.server.ts

@@ -1,9 +1,13 @@
+import { TT } from "./db/drizzle-client.server";
 import { ctx_currentUser } from "./server/request-context/session";
-import { RootLoaderData } from "./utils/loader-utils";
 import { wrapLoader } from "./utils/loader-utils.server";
 
+export type LoaderData = {
+  currentUser?: TT["users"];
+};
+
 export const loader = wrapLoader(async () => {
-  const loaderData: RootLoaderData = {
+  const loaderData: LoaderData = {
     currentUser: await ctx_currentUser(),
   };
   return loaderData;

app/root.tsx

@@ -27,16 +27,17 @@ import {
   encodeFlashMessage,
   useFlashMessageHandler,
 } from "./utils/flash-message";
-import { useRootLoaderData } from "./utils/loader-utils";
+import { useLoaderDataExtra } from "./utils/loader-utils";
 import { cls } from "./utils/misc";
 import { navigateRefresh } from "./utils/misc-client";
 import type { PageHandle } from "./utils/page-handle";
 import { QueryClientWrapper } from "./utils/react-query-utils";
 import { ToastWrapper } from "./utils/toast-utils";
 
 export { loader } from "./root.server";
+import { LoaderData } from "./root.server";
 
-// no need to revalidate `currentUser` since app refreshes on user session change (signin/signout)
+// for now, we don't revalidate `currentUser` and rely on page refresh on signin/signout
 export const shouldRevalidate: ShouldRevalidateFunction = () => false;
 
 export default function DefaultComponent() {
@@ -78,7 +79,7 @@ function RootWrapper(props: React.PropsWithChildren) {
 }
 
 function Root() {
-  const data = useRootLoaderData();
+  const data = useLoaderDataExtra() as LoaderData;
   useFlashMessageHandler();
 
   // `PageHandle` of the leaf compoment

app/routes/index.server.tsx

@@ -3,8 +3,10 @@ import { wrapLoader } from "../utils/loader-utils.server";
 import { PAGINATION_PARAMS_SCHEMA } from "../utils/pagination";
 import { VideosLoaderData, getVideosLoaderData } from "./videos/index.server";
 
+export type LoaderData = VideosLoaderData;
+
 export const loader = wrapLoader(async () => {
   const query = PAGINATION_PARAMS_SCHEMA.parse(ctx_get().urlQuery);
-  const loaderData: VideosLoaderData = await getVideosLoaderData(query);
+  const loaderData: LoaderData = await getVideosLoaderData(query);
   return loaderData;
 });

app/routes/index.tsx

@@ -1,15 +1,15 @@
 import { useLoaderDataExtra } from "../utils/loader-utils";
 import type { PageHandle } from "../utils/page-handle";
 import { VideoListComponent } from "./videos";
-import type { VideosLoaderData } from "./videos/index.server";
 
 export { loader } from "./index.server";
+import type { LoaderData } from "./index.server";
 
 export const handle: PageHandle = {
   navBarTitle: () => "Examples",
 };
 
 export default function DefaultComponent() {
-  const data = useLoaderDataExtra() as VideosLoaderData;
+  const data = useLoaderDataExtra() as LoaderData;
   return <VideoListComponent {...data} />;
 }

app/routes/videos/$id.server.tsx

@@ -1,6 +1,7 @@
-import { E, T, selectOne } from "../../db/drizzle-client.server";
+import { E, T, TT, selectOne } from "../../db/drizzle-client.server";
 import type { VideoTable } from "../../db/models";
 import { ROUTE_DEF } from "../../misc/routes";
+import { ctx_currentUser } from "../../server/request-context/session";
 import { ctx_get } from "../../server/request-context/storage";
 import {
   assertOrRespond,
@@ -9,15 +10,17 @@ import {
 } from "../../utils/loader-utils.server";
 
 export type LoaderData = {
+  currentUser?: TT["users"];
   video: VideoTable;
 };
 
 export const loader = wrapLoader(async () => {
+  const currentUser = await ctx_currentUser();
   const params = unwrapZodResultOrRespond(
     ROUTE_DEF["/videos/$id"].params.safeParse(ctx_get().params)
   );
   const video = await selectOne(T.videos, E.eq(T.videos.id, params.id));
   assertOrRespond(video);
-  const loaderData: LoaderData = { video };
+  const loaderData: LoaderData = { video, currentUser };
   return loaderData;
 });

app/routes/videos/$id.tsx

@@ -26,7 +26,6 @@ import {
   disableUrlQueryRevalidation,
   useLeafLoaderData,
   useLoaderDataExtra,
-  useRootLoaderData,
   useTypedUrlQuery,
 } from "../../utils/loader-utils";
 import { cls, none } from "../../utils/misc";
@@ -50,9 +49,8 @@ export const handle: PageHandle = {
 };
 
 export default function DeafultComponent() {
-  const { currentUser } = useRootLoaderData();
-  const data = useLoaderDataExtra() as LoaderData;
-  return <PageComponent currentUser={currentUser} {...data} />;
+  const loaderData = useLoaderDataExtra() as LoaderData;
+  return <PageComponent {...loaderData} />;
 }
 
 export function findCurrentEntry(
@@ -140,7 +138,7 @@ function PageComponent({
         // mutate query cache instead of refetch
         queryClient.setQueryData(
           bookmarkEntriesQueryOptions.queryKey,
-          (prev) => [...(prev as TT["bookmarkEntries"][]), newBookmark]
+          (prev: unknown) => [...(prev as TT["bookmarkEntries"][]), newBookmark]
         );
       }
     },
@@ -721,8 +719,7 @@ function extractBookmarkSelection(
 //
 
 function NavBarMenuComponent() {
-  const { currentUser } = useRootLoaderData();
-  const { video } = useLeafLoaderData() as LoaderData;
+  const { currentUser, video } = useLeafLoaderData() as LoaderData;
   const [autoScrollState, toggleAutoScrollState] = useAutoScrollState();
   const [repeatingEntries, setRepeatingEntries] = useRepeatingEntries();
   const [highlightBookmark, setHighlightBookmark] = useAtom(

app/routes/videos/index.server.tsx

@@ -1,5 +1,10 @@
-import { E, T, db, toPaginationResult } from "../../db/drizzle-client.server";
-import type { VideoTable } from "../../db/models";
+import {
+  E,
+  T,
+  TT,
+  db,
+  toPaginationResult,
+} from "../../db/drizzle-client.server";
 import { ctx_get } from "../../server/request-context/storage";
 import {
   ctx_requireUserOrRedirect,
@@ -12,8 +17,9 @@ import {
 } from "../../utils/pagination";
 
 export interface VideosLoaderData {
-  videos: VideoTable[];
+  videos: TT["videos"][];
   pagination: PaginationMetadata;
+  currentUser?: TT["users"];
 }
 
 export async function getVideosLoaderData(
@@ -34,9 +40,10 @@ export async function getVideosLoaderData(
 export const loader = wrapLoader(async () => {
   const user = await ctx_requireUserOrRedirect();
   const query = PAGINATION_PARAMS_SCHEMA.parse(ctx_get().urlQuery);
-  const loaderData: VideosLoaderData = await getVideosLoaderData(
-    query,
-    user.id
-  );
+  const data = await getVideosLoaderData(query, user.id);
+  const loaderData: VideosLoaderData = {
+    ...data,
+    currentUser: user,
+  };
   return loaderData;
 });

app/routes/videos/index.test.ts

@@ -22,6 +22,7 @@ describe("videos/index.loader", () => {
     expect(
       z
         .object({
+          currentUser: zSnapshotType,
           videos: z
             .object({
               id: zSnapshotType,
@@ -36,6 +37,7 @@ describe("videos/index.loader", () => {
         .parse(loaderData)
     ).toMatchInlineSnapshot(`
       {
+        "currentUser": "[Object]",
         "pagination": {
           "page": 1,
           "perPage": 20,

app/routes/videos/index.tsx

@@ -11,10 +11,7 @@ import { useModal } from "../../components/modal";
 import type { DeckTable, UserTable, VideoTable } from "../../db/models";
 import { R } from "../../misc/routes";
 import { rpcClientQuery } from "../../trpc/client";
-import {
-  useLoaderDataExtra,
-  useRootLoaderData,
-} from "../../utils/loader-utils";
+import { useLoaderDataExtra } from "../../utils/loader-utils";
 import type { PageHandle } from "../../utils/page-handle";
 import { toastInfo } from "../../utils/toast-utils";
 
@@ -34,18 +31,16 @@ export const handle: PageHandle = {
 };
 
 export default function DefaultComponent() {
-  const { currentUser } = useRootLoaderData();
   const data = useLoaderDataExtra() as VideosLoaderData;
-  return <VideoListComponent {...data} currentUser={currentUser} />;
+  return <VideoListComponent {...data} />;
 }
 
+// reused for routes/index.tsx
 export function VideoListComponent({
   videos,
   pagination,
   currentUser,
-}: VideosLoaderData & {
-  currentUser?: UserTable;
-}) {
+}: VideosLoaderData) {
   return (
     <>
       <div className="w-full flex justify-center">

app/utils/loader-utils.ts

@@ -6,18 +6,8 @@ import {
 } from "@remix-run/react";
 import React from "react";
 import type { z } from "zod";
-import type { UserTable } from "../db/models";
 import { JSON_EXTRA } from "./json-extra";
 
-export interface RootLoaderData {
-  currentUser?: UserTable;
-}
-
-export function useRootLoaderData(): RootLoaderData {
-  const [{ data }] = useMatches();
-  return React.useMemo(() => JSON_EXTRA.deserialize(data), [data]);
-}
-
 export function useLeafLoaderData(): unknown {
   const [{ data }] = useMatches().slice(-1);
   return React.useMemo(() => JSON_EXTRA.deserialize(data), [data]);