Merge pull request #104 from wen-templari/use-openapi-fetch

Migrate to openapi-fetch for API client

src/pages/repair/EventAction.tsx

@@ -1,7 +1,7 @@
 import type { UserInfoResponse } from "@logto/browser"
 import type { PublicMember } from "../../store/member"
-import { EventStatus, type PublicEvent } from "../../types/event"
+import { EventStatus, type PublicEvent, type RepairEvent } from "../../types/event"
-import { saturdayApiBaseUrl } from "../../utils/client"
+import { saturdayClient } from "../../utils/client"
 import { Button, Form, Select, SelectItem, Textarea } from "@heroui/react"
 import { useEffect, useState } from "react"
 
@@ -20,7 +20,7 @@ export type EventActionProps = {
   event: PublicEvent
   identityContext: IdentityContext
   isLoading?: string
-  onUpdated: (event: PublicEvent) => void
+  onUpdated: (event: RepairEvent) => void
   onLoading: (loadingAction?: string) => void
 }
 
@@ -104,19 +104,22 @@ export const EventActionCommit = (props: EventActionProps) => {
 
   const onSubmit = async () => {
     props.onLoading("commit")
-    const res = await fetch(`${saturdayApiBaseUrl}/member/events/${props.event.eventId}/commit`, {
+    const { data } = await saturdayClient.POST("/member/events/{EventId}/commit", {
-      method: "POST",
+      params: {
-      headers: {
+        header: {
           Authorization: `Bearer ${props.identityContext.token}`,
-        ContentType: "application/json",
         },
-      body: JSON.stringify({
+        path: {
+          EventId: props.event.eventId,
+        },
+      },
+      body: {
         size: formData.size,
         content: formData.description,
-      }),
+      },
-    }).then(res => res.json())
+    })
     props.onLoading()
-    return props.onUpdated(res)
+    return props.onUpdated(data)
   }
   return (
     <div className="flex flex-col gap-4">
@@ -151,19 +154,22 @@ export const EventActionAlterCommit = (props: EventActionProps) => {
 
   const onSubmit = async () => {
     props.onLoading("alterCommit")
-    const res = await fetch(`${saturdayApiBaseUrl}/member/events/${props.event.eventId}/commit`, {
+    const { data } = await saturdayClient.PATCH("/member/events/{EventId}/commit", {
-      method: "PATCH",
+      params: {
-      headers: {
+        header: {
           Authorization: `Bearer ${props.identityContext.token}`,
-        ContentType: "application/json",
         },
-      body: JSON.stringify({
+        path: {
+          EventId: props.event.eventId,
+        },
+      },
+      body: {
         size: formData.size,
         content: formData.description,
-      }),
+      },
-    }).then(res => res.json())
+    })
     props.onLoading()
-    return props.onUpdated(res)
+    return props.onUpdated(data)
   }
   return (
     <div className="flex flex-col gap-4">
@@ -206,7 +212,7 @@ export const getAvailableEventActions = (event: PublicEvent, identityContext: Id
         props.onLoading(action.action)
         if (action.handler) {
           const res = await action.handler()
-          props.onUpdated(res as PublicEvent)
+          props.onUpdated(res as RepairEvent)
         }
         props.onLoading()
       }
@@ -235,12 +241,17 @@ export const getAvailableEventActions = (event: PublicEvent, identityContext: Id
         variant: "solid",
         color: "primary",
         handler: async () => {
-          return await fetch(`${saturdayApiBaseUrl}/member/events/${event.eventId}/accept`, {
+          const { data } = await saturdayClient.POST("/member/events/{EventId}/accept", {
-            method: "POST",
+            params: {
-            headers: {
+              header: {
                 Authorization: `Bearer ${identityContext.token}`,
               },
-          }).then(res => res.json())
+              path: {
+                EventId: event.eventId,
+              },
+            },
+          })
+          return data
         },
       }),
     })
@@ -256,12 +267,17 @@ export const getAvailableEventActions = (event: PublicEvent, identityContext: Id
         action: "drop",
         label: "放弃",
         handler: async () => {
-          return await fetch(`${saturdayApiBaseUrl}/member/events/${event.eventId}/accept`, {
+          const { data } = await saturdayClient.POST("/member/events/{EventId}/accept", {
-            method: "DELETE",
+            params: {
-            headers: {
+              header: {
                 Authorization: `Bearer ${identityContext.token}`,
               },
-          }).then(res => res.json())
+              path: {
+                EventId: event.eventId,
+              },
+            },
+          })
+          return data
         },
       }),
     })
@@ -281,12 +297,17 @@ export const getAvailableEventActions = (event: PublicEvent, identityContext: Id
           color: "success",
           label: "完成",
           handler: async () => {
-            return await fetch(`${saturdayApiBaseUrl}/events/${event.eventId}/close`, {
+            const { data } = await saturdayClient.POST("/events/{EventId}/close", {
-              method: "POST",
+              params: {
-              headers: {
+                header: {
                   Authorization: `Bearer ${identityContext.token}`,
                 },
-            }).then(res => res.json())
+                path: {
+                  EventId: event.eventId,
+                },
+              },
+            })
+            return data
           },
         }),
       })
