chore: use LoaderFunctionArgs and loaderData props (#135)

Author: DanielFGray

app/root.tsx

@@ -1,4 +1,4 @@
-import type { LoaderFunction, MetaFunction } from "react-router";
+import type { LoaderFunctionArgs, MetaFunction } from "react-router";
 import { Links, Meta, Outlet, Scripts, ScrollRestoration } from "react-router";
 
 import "./styles/tailwind.css";
@@ -12,13 +12,11 @@ export const meta: MetaFunction = () => [
   },
 ];
 
-export const loader: LoaderFunction = async ({
-  request,
-}: Parameters<LoaderFunction>[0]) => {
+export async function loader({ request }: LoaderFunctionArgs) {
   return {
     user: await getUser(request),
   };
-};
+}
 
 export default function App() {
   return (

app/routes/__auth.tsx

@@ -1,20 +1,19 @@
-import { Outlet, useLoaderData, useLocation } from "react-router";
-
+import type { Route } from "./+types/__auth";
+import { Outlet, useLocation, type LoaderFunctionArgs } from "react-router";
 import { Login } from "#~/components/login";
 import { isProd } from "#~/helpers/env.server";
 import { getUser } from "#~/models/session.server";
 import { useOptionalUser } from "#~/utils";
 
-export async function loader({ request }: { request: Request }) {
+export async function loader({ request }: LoaderFunctionArgs) {
   return { user: await getUser(request), isProd: isProd() };
 }
 
-export default function Auth() {
-  const { isProd } = useLoaderData<typeof loader>();
+export default function Auth({ loaderData }: Route.ComponentProps) {
   const user = useOptionalUser();
   const location = useLocation();
 
-  if (isProd) {
+  if (loaderData.isProd) {
     return <div>nope</div>;
   }
 

app/routes/__auth/dashboard.tsx

@@ -1,13 +1,9 @@
-import type { LoaderFunction } from "react-router";
-import { data, useLoaderData, useNavigation } from "react-router";
+import type { Route } from "./+types/dashboard";
+import { data, type LoaderFunctionArgs, useNavigation } from "react-router";
 import type { LabelHTMLAttributes, PropsWithChildren } from "react";
 import { getTopParticipants } from "#~/models/activity.server";
 
-export const loader = async ({
-  request,
-  // context,
-  // params,
-}: Parameters<LoaderFunction>[0]) => {
+export async function loader({ request }: LoaderFunctionArgs) {
   // const user = await getUser(request);
   const url = new URL(request.url);
   const start = url.searchParams.get("start");
@@ -28,7 +24,7 @@ export const loader = async ({
   );
 
   return output;
-};
+}
 
 const Label = (props: LabelHTMLAttributes<Element>) => (
   <label {...props} className={`${props.className ?? ""} m-4`}>
@@ -65,9 +61,10 @@ const DataHeading = ({ children }: PropsWithChildren) => {
   );
 };
 
-export default function DashboardPage() {
+export default function DashboardPage({
+  loaderData: data,
+}: Route.ComponentProps) {
   const nav = useNavigation();
-  const data = useLoaderData<typeof loader>();
 
   if (nav.state === "loading") {
     return "loading…";

app/routes/auth.tsx

@@ -1,4 +1,4 @@
-import type { ActionFunction, LoaderFunction } from "react-router";
+import type { ActionFunctionArgs, LoaderFunction } from "react-router";
 import { redirect } from "react-router";
 
 import { initOauthLogin } from "#~/models/session.server";
@@ -8,7 +8,7 @@ export const loader: LoaderFunction = async () => {
   return redirect("/");
 };
 
-export const action: ActionFunction = async ({ request }) => {
+export async function action({ request }: ActionFunctionArgs) {
   // fetch user from db
   // if doesn't exist, create it with discord ID + email
   const form = await request.formData();
@@ -17,7 +17,7 @@ export const action: ActionFunction = async ({ request }) => {
     request,
     redirectTo: form.get("redirectTo")?.toString() ?? undefined,
   });
-};
+}
 
 export default function LoginPage() {
   return (

app/routes/discord-oauth.tsx

@@ -1,7 +1,7 @@
-import { redirect, type LoaderFunction } from "react-router";
+import { redirect, type LoaderFunctionArgs } from "react-router";
 import { completeOauthLogin } from "#~/models/session.server";
 
-export const loader: LoaderFunction = async ({ request }) => {
+export async function loader({ request }: LoaderFunctionArgs) {
   const url = new URL(request.url);
   const code = url.searchParams.get("code");
   const cookie = request.headers.get("Cookie");
@@ -19,4 +19,4 @@ export const loader: LoaderFunction = async ({ request }) => {
     cookie,
     url.searchParams.get("state") ?? undefined,
   );
-};
+}

app/routes/healthcheck.tsx

@@ -1,8 +1,8 @@
 // learn more: https://fly.io/docs/reference/configuration/#services-http_checks
-import type { LoaderFunction } from "react-router";
+import type { LoaderFunctionArgs } from "react-router";
 import db from "#~/db.server";
 
-export const loader: LoaderFunction = async ({ request }) => {
+export async function loader({ request }: LoaderFunctionArgs) {
   const host =
     request.headers.get("X-Forwarded-Host") ?? request.headers.get("host");
 
@@ -22,4 +22,4 @@ export const loader: LoaderFunction = async ({ request }) => {
     console.log("healthcheck ❌", { error });
     return new Response("ERROR", { status: 500 });
   }
-};
+}

app/routes/logout.tsx

@@ -1,10 +1,10 @@
-import type { ActionFunction } from "react-router";
+import type { ActionFunctionArgs } from "react-router";
 
 import { logout } from "#~/models/session.server";
 
-export const action: ActionFunction = async ({ request }) => {
+export async function action({ request }: ActionFunctionArgs) {
   return await logout(request);
-};
+}
 
 export default function Logout() {
   return (