From 7349ef49fae8cf6055f513e3e3f514961fede6e6 Mon Sep 17 00:00:00 2001 From: Kyrylo Melnychuk Date: Wed, 24 Sep 2025 11:52:39 +1000 Subject: [PATCH] Update routes to use react-router generated types --- .eslintrc.cjs | 8 ++++++ app/routes/_index/route.tsx | 6 ++--- app/routes/app._index.tsx | 12 +++------ app/routes/app.tsx | 7 +++-- app/routes/auth.$.tsx | 7 +++-- app/routes/auth.login/route.tsx | 31 +++++++++++----------- app/routes/webhooks.app.scopes_update.tsx | 32 +++++++++++------------ app/routes/webhooks.app.uninstalled.tsx | 4 +-- 8 files changed, 53 insertions(+), 54 deletions(-) diff --git a/.eslintrc.cjs b/.eslintrc.cjs index c2e4453..1dff5a1 100644 --- a/.eslintrc.cjs +++ b/.eslintrc.cjs @@ -69,6 +69,14 @@ module.exports = { }, }, }, + rules: { + "import/no-unresolved": [ + "error", + { + ignore: ["^\\./\\+types/"], + }, + ], + }, extends: [ "plugin:@typescript-eslint/recommended", "plugin:import/recommended", diff --git a/app/routes/_index/route.tsx b/app/routes/_index/route.tsx index 3ed06fa..b33d286 100644 --- a/app/routes/_index/route.tsx +++ b/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")) { diff --git a/app/routes/app._index.tsx b/app/routes/app._index.tsx index d42b2f1..edf93d3 100644 --- a/app/routes/app._index.tsx +++ b/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); }; diff --git a/app/routes/app.tsx b/app/routes/app.tsx index 338e74b..a387786 100644 --- a/app/routes/app.tsx +++ b/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); }; diff --git a/app/routes/auth.$.tsx b/app/routes/auth.$.tsx index 734fc04..fbc549e 100644 --- a/app/routes/auth.$.tsx +++ b/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); }; diff --git a/app/routes/auth.login/route.tsx b/app/routes/auth.login/route.tsx index 6ecf717..2de7de1 100644 --- a/app/routes/auth.login/route.tsx +++ b/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() {
- - setShop(e.currentTarget.value)} - autocomplete="on" - error={errors.shop} - > - Log in - + + setShop(e.currentTarget.value)} + autocomplete="on" + error={errors.shop} + > + Log in +
diff --git a/app/routes/webhooks.app.scopes_update.tsx b/app/routes/webhooks.app.scopes_update.tsx index b1610b8..6cea17f 100644 --- a/app/routes/webhooks.app.scopes_update.tsx +++ b/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(); }; diff --git a/app/routes/webhooks.app.uninstalled.tsx b/app/routes/webhooks.app.uninstalled.tsx index aaf7cc8..33e9f87 100644 --- a/app/routes/webhooks.app.uninstalled.tsx +++ b/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}`);