From bec78a4c1aace5fdc4e9ba48d436f37bb7c9935e Mon Sep 17 00:00:00 2001 From: Matthew Russell Date: Tue, 2 Jan 2024 18:10:10 +0000 Subject: [PATCH] feat: add teams query --- apps/trading/client-pages/team/Team.graphql | 60 +++++++++ .../client-pages/team/__generated__/Team.ts | 115 ++++++++++++++++++ apps/trading/client-pages/team/team.tsx | 35 +++++- apps/trading/client-pages/team/use-team.ts | 36 ++++++ 4 files changed, 243 insertions(+), 3 deletions(-) create mode 100644 apps/trading/client-pages/team/Team.graphql create mode 100644 apps/trading/client-pages/team/__generated__/Team.ts create mode 100644 apps/trading/client-pages/team/use-team.ts diff --git a/apps/trading/client-pages/team/Team.graphql b/apps/trading/client-pages/team/Team.graphql new file mode 100644 index 000000000..223144cf8 --- /dev/null +++ b/apps/trading/client-pages/team/Team.graphql @@ -0,0 +1,60 @@ +fragment TeamFields on Team { + teamId + referrer + name + teamUrl + avatarUrl + createdAt + createdAtEpoch + closed +} + +fragment TeamStatsFields on TeamStatistics { + teamId + totalQuantumVolume + totalQuantumRewards + totalGamesPlayed + quantumRewards { + epoch + total_quantum_rewards + } + gamesPlayed +} + +fragment TeamRefereeFields on TeamReferee { + teamId + referee + joinedAt + joinedAtEpoch +} + +query Team($teamId: ID!, $partyId: ID) { + teams(teamId: $teamId) { + edges { + node { + ...TeamFields + } + } + } + partyTeams: teams(partyId: $partyId) { + edges { + node { + ...TeamFields + } + } + } + teamsStatistics(teamId: $teamId) { + edges { + node { + ...TeamStatsFields + } + } + } + teamReferees(teamId: $teamId) { + edges { + node { + ...TeamRefereeFields + } + } + } +} diff --git a/apps/trading/client-pages/team/__generated__/Team.ts b/apps/trading/client-pages/team/__generated__/Team.ts new file mode 100644 index 000000000..07dfca3c3 --- /dev/null +++ b/apps/trading/client-pages/team/__generated__/Team.ts @@ -0,0 +1,115 @@ +import * as Types from '@vegaprotocol/types'; + +import { gql } from '@apollo/client'; +import * as Apollo from '@apollo/client'; +const defaultOptions = {} as const; +export type TeamFieldsFragment = { __typename?: 'Team', teamId: string, referrer: string, name: string, teamUrl: string, avatarUrl: string, createdAt: any, createdAtEpoch: number, closed: boolean }; + +export type TeamStatsFieldsFragment = { __typename?: 'TeamStatistics', teamId: string, totalQuantumVolume: string, totalQuantumRewards: string, totalGamesPlayed: number, gamesPlayed: Array, quantumRewards: Array<{ __typename?: 'QuantumRewardsPerEpoch', epoch: number, total_quantum_rewards: string }> }; + +export type TeamRefereeFieldsFragment = { __typename?: 'TeamReferee', teamId: string, referee: string, joinedAt: any, joinedAtEpoch: number }; + +export type TeamQueryVariables = Types.Exact<{ + teamId: Types.Scalars['ID']; + partyId?: Types.InputMaybe; +}>; + + +export type TeamQuery = { __typename?: 'Query', teams?: { __typename?: 'TeamConnection', edges: Array<{ __typename?: 'TeamEdge', node: { __typename?: 'Team', teamId: string, referrer: string, name: string, teamUrl: string, avatarUrl: string, createdAt: any, createdAtEpoch: number, closed: boolean } }> } | null, partyTeams?: { __typename?: 'TeamConnection', edges: Array<{ __typename?: 'TeamEdge', node: { __typename?: 'Team', teamId: string, referrer: string, name: string, teamUrl: string, avatarUrl: string, createdAt: any, createdAtEpoch: number, closed: boolean } }> } | null, teamsStatistics?: { __typename?: 'TeamsStatisticsConnection', edges: Array<{ __typename?: 'TeamStatisticsEdge', node: { __typename?: 'TeamStatistics', teamId: string, totalQuantumVolume: string, totalQuantumRewards: string, totalGamesPlayed: number, gamesPlayed: Array, quantumRewards: Array<{ __typename?: 'QuantumRewardsPerEpoch', epoch: number, total_quantum_rewards: string }> } }> } | null, teamReferees?: { __typename?: 'TeamRefereeConnection', edges: Array<{ __typename?: 'TeamRefereeEdge', node: { __typename?: 'TeamReferee', teamId: string, referee: string, joinedAt: any, joinedAtEpoch: number } }> } | null }; + +export const TeamFieldsFragmentDoc = gql` + fragment TeamFields on Team { + teamId + referrer + name + teamUrl + avatarUrl + createdAt + createdAtEpoch + closed +} + `; +export const TeamStatsFieldsFragmentDoc = gql` + fragment TeamStatsFields on TeamStatistics { + teamId + totalQuantumVolume + totalQuantumRewards + totalGamesPlayed + quantumRewards { + epoch + total_quantum_rewards + } + gamesPlayed +} + `; +export const TeamRefereeFieldsFragmentDoc = gql` + fragment TeamRefereeFields on TeamReferee { + teamId + referee + joinedAt + joinedAtEpoch +} + `; +export const TeamDocument = gql` + query Team($teamId: ID!, $partyId: ID) { + teams(teamId: $teamId) { + edges { + node { + ...TeamFields + } + } + } + partyTeams: teams(partyId: $partyId) { + edges { + node { + ...TeamFields + } + } + } + teamsStatistics(teamId: $teamId) { + edges { + node { + ...TeamStatsFields + } + } + } + teamReferees(teamId: $teamId) { + edges { + node { + ...TeamRefereeFields + } + } + } +} + ${TeamFieldsFragmentDoc} +${TeamStatsFieldsFragmentDoc} +${TeamRefereeFieldsFragmentDoc}`; + +/** + * __useTeamQuery__ + * + * To run a query within a React component, call `useTeamQuery` and pass it any options that fit your needs. + * When your component renders, `useTeamQuery` returns an object from Apollo Client that contains loading, error, and data properties + * you can use to render your UI. + * + * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options; + * + * @example + * const { data, loading, error } = useTeamQuery({ + * variables: { + * teamId: // value for 'teamId' + * partyId: // value for 'partyId' + * }, + * }); + */ +export function useTeamQuery(baseOptions: Apollo.QueryHookOptions) { + const options = {...defaultOptions, ...baseOptions} + return Apollo.useQuery(TeamDocument, options); + } +export function useTeamLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions) { + const options = {...defaultOptions, ...baseOptions} + return Apollo.useLazyQuery(TeamDocument, options); + } +export type TeamQueryHookResult = ReturnType; +export type TeamLazyQueryHookResult = ReturnType; +export type TeamQueryResult = Apollo.QueryResult; \ No newline at end of file diff --git a/apps/trading/client-pages/team/team.tsx b/apps/trading/client-pages/team/team.tsx index 499d4e9cf..274dbf92e 100644 --- a/apps/trading/client-pages/team/team.tsx +++ b/apps/trading/client-pages/team/team.tsx @@ -11,14 +11,43 @@ import { VegaIcon, VegaIconNames, Tooltip, + Splash, } from '@vegaprotocol/ui-toolkit'; import classNames from 'classnames'; import BigNumber from 'bignumber.js'; import { useT } from '../../lib/use-t'; import { Table } from '../../components/table'; import { getDateFormat } from '@vegaprotocol/utils'; +import { useTeam, type Team as TeamType, type TeamStats } from './use-team'; +import { useParams } from 'react-router-dom'; +import { useVegaWallet } from '@vegaprotocol/wallet'; export const Team = () => { + const t = useT(); + const { teamId } = useParams<{ teamId: string }>(); + const { pubKey } = useVegaWallet(); + const { team, stats, partyInTeam } = useTeam(teamId, pubKey || undefined); + + if (!team) { + return ( + +

{t('Page not found')}

+ + ); + } + + return ; +}; + +export const TeamPage = ({ + team, + stats, + partyInTeam, +}: { + team: TeamType; + stats?: TeamStats; + partyInTeam: boolean; +}) => { const t = useT(); const [showGames, setShowGames] = useState(true); return ( @@ -31,9 +60,9 @@ export const Team = () => {

- Vega Maxis long team name here + {team.name}

- +
@@ -41,7 +70,7 @@ export const Team = () => { diff --git a/apps/trading/client-pages/team/use-team.ts b/apps/trading/client-pages/team/use-team.ts new file mode 100644 index 000000000..ddbc939f8 --- /dev/null +++ b/apps/trading/client-pages/team/use-team.ts @@ -0,0 +1,36 @@ +import { + useTeamQuery, + type TeamFieldsFragment, + type TeamStatsFieldsFragment, + type TeamRefereeFieldsFragment, +} from './__generated__/Team'; + +export type Team = TeamFieldsFragment; +export type TeamStats = TeamStatsFieldsFragment; +export type Member = TeamRefereeFieldsFragment; + +export const useTeam = (teamId?: string, partyId?: string) => { + const { data, loading, error } = useTeamQuery({ + variables: { teamId: teamId || '', partyId }, + skip: !teamId, + }); + + const teamEdge = data?.teams?.edges.find((e) => e.node.teamId === teamId); + const partyTeamEdge = data?.partyTeams?.edges[0]; + const teamStatsEdge = data?.teamsStatistics?.edges.find( + (e) => e.node.teamId === teamId + ); + const members = data?.teamReferees?.edges.filter( + (e) => e.node.teamId === teamId + ); + + return { + data, + loading, + error, + stats: teamStatsEdge?.node, + team: teamEdge?.node, + members, + partyInTeam: Boolean(partyTeamEdge), + }; +};