feat(notifications): migrate to backend API

2026-03-01 22:44:35 +08:00
parent 236c1a24da
commit ae239f3037
2 changed files with 170 additions and 72 deletions
@@ -4,10 +4,14 @@ import { Badge } from "@/components/ui/badge"
 import { Button } from "@/components/ui/button"
 import { Card, CardContent } from "@/components/ui/card"
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import { requestWithAuth } from "@/lib/api/client"
+import { listNotifications, markAllNotificationsAsRead } from "@/lib/api/notifications"
+import { toApiError } from "@/lib/errors"
+import { notifyInfo } from "@/lib/toast"
 import type { Notification } from "@/lib/types"
-import { useNotificationStore } from "@/store/notifications"
 import { Bell, CheckCheck, MessageSquare, ShoppingBag } from "lucide-react"
 import Link from "next/link"
+import { useCallback, useEffect, useMemo, useRef, useState } from "react"

 const typeIcons: Record<Notification["type"], typeof Bell> = {
  order: ShoppingBag,
@@ -55,12 +59,129 @@ function NotificationItem({ notification }: { notification: Notification }) {
 }

 export default function NotificationsPage() {
-  const notifications = useNotificationStore((state) => state.notifications)
-  const markAllAsRead = useNotificationStore((state) => state.markAllAsRead)
-  const unreadCount = notifications.filter((notification) => !notification.read).length
-  const orderNotifs = notifications.filter((notification) => notification.type === "order")
-  const communityNotifs = notifications.filter((notification) => notification.type === "community")
-  const systemNotifs = notifications.filter((notification) => notification.type === "system")
+  const mountedRef = useRef(true)
+  const markAllPendingRef = useRef(false)
+
+  const [notifications, setNotifications] = useState<Notification[]>([])
+  const [loading, setLoading] = useState(true)
+  const [loadingError, setLoadingError] = useState<string | null>(null)
+  const [markingAll, setMarkingAll] = useState(false)
+
+  const loadNotifications = useCallback(async () => {
+    setLoading(true)
+    setLoadingError(null)
+
+    try {
+      const res = await requestWithAuth(() => listNotifications({ offset: 0, limit: 50 }), {
+        onUnauthorized: () => loadNotifications(),
+      })
+
+      if (!mountedRef.current) return
+
+      if (res === null) {
+        setLoading(false)
+        return
+      }
+
+      setNotifications(res)
+      setLoading(false)
+    } catch (err: unknown) {
+      if (!mountedRef.current) return
+      setLoading(false)
+      setLoadingError(toApiError(err).msg)
+    }
+  }, [])
+
+  useEffect(() => {
+    mountedRef.current = true
+    void loadNotifications()
+    return () => {
+      mountedRef.current = false
+    }
+  }, [loadNotifications])
+
+  const markAllAsRead = useCallback(async () => {
+    if (markAllPendingRef.current) return
+
+    markAllPendingRef.current = true
+    setMarkingAll(true)
+
+    try {
+      const res = await requestWithAuth(() => markAllNotificationsAsRead(), {
+        onUnauthorized: () => markAllAsRead(),
+      })
+
+      if (!mountedRef.current) return
+
+      if (res === null) {
+        return
+      }
+
+      setNotifications((prev) => prev.map((n) => (n.read ? n : { ...n, read: true })))
+    } catch (err: unknown) {
+      if (!mountedRef.current) return
+      notifyInfo(toApiError(err).msg)
+    } finally {
+      markAllPendingRef.current = false
+      if (mountedRef.current) setMarkingAll(false)
+    }
+  }, [])
+
+  const unreadCount = useMemo(
+    () => notifications.filter((notification) => !notification.read).length,
+    [notifications],
+  )
+  const orderNotifs = useMemo(
+    () => notifications.filter((notification) => notification.type === "order"),
+    [notifications],
+  )
+  const communityNotifs = useMemo(
+    () => notifications.filter((notification) => notification.type === "community"),
+    [notifications],
+  )
+  const systemNotifs = useMemo(
+    () => notifications.filter((notification) => notification.type === "system"),
+    [notifications],
+  )
+
+  const renderTab = useCallback(
+    (items: Notification[], emptyText: string) => {
+      if (loading) {
+        return (
+          <Card>
+            <CardContent className="py-8 text-center text-sm text-muted-foreground">
+              加载中...
+            </CardContent>
+          </Card>
+        )
+      }
+
+      if (loadingError) {
+        return (
+          <Card>
+            <CardContent className="py-8 text-center text-sm text-muted-foreground">
+              {loadingError}
+            </CardContent>
+          </Card>
+        )
+      }
+
+      if (items.length === 0) {
+        return (
+          <Card>
+            <CardContent className="py-8 text-center text-sm text-muted-foreground">
+              {emptyText}
+            </CardContent>
+          </Card>
+        )
+      }
+
+      return items.map((notification) => (
+        <NotificationItem key={notification.id} notification={notification} />
+      ))
+    },
+    [loading, loadingError],
+  )

  return (
    <div className="container mx-auto max-w-2xl px-4 py-8 space-y-6">
@@ -69,7 +190,7 @@ export default function NotificationsPage() {
          <h1 className="text-2xl font-bold">通知中心</h1>
          {unreadCount > 0 && <Badge>{unreadCount} 条未读</Badge>}
        </div>
-        <Button variant="outline" size="sm" onClick={markAllAsRead}>
+        <Button variant="outline" size="sm" onClick={markAllAsRead} disabled={markingAll}>
          <CheckCheck className="mr-1 h-4 w-4" />
          全部已读
        </Button>
@@ -84,53 +205,19 @@ export default function NotificationsPage() {
        </TabsList>

        <TabsContent value="all" className="flex flex-col gap-3 mt-4">
-          {notifications.length === 0 ? (
-            <Card>
-              <CardContent className="py-8 text-center text-sm text-muted-foreground">
-                暂无通知
-              </CardContent>
-            </Card>
-          ) : (
-            notifications.map((notification) => (
-              <NotificationItem key={notification.id} notification={notification} />
-            ))
-          )}
+          {renderTab(notifications, "暂无通知")}
        </TabsContent>

        <TabsContent value="order" className="flex flex-col gap-3 mt-4">
-          {orderNotifs.length === 0 ? (
-            <Card>
-              <CardContent className="py-8 text-center text-sm text-muted-foreground">
-                暂无订单通知
-              </CardContent>
-            </Card>
-          ) : (
-            orderNotifs.map((n) => <NotificationItem key={n.id} notification={n} />)
-          )}
+          {renderTab(orderNotifs, "暂无订单通知")}
        </TabsContent>

        <TabsContent value="community" className="flex flex-col gap-3 mt-4">
-          {communityNotifs.length === 0 ? (
-            <Card>
-              <CardContent className="py-8 text-center text-sm text-muted-foreground">
-                暂无社区通知
-              </CardContent>
-            </Card>
-          ) : (
-            communityNotifs.map((n) => <NotificationItem key={n.id} notification={n} />)
-          )}
+          {renderTab(communityNotifs, "暂无社区通知")}
        </TabsContent>

        <TabsContent value="system" className="flex flex-col gap-3 mt-4">
-          {systemNotifs.length === 0 ? (
-            <Card>
-              <CardContent className="py-8 text-center text-sm text-muted-foreground">
-                暂无系统通知
-              </CardContent>
-            </Card>
-          ) : (
-            systemNotifs.map((n) => <NotificationItem key={n.id} notification={n} />)
-          )}
+          {renderTab(systemNotifs, "暂无系统通知")}
        </TabsContent>
      </Tabs>
    </div>
@@ -1,33 +1,44 @@
-import { allow, deny } from "@/lib/decision"
 import type { Notification } from "@/lib/types"
-import { useAuthStore } from "@/store/auth"
-import { useNotificationStore } from "@/store/notifications"

-export function listNotifications() {
-  return useNotificationStore.getState().notifications
+import { httpJson } from "./http"
+
+type Paginated<T> = {
+  items: T[]
+  meta: {
+    total: number
+    offset: number
+    limit: number
+  }
 }

-function isNotificationEnabled(type: Notification["type"]) {
-  const prefs = useAuthStore.getState().notificationPrefs
-  if (type === "order") return prefs.order
-  if (type === "community") return prefs.community
-  return prefs.system
+export async function listNotifications(input?: {
+  offset?: number
+  limit?: number
+}): Promise<Notification[]> {
+  const offset = input?.offset ?? 0
+  const limit = input?.limit ?? 50
+
+  const searchParams = new URLSearchParams({
+    offset: String(offset),
+    limit: String(limit),
+  })
+
+  const res = await httpJson<Paginated<Notification>>(`/api/v1/notifications?${searchParams}`, {
+    cache: "no-store",
+  })
+  return res.items
 }

-export function addNotification(input: {
-  type: Notification["type"]
-  title: string
-  content: string
-  link?: string
-}) {
-  if (!isNotificationEnabled(input.type)) {
-    return deny(400, "该类通知已关闭")
+export async function markNotificationAsRead(notificationId: string): Promise<void> {
+  await httpJson<unknown>(`/api/v1/notifications/${encodeURIComponent(notificationId)}/read`, {
+    method: "PUT",
+    cache: "no-store",
+  })
 }

-  useNotificationStore.getState().addNotification(input)
-  return allow()
-}
-
-export function markNotificationAsRead(notificationId: string) {
-  useNotificationStore.getState().markAsRead(notificationId)
+export async function markAllNotificationsAsRead(): Promise<void> {
+  await httpJson<unknown>("/api/v1/notifications/read-all", {
+    method: "PUT",
+    cache: "no-store",
+  })
 }