@@ -297,12 +318,17 @@ export const getAvailableEventActions = (event: PublicEvent, identityContext: Id
           color: "danger",
           label: "退回",
           handler: async () => {
-            return await fetch(`${saturdayApiBaseUrl}/events/${event.eventId}/commit`, {
+            const { data } = await saturdayClient.DELETE("/events/{EventId}/commit", {
-              method: "DELETE",
+              params: {
-              headers: {
+                header: {
                   Authorization: `Bearer ${identityContext.token}`,
                 },
-            }).then(res => res.json())
+                path: {
+                  EventId: event.eventId,
+                },
+              },
+            })
+            return data
           },
         }),
       })

src/pages/repair/ExportEventDialog.tsx

@@ -9,7 +9,7 @@ import {
   DateRangePicker,
 } from "@heroui/react"
 import { parseDate } from "@internationalized/date"
-import { saturdayApiBaseUrl } from "../../utils/client"
+import { saturdayClient } from "../../utils/client"
 import { makeLogtoClient } from "../../utils/auth"
 import dayjs from "dayjs"
 
@@ -29,15 +29,18 @@ export function ExportExcelModal() {
 
     setLoading(true)
     try {
-      const start = dateRange.start.toString() // Format: 'YYYY-MM-DD'
-      const end = dateRange.end.toString()
-      const url = `${saturdayApiBaseUrl}/events/xlsx?start_time=${start}&end_time=${end}`
-
       const token = await makeLogtoClient().getAccessToken()
-      const response = await fetch(url, {
+      const { response } = await saturdayClient.GET("/events/xlsx", {
-        headers: {
+        params: {
+          header: {
             Authorization: `Bearer ${token}`,
           },
+          query: {
+            start_time: dateRange.start.toString(),
+            end_time: dateRange.end.toString(),
+          },
+        },
+        parseAs: "stream",
       })
       if (!response.ok) throw new Error("Download failed")
 

src/pages/repair/RepairAdmin.tsx

@@ -25,10 +25,10 @@ import {
 import { useCallback, useEffect, useMemo, useRef, useState } from "react"
 import { useAsyncList } from "@react-stately/data"
 import type { components } from "../../types/saturday"
-import { saturdayApiBaseUrl, saturdayClient } from "../../utils/client"
+import { saturdayClient } from "../../utils/client"
 import EventDetail, { EventStatusChip, type EventDetailRef } from "./EventDetail"
 import dayjs from "dayjs"
-import { EventStatus, UserEventStatus } from "../../types/event"
+import { EventStatus, UserEventStatus, type RepairEvent } from "../../types/event"
 import { makeLogtoClient } from "../../utils/auth"
 import type { PublicMember } from "../../store/member"
 import type { UserInfoResponse } from "@logto/browser"
@@ -107,7 +107,7 @@ function TicketDetailDrawer(props: {
   event: PublicEvent
   identity: IdentityContext
   isOpen: boolean
-  onEventUpdated: (event: PublicEvent) => void
+  onEventUpdated: (event: RepairEvent) => void
   onOpenChange: (isOpen: boolean) => void
   onClose: () => void
   onDelete: () => void
@@ -127,7 +127,7 @@ function TicketDetailDrawer(props: {
     setAvailableActions(getAvailableEventActions(props.event, props.identity))
   }, [props.event, props.identity])
 
-  const onEventUpdated = async (event: PublicEvent) => {
+  const onEventUpdated = async (event: RepairEvent) => {
     props.onEventUpdated(event)
     const res = await eventDetailRef.current?.refresh()
     console.log("onEventUpdated", res)
@@ -216,13 +216,14 @@ export default function App() {
       }
       setUserInfo(res)
 
-      const currentMember = await fetch(`${saturdayApiBaseUrl}/member`, {
+      const { data } = await saturdayClient.GET("/member", {
-        method: "GET",
+        params: {
-        headers: {
+          header: {
             Authorization: `Bearer ${token}`,
           },
-      }).then(res => res.json())
+        },
-      setCurrentMember(currentMember)
+      })
+      setCurrentMember(data)
     }
     check()
   }, [])

src/pages/repair/TicketForm.tsx

@@ -157,7 +157,7 @@ function TicketFormCreated(props: {
   })
   return (
     <section className="box-border w-full mt-8">
-      <div className="section-content">
+      <div className="section-content mb-4">
         <Alert hideIcon color="success" variant="faded">
           <div className="flex items-center gap-8">
             <div className="h-28 lg:h-40 aspect-square">
@@ -181,8 +181,10 @@ function TicketFormCreated(props: {
           </div>
         </Alert>
       </div>
-      <div className="section-content">
+      <div className="section-content mb-4">
-        <EventDetail eventId={props.event?.eventId}></EventDetail>
+        <EventDetail eventId={props.event?.eventId}>
+          {() => <></>}
+        </EventDetail>
       </div>
     </section>
   )
@@ -204,23 +206,55 @@ export default function App() {
       setUserInfo(res)
     }
     check()
+
+    // Check for eventId in URL query parameters
+    const urlParams = new URLSearchParams(window.location.search)
+    const eventId = urlParams.get("eventId")
+    if (eventId) {
+      // Fetch event data from the eventId
+      const fetchEvent = async () => {
+        try {
+          const { data } = await saturdayClient.GET("/events/{EventId}", {
+            params: {
+              path: {
+                EventId: parseInt(eventId, 10),
+              },
+            },
+          })
+          if (data) {
+            setEvent(data as PublicEvent)
+          }
+        }
+        catch (error) {
+          console.log("Error fetching event:", error)
+        }
+      }
+      fetchEvent()
+    }
   }, [])
 
   const onSubmit = async (formData: TicketFormData) => {
     const logtoToken = await makeLogtoClient().getAccessToken()
     try {
-      const res = await saturdayClient.POST("/client/event", {
+      const { data } = await saturdayClient.POST("/client/event", {
         headers: {
           Authorization: `Bearer ${logtoToken}`,
         },
         body: {
-          Problem: formData.description,
+          problem: formData.description,
           model: formData.model,
           phone: formData.phone,
           qq: formData.qq,
         },
       })
-      setEvent(res.data as unknown as PublicEvent)
+      setEvent(data as unknown as PublicEvent)
+
+      // Update URL with eventId to persist the ticket status
+      if (data?.eventId) {
+        const currentUrl = new URL(window.location.href)
+        currentUrl.searchParams.set("eventId", data.eventId.toString())
+        window.history.pushState({}, "", currentUrl.toString())
+      }
     }
     catch (error) {
       console.log(error)

src/types/event.ts

@@ -80,3 +80,4 @@ export const UserEventAction: Action[] = [
 ]
 
 export type PublicEvent = components["schemas"]["PublicEvent"]
+export type RepairEvent = components["schemas"]["Event"]