wip: update team

GZTimeWalker · Jul 14, 2022 · 1027fb8 · 1027fb8
1 parent 729f81a
commit 1027fb8
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 21 deletions.
diff --git a/GZCTF/ClientApp/src/components/TeamCard.tsx b/GZCTF/ClientApp/src/components/TeamCard.tsx
@@ -20,20 +20,15 @@ import api, { TeamInfoModel } from '../Api';
 
 interface TeamCardProps {
   team: TeamInfoModel;
+  isCaptain: boolean;
+  isActive: boolean;
   onEdit?: () => void;
   onLeave?: () => void;
 }
 
 const TeamCard: FC<TeamCardProps> = (props) => {
-
-  const { data: user } = api.account.useAccountProfile({
-    refreshInterval: 0,
-    revalidateIfStale: false,
-    revalidateOnFocus: false,
-  });
-
+  const { team, isCaptain, isActive, onEdit, onLeave } = props;
   const theme = useMantineTheme();
-  const team = props.team;
 
   return (
     <Card shadow="sm">
@@ -48,7 +43,7 @@ const TeamCard: FC<TeamCardProps> = (props) => {
           <Text size="md">{team.bio}</Text>
         </Box>
         <Box style={{ height: '100%' }}>
-          {user?.activeTeamId === team.id ? (
+          {isActive ? (
             <Text transform="uppercase" size="sm" color="yellow">
               Active
             </Text>
@@ -65,7 +60,7 @@ const TeamCard: FC<TeamCardProps> = (props) => {
           <Text transform="uppercase" color="dimmed">
             Role:
           </Text>
-          {team.members?.find((m) => m?.captain && m.id == user?.userId) ? (
+          {isCaptain ? (
             <Badge color="brand" size="lg">
               captain
             </Badge>

diff --git a/GZCTF/ClientApp/src/components/TeamEditModal.tsx b/GZCTF/ClientApp/src/components/TeamEditModal.tsx
@@ -1,5 +1,4 @@
 import { FC, useState } from 'react';
-import { mutate } from 'swr';
 import {
   Avatar,
   Box,
@@ -41,10 +40,11 @@ const dropzoneChildren = (status: DropzoneStatus, file: File | null) => (
 
 interface TeamEditModalProps extends ModalProps {
   team: TeamInfoModel | null;
+  mutate: () => void;
 }
 
 const TeamEditModal: FC<TeamEditModalProps> = (props) => {
-  const { team, ...modalProps } = props;
+  const { team, mutate, ...modalProps } = props;
 
   const [disabled, setDisabled] = useState(false);
   const [tname, setTname] = useInputState('');
@@ -91,7 +91,7 @@ const TeamEditModal: FC<TeamEditModalProps> = (props) => {
             icon: <Icon path={mdiCheck} size={1} />,
             disallowClose: true,
           });
-          mutate({ ...team });
+          mutate();
           setAvatarFile(null);
           setDropzoneOpened(false);
         })
@@ -123,7 +123,7 @@ const TeamEditModal: FC<TeamEditModalProps> = (props) => {
             disallowClose: true,
           });
           onClearInfo();
-          mutate({ ...team });
+          mutate();
         })
         .catch((err) => {
           showNotification({

diff --git a/GZCTF/ClientApp/src/pages/account/profile.tsx b/GZCTF/ClientApp/src/pages/account/profile.tsx
@@ -44,7 +44,6 @@ const dropzoneChildren = (status: DropzoneStatus, file: File | null) => (
 );
 
 const Profile: NextPage = () => {
-  const theme = useMantineTheme();
   const [opened, setOpened] = useState(false);
   const [dropzoneOpened, setDropzoneOpened] = useState(false);
   const { data, mutate } = api.account.useAccountProfile({

diff --git a/GZCTF/ClientApp/src/pages/teams.tsx b/GZCTF/ClientApp/src/pages/teams.tsx
@@ -22,10 +22,16 @@ import TeamEditModal from '../components/TeamEditModal';
 import WithNavBar from '../components/WithNavbar';
 
 const Teams: NextPage = () => {
-  const { data: teams, error } = api.team.useTeamGetTeamsInfo({
+  const { data: teams, error, mutate } = api.team.useTeamGetTeamsInfo({
     refreshInterval: 3000,
   });
 
+  const { data: user } = api.account.useAccountProfile({
+    refreshInterval: 0,
+    revalidateIfStale: false,
+    revalidateOnFocus: false,
+  });
+
   const [joinOpened, setJoinOpened] = useState(false);
   const [joinTeamCode, setJoinTeamCode] = useState('');
   const [editOpened, setEditOpened] = useState(false);
@@ -34,14 +40,14 @@ const Teams: NextPage = () => {
   const [leaveTeam, setLeaveTeam] = useState(null as TeamInfoModel | null);
 
   const onEditTeam = (team: TeamInfoModel) => {
-      setEditTeam(team);
-      setEditOpened(true);
+    setEditTeam(team);
+    setEditOpened(true);
   };
 
   const onLeaveTeam = (team: TeamInfoModel) => {
-      setLeaveTeam(team);
-      setLeaveOpened(true);
-  }
+    setLeaveTeam(team);
+    setLeaveOpened(true);
+  };
 
   const onJoinTeam = () => {
     const parts = joinTeamCode.split(':');
@@ -145,6 +151,8 @@ const Teams: NextPage = () => {
               <TeamCard
                 key={i}
                 team={t}
+                isActive={t.id === user?.activeTeamId}
+                isCaptain={t.members?.some((m) => m?.captain && m.id == user?.userId) ?? false}
                 onEdit={() => onEditTeam(t)}
                 onLeave={() => onLeaveTeam(t)}
               />
@@ -192,6 +200,7 @@ const Teams: NextPage = () => {
         title={editTeam ? '编辑队伍' : '创建队伍'}
         onClose={() => setEditOpened(false)}
         team={editTeam}
+        mutate={mutate}
       />
     </WithNavBar>
   );