Update routes to use react-router generated types

Author: k-melnychuk

.eslintrc.cjs

@@ -69,6 +69,14 @@ module.exports = {
           },
         },
       },
+      rules: {
+        "import/no-unresolved": [
+          "error",
+          {
+            ignore: ["^\\./\\+types/"],
+          },
+        ],
+      },
       extends: [
         "plugin:@typescript-eslint/recommended",
         "plugin:import/recommended",

app/routes/_index/route.tsx

@@ -1,11 +1,9 @@
-import type { LoaderFunctionArgs } from "react-router";
+import { Route } from "./+types/route";
 import { redirect, Form, useLoaderData } from "react-router";
-
 import { login } from "../../shopify.server";
-
 import styles from "./styles.module.css";
 
-export const loader = async ({ request }: LoaderFunctionArgs) => {
+export const loader = async ({ request }: Route.LoaderArgs) => {
   const url = new URL(request.url);
 
   if (url.searchParams.get("shop")) {

app/routes/app._index.tsx

@@ -1,21 +1,17 @@
+import { Route } from "./+types/app._index";
 import { useEffect } from "react";
-import type {
-  ActionFunctionArgs,
-  HeadersFunction,
-  LoaderFunctionArgs,
-} from "react-router";
 import { useFetcher } from "react-router";
 import { useAppBridge } from "@shopify/app-bridge-react";
 import { authenticate } from "../shopify.server";
 import { boundary } from "@shopify/shopify-app-react-router/server";
 
-export const loader = async ({ request }: LoaderFunctionArgs) => {
+export const loader = async ({ request }: Route.LoaderArgs) => {
   await authenticate.admin(request);
 
   return null;
 };
 
-export const action = async ({ request }: ActionFunctionArgs) => {
+export const action = async ({ request }: Route.ActionArgs) => {
   const { admin } = await authenticate.admin(request);
   const color = ["Red", "Orange", "Yellow", "Green"][
     Math.floor(Math.random() * 4)
@@ -248,6 +244,6 @@ export default function Index() {
   );
 }
 
-export const headers: HeadersFunction = (headersArgs) => {
+export const headers: Route.HeadersFunction = (headersArgs) => {
   return boundary.headers(headersArgs);
 };

app/routes/app.tsx

@@ -1,11 +1,10 @@
-import type { HeadersFunction, LoaderFunctionArgs } from "react-router";
+import { Route } from "./+types/app";
 import { Outlet, useLoaderData, useRouteError } from "react-router";
 import { boundary } from "@shopify/shopify-app-react-router/server";
 import { AppProvider } from "@shopify/shopify-app-react-router/react";
-
 import { authenticate } from "../shopify.server";
 
-export const loader = async ({ request }: LoaderFunctionArgs) => {
+export const loader = async ({ request }: Route.LoaderArgs) => {
   await authenticate.admin(request);
 
   // eslint-disable-next-line no-undef
@@ -31,6 +30,6 @@ export function ErrorBoundary() {
   return boundary.error(useRouteError());
 }
 
-export const headers: HeadersFunction = (headersArgs) => {
+export const headers: Route.HeadersFunction = (headersArgs) => {
   return boundary.headers(headersArgs);
 };

app/routes/auth.$.tsx

@@ -1,14 +1,13 @@
-
-import type { HeadersFunction, LoaderFunctionArgs } from "react-router";
+import { Route } from "./+types/auth.$";
 import { authenticate } from "../shopify.server";
 import { boundary } from "@shopify/shopify-app-react-router/server";
 
-export const loader = async ({ request }: LoaderFunctionArgs) => {
+export const loader = async ({ request }: Route.LoaderArgs) => {
   await authenticate.admin(request);
 
   return null;
 };
 
-export const headers: HeadersFunction = (headersArgs) => {
+export const headers: Route.HeadersFunction = (headersArgs) => {
   return boundary.headers(headersArgs);
 };

app/routes/auth.login/route.tsx

@@ -1,18 +1,17 @@
+import { Route } from "./+types/route";
 import { AppProvider } from "@shopify/shopify-app-react-router/react";
 import { useState } from "react";
-import type { ActionFunctionArgs, LoaderFunctionArgs } from "react-router";
 import { Form, useActionData, useLoaderData } from "react-router";
-
 import { login } from "../../shopify.server";
 import { loginErrorMessage } from "./error.server";
 
-export const loader = async ({ request }: LoaderFunctionArgs) => {
+export const loader = async ({ request }: Route.LoaderArgs) => {
   const errors = loginErrorMessage(await login(request));
 
   return { errors };
 };
 
-export const action = async ({ request }: ActionFunctionArgs) => {
+export const action = async ({ request }: Route.ActionArgs) => {
   const errors = loginErrorMessage(await login(request));
 
   return {
@@ -30,18 +29,18 @@ export default function Auth() {
     <AppProvider embedded={false}>
       <s-page>
         <Form method="post">
-        <s-section heading="Log in">
-          <s-text-field
-            name="shop"
-            label="Shop domain"
-            details="example.myshopify.com"
-            value={shop}
-            onChange={(e) => setShop(e.currentTarget.value)}
-            autocomplete="on"
-            error={errors.shop}
-          ></s-text-field>
-          <s-button type="submit">Log in</s-button>
-        </s-section>
+          <s-section heading="Log in">
+            <s-text-field
+              name="shop"
+              label="Shop domain"
+              details="example.myshopify.com"
+              value={shop}
+              onChange={(e) => setShop(e.currentTarget.value)}
+              autocomplete="on"
+              error={errors.shop}
+            ></s-text-field>
+            <s-button type="submit">Log in</s-button>
+          </s-section>
         </Form>
       </s-page>
     </AppProvider>

app/routes/webhooks.app.scopes_update.tsx

@@ -1,21 +1,21 @@
-import type { ActionFunctionArgs } from "react-router";
+import { Route } from "./+types/webhooks.app.scopes_update";
 import { authenticate } from "../shopify.server";
 import db from "../db.server";
 
-export const action = async ({ request }: ActionFunctionArgs) => {
-    const { payload, session, topic, shop } = await authenticate.webhook(request);
-    console.log(`Received ${topic} webhook for ${shop}`);
+export const action = async ({ request }: Route.ActionArgs) => {
+  const { payload, session, topic, shop } = await authenticate.webhook(request);
+  console.log(`Received ${topic} webhook for ${shop}`);
 
-    const current = payload.current as string[];
-    if (session) {
-        await db.session.update({   
-            where: {
-                id: session.id
-            },
-            data: {
-                scope: current.toString(),
-            },
-        });
-    }
-    return new Response();
+  const current = payload.current as string[];
+  if (session) {
+    await db.session.update({
+      where: {
+        id: session.id,
+      },
+      data: {
+        scope: current.toString(),
+      },
+    });
+  }
+  return new Response();
 };

app/routes/webhooks.app.uninstalled.tsx

@@ -1,8 +1,8 @@
-import type { ActionFunctionArgs } from "react-router";
+import { Route } from "./+types/webhooks.app.uninstalled";
 import { authenticate } from "../shopify.server";
 import db from "../db.server";
 
-export const action = async ({ request }: ActionFunctionArgs) => {
+export const action = async ({ request }: Route.ActionArgs) => {
   const { shop, session, topic } = await authenticate.webhook(request);
 
   console.log(`Received ${topic} webhook for ${shop}`);