Migrate to isomorphic loaders

dcramer · Dec 15, 2023 · c0d623f · c0d623f
1 parent d080e29
commit c0d623f
Show file tree

Hide file tree

Showing 7 changed files with 93 additions and 100 deletions.
diff --git a/apps/web/app/routes/_index.tsx b/apps/web/app/routes/_index.tsx
@@ -16,28 +16,24 @@ import TastingList from "@peated/web/components/tastingList";
 import useAuth from "@peated/web/hooks/useAuth";
 import classNames from "@peated/web/lib/classNames";
 import { trpc } from "@peated/web/lib/trpc";
-import {
-  json,
-  type LoaderFunctionArgs,
-  type SerializeFrom,
-} from "@remix-run/node";
+import { type SerializeFrom } from "@remix-run/node";
+import { makeIsomorphicLoader } from "../lib/isomorphicLoader";
 
 const defaultViewParam = "global";
 
-export async function loader({
-  context: { trpc },
-  request,
-}: LoaderFunctionArgs) {
-  const { searchParams } = new URL(request.url);
-  const filter = mapFilterParam(searchParams.get("view"));
-
-  return json({
-    tastingList: await trpc.tastingList.query({
-      filter,
-      limit: 10,
-    }),
-  });
-}
+export const { loader, clientLoader } = makeIsomorphicLoader(
+  async ({ request, context: { trpc } }) => {
+    const { searchParams } = new URL(request.url);
+    const filter = mapFilterParam(searchParams.get("view"));
+
+    return {
+      tastingList: await trpc.tastingList.query({
+        filter,
+        limit: 10,
+      }),
+    };
+  },
+);
 
 export default function Activity() {
   const { user } = useAuth();

diff --git a/apps/web/app/routes/bottles.$bottleId.prices.tsx b/apps/web/app/routes/bottles.$bottleId.prices.tsx
@@ -1,19 +1,20 @@
 import BetaNotice from "@peated/web/components/betaNotice";
 import TimeSince from "@peated/web/components/timeSince";
-import { json, type LoaderFunctionArgs } from "@remix-run/node";
 import { useLoaderData } from "@remix-run/react";
 import invariant from "tiny-invariant";
+import { makeIsomorphicLoader } from "../lib/isomorphicLoader";
 
-export async function loader({
-  params: { bottleId },
-  context: { trpc },
-}: LoaderFunctionArgs) {
-  invariant(bottleId);
-  const priceList = await trpc.bottlePriceList.query({
-    bottle: Number(bottleId),
-  });
-  return json({ priceList });
-}
+export const { loader, clientLoader } = makeIsomorphicLoader(
+  async ({ params: { bottleId }, context: { trpc } }) => {
+    invariant(bottleId);
+
+    const priceList = await trpc.bottlePriceList.query({
+      bottle: Number(bottleId),
+    });
+
+    return { priceList };
+  },
+);
 
 export default function BottlePrices() {
   const { priceList } = useLoaderData<typeof loader>();

diff --git a/apps/web/app/routes/bottles.$bottleId.tastings.tsx b/apps/web/app/routes/bottles.$bottleId.tastings.tsx
@@ -1,22 +1,20 @@
 import EmptyActivity from "@peated/web/components/emptyActivity";
 import TastingList from "@peated/web/components/tastingList";
-import type { LoaderFunctionArgs } from "@remix-run/node";
-import { json } from "@remix-run/node";
 import { useLoaderData, useParams } from "@remix-run/react";
 import invariant from "tiny-invariant";
+import { makeIsomorphicLoader } from "../lib/isomorphicLoader";
 
-export async function loader({
-  params: { bottleId },
-  context: { trpc },
-}: LoaderFunctionArgs) {
-  invariant(bottleId);
+export const { loader, clientLoader } = makeIsomorphicLoader(
+  async ({ params: { bottleId }, context: { trpc } }) => {
+    invariant(bottleId);
 
-  const tastingList = await trpc.tastingList.query({
-    bottle: Number(bottleId),
-  });
+    const tastingList = await trpc.tastingList.query({
+      bottle: Number(bottleId),
+    });
 
-  return json({ tastingList });
-}
+    return { tastingList };
+  },
+);
 
 export default function BottleActivity() {
   const { bottleId } = useParams<"bottleId">();

diff --git a/apps/web/app/routes/entities.$entityId.bottles.tsx b/apps/web/app/routes/entities.$entityId.bottles.tsx
@@ -1,39 +1,37 @@
 import type { Entity } from "@peated/server/types";
 import BottleTable from "@peated/web/components/bottleTable";
 import QueryBoundary from "@peated/web/components/queryBoundary";
-import type { LoaderFunctionArgs, SerializeFrom } from "@remix-run/node";
-import { json } from "@remix-run/node";
+import type { SerializeFrom } from "@remix-run/node";
 import { useLoaderData, useLocation, useOutletContext } from "@remix-run/react";
 import invariant from "tiny-invariant";
+import { makeIsomorphicLoader } from "../lib/isomorphicLoader";
 
-export async function loader({
-  request,
-  context: { trpc },
-  params: { entityId },
-}: LoaderFunctionArgs) {
-  invariant(entityId);
-  const { searchParams } = new URL(request.url);
-  const numericFields = new Set([
-    "cursor",
-    "limit",
-    "age",
-    "entity",
-    "distiller",
-    "bottler",
-    "entity",
-  ]);
+export const { loader, clientLoader } = makeIsomorphicLoader(
+  async ({ params: { entityId }, request, context: { trpc } }) => {
+    invariant(entityId);
+    const { searchParams } = new URL(request.url);
+    const numericFields = new Set([
+      "cursor",
+      "limit",
+      "age",
+      "entity",
+      "distiller",
+      "bottler",
+      "entity",
+    ]);
 
-  return json({
-    bottleList: await trpc.bottleList.query({
-      ...Object.fromEntries(
-        [...searchParams.entries()].map(([k, v]) =>
-          numericFields.has(k) ? [k, Number(v)] : [k, v === "" ? null : v],
+    return {
+      bottleList: await trpc.bottleList.query({
+        ...Object.fromEntries(
+          [...searchParams.entries()].map(([k, v]) =>
+            numericFields.has(k) ? [k, Number(v)] : [k, v === "" ? null : v],
+          ),
         ),
-      ),
-      entity: Number(entityId),
-    }),
-  });
-}
+        entity: Number(entityId),
+      }),
+    };
+  },
+);
 
 export default function EntityBottles() {
   const { entity } = useOutletContext<{ entity: Entity }>();

diff --git a/apps/web/app/routes/entities.$entityId.tastings.tsx b/apps/web/app/routes/entities.$entityId.tastings.tsx
@@ -1,22 +1,20 @@
 import EmptyActivity from "@peated/web/components/emptyActivity";
 import TastingList from "@peated/web/components/tastingList";
-import type { LoaderFunctionArgs } from "@remix-run/node";
-import { json } from "@remix-run/node";
 import { useLoaderData } from "@remix-run/react";
 import invariant from "tiny-invariant";
+import { makeIsomorphicLoader } from "../lib/isomorphicLoader";
 
-export async function loader({
-  params: { entityId },
-  context: { trpc },
-}: LoaderFunctionArgs) {
-  invariant(entityId);
+export const { loader, clientLoader } = makeIsomorphicLoader(
+  async ({ params: { entityId }, context: { trpc } }) => {
+    invariant(entityId);
 
-  return json({
-    tastingList: await trpc.tastingList.query({
-      entity: Number(entityId),
-    }),
-  });
-}
+    return {
+      tastingList: await trpc.tastingList.query({
+        entity: Number(entityId),
+      }),
+    };
+  },
+);
 
 export default function EntityActivity() {
   const { tastingList } = useLoaderData<typeof loader>();

diff --git a/apps/web/app/routes/flights._index.tsx b/apps/web/app/routes/flights._index.tsx
@@ -3,26 +3,26 @@ import EmptyActivity from "@peated/web/components/emptyActivity";
 import Layout from "@peated/web/components/layout";
 import ListItem from "@peated/web/components/listItem";
 import SimpleHeader from "@peated/web/components/simpleHeader";
-import { redirectToAuth } from "@peated/web/lib/auth.server";
-import type { LoaderFunctionArgs, MetaFunction } from "@remix-run/node";
-import { json } from "@remix-run/node";
+import type { MetaFunction } from "@remix-run/node";
 import { Link, useLoaderData } from "@remix-run/react";
 import { type SitemapFunction } from "remix-sitemap";
+import { getAuthRedirect } from "../lib/auth";
+import { Redirect } from "../lib/errors";
+import { makeIsomorphicLoader } from "../lib/isomorphicLoader";
 
 export const sitemap: SitemapFunction = () => ({
   exclude: true,
 });
 
-export async function loader({
-  request,
-  context: { user, trpc },
-}: LoaderFunctionArgs) {
-  if (!user) return redirectToAuth({ request });
+export const { loader, clientLoader } = makeIsomorphicLoader(
+  async ({ request, context: { trpc, user } }) => {
+    if (!user) throw new Redirect(getAuthRedirect({ request }));
 
-  return json({
-    flightList: await trpc.flightList.query(),
-  });
-}
+    return {
+      flightList: await trpc.flightList.query(),
+    };
+  },
+);
 
 export const meta: MetaFunction = () => {
   return [

diff --git a/apps/web/app/routes/updates.tsx b/apps/web/app/routes/updates.tsx
@@ -2,13 +2,15 @@ import ChangeList from "@peated/web/components/changeList";
 import EmptyActivity from "@peated/web/components/emptyActivity";
 import Layout from "@peated/web/components/layout";
 import Tabs from "@peated/web/components/tabs";
-import type { LoaderFunctionArgs, MetaFunction } from "@remix-run/node";
-import { json } from "@remix-run/node";
+import type { MetaFunction } from "@remix-run/node";
 import { Link, useLoaderData } from "@remix-run/react";
+import { makeIsomorphicLoader } from "../lib/isomorphicLoader";
 
-export async function loader({ context: { trpc } }: LoaderFunctionArgs) {
-  return json({ changeList: await trpc.changeList.query() });
-}
+export const { loader, clientLoader } = makeIsomorphicLoader(
+  async ({ context: { trpc } }) => {
+    return { changeList: await trpc.changeList.query() };
+  },
+);
 
 export const meta: MetaFunction = () => {
   return [