feat(disputes): migrate disputes and reviews to backend API

2026-03-01 16:25:33 +08:00
parent 9739c94bdc
commit f189ec9846
7 changed files with 437 additions and 120 deletions
@@ -6,12 +6,16 @@ import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
 import { Label } from "@/components/ui/label"
 import { Separator } from "@/components/ui/separator"
 import { Textarea } from "@/components/ui/textarea"
-import { submitDispute, submitDisputeAppeal, submitDisputeResponse } from "@/lib/api/disputes"
+import { getOrderById } from "@/lib/api"
+import {
+  getDisputeByOrderId,
+  submitDispute,
+  submitDisputeAppeal,
+  submitDisputeResponse,
+} from "@/lib/api/disputes"
 import { DISPUTE_TO_RESOLVED_MS } from "@/lib/config/demo-timers"
 import { notifyInfo } from "@/lib/toast"
 import { useAuthStore } from "@/store/auth"
-import { useDisputeStore } from "@/store/disputes"
-import { useOrderStore } from "@/store/orders"
 import { AlertTriangle, ArrowLeft, Clock, FileText, Upload, X } from "lucide-react"
 import Image from "next/image"
 import Link from "next/link"
@@ -33,13 +37,42 @@ const disputeStatusLabels: Record<string, string> = {
  appealed: "申诉中",
 }

