diff --git a/src/common/Table/TableRow.tsx b/src/common/Table/TableRow.tsx index 2c224dc..bb8a895 100644 --- a/src/common/Table/TableRow.tsx +++ b/src/common/Table/TableRow.tsx @@ -5,7 +5,7 @@ import { Action, Column } from './types'; import { TableRow, TableCell, Checkbox, Tooltip } from '@material-ui/core'; -export type Props = { +export interface Props { actions: Action[]; columns: Column[]; row: T; @@ -13,7 +13,7 @@ export type Props = { selected: boolean; size?: 'small' | 'medium'; onSelect?: (row: T) => void; -}; +} function EnhancedTableRow({ actions, diff --git a/src/features/ServerPage/features/IndexPage/IndexPage.tsx b/src/features/ServerPage/features/IndexPage/IndexPage.tsx index 5db1c7f..ffc37e2 100644 --- a/src/features/ServerPage/features/IndexPage/IndexPage.tsx +++ b/src/features/ServerPage/features/IndexPage/IndexPage.tsx @@ -5,6 +5,7 @@ import { SERVER_PAGE } from '@config/namespaces'; import { Container, Grid } from '@material-ui/core'; import PageLayout from '@features/ServerPage/common/PageLayout/PageLayout'; +import Top5Players from './components/Top5Players/Top5Players'; import TodaysBestStatsPlayers from './components/TodaysBestStatsPlayers/TodaysBestStatsPlayers'; import TodaysBestStatsTribes from './components/TodaysBestStatsTribes/TodaysBestStatsTribes'; import RecentlyDeletedPlayers from './components/RecentlyDeletedPlayers/RecentlyDeletedPlayers'; @@ -17,6 +18,9 @@ function IndexPage() { + + + diff --git a/src/features/ServerPage/features/IndexPage/components/Top5Players/Top5Players.tsx b/src/features/ServerPage/features/IndexPage/components/Top5Players/Top5Players.tsx new file mode 100644 index 0000000..d7c555d --- /dev/null +++ b/src/features/ServerPage/features/IndexPage/components/Top5Players/Top5Players.tsx @@ -0,0 +1,74 @@ +import React from 'react'; +import { useQuery } from '@apollo/client'; +import { SERVER_PAGE } from '@config/routes'; +import { RECENTLY_DELETED_PLAYERS } from './queries'; +import { COLUMNS, LIMIT } from './constants'; + +import { Typography } from '@material-ui/core'; +import TableToolbar from '@common/Table/TableToolbar'; +import Table from '@common/Table/Table'; +import Link from '@common/Link/Link'; +import PlayerProfileLink from '@features/ServerPage/common/PlayerProfileLink/PlayerProfileLink'; +import Paper from '../Paper/Paper'; + +import { TFunction } from 'i18next'; +import { PlayersQueryVariables } from '@libs/graphql/types'; +import { PlayerList, Player } from './types'; + +export interface Props { + server: string; + t: TFunction; +} + +function Top5Players({ server, t }: Props) { + const { loading: loadingPlayers, data } = useQuery< + PlayerList, + PlayersQueryVariables + >(RECENTLY_DELETED_PLAYERS, { + fetchPolicy: 'cache-and-network', + variables: { + limit: LIMIT, + sort: ['rank ASC'], + filter: { + exists: true, + }, + server, + }, + }); + const players = data?.players?.items ?? []; + const loading = loadingPlayers && players.length === 0; + + return ( + + + + + {t('top5Players.title')} + + + + ({ + ...column, + valueFormatter: + index === 1 + ? (player: Player) => ( + + ) + : column.valueFormatter, + label: column.label ? t(column.label) : '', + }))} + loading={loading} + data={players} + size="small" + hideFooter + footerProps={{ rowsPerPage: LIMIT, rowsPerPageOptions: [LIMIT] }} + /> + + ); +} + +export default Top5Players; diff --git a/src/features/ServerPage/features/IndexPage/components/Top5Players/constants.ts b/src/features/ServerPage/features/IndexPage/components/Top5Players/constants.ts new file mode 100644 index 0000000..f048393 --- /dev/null +++ b/src/features/ServerPage/features/IndexPage/components/Top5Players/constants.ts @@ -0,0 +1,29 @@ +import { Column } from '@common/Table/types'; +import { Player } from './types'; + +export const COLUMNS: Column[] = [ + { + field: 'rank', + label: 'top5Players.columns.rank', + sortable: false, + }, + { + field: 'name', + label: 'top5Players.columns.name', + sortable: false, + }, + { + field: 'points', + label: 'top5Players.columns.points', + sortable: false, + valueFormatter: (player: Player) => player.points.toLocaleString(), + }, + { + field: 'dailyGrowth', + label: 'top5Players.columns.dailyGrowth', + sortable: false, + valueFormatter: (player: Player) => player.dailyGrowth.toLocaleString(), + }, +]; + +export const LIMIT = 5; diff --git a/src/features/ServerPage/features/IndexPage/components/Top5Players/queries.ts b/src/features/ServerPage/features/IndexPage/components/Top5Players/queries.ts new file mode 100644 index 0000000..7ee960a --- /dev/null +++ b/src/features/ServerPage/features/IndexPage/components/Top5Players/queries.ts @@ -0,0 +1,31 @@ +import { gql } from '@apollo/client'; + +export const RECENTLY_DELETED_PLAYERS = gql` + query players( + $server: String! + $filter: PlayerFilter + $sort: [String!] + $limit: Int + $offset: Int + ) { + players( + server: $server + filter: $filter + sort: $sort + limit: $limit + offset: $offset + ) { + items { + id + name + points + rank + dailyGrowth + tribe { + id + tag + } + } + } + } +`; diff --git a/src/features/ServerPage/features/IndexPage/components/Top5Players/types.ts b/src/features/ServerPage/features/IndexPage/components/Top5Players/types.ts new file mode 100644 index 0000000..6bcab1d --- /dev/null +++ b/src/features/ServerPage/features/IndexPage/components/Top5Players/types.ts @@ -0,0 +1,17 @@ +import { List } from '@libs/graphql/types'; + +export type Player = { + id: number; + name: string; + points: number; + rank: number; + dailyGrowth: number; + tribe?: { + id: number; + tag: string; + }; +}; + +export type PlayerList = { + players?: List; +}; diff --git a/src/libs/graphql/types.ts b/src/libs/graphql/types.ts index 5f402cb..69b8e49 100644 --- a/src/libs/graphql/types.ts +++ b/src/libs/graphql/types.ts @@ -5,6 +5,7 @@ export type List = { export type PlayerFilter = { id?: number[]; + exists?: boolean; tribeFilter?: TribeFilter; deletedAtGT?: Date | string; }; diff --git a/src/libs/i18n/en/server-page/index-page.ts b/src/libs/i18n/en/server-page/index-page.ts index fe319cf..f009fa2 100644 --- a/src/libs/i18n/en/server-page/index-page.ts +++ b/src/libs/i18n/en/server-page/index-page.ts @@ -47,6 +47,15 @@ const translations = { createDate: 'Date', }, }, + top5Players: { + title: '5 best players', + columns: { + rank: 'Rank', + name: 'Name', + points: 'Points', + dailyGrowth: 'Daily growth', + }, + }, }; export default translations; diff --git a/src/libs/i18n/pl/server-page/index-page.ts b/src/libs/i18n/pl/server-page/index-page.ts index e4dd38d..69974b8 100644 --- a/src/libs/i18n/pl/server-page/index-page.ts +++ b/src/libs/i18n/pl/server-page/index-page.ts @@ -47,6 +47,15 @@ const translations = { createDate: 'Data', }, }, + top5Players: { + title: '5 najlepszych graczy', + columns: { + rank: 'Ranking', + name: 'Nazwa', + points: 'Punkty', + dailyGrowth: 'Dzienny przyrost', + }, + }, }; export default translations;