diff --git a/apps/web/app/lib/auth.ts b/apps/web/app/lib/auth.ts index 419c698fd..341478c38 100644 --- a/apps/web/app/lib/auth.ts +++ b/apps/web/app/lib/auth.ts @@ -1,4 +1,4 @@ -import { redirect } from "@remix-run/node"; +import { redirect } from "@remix-run/server-runtime"; export function redirectToAuth({ request }: { request: Request }) { return redirect(getAuthRedirect({ request })); diff --git a/apps/web/app/lib/isomorphicLoader.ts b/apps/web/app/lib/isomorphicLoader.ts index 1a9ab1956..ce89e2cec 100644 --- a/apps/web/app/lib/isomorphicLoader.ts +++ b/apps/web/app/lib/isomorphicLoader.ts @@ -1,8 +1,14 @@ import { makeTRPCClient } from "@peated/server/lib/trpc"; import { type User } from "@peated/server/types"; import config from "@peated/web/config"; -import { type ClientLoaderFunctionArgs } from "@remix-run/react"; -import { json, type LoaderFunctionArgs } from "@remix-run/server-runtime"; +import { + type ClientLoaderFunction, + type ClientLoaderFunctionArgs, +} from "@remix-run/react"; +import { + type LoaderFunction, + type LoaderFunctionArgs, +} from "@remix-run/server-runtime"; import { captureException } from "@sentry/remix"; export type IsomorphicContext = { @@ -41,21 +47,16 @@ export function makeIsomorphicLoader( request, params, context: { trpc, user }, - }: LoaderFunctionArgs) { + }) { const context: IsomorphicContext = { request, params, context: { trpc, user }, isServer: true, }; - const payload = await callback(context); - if (payload instanceof Response) return payload; - return json(payload); - }, - clientLoader: async function clientLoader({ - request, - params, - }: ClientLoaderFunctionArgs) { + return await callback(context); + } satisfies LoaderFunction, + clientLoader: async function clientLoader({ request, params }) { const trpcClient = makeTRPCClient( config.API_SERVER, window.REMIX_CONTEXT.accessToken, @@ -69,6 +70,6 @@ export function makeIsomorphicLoader( isServer: false, }; return await callback(context); - }, + } satisfies ClientLoaderFunction, }; } diff --git a/apps/web/app/routes/_index.tsx b/apps/web/app/routes/_index.tsx index 685ea70e1..75d8f6e24 100644 --- a/apps/web/app/routes/_index.tsx +++ b/apps/web/app/routes/_index.tsx @@ -1,7 +1,3 @@ -import { Link, useLoaderData, useLocation } from "@remix-run/react"; -import { Fragment } from "react"; -import { useEventListener } from "usehooks-ts"; - import Alert from "@peated/web/components/alert"; import Glyph from "@peated/web/components/assets/Glyph"; import BetaNotice from "@peated/web/components/betaNotice"; @@ -17,6 +13,10 @@ import useAuth from "@peated/web/hooks/useAuth"; import classNames from "@peated/web/lib/classNames"; import { trpc } from "@peated/web/lib/trpc"; import { type SerializeFrom } from "@remix-run/node"; +import { Link, useLoaderData, useLocation } from "@remix-run/react"; +import { json } from "@remix-run/server-runtime"; +import { Fragment } from "react"; +import { useEventListener } from "usehooks-ts"; import { makeIsomorphicLoader } from "../lib/isomorphicLoader"; const defaultViewParam = "global"; @@ -26,12 +26,12 @@ export const { loader, clientLoader } = makeIsomorphicLoader( const { searchParams } = new URL(request.url); const filter = mapFilterParam(searchParams.get("view")); - return { + return json({ tastingList: await trpc.tastingList.query({ filter, limit: 10, }), - }; + }); }, ); diff --git a/apps/web/app/routes/bottles.$bottleId.prices.tsx b/apps/web/app/routes/bottles.$bottleId.prices.tsx index a8f07e619..89a9cb0bc 100644 --- a/apps/web/app/routes/bottles.$bottleId.prices.tsx +++ b/apps/web/app/routes/bottles.$bottleId.prices.tsx @@ -1,6 +1,7 @@ import BetaNotice from "@peated/web/components/betaNotice"; import TimeSince from "@peated/web/components/timeSince"; import { useLoaderData } from "@remix-run/react"; +import { json } from "@remix-run/server-runtime"; import invariant from "tiny-invariant"; import { makeIsomorphicLoader } from "../lib/isomorphicLoader"; @@ -12,7 +13,7 @@ export const { loader, clientLoader } = makeIsomorphicLoader( bottle: Number(bottleId), }); - return { priceList }; + return json({ priceList }); }, ); diff --git a/apps/web/app/routes/bottles.$bottleId.tastings.tsx b/apps/web/app/routes/bottles.$bottleId.tastings.tsx index efe0cfb95..a0f31af40 100644 --- a/apps/web/app/routes/bottles.$bottleId.tastings.tsx +++ b/apps/web/app/routes/bottles.$bottleId.tastings.tsx @@ -1,6 +1,7 @@ import EmptyActivity from "@peated/web/components/emptyActivity"; import TastingList from "@peated/web/components/tastingList"; import { useLoaderData, useParams } from "@remix-run/react"; +import { json } from "@remix-run/server-runtime"; import invariant from "tiny-invariant"; import { makeIsomorphicLoader } from "../lib/isomorphicLoader"; @@ -12,7 +13,7 @@ export const { loader, clientLoader } = makeIsomorphicLoader( bottle: Number(bottleId), }); - return { tastingList }; + return json({ tastingList }); }, ); diff --git a/apps/web/app/routes/bottles.$bottleId.tsx b/apps/web/app/routes/bottles.$bottleId.tsx index 27fb48af6..d8fae9696 100644 --- a/apps/web/app/routes/bottles.$bottleId.tsx +++ b/apps/web/app/routes/bottles.$bottleId.tsx @@ -21,8 +21,9 @@ import useAuth from "@peated/web/hooks/useAuth"; import { summarize } from "@peated/web/lib/markdown"; import { formatCategoryName } from "@peated/web/lib/strings"; import { trpc } from "@peated/web/lib/trpc"; -import type { MetaFunction } from "@remix-run/node"; +import { type MetaFunction } from "@remix-run/node"; import { Link, Outlet, useLoaderData, useNavigate } from "@remix-run/react"; +import { json } from "@remix-run/server-runtime"; import { useQueryClient } from "@tanstack/react-query"; import invariant from "tiny-invariant"; import { makeIsomorphicLoader } from "../lib/isomorphicLoader"; @@ -33,7 +34,7 @@ export const { loader, clientLoader } = makeIsomorphicLoader( const bottle = await trpc.bottleById.query(Number(params.bottleId)); - return { bottle }; + return json({ bottle }); }, ); diff --git a/apps/web/app/routes/bottles.$bottleId_.addTasting.tsx b/apps/web/app/routes/bottles.$bottleId_.addTasting.tsx index a64223cb6..575f35726 100644 --- a/apps/web/app/routes/bottles.$bottleId_.addTasting.tsx +++ b/apps/web/app/routes/bottles.$bottleId_.addTasting.tsx @@ -20,15 +20,16 @@ import { redirectToAuth } from "@peated/web/lib/auth"; import { toBlob } from "@peated/web/lib/blobs"; import { logError } from "@peated/web/lib/log"; import { trpc } from "@peated/web/lib/trpc"; -import type { LoaderFunctionArgs, MetaFunction } from "@remix-run/node"; -import { json } from "@remix-run/node"; +import { type MetaFunction } from "@remix-run/node"; import { useLoaderData, useNavigate } from "@remix-run/react"; +import { json } from "@remix-run/server-runtime"; import { TRPCClientError } from "@trpc/client"; import { useState } from "react"; import type { SubmitHandler } from "react-hook-form"; import { Controller, useForm } from "react-hook-form"; import invariant from "tiny-invariant"; import type { z } from "zod"; +import { makeIsomorphicLoader } from "../lib/isomorphicLoader"; type FormSchemaType = z.infer; @@ -41,22 +42,20 @@ const servingStyleList = SERVING_STYLE_LIST.map((c) => ({ name: formatServingStyle(c), })); -export async function loader({ - request, - params: { bottleId }, - context: { trpc, user }, -}: LoaderFunctionArgs) { - invariant(bottleId); +export const { loader, clientLoader } = makeIsomorphicLoader( + async ({ request, params: { bottleId }, context: { trpc, user } }) => { + invariant(bottleId); - if (!user) return redirectToAuth({ request }); + if (!user) return redirectToAuth({ request }); - const bottle = await trpc.bottleById.query(Number(bottleId)); - const suggestedTags = await trpc.bottleSuggestedTagList.query({ - bottle: Number(bottleId), - }); + const bottle = await trpc.bottleById.query(Number(bottleId)); + const suggestedTags = await trpc.bottleSuggestedTagList.query({ + bottle: Number(bottleId), + }); - return json({ bottle, suggestedTags }); -} + return json({ bottle, suggestedTags }); + }, +); export const meta: MetaFunction = () => { return [ diff --git a/apps/web/app/routes/bottles.$bottleId_.edit.tsx b/apps/web/app/routes/bottles.$bottleId_.edit.tsx index 5d0a0c622..f68065e39 100644 --- a/apps/web/app/routes/bottles.$bottleId_.edit.tsx +++ b/apps/web/app/routes/bottles.$bottleId_.edit.tsx @@ -1,10 +1,11 @@ import BottleForm from "@peated/web/components/bottleForm"; import Spinner from "@peated/web/components/spinner"; import { trpc } from "@peated/web/lib/trpc"; -import type { LoaderFunctionArgs } from "@remix-run/node"; -import { json, type MetaFunction } from "@remix-run/node"; +import { type MetaFunction } from "@remix-run/node"; import { useLoaderData, useNavigate, useParams } from "@remix-run/react"; +import { json } from "@remix-run/server-runtime"; import invariant from "tiny-invariant"; +import { makeIsomorphicLoader } from "../lib/isomorphicLoader"; export const meta: MetaFunction = () => { return [ @@ -14,15 +15,15 @@ export const meta: MetaFunction = () => { ]; }; -export async function loader({ - params: { bottleId }, - context: { trpc }, -}: LoaderFunctionArgs) { - invariant(bottleId); - const bottle = await trpc.bottleById.query(Number(bottleId)); +export const { loader, clientLoader } = makeIsomorphicLoader( + async ({ params, context: { trpc } }) => { + invariant(params.bottleId); - return json({ bottle }); -} + const bottle = await trpc.bottleById.query(Number(params.bottleId)); + + return json({ bottle }); + }, +); export default function EditBottle() { const { bottle } = useLoaderData(); diff --git a/apps/web/app/routes/bottles._index.tsx b/apps/web/app/routes/bottles._index.tsx index a61bb61d1..87f9064e2 100644 --- a/apps/web/app/routes/bottles._index.tsx +++ b/apps/web/app/routes/bottles._index.tsx @@ -9,6 +9,7 @@ import { formatCategoryName } from "@peated/web/lib/strings"; import { buildQueryString } from "@peated/web/lib/urls"; import { type MetaFunction, type SerializeFrom } from "@remix-run/node"; import { useLoaderData, useLocation } from "@remix-run/react"; +import { json } from "@remix-run/server-runtime"; import { type SitemapFunction } from "remix-sitemap"; import { makeIsomorphicLoader } from "../lib/isomorphicLoader"; @@ -38,7 +39,7 @@ export const { loader, clientLoader } = makeIsomorphicLoader( "bottler", "entity", ]); - return { + return json({ bottleList: await trpc.bottleList.query( Object.fromEntries( [...searchParams.entries()].map(([k, v]) => @@ -46,7 +47,7 @@ export const { loader, clientLoader } = makeIsomorphicLoader( ), ), ), - }; + }); }, ); diff --git a/apps/web/app/routes/entities.$entityId.bottles.tsx b/apps/web/app/routes/entities.$entityId.bottles.tsx index 0e3ecb399..12663c717 100644 --- a/apps/web/app/routes/entities.$entityId.bottles.tsx +++ b/apps/web/app/routes/entities.$entityId.bottles.tsx @@ -1,8 +1,9 @@ import type { Entity } from "@peated/server/types"; import BottleTable from "@peated/web/components/bottleTable"; import QueryBoundary from "@peated/web/components/queryBoundary"; -import type { SerializeFrom } from "@remix-run/node"; +import { type SerializeFrom } from "@remix-run/node"; import { useLoaderData, useLocation, useOutletContext } from "@remix-run/react"; +import { json } from "@remix-run/server-runtime"; import invariant from "tiny-invariant"; import { makeIsomorphicLoader } from "../lib/isomorphicLoader"; @@ -20,7 +21,7 @@ export const { loader, clientLoader } = makeIsomorphicLoader( "entity", ]); - return { + return json({ bottleList: await trpc.bottleList.query({ ...Object.fromEntries( [...searchParams.entries()].map(([k, v]) => @@ -29,7 +30,7 @@ export const { loader, clientLoader } = makeIsomorphicLoader( ), entity: Number(entityId), }), - }; + }); }, ); diff --git a/apps/web/app/routes/entities.$entityId.tastings.tsx b/apps/web/app/routes/entities.$entityId.tastings.tsx index 867db41dd..90d75e626 100644 --- a/apps/web/app/routes/entities.$entityId.tastings.tsx +++ b/apps/web/app/routes/entities.$entityId.tastings.tsx @@ -1,6 +1,7 @@ import EmptyActivity from "@peated/web/components/emptyActivity"; import TastingList from "@peated/web/components/tastingList"; import { useLoaderData } from "@remix-run/react"; +import { json } from "@remix-run/server-runtime"; import invariant from "tiny-invariant"; import { makeIsomorphicLoader } from "../lib/isomorphicLoader"; @@ -8,11 +9,11 @@ export const { loader, clientLoader } = makeIsomorphicLoader( async ({ params: { entityId }, context: { trpc } }) => { invariant(entityId); - return { + return json({ tastingList: await trpc.tastingList.query({ entity: Number(entityId), }), - }; + }); }, ); diff --git a/apps/web/app/routes/entities.$entityId.tsx b/apps/web/app/routes/entities.$entityId.tsx index 7a60e663a..9bb279c24 100644 --- a/apps/web/app/routes/entities.$entityId.tsx +++ b/apps/web/app/routes/entities.$entityId.tsx @@ -9,25 +9,21 @@ import Tabs from "@peated/web/components/tabs"; import useAuth from "@peated/web/hooks/useAuth"; import { summarize } from "@peated/web/lib/markdown"; import { getEntityUrl } from "@peated/web/lib/urls"; -import type { - LinksFunction, - LoaderFunctionArgs, - MetaFunction, -} from "@remix-run/node"; -import { json } from "@remix-run/node"; +import type { LinksFunction, MetaFunction } from "@remix-run/node"; import { Link, Outlet, useLoaderData, useParams } from "@remix-run/react"; +import { json } from "@remix-run/server-runtime"; 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); - const entity = await trpc.entityById.query(Number(entityId)); + const entity = await trpc.entityById.query(Number(entityId)); - return json({ entity }); -} + return json({ entity }); + }, +); export const meta: MetaFunction = ({ data }) => { if (!data) return []; diff --git a/apps/web/app/routes/entities.$entityId_.edit.tsx b/apps/web/app/routes/entities.$entityId_.edit.tsx index 846df9c8e..b0787d4a1 100644 --- a/apps/web/app/routes/entities.$entityId_.edit.tsx +++ b/apps/web/app/routes/entities.$entityId_.edit.tsx @@ -12,18 +12,16 @@ import SelectField from "@peated/web/components/selectField"; import Spinner from "@peated/web/components/spinner"; import TextField from "@peated/web/components/textField"; import { trpc } from "@peated/web/lib/trpc"; -import { - json, - type LoaderFunctionArgs, - type MetaFunction, -} from "@remix-run/node"; +import { type MetaFunction } from "@remix-run/node"; import { useLoaderData, useNavigate, useParams } from "@remix-run/react"; +import { json } from "@remix-run/server-runtime"; import { useQueryClient } from "@tanstack/react-query"; import { getQueryKey } from "@trpc/react-query"; import type { SubmitHandler } from "react-hook-form"; import { Controller, useForm } from "react-hook-form"; import invariant from "tiny-invariant"; import type { z } from "zod"; +import { makeIsomorphicLoader } from "../lib/isomorphicLoader"; const entityTypes = [ { id: "brand", name: "Brand" }, @@ -41,15 +39,15 @@ export const meta: MetaFunction = () => { ]; }; -export async function loader({ - params: { entityId }, - context: { trpc }, -}: LoaderFunctionArgs) { - invariant(entityId); - const entity = await trpc.entityById.query(Number(entityId)); +export const { loader, clientLoader } = makeIsomorphicLoader( + async ({ params: { entityId }, context: { trpc } }) => { + invariant(entityId); - return json({ entity }); -} + const entity = await trpc.entityById.query(Number(entityId)); + + return json({ entity }); + }, +); export default function EditEntity() { const navigate = useNavigate(); diff --git a/apps/web/app/routes/entities.$entityId_.merge.tsx b/apps/web/app/routes/entities.$entityId_.merge.tsx index d219f31b4..d8989f6d8 100644 --- a/apps/web/app/routes/entities.$entityId_.merge.tsx +++ b/apps/web/app/routes/entities.$entityId_.merge.tsx @@ -10,14 +10,15 @@ import Header from "@peated/web/components/header"; import Layout from "@peated/web/components/layout"; import Spinner from "@peated/web/components/spinner"; import { trpc } from "@peated/web/lib/trpc"; -import type { LoaderFunctionArgs } from "@remix-run/node"; -import { json, type MetaFunction } from "@remix-run/node"; +import { type MetaFunction } from "@remix-run/node"; import { useLoaderData, useNavigate } from "@remix-run/react"; +import { json } from "@remix-run/server-runtime"; import { useState } from "react"; import type { SubmitHandler } from "react-hook-form"; import { Controller, useForm } from "react-hook-form"; import invariant from "tiny-invariant"; import type { z } from "zod"; +import { makeIsomorphicLoader } from "../lib/isomorphicLoader"; type FormSchemaType = z.infer; @@ -29,15 +30,15 @@ export const meta: MetaFunction = () => { ]; }; -export async function loader({ - params: { entityId }, - context: { trpc }, -}: LoaderFunctionArgs) { - invariant(entityId); - const entity = await trpc.entityById.query(Number(entityId)); +export const { loader, clientLoader } = makeIsomorphicLoader( + async ({ params: { entityId }, context: { trpc } }) => { + invariant(entityId); - return json({ entity }); -} + const entity = await trpc.entityById.query(Number(entityId)); + + return json({ entity }); + }, +); export default function EditEntity() { const navigate = useNavigate(); diff --git a/apps/web/app/routes/entities._index.tsx b/apps/web/app/routes/entities._index.tsx index d8c041c6e..07cfcb83f 100644 --- a/apps/web/app/routes/entities._index.tsx +++ b/apps/web/app/routes/entities._index.tsx @@ -6,9 +6,9 @@ import Layout from "@peated/web/components/layout"; import QueryBoundary from "@peated/web/components/queryBoundary"; import SidebarLink from "@peated/web/components/sidebarLink"; import { buildQueryString } from "@peated/web/lib/urls"; -import type { SerializeFrom } from "@remix-run/node"; -import { type MetaFunction } from "@remix-run/node"; +import { type MetaFunction, type SerializeFrom } from "@remix-run/node"; import { useLoaderData, useLocation } from "@remix-run/react"; +import { json } from "@remix-run/server-runtime"; import { type SitemapFunction } from "remix-sitemap"; import { makeIsomorphicLoader } from "../lib/isomorphicLoader"; @@ -30,7 +30,7 @@ export const { loader, clientLoader } = makeIsomorphicLoader( async ({ request, context: { trpc } }) => { const { searchParams } = new URL(request.url); const numericFields = new Set(["cursor", "limit"]); - return { + return json({ entityList: await trpc.entityList.query( Object.fromEntries( [...searchParams.entries()].map(([k, v]) => @@ -38,7 +38,7 @@ export const { loader, clientLoader } = makeIsomorphicLoader( ), ), ), - }; + }); }, ); diff --git a/apps/web/app/routes/favorites.tsx b/apps/web/app/routes/favorites.tsx index d5ab1ecbe..3a352a2bb 100644 --- a/apps/web/app/routes/favorites.tsx +++ b/apps/web/app/routes/favorites.tsx @@ -5,6 +5,7 @@ import SimpleHeader from "@peated/web/components/simpleHeader"; import useAuth from "@peated/web/hooks/useAuth"; import { type MetaFunction } from "@remix-run/node"; import { useLoaderData } from "@remix-run/react"; +import { json } from "@remix-run/server-runtime"; import { type SitemapFunction } from "remix-sitemap"; import invariant from "tiny-invariant"; import { redirectToAuth } from "../lib/auth"; @@ -18,12 +19,12 @@ export const { loader, clientLoader } = makeIsomorphicLoader( async ({ request, context: { trpc, user } }) => { if (!user) return redirectToAuth({ request }); - return { + return json({ favoriteList: await trpc.collectionBottleList.query({ user: "me", collection: "default", }), - }; + }); }, ); diff --git a/apps/web/app/routes/flights.$flightId.tsx b/apps/web/app/routes/flights.$flightId.tsx index a57c8998b..7a5702393 100644 --- a/apps/web/app/routes/flights.$flightId.tsx +++ b/apps/web/app/routes/flights.$flightId.tsx @@ -1,24 +1,24 @@ import BottleCard from "@peated/web/components/bottleCard"; import Layout from "@peated/web/components/layout"; import { summarize } from "@peated/web/lib/markdown"; -import type { LoaderFunctionArgs, MetaFunction } from "@remix-run/node"; -import { json } from "@remix-run/node"; +import type { MetaFunction } from "@remix-run/node"; import { useLoaderData } from "@remix-run/react"; +import { json } from "@remix-run/server-runtime"; import invariant from "tiny-invariant"; +import { makeIsomorphicLoader } from "../lib/isomorphicLoader"; -export async function loader({ - params: { flightId }, - context: { trpc }, -}: LoaderFunctionArgs) { - invariant(flightId); +export const { loader, clientLoader } = makeIsomorphicLoader( + async ({ params: { flightId }, context: { trpc } }) => { + invariant(flightId); - return json({ - flight: await trpc.flightById.query(flightId), - bottles: await trpc.bottleList.query({ - flight: flightId, - }), - }); -} + return json({ + flight: await trpc.flightById.query(flightId), + bottles: await trpc.bottleList.query({ + flight: flightId, + }), + }); + }, +); export const meta: MetaFunction = ({ data }) => { if (!data) return []; diff --git a/apps/web/app/routes/flights._index.tsx b/apps/web/app/routes/flights._index.tsx index ac6ae3efd..a3d29d1a1 100644 --- a/apps/web/app/routes/flights._index.tsx +++ b/apps/web/app/routes/flights._index.tsx @@ -3,8 +3,9 @@ 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 type { MetaFunction } from "@remix-run/node"; +import { type MetaFunction } from "@remix-run/node"; import { Link, useLoaderData } from "@remix-run/react"; +import { json } from "@remix-run/server-runtime"; import { type SitemapFunction } from "remix-sitemap"; import { redirectToAuth } from "../lib/auth"; import { makeIsomorphicLoader } from "../lib/isomorphicLoader"; @@ -17,9 +18,9 @@ export const { loader, clientLoader } = makeIsomorphicLoader( async ({ request, context: { trpc, user } }) => { if (!user) return redirectToAuth({ request }); - return { + return json({ flightList: await trpc.flightList.query(), - }; + }); }, ); diff --git a/apps/web/app/routes/friends.tsx b/apps/web/app/routes/friends.tsx index 0beb37f72..8820659a6 100644 --- a/apps/web/app/routes/friends.tsx +++ b/apps/web/app/routes/friends.tsx @@ -8,8 +8,9 @@ import SimpleHeader from "@peated/web/components/simpleHeader"; import UserAvatar from "@peated/web/components/userAvatar"; import { redirectToAuth } from "@peated/web/lib/auth"; import { trpc } from "@peated/web/lib/trpc"; -import type { MetaFunction } from "@remix-run/node"; +import { type MetaFunction } from "@remix-run/node"; import { Link, useLoaderData } from "@remix-run/react"; +import { json } from "@remix-run/server-runtime"; import { useState } from "react"; import type { SitemapFunction } from "remix-sitemap"; import { makeIsomorphicLoader } from "../lib/isomorphicLoader"; @@ -22,9 +23,9 @@ export const { loader, clientLoader } = makeIsomorphicLoader( async ({ request, context: { trpc, user } }) => { if (!user) return redirectToAuth({ request }); - return { + return json({ friendList: await trpc.friendList.query(), - }; + }); }, ); diff --git a/apps/web/app/routes/notifications.tsx b/apps/web/app/routes/notifications.tsx index 6f70dedb2..178400182 100644 --- a/apps/web/app/routes/notifications.tsx +++ b/apps/web/app/routes/notifications.tsx @@ -3,30 +3,29 @@ import Layout from "@peated/web/components/layout"; import NotificationList from "@peated/web/components/notifications/list"; import Tabs from "@peated/web/components/tabs"; import { redirectToAuth } from "@peated/web/lib/auth"; -import type { LoaderFunctionArgs, MetaFunction } from "@remix-run/node"; -import { json } from "@remix-run/node"; +import type { MetaFunction } from "@remix-run/node"; import { Link, useLoaderData, useLocation } from "@remix-run/react"; +import { json } from "@remix-run/server-runtime"; import { type SitemapFunction } from "remix-sitemap"; +import { makeIsomorphicLoader } from "../lib/isomorphicLoader"; export const sitemap: SitemapFunction = () => ({ exclude: true, }); +export const { loader, clientLoader } = makeIsomorphicLoader( + async ({ context: { trpc, user }, request }) => { + if (!user) return redirectToAuth({ request }); -export async function loader({ - context: { trpc, user }, - request, -}: LoaderFunctionArgs) { - if (!user) return redirectToAuth({ request }); + const { searchParams } = new URL(request.url); - const { searchParams } = new URL(request.url); - - return json({ - notificationList: await trpc.notificationList.query({ - filter: "unread", - ...Object.fromEntries(searchParams.entries()), - }), - }); -} + return json({ + notificationList: await trpc.notificationList.query({ + filter: "unread", + ...Object.fromEntries(searchParams.entries()), + }), + }); + }, +); export const meta: MetaFunction = () => { return [ diff --git a/apps/web/app/routes/resources.manifest[.]webmanifest.ts b/apps/web/app/routes/resources.manifest[.]webmanifest.ts index 2b20c61b6..99106baed 100644 --- a/apps/web/app/routes/resources.manifest[.]webmanifest.ts +++ b/apps/web/app/routes/resources.manifest[.]webmanifest.ts @@ -1,8 +1,7 @@ -import { json } from "@remix-run/node"; - import glyphUrl from "@peated/web/assets/glyph.png"; import logo192Url from "@peated/web/assets/logo192.png"; import config from "@peated/web/config"; +import { json } from "@remix-run/server-runtime"; export async function loader() { return json( diff --git a/apps/web/app/routes/settings.tsx b/apps/web/app/routes/settings.tsx index 48b25b642..e04340203 100644 --- a/apps/web/app/routes/settings.tsx +++ b/apps/web/app/routes/settings.tsx @@ -1,5 +1,3 @@ -import { useLoaderData, useNavigate } from "@remix-run/react"; - import { XMarkIcon } from "@heroicons/react/20/solid"; import { zodResolver } from "@hookform/resolvers/zod"; import { UserInputSchema } from "@peated/server/schemas"; @@ -17,13 +15,15 @@ import useAuth from "@peated/web/hooks/useAuth"; import { redirectToAuth } from "@peated/web/lib/auth"; import { toBlob } from "@peated/web/lib/blobs"; import { trpc } from "@peated/web/lib/trpc"; -import type { LoaderFunctionArgs, MetaFunction } from "@remix-run/node"; -import { json, redirect } from "@remix-run/node"; +import type { MetaFunction } from "@remix-run/node"; +import { useLoaderData, useNavigate } from "@remix-run/react"; +import { json, redirect } from "@remix-run/server-runtime"; import { useState } from "react"; import type { SubmitHandler } from "react-hook-form"; import { useForm } from "react-hook-form"; import { type SitemapFunction } from "remix-sitemap"; import type { z } from "zod"; +import { makeIsomorphicLoader } from "../lib/isomorphicLoader"; type FormSchemaType = z.infer; @@ -31,21 +31,22 @@ export const sitemap: SitemapFunction = () => ({ exclude: true, }); -export async function loader({ - context: { user, trpc }, - request, -}: LoaderFunctionArgs) { - if (!user) return redirectToAuth({ request }); +export const { loader, clientLoader } = makeIsomorphicLoader( + async ({ context: { user, trpc }, request }) => { + if (!user) return redirectToAuth({ request }); - const userDetails = await trpc.userById.query("me"); - if (!userDetails) { - return redirect( - `/login?redirectTo=${encodeURIComponent(new URL(request.url).pathname)}`, - ); - } + const userDetails = await trpc.userById.query("me"); + if (!userDetails) { + return redirect( + `/login?redirectTo=${encodeURIComponent( + new URL(request.url).pathname, + )}`, + ); + } - return json({ user: userDetails }); -} + return json({ user: userDetails }); + }, +); export const meta: MetaFunction = () => { return [ diff --git a/apps/web/app/routes/tastings.$tastingId.tsx b/apps/web/app/routes/tastings.$tastingId.tsx index 3fda70db0..0b7f8c4d0 100644 --- a/apps/web/app/routes/tastings.$tastingId.tsx +++ b/apps/web/app/routes/tastings.$tastingId.tsx @@ -13,6 +13,7 @@ import useAuth from "@peated/web/hooks/useAuth"; import { trpc } from "@peated/web/lib/trpc"; import type { MetaFunction } from "@remix-run/react"; import { useLoaderData, useNavigate } from "@remix-run/react"; +import { json } from "@remix-run/server-runtime"; import { AnimatePresence, motion } from "framer-motion"; import { useState } from "react"; import invariant from "tiny-invariant"; @@ -22,7 +23,7 @@ export const { loader, clientLoader } = makeIsomorphicLoader( async ({ params: { tastingId }, context: { trpc } }) => { invariant(tastingId); - return { tasting: await trpc.tastingById.query(Number(tastingId)) }; + return json({ tasting: await trpc.tastingById.query(Number(tastingId)) }); }, ); diff --git a/apps/web/app/routes/tastings.$tastingId_.editImage.tsx b/apps/web/app/routes/tastings.$tastingId_.editImage.tsx index faad1d10c..5c52f8e9e 100644 --- a/apps/web/app/routes/tastings.$tastingId_.editImage.tsx +++ b/apps/web/app/routes/tastings.$tastingId_.editImage.tsx @@ -1,22 +1,4 @@ -import type { - ActionFunctionArgs, - LoaderFunctionArgs, - MetaFunction, -} from "@remix-run/node"; -import { - json, - redirect, - unstable_createFileUploadHandler, - unstable_parseMultipartFormData, -} from "@remix-run/node"; -import { useActionData, useLoaderData, useNavigate } from "@remix-run/react"; -import { useState } from "react"; -import type { SubmitHandler } from "react-hook-form"; -import { useForm } from "react-hook-form"; -import invariant from "tiny-invariant"; - import { MAX_FILESIZE } from "@peated/server/constants"; - import Fieldset from "@peated/web/components/fieldset"; import Form from "@peated/web/components/form"; import FormError from "@peated/web/components/formError"; @@ -30,7 +12,19 @@ import { ApiError } from "@peated/web/lib/api"; import { redirectToAuth } from "@peated/web/lib/auth"; import { toBlob } from "@peated/web/lib/blobs"; import { logError } from "@peated/web/lib/log"; +import type { ActionFunctionArgs, MetaFunction } from "@remix-run/node"; +import { + unstable_createFileUploadHandler, + unstable_parseMultipartFormData, +} from "@remix-run/node"; +import { useActionData, useLoaderData, useNavigate } from "@remix-run/react"; +import { json, redirect } from "@remix-run/server-runtime"; import { useMutation, useQueryClient } from "@tanstack/react-query"; +import { useState } from "react"; +import type { SubmitHandler } from "react-hook-form"; +import { useForm } from "react-hook-form"; +import invariant from "tiny-invariant"; +import { makeIsomorphicLoader } from "../lib/isomorphicLoader"; export async function action({ context, request, params }: ActionFunctionArgs) { invariant(params.tastingId); @@ -69,16 +63,14 @@ export async function action({ context, request, params }: ActionFunctionArgs) { return redirect(`/tastings/${params.tastingId}`); } -export async function loader({ - request, - params: { tastingId }, - context: { trpc, user }, -}: LoaderFunctionArgs) { - invariant(tastingId); - if (!user) return redirectToAuth({ request }); +export const { loader, clientLoader } = makeIsomorphicLoader( + async ({ request, params: { tastingId }, context: { trpc, user } }) => { + invariant(tastingId); + if (!user) return redirectToAuth({ request }); - return json({ tasting: await trpc.tastingById.query(Number(tastingId)) }); -} + return json({ tasting: await trpc.tastingById.query(Number(tastingId)) }); + }, +); export const meta: MetaFunction = () => { return [ diff --git a/apps/web/app/routes/updates.tsx b/apps/web/app/routes/updates.tsx index 2f3e8f240..4478febeb 100644 --- a/apps/web/app/routes/updates.tsx +++ b/apps/web/app/routes/updates.tsx @@ -2,13 +2,14 @@ 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 { MetaFunction } from "@remix-run/node"; +import { type MetaFunction } from "@remix-run/node"; import { Link, useLoaderData } from "@remix-run/react"; +import { json } from "@remix-run/server-runtime"; import { makeIsomorphicLoader } from "../lib/isomorphicLoader"; export const { loader, clientLoader } = makeIsomorphicLoader( async ({ context: { trpc } }) => { - return { changeList: await trpc.changeList.query() }; + return json({ changeList: await trpc.changeList.query() }); }, ); diff --git a/apps/web/app/routes/users.$username.favorites.tsx b/apps/web/app/routes/users.$username.favorites.tsx index d18995ad8..4c8112116 100644 --- a/apps/web/app/routes/users.$username.favorites.tsx +++ b/apps/web/app/routes/users.$username.favorites.tsx @@ -1,6 +1,7 @@ import BottleTable from "@peated/web/components/bottleTable"; import EmptyActivity from "@peated/web/components/emptyActivity"; import { useLoaderData } from "@remix-run/react"; +import { json } from "@remix-run/server-runtime"; import invariant from "tiny-invariant"; import { makeIsomorphicLoader } from "../lib/isomorphicLoader"; @@ -8,12 +9,12 @@ export const { loader, clientLoader } = makeIsomorphicLoader( async ({ params: { username }, context: { trpc } }) => { invariant(username); - return { + return json({ favoriteList: await trpc.collectionBottleList.query({ user: username, collection: "default", }), - }; + }); }, ); diff --git a/apps/web/app/routes/users.$username.tsx b/apps/web/app/routes/users.$username.tsx index 345555b49..68e7471f5 100644 --- a/apps/web/app/routes/users.$username.tsx +++ b/apps/web/app/routes/users.$username.tsx @@ -10,8 +10,9 @@ import Tabs from "@peated/web/components/tabs"; import UserAvatar from "@peated/web/components/userAvatar"; import useAuth from "@peated/web/hooks/useAuth"; import { trpc } from "@peated/web/lib/trpc"; -import type { MetaFunction } from "@remix-run/node"; +import { type MetaFunction } from "@remix-run/node"; import { Link, Outlet, useLoaderData, useSubmit } from "@remix-run/react"; +import { json } from "@remix-run/server-runtime"; import invariant from "tiny-invariant"; import { makeIsomorphicLoader } from "../lib/isomorphicLoader"; @@ -43,7 +44,7 @@ export const { loader, clientLoader } = makeIsomorphicLoader( async ({ params: { username }, context: { trpc } }) => { invariant(username); - return { user: await trpc.userById.query(username as string) }; + return json({ user: await trpc.userById.query(username as string) }); }, ); diff --git a/apps/web/app/services/session.server.ts b/apps/web/app/services/session.server.ts index f6c82e590..ed7f5a933 100644 --- a/apps/web/app/services/session.server.ts +++ b/apps/web/app/services/session.server.ts @@ -1,6 +1,7 @@ import type { SessionPayload } from "@peated/web/types"; import type { Session } from "@remix-run/node"; -import { createCookieSessionStorage, redirect } from "@remix-run/node"; +import { createCookieSessionStorage } from "@remix-run/node"; +import { redirect } from "@remix-run/server-runtime"; import type { Request as ExpressRequest } from "express"; import invariant from "tiny-invariant";