Copilot instructions

1---
2applyTo: "web/app/routes/**/*.tsx"
3---
4## React Router
5 
6 
7- You are using the latest version of React Router (v7).
8- Always include the suffix `Page` when naming the default export of a route.
9- The primary export in a routes file should specify `loaderData` like `export default function RouteNamePage({ loaderData }: Route.ComponentProps)`. `loaderData` is the return value from `clientLoader`.
10- Use `href("/products/:id", { id: "abc123" })` to generate a url path for a route managed by the application.
11  - Look at [routes.ts](mdc:web/app/routes.ts) to determine what routes and path parameters exist.
12- Use `export async function clientLoader(loaderArgs: Route.ClientLoaderArgs)` to define a `clientLoader` on a route.
13- Do not define `Route.*` types, these are autogenerated and can be imported from `import type { Route } from "./+types/routeFileName"`
14- If URL parameters or query string values need to be checked before rendering the page, do this in a `clientLoader` and not in a `useEffect`
15- Never worry about generating types using `pnpm`
16- Use [`<AllMeta />`](web/app/components/shared/AllMeta.tsx) instead of MetaFunction or individual `<meta />` tags
17- Use the following pattern to reference query string values (i.e. `?theQueryStringParam=value`)
18 
19```typescript
20const [searchParams, _setSearchParams] = useSearchParams()
21// searchParams contains the value of all query string parameters
22const queryStringValue = searchParams.get("theQueryStringParam")
23```
24 
25### Loading Mock Data
26 
27Don't load mock data in the component function with `useEffect`. Instead, load data in a `clientLoader`:
28 
29```typescript
30// in mock.ts
31export async function getServerData(options: any) {
32  // ...
33}
34 
35// in web/app/routes/**/*.ts
36export async function clientLoader(loaderArgs: Route.ClientLoaderArgs) {
37  // no error reporting is needed, this will be handled by the `getServerData`
38  // mock loading functions should return result in a `data` key
39  const { data } = await getServerData({
40    /* ... */
41  });
42 
43  // the return result here is available in `loaderData`
44  return data;
45}
46```
47 
48### How to Use `clientLoader`
49 
50- `export async function clientLoader(loaderArgs: Route.ClientLoaderArgs) {`
51- Load any server data required for page load here, not in the component function.
52- Use `return redirect(href("/the/url"))` to redirect users
53- Use [getQueryParam](web/app/lib/utils.ts) to get query string variables
54- `throw new Response` if you need to mimic a 400, 500, etc error
55- `loaderArgs` and all sub-objects are all fully typed
56- `loaderArgs.params.id` to get URL parameters
57 
58### Loading Backend Data
59 
60- `~/configuration/client` re-exports all types and functions from `client/*`. Import from `~/configuration/client` instead of anything you find in the `client/` folder/package.
61- For each API endpoint, there's a fully typed async function that can be used to call it. Never attempt to call an API endpoint directly.
62  - Do not generate types for API parameters or responses. Reference the autogenerated types that are re-exported in `~/configuration/client`
63  - For instance, the `getSignedUrl` function in [web/client/sdk.gen.ts] has a `SignedUrlResponse` type in [web/client/types.gen.ts]
64  - This same type is used in the function signature, i.e. `type SignedUrlResponse = Awaited<ReturnType<typeof getSignedUrl>>["data"]`
65 
66- When using an import from `~/configuration/client`:
67  - use `body:` for request params
68  - always `const { data, error } = await theCall()`
69 
70`clientLoader` can only be used on initial page load within a route. If you need to load additional server data on component mount:
71 
72```tsx
73import { useQuery } from "@tanstack/react-query"
74import {
75  // these options correspond to the server route
76  createCheckoutSessionOptions,
77  publicClient,
78} from "~/configuration/client"
79 
80function TheComponent() {
81  const { data, error } = useQuery({
82    enabled: open,
83    ...createCheckoutSessionOptions({
84      // or `client` if authenticated
85      client: publicClient,
86      body: { /* API parameters here */ },
87    }),
88  })
89 
90  // remember to display errors by checking `error`
91}
92```
93