diff --git a/apps/web/app/routes/_index.tsx b/apps/web/app/routes/_index.tsx index 4eda5c01a..685ea70e1 100644 --- 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 index 0dae85bba..a8f07e619 100644 --- 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(); diff --git a/apps/web/app/routes/bottles.$bottleId.tastings.tsx b/apps/web/app/routes/bottles.$bottleId.tastings.tsx index 139844c2a..efe0cfb95 100644 --- 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 index c45fe7e72..0e3ecb399 100644 --- 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 index 2b7dad7e0..867db41dd 100644 --- 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(); diff --git a/apps/web/app/routes/flights._index.tsx b/apps/web/app/routes/flights._index.tsx index f7d9fe642..b84b8d524 100644 --- 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 index 77e89eed3..2f3e8f240 100644 --- 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 [