feat: update UX for GameJoinModal (#137)

GZTimeWalker · Aug 27, 2023 · 2df3b6d · 2df3b6d
1 parent fb89f0c
commit 2df3b6d
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 53 deletions.
diff --git a/src/GZCTF/ClientApp/src/components/GameJoinModal.tsx b/src/GZCTF/ClientApp/src/components/GameJoinModal.tsx
@@ -1,4 +1,4 @@
-import { FC, useState } from 'react'
+import { FC, useEffect, useState } from 'react'
 import { useParams } from 'react-router-dom'
 import { Button, Modal, ModalProps, Select, Stack, TextInput } from '@mantine/core'
 import { showNotification } from '@mantine/notifications'
@@ -10,21 +10,71 @@ import { GameJoinModel } from '@Api'
 
 interface GameJoinModalProps extends ModalProps {
   onSubmitJoin: (info: GameJoinModel) => Promise<void>
-  currentOrganization?: string | null
 }
 
 const GameJoinModal: FC<GameJoinModalProps> = (props) => {
   const { id } = useParams()
   const numId = parseInt(id ?? '-1')
-  const { onSubmitJoin, currentOrganization, ...modalProps } = props
+  const { onSubmitJoin, ...modalProps } = props
   const { teams } = useTeams()
   const { game } = useGame(numId)
 
   const [inviteCode, setInviteCode] = useState('')
-  const [organization, setOrganization] = useState(currentOrganization ?? '')
+  const [organization, setOrganization] = useState('')
   const [team, setTeam] = useState('')
   const [disabled, setDisabled] = useState(false)
 
+  useEffect(() => {
+    if (teams && teams.length === 1) {
+      setTeam(teams[0].id!.toString())
+    }
+  }, [teams])
+
+  const onJoinGame = () => {
+    setDisabled(true)
+
+    if (!team) {
+      showNotification({
+        color: 'orange',
+        message: '请选择参赛队伍',
+        icon: <Icon path={mdiClose} size={1} />,
+      })
+      setDisabled(false)
+      return
+    }
+
+    if (game?.inviteCodeRequired && !inviteCode) {
+      showNotification({
+        color: 'orange',
+        message: '邀请码不能为空',
+        icon: <Icon path={mdiClose} size={1} />,
+      })
+      setDisabled(false)
+      return
+    }
+
+    if (game?.organizations && game.organizations.length > 0 && !organization) {
+      showNotification({
+        color: 'orange',
+        message: '请选择参赛组织',
+        icon: <Icon path={mdiClose} size={1} />,
+      })
+      setDisabled(false)
+      return
+    }
+
+    onSubmitJoin({
+      teamId: parseInt(team),
+      inviteCode: game?.inviteCodeRequired ? inviteCode : undefined,
+      organization: game?.organizations && game.organizations.length > 0 ? organization : undefined,
+    }).finally(() => {
+      setInviteCode('')
+      setOrganization('')
+      setDisabled(false)
+      props.onClose()
+    })
+  }
+
   return (
     <Modal {...modalProps}>
       <Stack>
@@ -60,54 +110,7 @@ const GameJoinModal: FC<GameJoinModalProps> = (props) => {
             onChange={(e) => setOrganization(e ?? '')}
           />
         )}
-        <Button
-          disabled={disabled}
-          onClick={() => {
-            setDisabled(true)
-
-            if (!team) {
-              showNotification({
-                color: 'orange',
-                message: '请选择参赛队伍',
-                icon: <Icon path={mdiClose} size={1} />,
-              })
-              setDisabled(false)
-              return
-            }
-
-            if (game?.inviteCodeRequired && !inviteCode) {
-              showNotification({
-                color: 'orange',
-                message: '邀请码不能为空',
-                icon: <Icon path={mdiClose} size={1} />,
-              })
-              setDisabled(false)
-              return
-            }
-
-            if (game?.organizations && game.organizations.length > 0 && !organization) {
-              showNotification({
-                color: 'orange',
-                message: '请选择参赛组织',
-                icon: <Icon path={mdiClose} size={1} />,
-              })
-              setDisabled(false)
-              return
-            }
-
-            onSubmitJoin({
-              teamId: parseInt(team),
-              inviteCode: game?.inviteCodeRequired ? inviteCode : undefined,
-              organization:
-                game?.organizations && game.organizations.length > 0 ? organization : undefined,
-            }).finally(() => {
-              setInviteCode('')
-              setOrganization('')
-              setDisabled(false)
-              props.onClose()
-            })
-          }}
-        >
+        <Button disabled={disabled} onClick={onJoinGame}>
           报名参赛
         </Button>
       </Stack>

diff --git a/src/GZCTF/ClientApp/src/pages/games/[id]/Index.tsx b/src/GZCTF/ClientApp/src/pages/games/[id]/Index.tsx
@@ -301,7 +301,6 @@ const GameDetail: FC = () => {
           withCloseButton={false}
           onClose={() => setJoinModalOpen(false)}
           onSubmitJoin={onSubmitJoin}
-          currentOrganization={game?.organization}
         />
       </Container>
     </WithNavBar>