feat: display user info in profile page

Author: guansss

src/apis/user.ts

@@ -0,0 +1,32 @@
+import useSWR from 'swr'
+
+import { NotFoundError } from '../utils/error'
+import { UserApi } from '../utils/maa-copilot-client'
+
+export function useUserInfo({
+  userId,
+  suspense,
+}: {
+  userId?: string
+  suspense?: boolean
+}) {
+  return useSWR(
+    userId ? ['user', userId] : null,
+    async ([, userId]) => {
+      const res = await new UserApi({
+        sendToken: 'never',
+        requireData: true,
+      }).getUserInfo({
+        userId,
+      })
+
+      // FIXME: 严谨一点！！！
+      if (res.data.userName === '未知用户:(') {
+        throw new NotFoundError()
+      }
+
+      return res.data
+    },
+    { suspense },
+  )
+}

src/components/Suspensable.tsx

@@ -11,13 +11,15 @@ interface SuspensableProps {
   pendingTitle?: string
 
   fetcher?: () => void
+  errorFallback?: (params: { error: Error }) => JSX.Element | undefined
 }
 
 export const Suspensable: FCC<SuspensableProps> = ({
   children,
   retryDeps = [],
   pendingTitle = '加载中',
   fetcher,
+  errorFallback,
 }) => {
   const resetError = useRef<() => void>()
 
@@ -30,13 +32,18 @@ export const Suspensable: FCC<SuspensableProps> = ({
   return (
     <ErrorBoundary
       fallback={({ resetError: _resetError, error }) => {
+        const fallback = errorFallback?.({ error })
+        if (fallback !== undefined) {
+          return fallback
+        }
+
         resetError.current = _resetError
 
         return (
           <NonIdealState
             icon="issue"
             title="加载失败"
-            description={fetcher ? '数据加载失败，请尝试' : error.message}
+            description={fetcher ? '数据加载失败，请重试' : error.message}
             className="py-8"
             action={
               fetcher && (

src/pages/profile.tsx

@@ -1,24 +1,27 @@
 import { Button, ButtonGroup, Card } from '@blueprintjs/core'
 
 import { ComponentType, useState } from 'react'
-import { useParams } from 'react-router-dom'
+import { Navigate, useParams } from 'react-router-dom'
 
 import { withGlobalErrorBoundary } from 'components/GlobalErrorBoundary'
 import { OperationList } from 'components/OperationList'
 import { OperationSetList } from 'components/OperationSetList'
 import { OperationDrawer } from 'components/drawer/OperationDrawer'
 
+import { useUserInfo } from '../apis/user'
 import { CardTitle } from '../components/CardTitle'
 import { withSuspensable } from '../components/Suspensable'
+import { NotFoundError } from '../utils/error'
 
-export const _ProfilePage: ComponentType = () => {
+const _ProfilePage: ComponentType = () => {
   const { id } = useParams()
-
-  // edge case?
   if (!id) {
+    // edge case?
     throw new Error('ID 无效')
   }
 
+  const { data: userInfo } = useUserInfo({ userId: id, suspense: true })
+
   const [listMode, setListMode] = useState<'operation' | 'operationSet'>(
     'operation',
   )
@@ -55,7 +58,7 @@ export const _ProfilePage: ComponentType = () => {
       <div className="md:w-1/3 order-1 md:order-2">
         <div className="sticky top-20">
           <Card className="flex flex-col mb-4 space-y-2">
-            <CardTitle icon="user">用户名</CardTitle>
+            <CardTitle icon="user">{userInfo?.userName}</CardTitle>
           </Card>
         </div>
       </div>
@@ -66,6 +69,11 @@ export const _ProfilePage: ComponentType = () => {
 }
 _ProfilePage.displayName = 'ProfilePage'
 
-export const ProfilePage = withGlobalErrorBoundary(
-  withSuspensable(_ProfilePage),
-)
+export const ProfilePage = withSuspensable(_ProfilePage, {
+  errorFallback: ({ error }) => {
+    if (error instanceof NotFoundError) {
+      return <Navigate to="/404" replace />
+    }
+    return undefined
+  },
+})

src/utils/error.ts

@@ -27,6 +27,10 @@ export class InvalidTokenError extends Error {
   message = this.message || '登录失效，请重新登录'
 }
 
+export class NotFoundError extends Error {
+  message = this.message || '资源不存在'
+}
+
 export class NetworkError extends Error {
   message = this.message || '网络错误'
 }