[WIP]: /server/:key

-add Top5Players

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<T> = {
+export interface Props<T> {
   actions: Action[];
   columns: Column<T>[];
   row: T;
@@ -13,7 +13,7 @@ export type Props<T> = {
   selected: boolean;
   size?: 'small' | 'medium';
   onSelect?: (row: T) => void;
-};
+}
 
 function EnhancedTableRow<T extends object>({
   actions,

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() {
     <PageLayout>
       <Container>
         <Grid container spacing={1}>
+          <Grid item xs={12} md={6}>
+            <Top5Players server={key} t={t} />
+          </Grid>
           <Grid item xs={12} md={6}>
             <TodaysBestStatsPlayers server={key} t={t} />
           </Grid>

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 (
+    <Paper>
+      <TableToolbar>
+        <Typography variant="h4">
+          <Link
+            to={SERVER_PAGE.RANKING_PAGE.PLAYER_PAGE.ARCHIVE_PAGE}
+            params={{ key: server }}
+          >
+            {t('top5Players.title')}
+          </Link>
+        </Typography>
+      </TableToolbar>
+      <Table
+        columns={COLUMNS.map((column, index) => ({
+          ...column,
+          valueFormatter:
+            index === 1
+              ? (player: Player) => (
+                  <PlayerProfileLink player={player} server={server} />
+                )
+              : column.valueFormatter,
+          label: column.label ? t<string>(column.label) : '',
+        }))}
+        loading={loading}
+        data={players}
+        size="small"
+        hideFooter
+        footerProps={{ rowsPerPage: LIMIT, rowsPerPageOptions: [LIMIT] }}
+      />
+    </Paper>
+  );
+}
+
+export default Top5Players;

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<Player>[] = [
+  {
+    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;

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
+        }
+      }
+    }
+  }
+`;

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<Player[]>;
+};

src/libs/graphql/types.ts

@@ -5,6 +5,7 @@ export type List<T> = {
 
 export type PlayerFilter = {
   id?: number[];
+  exists?: boolean;
   tribeFilter?: TribeFilter;
   deletedAtGT?: Date | string;
 };

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;

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;