fix(frontend): use unified mutate

src/GZCTF/ClientApp/src/components/ChallengeDetailModal.tsx

@@ -27,6 +27,7 @@ import { Icon } from '@mdi/react'
 import { showErrorNotification } from '@Utils/ApiErrorHandler'
 import { ChallengeTagItemProps } from '@Utils/Shared'
 import { useTooltipStyles } from '@Utils/ThemeOverride'
+import { OnceSWRConfig } from '@Utils/useConfig'
 import { useTypographyStyles } from '@Utils/useTypographyStyles'
 import api, { AnswerResult, ChallengeType } from '@Api'
 import MarkdownRender from './MarkdownRender'
@@ -117,10 +118,11 @@ const ChallengeDetailModal: FC<ChallengeDetailModalProps> = (props) => {
   const { gameId, gameEnded, challengeId, tagData, title, score, solved, ...modalProps } = props
   const [downloadOpened, { close: downloadClose, open: downloadOpen }] = useDisclosure(false)
 
-  const { data: challenge, mutate } = api.game.useGameGetChallenge(gameId, challengeId, {
-    refreshInterval: 0,
-    revalidateOnFocus: false,
-  })
+  const { data: challenge, mutate } = api.game.useGameGetChallenge(
+    gameId,
+    challengeId,
+    OnceSWRConfig
+  )
 
   const [placeholder, setPlaceholder] = useState('')
 

src/GZCTF/ClientApp/src/components/WriteupSubmitModal.tsx

@@ -20,6 +20,7 @@ import { mdiCheck, mdiExclamationThick, mdiFileDocumentOutline, mdiFileHidden }
 import { Icon } from '@mdi/react'
 import { showErrorNotification } from '@Utils/ApiErrorHandler'
 import { useUploadStyles } from '@Utils/ThemeOverride'
+import { OnceSWRConfig } from '@Utils/useConfig'
 import api from '@Api'
 import MarkdownRender from './MarkdownRender'
 
@@ -29,10 +30,7 @@ interface WriteupSubmitModalProps extends ModalProps {
 }
 
 export const WriteupSubmitModal: FC<WriteupSubmitModalProps> = ({ gameId, wpddl, ...props }) => {
-  const { data, mutate } = api.game.useGameGetWriteup(gameId, {
-    refreshInterval: 0,
-    revalidateOnFocus: false,
-  })
+  const { data, mutate } = api.game.useGameGetWriteup(gameId, OnceSWRConfig)
 
   const theme = useMantineTheme()
   const { classes } = useUploadStyles()

src/GZCTF/ClientApp/src/components/admin/AttachmentRemoteEditModal.tsx

@@ -1,10 +1,11 @@
 import { FC, useEffect, useState } from 'react'
 import { useParams } from 'react-router-dom'
-import { Button, Modal, ModalProps, Text, Stack, Textarea, useMantineTheme } from '@mantine/core'
+import { Button, Modal, Text, Stack, Textarea, useMantineTheme, ModalProps } from '@mantine/core'
 import { showNotification } from '@mantine/notifications'
 import { mdiCheck } from '@mdi/js'
 import { Icon } from '@mdi/react'
 import { showErrorNotification } from '@Utils/ApiErrorHandler'
+import { useEditChallenge } from '@Utils/useEdit'
 import api, { FileType, FlagCreateModel } from '@Api'
 
 const AttachmentRemoteEditModal: FC<ModalProps> = (props) => {
@@ -13,6 +14,8 @@ const AttachmentRemoteEditModal: FC<ModalProps> = (props) => {
 
   const [disabled, setDisabled] = useState(false)
 
+  const { mutate } = useEditChallenge(numId, numCId)
+
   const [text, setText] = useState('')
   const [flags, setFlags] = useState<FlagCreateModel[]>([])
 
@@ -45,8 +48,9 @@ const AttachmentRemoteEditModal: FC<ModalProps> = (props) => {
             message: '附件已更新',
             icon: <Icon path={mdiCheck} size={1} />,
           })
+          setText('')
+          mutate()
           props.onClose()
-          api.edit.mutateEditGetGameChallenge(numId, numCId)
         })
         .catch((err) => showErrorNotification(err))
         .finally(() => {

src/GZCTF/ClientApp/src/components/admin/AttachmentUploadModal.tsx

@@ -21,6 +21,7 @@ import { mdiCheck, mdiClose } from '@mdi/js'
 import { Icon } from '@mdi/react'
 import { showErrorNotification } from '@Utils/ApiErrorHandler'
 import { useUploadStyles } from '@Utils/ThemeOverride'
+import { useEditChallenge } from '@Utils/useEdit'
 import api, { FileType } from '@Api'
 
 const AttachmentUploadModal: FC<ModalProps> = (props) => {
@@ -29,6 +30,8 @@ const AttachmentUploadModal: FC<ModalProps> = (props) => {
   const uploadFileName = `DYN_ATTACHMENT_${numCId}`
   const [disabled, setDisabled] = useState(false)
 
+  const { mutate } = useEditChallenge(numId, numCId)
+
   const [progress, setProgress] = useState(0)
   const [files, setFiles] = useState<File[]>([])
 
@@ -71,9 +74,8 @@ const AttachmentUploadModal: FC<ModalProps> = (props) => {
                   message: '附件已更新',
                   icon: <Icon path={mdiCheck} size={1} />,
                 })
-                setTimeout(() => {
-                  api.edit.mutateEditGetGameChallenge(numId, numCId)
-                }, 1000)
+                setFiles([])
+                mutate()
                 props.onClose()
               })
               .catch((err) => showErrorNotification(err))

src/GZCTF/ClientApp/src/components/admin/BloodBonusModel.tsx

@@ -2,15 +2,13 @@ import { FC, useEffect, useState } from 'react'
 import { useParams } from 'react-router-dom'
 import { Button, Group, Modal, ModalProps, NumberInput, Stack, Text } from '@mantine/core'
 import { BloodBonus } from '@Utils/Shared'
+import { OnceSWRConfig } from '@Utils/useConfig'
 import api, { SubmissionType } from '@Api'
 
 const BloodBonusModel: FC<ModalProps> = (props) => {
   const { id } = useParams()
   const numId = parseInt(id ?? '-1')
-  const { data: gameSource, mutate } = api.edit.useEditGetGame(numId, {
-    refreshInterval: 0,
-    revalidateOnFocus: false,
-  })
+  const { data: gameSource, mutate } = api.edit.useEditGetGame(numId, OnceSWRConfig)
   const [disabled, setDisabled] = useState(false)
   const [firstBloodBonus, setFirstBloodBonus] = useState(0)
   const [secondBloodBonus, setSecondBloodBonus] = useState(0)

src/GZCTF/ClientApp/src/components/admin/FlagCreateModal.tsx

@@ -6,6 +6,7 @@ import { showNotification } from '@mantine/notifications'
 import { mdiCheck } from '@mdi/js'
 import { Icon } from '@mdi/react'
 import { showErrorNotification } from '@Utils/ApiErrorHandler'
+import { useEditChallenge } from '@Utils/useEdit'
 import api from '@Api'
 
 const FlagCreateModal: FC<ModalProps> = (props) => {
@@ -15,10 +16,7 @@ const FlagCreateModal: FC<ModalProps> = (props) => {
   const [numId, numCId] = [parseInt(id ?? '-1'), parseInt(chalId ?? '-1')]
   const [flags, setFlags] = useInputState('')
 
-  const { data: challenge, mutate } = api.edit.useEditGetGameChallenge(numId, numCId, {
-    refreshInterval: 0,
-    revalidateOnFocus: false,
-  })
+  const { challenge, mutate } = useEditChallenge(numId, numCId)
 
   const onCreate = () => {
     if (!flags) {

src/GZCTF/ClientApp/src/pages/admin/Configs.tsx

@@ -6,14 +6,11 @@ import AdminPage from '@Components/admin/AdminPage'
 import { SwitchLabel } from '@Components/admin/SwitchLabel'
 import { showErrorNotification } from '@Utils/ApiErrorHandler'
 import { useFixedButtonStyles } from '@Utils/ThemeOverride'
-import { useConfig } from '@Utils/useConfig'
+import { OnceSWRConfig, useConfig } from '@Utils/useConfig'
 import api, { AccountPolicy, ConfigEditModel, GamePolicy, GlobalConfig } from '@Api'
 
 const Configs: FC = () => {
-  const { data: configs, mutate } = api.admin.useAdminGetConfigs({
-    refreshInterval: 0,
-    revalidateOnFocus: false,
-  })
+  const { data: configs, mutate } = api.admin.useAdminGetConfigs(OnceSWRConfig)
 
   const { mutate: mutateConfig } = useConfig()
   const [disabled, setDisabled] = useState(false)

src/GZCTF/ClientApp/src/pages/admin/games/[id]/Info.tsx

@@ -37,6 +37,7 @@ import { SwitchLabel } from '@Components/admin/SwitchLabel'
 import WithGameEditTab from '@Components/admin/WithGameEditTab'
 import { showErrorNotification } from '@Utils/ApiErrorHandler'
 import { ACCEPT_IMAGE_MIME_TYPE } from '@Utils/ThemeOverride'
+import { OnceSWRConfig } from '@Utils/useConfig'
 import api, { GameInfoModel } from '@Api'
 
 const GenerateRandomCode = () => {
@@ -51,10 +52,7 @@ const GenerateRandomCode = () => {
 const GameInfoEdit: FC = () => {
   const { id } = useParams()
   const numId = parseInt(id ?? '-1')
-  const { data: gameSource, mutate } = api.edit.useEditGetGame(numId, {
-    refreshInterval: 0,
-    revalidateOnFocus: false,
-  })
+  const { data: gameSource, mutate } = api.edit.useEditGetGame(numId, OnceSWRConfig)
   const [game, setGame] = useState<GameInfoModel>()
   const navigate = useNavigate()
 

src/GZCTF/ClientApp/src/pages/admin/games/[id]/Notices.tsx

@@ -9,15 +9,13 @@ import GameNoticeEditCard from '@Components/admin/GameNoticeEditCard'
 import GameNoticeEditModal from '@Components/admin/GameNoticeEditModal'
 import WithGameTab from '@Components/admin/WithGameEditTab'
 import { showErrorNotification } from '@Utils/ApiErrorHandler'
+import { OnceSWRConfig } from '@Utils/useConfig'
 import api, { GameNotice } from '@Api'
 
 const GameNoticeEdit: FC = () => {
   const { id } = useParams()
   const numId = parseInt(id ?? '-1')
-  const { data: gameNotices, mutate } = api.edit.useEditGetGameNotices(numId, {
-    refreshInterval: 0,
-    revalidateOnFocus: false,
-  })
+  const { data: gameNotices, mutate } = api.edit.useEditGetGameNotices(numId, OnceSWRConfig)
 
   const [isEditModalOpen, setIsEditModalOpen] = useState(false)
   const [activeGameNotice, setActiveGameNotice] = useState<GameNotice | null>(null)

src/GZCTF/ClientApp/src/pages/admin/games/[id]/Writeups.tsx

@@ -6,6 +6,7 @@ import { Icon } from '@mdi/react'
 import PDFViewer from '@Components/admin/PDFViewer'
 import TeamWriteupCard from '@Components/admin/TeamWriteupCard'
 import WithGameTab from '@Components/admin/WithGameEditTab'
+import { OnceSWRConfig } from '@Utils/useConfig'
 import api, { WriteupInfoModel } from '@Api'
 
 const GameWriteups: FC = () => {
@@ -14,10 +15,7 @@ const GameWriteups: FC = () => {
   const navigate = useNavigate()
   const [selected, setSelected] = useState<WriteupInfoModel>()
 
-  const { data: writeups } = api.admin.useAdminWriteups(numId, {
-    refreshInterval: 0,
-    revalidateOnFocus: false,
-  })
+  const { data: writeups } = api.admin.useAdminWriteups(numId, OnceSWRConfig)
 
   useEffect(() => {
     if (writeups?.length && !selected) {

src/GZCTF/ClientApp/src/pages/admin/games/[id]/challenges/Index.tsx

@@ -21,6 +21,7 @@ import ChallengeEditCard from '@Components/admin/ChallengeEditCard'
 import WithGameEditTab from '@Components/admin/WithGameEditTab'
 import { showErrorNotification } from '@Utils/ApiErrorHandler'
 import { ChallengeTagItem, ChallengeTagLabelMap } from '@Utils/Shared'
+import { OnceSWRConfig } from '@Utils/useConfig'
 import api, { ChallengeInfoModel, ChallengeTag } from '@Api'
 
 const GameChallengeEdit: FC = () => {
@@ -32,10 +33,7 @@ const GameChallengeEdit: FC = () => {
   const [bonusOpened, setBonusOpened] = useState(false)
   const [category, setCategory] = useState<ChallengeTag | null>(null)
 
-  const { data: challenges, mutate } = api.edit.useEditGetGameChallenges(numId, {
-    refreshInterval: 0,
-    revalidateOnFocus: false,
-  })
+  const { data: challenges, mutate } = api.edit.useEditGetGameChallenges(numId, OnceSWRConfig)
 
   const filteredChallenges =
     category && challenges ? challenges?.filter((c) => c.tag === category) : challenges

src/GZCTF/ClientApp/src/pages/admin/games/[id]/challenges/[chalId]/Flags.tsx

@@ -30,6 +30,7 @@ import FlagEditPanel from '@Components/admin/FlagEditPanel'
 import WithGameEditTab from '@Components/admin/WithGameEditTab'
 import { showErrorNotification } from '@Utils/ApiErrorHandler'
 import { useUploadStyles } from '@Utils/ThemeOverride'
+import { useEditChallenge } from '@Utils/useEdit'
 import api, { ChallengeType, FileType, FlagInfoModel } from '@Api'
 
 const FileTypeDesrcMap = new Map<FileType, string>([
@@ -47,10 +48,7 @@ const OneAttachmentWithFlags: FC<FlagEditProps> = ({ onDelete }) => {
   const { id, chalId } = useParams()
   const [numId, numCId] = [parseInt(id ?? '-1'), parseInt(chalId ?? '-1')]
 
-  const { data: challenge, mutate } = api.edit.useEditGetGameChallenge(numId, numCId, {
-    refreshInterval: 0,
-    revalidateOnFocus: false,
-  })
+  const { challenge, mutate } = useEditChallenge(numId, numCId)
 
   const [disabled, setDisabled] = useState(false)
   const [type, setType] = useState<FileType>(challenge?.attachment?.type ?? FileType.None)
@@ -369,7 +367,7 @@ const FlagsWithAttachments: FC<FlagEditProps> = ({ onDelete }) => {
 
   const theme = useMantineTheme()
 
-  const { data: challenge } = api.edit.useEditGetGameChallenge(numId, numCId)
+  const { challenge } = useEditChallenge(numId, numCId)
 
   const [attachmentUploadModalOpened, setAttachmentUploadModalOpened] = useState(false)
   const [remoteAttachmentModalOpened, setRemoteAttachmentModalOpened] = useState(false)
@@ -422,7 +420,7 @@ const GameChallengeEdit: FC = () => {
   const theme = useMantineTheme()
   const modals = useModals()
 
-  const { data: challenge, mutate } = api.edit.useEditGetGameChallenge(numId, numCId)
+  const { challenge, mutate } = useEditChallenge(numId, numCId)
 
   const onDeleteFlag = (flag: FlagInfoModel) => {
     modals.openConfirmModal({

src/GZCTF/ClientApp/src/pages/admin/games/[id]/challenges/[chalId]/Index.tsx

@@ -40,19 +40,18 @@ import {
   ChallengeTagItem,
   ChallengeTagLabelMap,
 } from '@Utils/Shared'
+import { OnceSWRConfig } from '@Utils/useConfig'
+import { useEditChallenge } from '@Utils/useEdit'
 import api, { ChallengeUpdateModel, ChallengeTag, ChallengeType, FileType } from '@Api'
 
 const GameChallengeEdit: FC = () => {
   const navigate = useNavigate()
   const { id, chalId } = useParams()
   const [numId, numCId] = [parseInt(id ?? '-1'), parseInt(chalId ?? '-1')]
 
-  const { data: challenge, mutate } = api.edit.useEditGetGameChallenge(numId, numCId, {
-    refreshInterval: 0,
-    revalidateOnFocus: false,
-  })
+  const { challenge, mutate } = useEditChallenge(numId, numCId)
 
-  const { mutate: mutateChals } = api.edit.useEditGetGameChallenges(numId)
+  const { mutate: mutateChals } = api.edit.useEditGetGameChallenges(numId, OnceSWRConfig)
 
   const [challengeInfo, setChallengeInfo] = useState<ChallengeUpdateModel>({ ...challenge })
   const [disabled, setDisabled] = useState(false)

src/GZCTF/ClientApp/src/pages/games/Index.tsx

@@ -3,14 +3,12 @@ import { Stack } from '@mantine/core'
 import GameCard from '@Components/GameCard'
 import StickyHeader from '@Components/StickyHeader'
 import WithNavBar from '@Components/WithNavbar'
+import { OnceSWRConfig } from '@Utils/useConfig'
 import { usePageTitle } from '@Utils/usePageTitle'
 import api from '@Api'
 
 const Games: FC = () => {
-  const { data: allGames } = api.game.useGameGamesAll({
-    refreshInterval: 0,
-    revalidateOnFocus: false,
-  })
+  const { data: allGames } = api.game.useGameGamesAll(OnceSWRConfig)
 
   allGames?.sort((a, b) => new Date(a.end!).getTime() - new Date(b.end!).getTime())
 

src/GZCTF/ClientApp/src/pages/games/[id]/monitor/CheatInfo.tsx

@@ -29,6 +29,7 @@ import { SwitchLabel } from '@Components/admin/SwitchLabel'
 import { showErrorNotification } from '@Utils/ApiErrorHandler'
 import { ParticipationStatusMap } from '@Utils/Shared'
 import { useAccordionStyles, useTableStyles } from '@Utils/ThemeOverride'
+import { OnceSWRConfig } from '@Utils/useConfig'
 import { useUserRole } from '@Utils/useUser'
 import api, { CheatInfoModel, ParticipationStatus, Role } from '@Api'
 
@@ -383,10 +384,7 @@ const CheatInfo: FC = () => {
   const { id } = useParams()
   const numId = parseInt(id ?? '-1')
 
-  const { data: cheatInfo } = api.game.useGameCheatInfo(numId, {
-    refreshInterval: 0,
-    revalidateOnFocus: false,
-  })
+  const { data: cheatInfo } = api.game.useGameCheatInfo(numId, OnceSWRConfig)
 
   const [disabled, setDisabled] = useState(false)
   const [cheatTeamInfo, setCheatTeamInfo] = useState<Map<number, CheatTeamInfo>>()

src/GZCTF/ClientApp/src/pages/posts/Index.tsx

@@ -9,17 +9,15 @@ import WithNavBar from '@Components/WithNavbar'
 import { RequireRole } from '@Components/WithRole'
 import { showErrorNotification } from '@Utils/ApiErrorHandler'
 import { useFixedButtonStyles } from '@Utils/ThemeOverride'
+import { OnceSWRConfig } from '@Utils/useConfig'
 import { usePageTitle } from '@Utils/usePageTitle'
 import { useUserRole } from '@Utils/useUser'
 import api, { PostInfoModel, Role } from '@Api'
 
 const ITEMS_PER_PAGE = 10
 
 const Posts: FC = () => {
-  const { data: posts, mutate } = api.info.useInfoGetPosts({
-    refreshInterval: 0,
-    revalidateOnFocus: false,
-  })
+  const { data: posts, mutate } = api.info.useInfoGetPosts(OnceSWRConfig)
 
   const { classes: btnClasses } = useFixedButtonStyles({
     right: 'calc(0.1 * (100vw - 70px - 2rem) + 1rem)',

src/GZCTF/ClientApp/src/utils/useConfig.ts

@@ -1,10 +1,15 @@
 import dayjs from 'dayjs'
 import LZString from 'lz-string'
-import { Cache } from 'swr'
+import { Cache, SWRConfiguration } from 'swr'
 import { useEffect, useRef } from 'react'
 import { useLocalStorage } from '@mantine/hooks'
 import api, { GlobalConfig } from '@Api'
 
+export const OnceSWRConfig: SWRConfiguration = {
+  refreshInterval: 0,
+  revalidateOnFocus: false,
+}
+
 const RepoMeta = {
   sha: import.meta.env.VITE_APP_GIT_SHA ?? 'unknown',
   tag: import.meta.env.VITE_APP_GIT_NAME ?? 'unknown',

src/GZCTF/ClientApp/src/utils/useEdit.ts

@@ -0,0 +1,12 @@
+import api from '@Api'
+import { OnceSWRConfig } from './useConfig'
+
+export const useEditChallenge = (numId: number, numCId: number) => {
+  const {
+    data: challenge,
+    error,
+    mutate,
+  } = api.edit.useEditGetGameChallenge(numId, numCId, OnceSWRConfig)
+
+  return { challenge, error, mutate }
+}