Added a test page

app/api/client.ts

@@ -0,0 +1,53 @@
+interface paths {
+  "/item": {
+    parameters: {
+      query: {
+        uuid: string;
+      };
+    };
+    return: Item;
+  };
+  "/items": {
+    parameters: {
+      query?: never;
+    };
+    return?: never;
+  };
+}
+
+export interface Item {
+  id: number;
+  uuid: string;
+  name: string;
+  rarity: number;
+  price: number;
+  image: string;
+}
+
+class Client {
+  baseUrl: string;
+
+  constructor(baseUrl: string) {
+    this.baseUrl = baseUrl;
+  }
+
+  GET<T extends keyof paths>(
+    path: T,
+    parameters: paths[T]["parameters"]
+  ): Promise<paths[T]["return"]> {
+    let query = parameters["query"]
+      ? "?" + new URLSearchParams(parameters["query"])
+      : "";
+    return fetch(this.baseUrl + path + query, {
+      method: "GET",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      // body: parameters ? JSON.stringify(parameters) : undefined,
+    }).then((response) => response.json());
+  }
+}
+
+const client = new Client("http://127.0.0.1:8000");
+
+export default client;

app/pages/home.tsx

@@ -1,8 +1,8 @@
 import { useState } from "react";
-import "./app.css";
+import "../app.css";
 import { motion } from "motion/react";
 
-export function Welcome() {
+export function HomePage() {
   const [rolling, setRolling] = useState(false);
   const [showResetPopup, setShowResetPopup] = useState(false);
 
@@ -44,7 +44,7 @@ export function Welcome() {
           <div className="w-full overflow-hidden mt-4">
             <motion.div
               className="flex space-x-3"
-              animate={rolling ? { x: [15000, -15110] } : null}
+              animate={rolling ? { x: [15000, -15110] } : undefined}
               transition={
                 rolling
                   ? {

app/pages/test.tsx

@@ -0,0 +1,5 @@
+import type { Item } from "~/api/client";
+
+export default function Test({ item }: { item: Item }) {
+  return <div>{item.name}</div>;
+}

app/routes.ts

@@ -1,3 +1,6 @@
-import { type RouteConfig, index } from "@react-router/dev/routes";
+import { type RouteConfig, index, route } from "@react-router/dev/routes";
 
-export default [index("routes/home.tsx")] satisfies RouteConfig;
+export default [
+  index("routes/home.tsx"),
+  route("/test", "routes/test.tsx"),
+] satisfies RouteConfig;

app/routes/home.tsx

@@ -1,5 +1,5 @@
 import type { Route } from "./+types/home";
-import { Welcome } from "../index";
+import { HomePage } from "../pages/home";
 
 export function meta({}: Route.MetaArgs) {
   return [
@@ -9,5 +9,5 @@ export function meta({}: Route.MetaArgs) {
 }
 
 export default function Home() {
-  return <Welcome />;
+  return <HomePage />;
 }

app/routes/test.tsx

@@ -0,0 +1,22 @@
+import type { Route } from "./+types/home";
+import Test from "../pages/test";
+import client from "~/api/client";
+import type { Item } from "~/api/client";
+
+export function meta({}: Route.MetaArgs) {
+  return [
+    { title: "Aindustries' casino" },
+    { name: "description", content: "Welcome to React Router!" },
+  ];
+}
+
+export async function clientLoader() {
+  let item = await client.GET("/item", {
+    query: { uuid: "eee91ea1-1827-482b-b298-63bd6eda0221" },
+  });
+  return item;
+}
+
+export default function TestPage({ loaderData: item }: { loaderData: Item }) {
+  return <Test item={item} />;
+}