+function deriveMinimalTimeline<TCreatedAt>(dispute: {
+  id: string
+  status: string
+  createdAt: TCreatedAt
+  timeline?: { id: string; content: string; createdAt: TCreatedAt }[]
+}) {
+  const existing = dispute.timeline
+  if (existing?.length) return existing
+
+  const steps = [
+    { status: "open", content: "争议已提交" },
+    { status: "reviewing", content: "平台审核中" },
+    { status: "resolved", content: "争议已解决" },
+    { status: "appealed", content: "已发起申诉" },
+  ]
+
+  const currentIndex = steps.findIndex((step) => step.status === dispute.status)
+  const lastIndex = currentIndex >= 0 ? currentIndex : 0
+  return steps.slice(0, lastIndex + 1).map((step) => ({
+    id: `${dispute.id}-${step.status}`,
+    content: step.content,
+    createdAt: dispute.createdAt,
+  }))
+}
+
 export default function DisputePage({ params }: { params: Promise<{ id: string }> }) {
  const { id } = use(params)
  const router = useRouter()
  const searchParams = useSearchParams()
-  const order = useOrderStore((state) => state.orders.find((item) => item.id === id))
  const userId = useAuthStore((state) => state.user?.id)
-  const existingDispute = useDisputeStore((state) => state.getDisputeByOrderId(id))
+
+  const [loading, setLoading] = useState(true)
+  const [order, setOrder] = useState<Awaited<ReturnType<typeof getOrderById>> | null>(null)
+  const [existingDispute, setExistingDispute] = useState<Awaited<
+    ReturnType<typeof getDisputeByOrderId>
+  > | null>(null)

  const [reason, setReason] = useState("")
  const [files, setFiles] = useState<string[]>([])
@@ -52,6 +85,28 @@ export default function DisputePage({ params }: { params: Promise<{ id: string }
  const filesRef = useRef<string[]>([])
  const responseFilesRef = useRef<string[]>([])

+  useEffect(() => {
+    let cancelled = false
+    setLoading(true)
+    setOrder(null)
+    setExistingDispute(null)
+
+    Promise.all([Promise.resolve(getOrderById(id)), Promise.resolve(getDisputeByOrderId(id))])
+      .then(([nextOrder, nextDispute]) => {
+        if (cancelled) return
+        setOrder(nextOrder ?? null)
+        setExistingDispute(nextDispute ?? null)
+      })
+      .finally(() => {
+        if (cancelled) return
+        setLoading(false)
+      })
+
+    return () => {
+      cancelled = true
+    }
+  }, [id])
+
  useEffect(() => {
    filesRef.current = files
  }, [files])
@@ -106,19 +161,29 @@ export default function DisputePage({ params }: { params: Promise<{ id: string }

  const handleSubmit = () => {
    if (!userId || !reason.trim()) return
-    const result = submitDispute({
-      orderId: id,
-      reason,
-      evidence: files,
+
+    Promise.resolve(
+      submitDispute({
+        orderId: id,
+        reason,
+        evidence: files,
+      }),
+    ).then((result) => {
+      if (!result.decision.ok) {
+        notifyInfo(result.decision.error.msg)
+        return
+      }
+      router.replace(`/dispute/${id}?submitted=1`)
    })
-    if (!result.decision.ok) {
-      notifyInfo(result.decision.error.msg)
-      return
-    }
-    router.replace(`/dispute/${id}?submitted=1`)
  }

-  const showSubmitted = searchParams.get("submitted") === "1" && !existingDispute
+  const showSubmitted = !loading && searchParams.get("submitted") === "1" && !existingDispute
+
+  if (loading) {
+    return (
+      <div className="container mx-auto py-8 px-4 text-center text-muted-foreground">加载中...</div>
+    )
+  }

  if (!order) {
    return (
@@ -149,6 +214,8 @@ export default function DisputePage({ params }: { params: Promise<{ id: string }
    const canAppeal =
      isParticipant && existingDispute.status === "resolved" && !existingDispute.appealedAt

+    const timeline = deriveMinimalTimeline(existingDispute)
+
    return (
      <div className="container mx-auto max-w-2xl px-4 py-8 space-y-4">
        <Link
@@ -282,14 +349,17 @@ export default function DisputePage({ params }: { params: Promise<{ id: string }
                  <Button
                    onClick={() => {
                      if (!userId) return
-                      const decision = submitDisputeResponse({
-                        disputeId: existingDispute.id,
-                        reason: responseReason,
-                        evidence: responseFiles,
+                      Promise.resolve(
+                        submitDisputeResponse({
+                          disputeId: existingDispute.id,
+                          reason: responseReason,
+                          evidence: responseFiles,
+                        }),
+                      ).then((decision) => {
+                        if (!decision.ok) {
+                          notifyInfo(decision.error.msg)
+                        }
                      })
-                      if (!decision.ok) {
-                        notifyInfo(decision.error.msg)
-                      }
                    }}
                    disabled={!responseReason.trim()}
                  >
@@ -331,13 +401,16 @@ export default function DisputePage({ params }: { params: Promise<{ id: string }
                    variant="outline"
                    onClick={() => {
                      if (!userId) return
-                      const decision = submitDisputeAppeal({
-                        disputeId: existingDispute.id,
-                        reason: appealReason,
+                      Promise.resolve(
+                        submitDisputeAppeal({
+                          disputeId: existingDispute.id,
+                          reason: appealReason,
+                        }),
+                      ).then((decision) => {
+                        if (!decision.ok) {
+                          notifyInfo(decision.error.msg)
+                        }
                      })
-                      if (!decision.ok) {
-                        notifyInfo(decision.error.msg)
-                      }
                    }}
                    disabled={!appealReason.trim()}
                  >
@@ -352,7 +425,7 @@ export default function DisputePage({ params }: { params: Promise<{ id: string }
            <div className="space-y-2">
              <Label className="text-muted-foreground">处理时间线</Label>
              <div className="space-y-2">
-                {existingDispute.timeline.map((item) => (
+                {timeline.map((item) => (
                  <div key={item.id} className="text-sm flex items-start justify-between gap-3">
                    <span>{item.content}</span>
                    <span className="text-xs text-muted-foreground shrink-0">
@@ -4,15 +4,14 @@ import OrderActions from "@/components/order-actions"
 import { Badge } from "@/components/ui/badge"
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
 import { Separator } from "@/components/ui/separator"
-import { getOrderById } from "@/lib/api"
+import { getOrderById, listReviewsByOrder } from "@/lib/api"
 import { ORDER_ACCEPT_TIMEOUT_MS, ORDER_CLOSE_TIMEOUT_MS } from "@/lib/config/demo-timers"
 import { statusLabels } from "@/lib/constants"
 import type { OrderStatus } from "@/lib/types"
 import { useChatStore } from "@/store/chat"
-import { useReviewStore } from "@/store/reviews"
 import { ArrowLeft, CheckCircle, Clock, Star } from "lucide-react"
 import Link from "next/link"
-import { use, useEffect, useMemo, useState } from "react"
+import { use, useEffect, useState } from "react"

 const normalStatusSteps: OrderStatus[] = [
  "pending_payment",
@@ -36,12 +35,7 @@ const cancelledStatusSteps: OrderStatus[] = ["pending_payment", "pending_accept"
 export default function OrderDetailPage({ params }: { params: Promise<{ id: string }> }) {
  const { id } = use(params)
  const sessions = useChatStore((state) => state.sessions)
-  const allReviews = useReviewStore((state) => state.reviews)
-  // Filtering is deferred to useMemo after reading the raw store array.
-  // Zustand v5 compares selector outputs by reference stability.
-  // Returning a fresh filtered array from the selector can re-trigger updates
-  // and loop under useSyncExternalStore (pmndrs/zustand#1936, #3155).
-  const reviews = useMemo(() => allReviews.filter((item) => item.orderId === id), [allReviews, id])
+  const [reviews, setReviews] = useState<Awaited<ReturnType<typeof listReviewsByOrder>>>([])
  const [order, setOrder] = useState<Awaited<ReturnType<typeof getOrderById>> | undefined>(
    undefined,
  )
@@ -70,6 +64,25 @@ export default function OrderDetailPage({ params }: { params: Promise<{ id: stri
    }
  }, [id])

+  useEffect(() => {
+    let cancelled = false
+
+    ;(async () => {
+      try {
+        const reviews = await Promise.resolve(listReviewsByOrder(id))
+        if (cancelled) return
+        setReviews(reviews)
+      } catch {
+        if (cancelled) return
+        setReviews([])
+      }
+    })()
+
+    return () => {
+      cancelled = true
+    }
+  }, [id])
+
  useEffect(() => {
    if (!order) return
    if (order.status !== "pending_accept" && order.status !== "pending_close") return
@@ -4,29 +4,56 @@ import { Button } from "@/components/ui/button"
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
 import { Label } from "@/components/ui/label"
 import { Textarea } from "@/components/ui/textarea"
+import { getOrderById, listReviewsByOrder } from "@/lib/api"
 import { submitReview } from "@/lib/api/reviews"
 import { notifyInfo, notifySuccess } from "@/lib/toast"
 import { useAuthStore } from "@/store/auth"
-import { useOrderStore } from "@/store/orders"
-import { useReviewStore } from "@/store/reviews"
 import { ArrowLeft, Lock, Star } from "lucide-react"
 import Link from "next/link"
-import { use, useMemo, useState } from "react"
+import { use, useEffect, useState } from "react"

 export default function ReviewPage({ params }: { params: Promise<{ id: string }> }) {
  const { id } = use(params)
-  const order = useOrderStore((state) => state.orders.find((item) => item.id === id))
  const userId = useAuthStore((state) => state.user?.id)
-  const allReviews = useReviewStore((state) => state.reviews)
-  // The selector returns the raw store array and useMemo derives the subset.
-  // This keeps useSyncExternalStore snapshots stable across render checks.
-  // Inline filter inside the selector creates a new array reference each call
-  // and can cause infinite re-render loops in Zustand v5 (pmndrs/zustand#3155).
-  const reviews = useMemo(() => allReviews.filter((item) => item.orderId === id), [allReviews, id])
+
+  const [order, setOrder] = useState<Awaited<ReturnType<typeof getOrderById>>>()
+  const [reviews, setReviews] = useState<Awaited<ReturnType<typeof listReviewsByOrder>>>([])
+  const [loading, setLoading] = useState(true)
  const [rating, setRating] = useState(0)
  const [hoverRating, setHoverRating] = useState(0)
  const [content, setContent] = useState("")

+  useEffect(() => {
+    let cancelled = false
+    setLoading(true)
+
+    Promise.all([getOrderById(id), Promise.resolve(listReviewsByOrder(id))])
+      .then(([nextOrder, nextReviews]) => {
+        if (cancelled) return
+        setOrder(nextOrder)
+        setReviews(nextReviews)
+      })
+      .catch(() => {
+        if (cancelled) return
+        setOrder(undefined)
+        setReviews([])
+      })
+      .finally(() => {
+        if (cancelled) return
+        setLoading(false)
+      })
+
+    return () => {
+      cancelled = true
+    }
+  }, [id])
+
+  if (loading) {
+    return (
+      <div className="container mx-auto py-8 px-4 text-center text-muted-foreground">加载中...</div>
+    )
+  }
+
  if (!order) {
    return (
      <div className="container mx-auto py-8 px-4 text-center text-muted-foreground">
@@ -143,18 +170,23 @@ export default function ReviewPage({ params }: { params: Promise<{ id: string }>
                return
              }

-              const decision = submitReview({
-                orderId: id,
-                rating,
-                content,
+              Promise.resolve(
+                submitReview({
+                  orderId: id,
+                  rating,
+                  content,
+                }),
+              ).then((decision) => {
+                if (decision.ok) {
+                  notifySuccess("评价已提交")
+                  Promise.resolve(listReviewsByOrder(id)).then((nextReviews) => {
+                    setReviews(nextReviews)
+                  })
+                  return
+                }
+
+                notifyInfo(decision.error.msg)
              })
-
-              if (decision.ok) {
-                notifySuccess("评价已提交")
-                return
-              }
-
-              notifyInfo(decision.error.msg)
            }}
          >
            提交评价