Introduce /orders/{order_id} page (#69)

* Introduce /orders/{order_id} page

* Format

fake-snippets-api/lib/db/db-client.ts

@@ -67,13 +67,19 @@ const initializer = combine(databaseSchema.parse({}), (set, get) => ({
     return state.orderFiles.find((file) => file.order_file_id === orderFileId)
   },
   addAccount: (account: Omit<Account, "account_id">) => {
+    const newAccount = {
+      account_id: `account_${get().idCounter + 1}`,
+      ...account,
+    }
+
     set((state) => {
-      const newAccountId = `account_${state.idCounter + 1}`
       return {
-        accounts: [...state.accounts, { account_id: newAccountId, ...account }],
+        accounts: [...state.accounts, newAccount],
         idCounter: state.idCounter + 1,
       }
     })
+
+    return newAccount
   },
   addSnippet: (snippet: Omit<z.input<typeof snippetSchema>, "snippet_id">) => {
     let newSnippet

fake-snippets-api/lib/db/seed.ts

@@ -1,7 +1,7 @@
 import type { DbClient } from "./db-client"
 
 export const seed = (db: DbClient) => {
-  db.addAccount({
+  const { account_id } = db.addAccount({
     github_username: "testuser",
   })
   db.addAccount({
@@ -85,4 +85,29 @@ export const SquareWaveModule = () => (
     description:
       "A simple package that outputs a square waveform using the a555timer",
   })
+
+  db.addOrder({
+    account_id,
+    is_draft: true,
+    is_pending_validation_by_fab: false,
+    is_pending_review_by_fab: false,
+    is_validated_by_fab: false,
+    is_approved_by_fab_review: false,
+    is_approved_by_orderer: false,
+    is_in_production: false,
+    is_shipped: false,
+    is_cancelled: false,
+    should_be_blank_pcb: false,
+    should_include_stencil: false,
+    jlcpcb_order_params: {},
+    circuit_json: {
+      type: "source_component",
+      ftype: "simple_resistor",
+      source_component_id: "source_component_1",
+      name: "R1",
+      resistane: "1k",
+    },
+    created_at: new Date().toISOString(),
+    updated_at: new Date().toISOString(),
+  })
 }

src/App.tsx

@@ -18,6 +18,7 @@ import { Toaster } from "@/components/ui/toaster"
 import AuthenticatePage from "./pages/authorize"
 import { UserProfilePage } from "./pages/user-profile"
 import { MyOrdersPage } from "./pages/my-orders"
+import { ViewOrderPage } from "./pages/view-order"
 
 function App() {
   return (
@@ -33,6 +34,7 @@ function App() {
         <Route path="/search" component={SearchPage} />
         <Route path="/authorize" component={AuthenticatePage} />
         <Route path="/my-orders" component={MyOrdersPage} />
+        <Route path="/orders/:orderId" component={ViewOrderPage} />
         <Route path="/:username" component={UserProfilePage} />
         <Route path="/:author/:snippetName" component={ViewSnippetPage} />
       </Switch>

src/pages/view-order.tsx

@@ -0,0 +1,107 @@
+import React from "react"
+import { useQuery } from "react-query"
+import { useAxios } from "@/hooks/use-axios"
+import Header from "@/components/Header"
+import Footer from "@/components/Footer"
+import { Order } from "fake-snippets-api/lib/db/schema"
+import { Link, useParams } from "wouter"
+import { Button } from "@/components/ui/button"
+
+export const ViewOrderPage = () => {
+  const { orderId } = useParams()
+  const axios = useAxios()
+
+  const {
+    data: order,
+    isLoading,
+    error,
+  } = useQuery<Order>(
+    ["order", orderId],
+    async () => {
+      const response = await axios.get(`/orders/get?order_id=${orderId}`)
+      return response.data.order
+    },
+    {
+      enabled: !!orderId,
+    },
+  )
+
+  if (isLoading) {
+    return <div>Loading order...</div>
+  }
+
+  if (error) {
+    return <div>Error loading order: {(error as Error).message}</div>
+  }
+
+  if (!order) {
+    return <div>Order not found</div>
+  }
+
+  return (
+    <div>
+      <Header />
+      <div className="container mx-auto px-4 py-8">
+        <h1 className="text-3xl font-bold mb-6">Order Details</h1>
+        <div className="bg-white shadow overflow-hidden sm:rounded-lg">
+          <div className="px-4 py-5 sm:px-6">
+            <h3 className="text-lg leading-6 font-medium text-gray-900">
+              Order #{order.order_id}
+            </h3>
+            <p className="mt-1 max-w-2xl text-sm text-gray-500">
+              Created at: {new Date(order.created_at).toLocaleString()}
+            </p>
+          </div>
+          <div className="border-t border-gray-200">
+            <dl>
+              <div className="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+                <dt className="text-sm font-medium text-gray-500">Status</dt>
+                <dd className="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
+                  {order.is_shipped ? "Shipped" : "Processing"}
+                </dd>
+              </div>
+              <div className="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+                <dt className="text-sm font-medium text-gray-500">Is Draft</dt>
+                <dd className="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
+                  {order.is_draft ? "Yes" : "No"}
+                </dd>
+              </div>
+              <div className="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+                <dt className="text-sm font-medium text-gray-500">
+                  Pending Validation
+                </dt>
+                <dd className="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
+                  {order.is_pending_validation_by_fab ? "Yes" : "No"}
+                </dd>
+              </div>
+              <div className="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+                <dt className="text-sm font-medium text-gray-500">
+                  Approved by Fab
+                </dt>
+                <dd className="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
+                  {order.is_approved_by_fab_review ? "Yes" : "No"}
+                </dd>
+              </div>
+              <div className="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+                <dt className="text-sm font-medium text-gray-500">
+                  In Production
+                </dt>
+                <dd className="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
+                  {order.is_in_production ? "Yes" : "No"}
+                </dd>
+              </div>
+            </dl>
+          </div>
+        </div>
+        <div className="mt-6">
+          <Link href={`/my-orders`}>
+            <Button variant="outline" onClick={() => window.history.back()}>
+              Back to Orders
+            </Button>
+          </Link>
+        </div>
+      </div>
+      <Footer />
+    </div>
+  )
+}