Merge pull request #122 from MaaAssistantArknights/dev

feat: UI improvements and fixes

Author: guansss

src/App.tsx

@@ -6,7 +6,7 @@ import { Effects } from 'components/Effects'
 import { GlobalErrorBoundary } from './components/GlobalErrorBoundary'
 import { FCC } from './types'
 import { request } from './utils/fetcher'
-import { localStorageProvider } from './utils/swr-cache'
+import { localStorageProvider, swrCacheMiddleware } from './utils/swr-cache'
 
 export const App: FCC = ({ children }) => {
   return (
@@ -20,6 +20,7 @@ export const App: FCC = ({ children }) => {
           focusThrottleInterval: 1000 * 60,
           errorRetryInterval: 1000 * 3,
           errorRetryCount: 3,
+          use: [swrCacheMiddleware],
         }}
       >
         <GlobalErrorBoundary>

src/apis/arknights.ts

@@ -6,7 +6,7 @@ import type { Level } from 'models/operation'
 
 import { withoutUnusedLevels } from '../models/level'
 import { request } from '../utils/fetcher'
-import { enableCache } from '../utils/swr-cache'
+import { useSWRCache } from '../utils/swr-cache'
 
 const ONE_DAY = 1000 * 60 * 60 * 24
 
@@ -18,22 +18,25 @@ export const useVersion = () => {
 
 export const useLevels = ({ suspense = true }: { suspense?: boolean } = {}) => {
   const url = '/arknights/level'
+  type LevelResponse = Response<Level[]>
 
-  enableCache(
+  useSWRCache(
     url,
     // discard the cache if the level data has no stageId
-    ({ data }) =>
-      !!data?.data && Array.isArray(data.data) && 'stageId' in data.data[0],
+    ({ data }) => {
+      const firstLevel = (data as LevelResponse)?.data?.[0]
+      return !!firstLevel && 'stageId' in firstLevel
+    },
   )
 
-  const response = useSWR<Response<Level[]>>(url, {
+  const response = useSWR<LevelResponse>(url, {
     focusThrottleInterval: ONE_DAY,
     suspense,
     fetcher: async (input: string, init?: RequestInit) => {
-      let res: Response<Level[]>
+      let res: LevelResponse
 
       try {
-        res = await request<Response<Level[]>>(input, init)
+        res = await request<LevelResponse>(input, init)
       } catch (e) {
         // fallback to built-in levels while retaining the error
         res = await requestBuiltInLevels(init)

src/components/AccountManager.tsx

@@ -121,19 +121,21 @@ const ActivationInputGroup = <T extends FieldValues>({
   })
 
   return (
-    <InputGroup
-      large
-      rightElement={<ActivationCodeRequestButton />}
-      leftIcon="lock"
-      onChange={onChange}
-      onBlur={onBlur}
-      placeholder="请输入您的激活码"
-      ref={ref}
-      className="font-mono"
-      autoComplete="off"
-      // eslint-disable-next-line jsx-a11y/no-autofocus
-      autoFocus
-    />
+    <div className="flex">
+      <InputGroup
+        large
+        leftIcon="lock"
+        onChange={onChange}
+        onBlur={onBlur}
+        placeholder="请输入您的激活码"
+        ref={ref}
+        className="flex-grow font-mono"
+        autoComplete="off"
+        // eslint-disable-next-line jsx-a11y/no-autofocus
+        autoFocus
+      />
+      <ActivationCodeRequestButton />
+    </div>
   )
 }
 

src/components/BackToTop.tsx

@@ -0,0 +1,38 @@
+import { Button } from '@blueprintjs/core'
+
+import { useEffect, useState } from 'react'
+
+export const BackToTop = () => {
+  const [showButton, setShowButton] = useState(false)
+  useEffect(() => {
+    const handleScroll = () => {
+      if (window.pageYOffset > 100) {
+        setShowButton(true)
+      } else {
+        setShowButton(false)
+      }
+    }
+    document.addEventListener('scroll', handleScroll)
+    return () => {
+      document.removeEventListener('scroll', handleScroll)
+    }
+  }, [])
+  const handleClickButton = () => {
+    window.scrollTo({ top: 0, behavior: 'smooth' })
+  }
+  return (
+    <div>
+      {showButton && (
+        <Button
+          onClick={handleClickButton}
+          style={{
+            position: 'fixed',
+            bottom: 20,
+            right: 20,
+          }}
+          icon="symbol-triangle-up"
+        />
+      )}
+    </div>
+  )
+}

src/components/Effects.tsx

@@ -1,5 +1,5 @@
 import { useAtom } from 'jotai'
-import { FC, useEffect } from 'react'
+import { FC, useRef } from 'react'
 
 import { authAtom, fromCredentials } from 'store/auth'
 import { FETCHER_CONFIG } from 'utils/fetcher'
@@ -10,8 +10,14 @@ import { AppToaster } from './Toaster'
 
 export const Effects: FC = () => {
   const [auth, setAuth] = useAtom(authAtom)
+  const lastAuth = useRef<typeof auth | null>(null)
+
+  // here we are simulating a synchronous version of useEffect(() => {}, [auth])
+  // in order to set the FETCHER_CONFIG.apiToken before any useSWR() call,
+  // because useSWR() seems to send request synchronously, and useEffect() is too late
+  if (lastAuth.current !== auth) {
+    lastAuth.current = auth
 
-  useEffect(() => {
     const { token, validBefore, refreshToken, refreshTokenValidBefore } = auth
 
     const endTime = +new Date(validBefore || 0) || 0
@@ -32,7 +38,7 @@ export const Effects: FC = () => {
             }
 
             if (!refreshToken) {
-              // seems that user was logging in in previous version of the app
+              // the refresh token is somehow missing, no way to update the token
               shouldLogout = true
             }
           }
@@ -66,6 +72,9 @@ export const Effects: FC = () => {
           }
 
           if (shouldLogout) {
+            // FIXME: setting the state synchronously may cause problems (not really sure), so we add a small delay for a temporary hack
+            await new Promise((resolve) => setTimeout(resolve, 50))
+
             setAuth({})
             AppToaster.show({
               intent: 'warning',
@@ -84,7 +93,7 @@ export const Effects: FC = () => {
     }
 
     FETCHER_CONFIG.apiToken = currentFn
-  }, [auth])
+  }
 
   return null
 }

src/components/OperationCard.tsx

@@ -140,6 +140,7 @@ const OperatorTags = ({
       ))}
       {groups?.map(({ name, opers }, index) => (
         <Tooltip2
+          key={index}
           className="mr-2 last:mr-0 mb-1 last:mb-0"
           placement="top"
           content={
@@ -148,7 +149,7 @@ const OperatorTags = ({
               .join(', ') || '无干员'
           }
         >
-          <Tag key={index}>[{name}]</Tag>
+          <Tag>[{name}]</Tag>
         </Tooltip2>
       ))}
     </div>

src/components/entity/EDifficulty.tsx

@@ -74,6 +74,7 @@ export const EDifficulty: FC<{
   if (difficulty & OpDifficultyBitFlag.REGULAR) {
     children.push(
       <DifficultyTag
+        key="regular"
         tooltip={descriptions.regular.description}
         content={descriptions.regular.title}
       />,
@@ -83,6 +84,7 @@ export const EDifficulty: FC<{
   if (difficulty & OpDifficultyBitFlag.HARD) {
     children.push(
       <DifficultyTag
+        key="hard"
         tooltip={descriptions.hard.description}
         content={descriptions.hard.title}
         hardLevel