add api client

Author: xc2f

src/Footer/Component.tsx

@@ -4,8 +4,6 @@ import React from 'react'
 
 import type { Footer } from '@/payload-types'
 
-import { findFeedBySlug } from '@/queries/feeds'
-
 import { ThemeSelector } from '@/providers/Theme/ThemeSelector'
 import { CMSLink } from '@/components/Link'
 import { Logo } from '@/components/Logo/Logo'
@@ -14,18 +12,11 @@ export async function Footer() {
   const footerData: Footer = await getCachedGlobal('footer', 1)()
   const navItems = footerData?.navItems || []
 
-  let emojis: string[] = []
-  const emojiData = await findFeedBySlug('logo-emojis')
-  if (emojiData) {
-    const json = emojiData.json || []
-    emojis = Array.isArray(json) ? json.filter((v): v is string => typeof v === 'string') : []
-  }
-
   return (
     <footer className="mt-auto border-t border-border bg-black dark:bg-card text-white">
       <div className="container py-8 gap-8 flex flex-col md:flex-row md:justify-between">
         <Link className="flex items-center" href="/">
-          <Logo emojis={emojis} />
+          <Logo />
         </Link>
 
         <div className="flex flex-col-reverse items-start md:flex-row gap-4 md:items-center">

src/Header/Component.client.tsx

@@ -11,10 +11,9 @@ import { HeaderNav } from './Nav'
 
 interface HeaderClientProps {
   data: Header
-  emojis: string[]
 }
 
-export const HeaderClient: React.FC<HeaderClientProps> = ({ data, emojis }) => {
+export const HeaderClient: React.FC<HeaderClientProps> = ({ data }) => {
   /* Storing the value in a useState to avoid hydration errors */
   const [theme, setTheme] = useState<string | null>(null)
   const { headerTheme, setHeaderTheme } = useHeaderTheme()
@@ -34,7 +33,7 @@ export const HeaderClient: React.FC<HeaderClientProps> = ({ data, emojis }) => {
     <header className="container relative z-20   " {...(theme ? { 'data-theme': theme } : {})}>
       <div className="py-8 flex justify-between">
         <Link className="flex items-center" href="/">
-          <Logo emojis={emojis} />
+          <Logo />
         </Link>
         <HeaderNav data={data} />
       </div>

src/Header/Component.tsx

@@ -9,12 +9,5 @@ import { findFeedBySlug } from '@/queries/feeds'
 export async function Header() {
   const headerData: Header = await getCachedGlobal('header', 1)()
 
-  let emojis: string[] = []
-  const emojiData = await findFeedBySlug('logo-emojis')
-  if (emojiData) {
-    const json = emojiData.json || []
-    emojis = Array.isArray(json) ? json.filter((v): v is string => typeof v === 'string') : []
-  }
-
-  return <HeaderClient data={headerData} emojis={emojis} />
+  return <HeaderClient data={headerData} />
 }

src/app/(frontend)/lib/api-client/feeds.ts

@@ -0,0 +1,13 @@
+import { request } from './request'
+
+export const feedsAPI = {
+  async getEmojis(): Promise<string[]> {
+    const res = await request<string[]>('/api/feeds/for/logo-emojis?json')
+
+    if (!res.ok) {
+      throw new Error(res.error?.message || 'Failed to fetch emojis')
+    }
+
+    return res.data
+  },
+}

src/app/(frontend)/lib/api-client/request.ts

@@ -0,0 +1,84 @@
+// lib/api-client/request.ts
+export type ApiError = {
+  status: number
+  message: string
+}
+
+export type ApiResponse<T> =
+  | {
+      ok: true
+      data: T
+    }
+  | {
+      ok: false
+      error: ApiError
+    }
+
+type RequestOptions = {
+  method?: 'GET' | 'POST' | 'PUT' | 'DELETE'
+  body?: unknown
+  headers?: HeadersInit
+  credentials?: RequestCredentials
+}
+
+export async function request<T>(
+  url: string,
+  options: RequestOptions = {},
+): Promise<ApiResponse<T>> {
+  try {
+    const res = await fetch(url, {
+      method: options.method ?? 'GET',
+      headers: {
+        'Content-Type': 'application/json',
+        ...options.headers,
+      },
+      credentials: options.credentials ?? 'include',
+      body: options.body ? JSON.stringify(options.body) : undefined,
+    })
+
+    // HTTP 错误（404 / 500）
+    if (!res.ok) {
+      const message = await safeReadMessage(res)
+      return {
+        ok: false,
+        error: {
+          status: res.status,
+          message,
+        },
+      }
+    }
+
+    // 204 No Content
+    if (res.status === 204) {
+      return {
+        ok: true,
+        data: undefined as T,
+      }
+    }
+
+    const data = (await res.json()) as T
+
+    return {
+      ok: true,
+      data,
+    }
+  } catch (err) {
+    // 网络错误 / CORS / JSON 解析错误
+    return {
+      ok: false,
+      error: {
+        status: 0,
+        message: err instanceof Error ? err.message : 'Unknown network error',
+      },
+    }
+  }
+}
+
+async function safeReadMessage(res: Response): Promise<string> {
+  try {
+    const json = await res.json()
+    if (json?.message) return json.message
+  } catch {}
+
+  return res.statusText || 'Request failed'
+}

src/app/(frontend)/lib/hooks/useAsync.ts

@@ -0,0 +1,40 @@
+// lib/hooks/useAsync.ts
+'use client'
+
+import { useEffect, useRef, useState } from 'react'
+
+export function useAsync<T>(fn: () => Promise<T>, deps: React.DependencyList = []) {
+  const [data, setData] = useState<T | null>(null)
+  const [error, setError] = useState<Error | null>(null)
+  const [loading, setLoading] = useState(false)
+
+  const fnRef = useRef(fn)
+  fnRef.current = fn
+
+  useEffect(() => {
+    let cancelled = false
+
+    setLoading(true)
+    setError(null)
+
+    fnRef
+      .current()
+      .then((res) => {
+        if (!cancelled) setData(res)
+      })
+      .catch((err) => {
+        if (!cancelled) {
+          setError(err instanceof Error ? err : new Error(String(err)))
+        }
+      })
+      .finally(() => {
+        if (!cancelled) setLoading(false)
+      })
+
+    return () => {
+      cancelled = true
+    }
+  }, deps)
+
+  return { data, error, loading }
+}

src/app/(frontend)/lib/hooks/useFeeds.ts

@@ -0,0 +1,15 @@
+// lib/hooks/useEmojis.ts
+'use client'
+
+import { feedsAPI } from '../api-client/feeds'
+import { useAsync } from './useAsync'
+
+type UseEmojisReturn = {
+  data: string[] | null
+  loading: boolean
+  error: Error | null
+}
+
+export function useEmojis(): UseEmojisReturn {
+  return useAsync<string[]>(() => feedsAPI.getEmojis(), [])
+}

src/components/Logo/Logo.tsx

@@ -2,17 +2,33 @@
 import React, { useEffect, useRef, useState } from 'react'
 import clsx from 'clsx'
 
+import { useEmojis } from '@/app/(frontend)/lib/hooks/useFeeds'
+
 interface Props {
   className?: string
-  emojis: string[]
 }
 
-export const Logo = ({ emojis = [] }: Props) => {
+// prettier-ignore
+// const EMOJIS = [
+//   "👨‍💻", "➡️", "🛠️", "➡️", "💾", "➡️",
+//   "🎨", "➡️", "🖌️", "➡️", "📸", "➡️"
+// ]
+
+export const Logo = ({}: Props) => {
+  const { data } = useEmojis()
+  const [emojis, setEmojis] = useState<string[]>([])
+  const [emoji, setEmoji] = useState<string | null>(null)
   const [hovered, setHovered] = useState(false)
-  const [emoji, setEmoji] = useState(emojis[0])
   const indexRef = useRef(0)
   const timerRef = useRef<NodeJS.Timeout | null>(null)
 
+  useEffect(() => {
+    if (data?.length) {
+      setEmojis(data)
+      setEmoji(data[0])
+    }
+  }, [data])
+
   useEffect(() => {
     if (!hovered || !emoji) {
       if (timerRef.current) {