frontend: update swr configs

GZTimeWalker · May 8, 2023 · f542d5c · f542d5c
1 parent df9160e
commit f542d5c
Show file tree

Hide file tree

Showing 24 changed files with 56 additions and 52 deletions.
diff --git a/src/GZCTF/ClientApp/src/components/AppNavbar.tsx b/src/GZCTF/ClientApp/src/components/AppNavbar.tsx
@@ -143,8 +143,9 @@ const AppNavbar: FC = () => {
   useEffect(() => {
     if (location.pathname === '/') {
       setActive(items[0].label)
+    } else {
+      setActive(getLabel(location.pathname) ?? '')
     }
-    setActive(getLabel(location.pathname) ?? '')
   }, [location.pathname])
 
   const links = items

diff --git a/src/GZCTF/ClientApp/src/components/ChallengePanel.tsx b/src/GZCTF/ClientApp/src/components/ChallengePanel.tsx
@@ -41,11 +41,14 @@ const ChallengePanel: FC = () => {
   const { id } = useParams()
   const numId = parseInt(id ?? '-1')
 
-  const { data } = api.game.useGameChallengesWithTeamInfo(numId)
+  const { data } = api.game.useGameChallengesWithTeamInfo(numId, {
+    shouldRetryOnError: false,
+  })
   const challenges = data?.challenges
 
   const { data: game } = api.game.useGameGames(numId, {
     refreshInterval: 0,
+    revalidateOnFocus: false,
   })
 
   const tags = Object.keys(challenges ?? {})

diff --git a/src/GZCTF/ClientApp/src/components/MobileScoreboardTable.tsx b/src/GZCTF/ClientApp/src/components/MobileScoreboardTable.tsx
@@ -69,6 +69,7 @@ const MobileScoreboardTable: FC<ScoreboardProps> = ({ organization, setOrganizat
 
   const { data: scoreboard } = api.game.useGameScoreboard(numId, {
     refreshInterval: 0,
+    revalidateOnFocus: false,
   })
 
   const filtered =

diff --git a/src/GZCTF/ClientApp/src/components/ScoreboardTable.tsx b/src/GZCTF/ClientApp/src/components/ScoreboardTable.tsx
@@ -266,6 +266,7 @@ const ScoreboardTable: FC<ScoreboardProps> = ({ organization, setOrganization })
 
   const { data: scoreboard } = api.game.useGameScoreboard(numId, {
     refreshInterval: 0,
+    revalidateOnFocus: false,
   })
 
   const filtered =

diff --git a/src/GZCTF/ClientApp/src/components/TeamRank.tsx b/src/GZCTF/ClientApp/src/components/TeamRank.tsx
@@ -32,7 +32,9 @@ const TeamRank: FC<PaperProps> = (props) => {
   const { id } = useParams()
   const numId = parseInt(id ?? '-1')
   const navigate = useNavigate()
-  const { data, error } = api.game.useGameChallengesWithTeamInfo(numId)
+  const { data, error } = api.game.useGameChallengesWithTeamInfo(numId, {
+    shouldRetryOnError: false,
+  })
 
   const { classes, theme } = useStyle()
 

diff --git a/src/GZCTF/ClientApp/src/components/TimeLine.tsx b/src/GZCTF/ClientApp/src/components/TimeLine.tsx
@@ -16,6 +16,7 @@ const TimeLine: FC<TimeLineProps> = ({ organization }) => {
 
   const { data: scoreboard } = api.game.useGameScoreboard(numId, {
     refreshInterval: 0,
+    revalidateOnFocus: false,
   })
 
   const { data: game } = api.game.useGameGames(numId, {

diff --git a/src/GZCTF/ClientApp/src/components/WithGameTab.tsx b/src/GZCTF/ClientApp/src/components/WithGameTab.tsx
@@ -95,6 +95,7 @@ const WithGameTab: FC<React.PropsWithChildren> = ({ children }) => {
   const { role } = useUserRole()
   const { data: game } = api.game.useGameGames(numId, {
     refreshInterval: 0,
+    revalidateOnFocus: false,
   })
 
   const finished = dayjs() > dayjs(game?.end ?? new Date())

diff --git a/src/GZCTF/ClientApp/src/components/admin/BloodBonusModel.tsx b/src/GZCTF/ClientApp/src/components/admin/BloodBonusModel.tsx
@@ -9,7 +9,6 @@ const BloodBonusModel: FC<ModalProps> = (props) => {
   const numId = parseInt(id ?? '-1')
   const { data: gameSource, mutate } = api.edit.useEditGetGame(numId, {
     refreshInterval: 0,
-    revalidateIfStale: false,
     revalidateOnFocus: false,
   })
   const [disabled, setDisabled] = useState(false)

diff --git a/src/GZCTF/ClientApp/src/components/admin/FlagCreateModal.tsx b/src/GZCTF/ClientApp/src/components/admin/FlagCreateModal.tsx
@@ -17,7 +17,6 @@ const FlagCreateModal: FC<ModalProps> = (props) => {
 
   const { data: challenge, mutate } = api.edit.useEditGetGameChallenge(numId, numCId, {
     refreshInterval: 0,
-    revalidateIfStale: false,
     revalidateOnFocus: false,
   })
 

diff --git a/src/GZCTF/ClientApp/src/components/admin/GameNoticeEditModal.tsx b/src/GZCTF/ClientApp/src/components/admin/GameNoticeEditModal.tsx
@@ -17,11 +17,11 @@ const GameNoticeEditModal: FC<GameNoticeEditModalProps> = (props) => {
   const numId = parseInt(id ?? '-1')
   const { gameNotice, mutateGameNotice, ...modalProps } = props
 
-  const [content, setContent] = useState<string | undefined>(gameNotice?.content)
+  const [content, setContent] = useState<string>(gameNotice?.content || '')
   const [disabled, setDisabled] = useState(false)
 
   useEffect(() => {
-    setContent(gameNotice?.content)
+    setContent(gameNotice?.content || '')
   }, [gameNotice])
 
   const onConfirm = () => {
@@ -43,8 +43,9 @@ const GameNoticeEditModal: FC<GameNoticeEditModalProps> = (props) => {
       return
     }
 
+    setDisabled(true)
+
     if (gameNotice && !disabled) {
-      setDisabled(true)
       api.edit
         .editUpdateGameNotice(numId, gameNotice.id, {
           content: content,
@@ -63,7 +64,6 @@ const GameNoticeEditModal: FC<GameNoticeEditModalProps> = (props) => {
           setDisabled(false)
         })
     } else {
-      // add notice
       api.edit
         .editAddGameNotice(numId, {
           content: content,
@@ -81,6 +81,7 @@ const GameNoticeEditModal: FC<GameNoticeEditModalProps> = (props) => {
         .catch(showErrorNotification)
         .finally(() => {
           setDisabled(false)
+          setContent('')
         })
     }
   }

diff --git a/src/GZCTF/ClientApp/src/pages/account/Profile.tsx b/src/GZCTF/ClientApp/src/pages/account/Profile.tsx
@@ -87,7 +87,7 @@ const Profile: FC = () => {
             autoClose: true,
           })
           setDisabled(false)
-          mutate({ ...user }, { revalidate: false })
+          mutate()
           setAvatarFile(null)
         })
         .catch(() => {

diff --git a/src/GZCTF/ClientApp/src/pages/admin/games/[id]/Info.tsx b/src/GZCTF/ClientApp/src/pages/admin/games/[id]/Info.tsx
@@ -53,7 +53,6 @@ const GameInfoEdit: FC = () => {
   const numId = parseInt(id ?? '-1')
   const { data: gameSource, mutate } = api.edit.useEditGetGame(numId, {
     refreshInterval: 0,
-    revalidateIfStale: false,
     revalidateOnFocus: false,
   })
   const [game, setGame] = useState<GameInfoModel>()

diff --git a/src/GZCTF/ClientApp/src/pages/admin/games/[id]/Notices.tsx b/src/GZCTF/ClientApp/src/pages/admin/games/[id]/Notices.tsx
@@ -16,7 +16,6 @@ const GameNoticeEdit: FC = () => {
   const numId = parseInt(id ?? '-1')
   const { data: gameNotices, mutate } = api.edit.useEditGetGameNotices(numId, {
     refreshInterval: 0,
-    revalidateIfStale: false,
     revalidateOnFocus: false,
   })
 
@@ -78,7 +77,7 @@ const GameNoticeEdit: FC = () => {
     >
       <ScrollArea pos="relative" h="calc(100vh - 180px)" offsetScrollbars>
         {!gameNotices || gameNotices?.length === 0 ? (
-          <Center h="calc(100vh - 180px)">
+          <Center h="calc(100vh - 200px)">
             <Stack spacing={0}>
               <Title order={2}>Ouch! 这个比赛还没有通知</Title>
               <Text>安然无事真好！</Text>

diff --git a/src/GZCTF/ClientApp/src/pages/admin/games/[id]/Writeups.tsx b/src/GZCTF/ClientApp/src/pages/admin/games/[id]/Writeups.tsx
@@ -16,7 +16,7 @@ const GameWriteups: FC = () => {
 
   const { data: writeups } = api.admin.useAdminWriteups(numId, {
     refreshInterval: 0,
-    revalidateIfStale: false,
+    revalidateOnFocus: false,
   })
 
   useEffect(() => {

diff --git a/src/GZCTF/ClientApp/src/pages/admin/games/[id]/challenges/Index.tsx b/src/GZCTF/ClientApp/src/pages/admin/games/[id]/challenges/Index.tsx
@@ -34,7 +34,6 @@ const GameChallengeEdit: FC = () => {
 
   const { data: challenges, mutate } = api.edit.useEditGetGameChallenges(numId, {
     refreshInterval: 0,
-    revalidateIfStale: false,
     revalidateOnFocus: false,
   })
 

diff --git a/src/GZCTF/ClientApp/src/pages/admin/games/[id]/challenges/[chalId]/Flags.tsx b/src/GZCTF/ClientApp/src/pages/admin/games/[id]/challenges/[chalId]/Flags.tsx
@@ -49,7 +49,6 @@ const OneAttachmentWithFlags: FC<FlagEditProps> = ({ onDelete }) => {
 
   const { data: challenge, mutate } = api.edit.useEditGetGameChallenge(numId, numCId, {
     refreshInterval: 0,
-    revalidateIfStale: false,
     revalidateOnFocus: false,
   })
 
@@ -367,11 +366,7 @@ const FlagsWithAttachments: FC<FlagEditProps> = ({ onDelete }) => {
 
   const theme = useMantineTheme()
 
-  const { data: challenge } = api.edit.useEditGetGameChallenge(numId, numCId, {
-    refreshInterval: 0,
-    revalidateIfStale: false,
-    revalidateOnFocus: false,
-  })
+  const { data: challenge } = api.edit.useEditGetGameChallenge(numId, numCId)
 
   const [attachmentUploadModalOpened, setAttachmentUploadModalOpened] = useState(false)
   const [remoteAttachmentModalOpened, setRemoteAttachmentModalOpened] = useState(false)
@@ -424,11 +419,7 @@ const GameChallengeEdit: FC = () => {
   const theme = useMantineTheme()
   const modals = useModals()
 
-  const { data: challenge, mutate } = api.edit.useEditGetGameChallenge(numId, numCId, {
-    refreshInterval: 0,
-    revalidateIfStale: false,
-    revalidateOnFocus: false,
-  })
+  const { data: challenge, mutate } = api.edit.useEditGetGameChallenge(numId, numCId)
 
   const onDeleteFlag = (flag: FlagInfoModel) => {
     modals.openConfirmModal({

diff --git a/src/GZCTF/ClientApp/src/pages/admin/games/[id]/challenges/[chalId]/Index.tsx b/src/GZCTF/ClientApp/src/pages/admin/games/[id]/challenges/[chalId]/Index.tsx
@@ -49,7 +49,6 @@ const GameChallengeEdit: FC = () => {
 
   const { data: challenge, mutate } = api.edit.useEditGetGameChallenge(numId, numCId, {
     refreshInterval: 0,
-    revalidateIfStale: false,
     revalidateOnFocus: false,
   })
 
@@ -94,7 +93,6 @@ const GameChallengeEdit: FC = () => {
             })
           }
           mutate(data.data)
-          console.log(data.data)
           mutateChals()
         })
         .catch(showErrorNotification)

diff --git a/src/GZCTF/ClientApp/src/pages/games/Index.tsx b/src/GZCTF/ClientApp/src/pages/games/Index.tsx
@@ -9,7 +9,6 @@ import api from '@Api'
 const Games: FC = () => {
   const { data: allGames } = api.game.useGameGamesAll({
     refreshInterval: 0,
-    revalidateIfStale: false,
     revalidateOnFocus: false,
   })
 

diff --git a/src/GZCTF/ClientApp/src/pages/games/[id]/Scoreboard.tsx b/src/GZCTF/ClientApp/src/pages/games/[id]/Scoreboard.tsx
@@ -13,7 +13,9 @@ import api from '@Api'
 const Scoreboard: FC = () => {
   const { id } = useParams()
   const numId = parseInt(id ?? '-1')
-  const { data, error } = api.game.useGameChallengesWithTeamInfo(numId)
+  const { data, error } = api.game.useGameChallengesWithTeamInfo(numId, {
+    shouldRetryOnError: false,
+  })
 
   const [organization, setOrganization] = useState<string | null>('all')
   const isMobile = useIsMobile(1080)

diff --git a/src/GZCTF/ClientApp/src/pages/posts/Index.tsx b/src/GZCTF/ClientApp/src/pages/posts/Index.tsx
@@ -18,7 +18,6 @@ const ITEMS_PER_PAGE = 10
 const Posts: FC = () => {
   const { data: posts, mutate } = api.info.useInfoGetPosts({
     refreshInterval: 0,
-    revalidateIfStale: false,
     revalidateOnFocus: false,
   })
 

diff --git a/src/GZCTF/ClientApp/src/pages/posts/[postId]/Index.tsx b/src/GZCTF/ClientApp/src/pages/posts/[postId]/Index.tsx
@@ -33,7 +33,6 @@ const Post: FC = () => {
     postId ?? '',
     {
       refreshInterval: 0,
-      revalidateIfStale: false,
       revalidateOnFocus: false,
     },
     postId?.length === 8

diff --git a/src/GZCTF/ClientApp/src/pages/posts/[postId]/edit.tsx b/src/GZCTF/ClientApp/src/pages/posts/[postId]/edit.tsx
@@ -38,7 +38,6 @@ const PostEdit: FC = () => {
     postId ?? '',
     {
       refreshInterval: 0,
-      revalidateIfStale: false,
       revalidateOnFocus: false,
     },
     postId?.length === 8

diff --git a/src/GZCTF/ClientApp/src/utils/useConfig.ts b/src/GZCTF/ClientApp/src/utils/useConfig.ts
@@ -91,12 +91,10 @@ export const localStorageProvider = () => {
   const cacheKey = 'gzctf-cache'
   const map = new Map(JSON.parse(LZString.decompress(localStorage.getItem(cacheKey) || '') || '[]'))
 
-  if (!import.meta.env.DEV) {
-    window.addEventListener('beforeunload', () => {
-      const appCache = LZString.compress(JSON.stringify(Array.from(map.entries())))
-      localStorage.setItem(cacheKey, appCache)
-    })
-  }
+  window.addEventListener('beforeunload', () => {
+    const appCache = LZString.compress(JSON.stringify(Array.from(map.entries())))
+    localStorage.setItem(cacheKey, appCache)
+  })
 
   return map as Cache
 }
diff --git a/src/GZCTF/ClientApp/src/utils/useUser.tsx b/src/GZCTF/ClientApp/src/utils/useUser.tsx
@@ -14,7 +14,8 @@ export const useUser = () => {
     mutate,
   } = api.account.useAccountProfile({
     refreshInterval: 0,
-    revalidateIfStale: false,
+    shouldRetryOnError: false,
+    revalidateOnFocus: false,
     onErrorRetry: (err, _key, _config, revalidate, { retryCount }) => {
       if (err?.status === 403) {
         api.account.accountLogOut().then(() => {
@@ -30,7 +31,10 @@ export const useUser = () => {
 
       if (err?.status === 401) return
 
-      if (retryCount >= 5) return
+      if (retryCount >= 5) {
+        mutate(undefined, false)
+        return
+      }
 
       setTimeout(() => revalidate({ retryCount: retryCount }), 10000)
     },
@@ -51,27 +55,36 @@ export const useTeams = () => {
     mutate,
   } = api.team.useTeamGetTeamsInfo({
     refreshInterval: 120000,
+    shouldRetryOnError: false,
+    revalidateOnFocus: false,
   })
+
   return { teams, error, mutate }
 }
 
 export const useLoginOut = () => {
   const navigate = useNavigate()
   const { mutate } = useSWRConfig()
-  const { mutate: mutateProfile } = api.account.useAccountProfile()
+  const { mutate: mutateProfile } = useUser()
 
   return () => {
-    api.account.accountLogOut().then(() => {
-      navigate('/')
-      mutate((key) => typeof key === 'string' && key.includes('game/'), undefined, {
-        revalidate: false,
+    api.account
+      .accountLogOut()
+      .then(() => {
+        navigate('/')
+        mutate((key) => typeof key === 'string' && key.includes('game/'), undefined, {
+          revalidate: false,
+        })
+        mutateProfile(undefined, { revalidate: false })
+        showNotification({
+          color: 'teal',
+          message: '登出成功',
+          icon: <Icon path={mdiCheck} size={1} />,
+        })
       })
-      mutateProfile(undefined, false)
-      showNotification({
-        color: 'teal',
-        message: '登出成功',
-        icon: <Icon path={mdiCheck} size={1} />,
+      .catch(() => {
+        navigate('/')
+        mutateProfile(undefined, { revalidate: false })
       })
-    })
   }
 }