[WIP]: /server/:key/player/:id/history
- add en and pl translations - add a fully functional table
This commit is contained in:
parent
eccaf07590
commit
7461a28c47
|
|
@ -58,7 +58,7 @@ function TableFooter({
|
|||
labelDisplayedRows={payload => t('labelDisplayedRows', payload)}
|
||||
labelRowsPerPage={t('labelRowsPerPage')}
|
||||
nextIconButtonText={t('next')}
|
||||
backIconButtonText={t('prev')}
|
||||
backIconButtonText={t('previous')}
|
||||
/>
|
||||
</TableRow>
|
||||
</MUITableFooter>
|
||||
|
|
|
|||
|
|
@ -9,5 +9,6 @@ export const SERVER_PAGE = {
|
|||
PLAYER_PAGE: {
|
||||
COMMON: 'server-page/player-page/common',
|
||||
INDEX_PAGE: '/server-page/player-page/index-page',
|
||||
HISTORY_PAGE: '/server-page/player-page/history-page',
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ import { SERVER_PAGE } from '@config/routes';
|
|||
import { Switch, Route, RouteProps } from 'react-router-dom';
|
||||
import PlayerProvider from './libs/PlayerPageContext/Provider';
|
||||
import IndexPage from './features/IndexPage/IndexPage';
|
||||
import HistoryPage from './features/HistoryPage/HistoryPage';
|
||||
import NotFoundPage from '../NotFoundPage/NotFoundPage';
|
||||
|
||||
const EnhancedRoute = ({ children, ...rest }: RouteProps) => {
|
||||
|
|
@ -20,6 +21,9 @@ function PlayerPage() {
|
|||
<EnhancedRoute exact path={SERVER_PAGE.PLAYER_PAGE.INDEX_PAGE}>
|
||||
<IndexPage />
|
||||
</EnhancedRoute>
|
||||
<EnhancedRoute exact path={SERVER_PAGE.PLAYER_PAGE.HISTORY_PAGE}>
|
||||
<HistoryPage />
|
||||
</EnhancedRoute>
|
||||
<Route path="*">
|
||||
<NotFoundPage />
|
||||
</Route>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,26 @@
|
|||
import React from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import useTitle from '@libs/useTitle';
|
||||
import useServer from '@features/ServerPage/libs/ServerContext/useServer';
|
||||
import usePlayer from '../../libs/PlayerPageContext/usePlayer';
|
||||
import { SERVER_PAGE } from '@config/namespaces';
|
||||
|
||||
import { Container } from '@material-ui/core';
|
||||
import PageLayout from '../../common/PageLayout/PageLayout';
|
||||
import PlayerHistory from './components/PlayerHistory/PlayerHistory';
|
||||
|
||||
function HistoryPage() {
|
||||
const { key } = useServer();
|
||||
const player = usePlayer();
|
||||
const { t } = useTranslation(SERVER_PAGE.PLAYER_PAGE.HISTORY_PAGE);
|
||||
useTitle(t('title', { key, name: player.name }));
|
||||
return (
|
||||
<PageLayout>
|
||||
<Container>
|
||||
<PlayerHistory t={t} server={key} playerID={player.id} />
|
||||
</Container>
|
||||
</PageLayout>
|
||||
);
|
||||
}
|
||||
|
||||
export default HistoryPage;
|
||||
|
|
@ -0,0 +1,147 @@
|
|||
import React from 'react';
|
||||
import { useQuery } from '@apollo/client';
|
||||
import { useQueryParams, NumberParam, withDefault } from 'use-query-params';
|
||||
import { SERVER_PAGE } from '@config/routes';
|
||||
import { PLAYER_HISTORY } from './queries';
|
||||
import { LIMIT } from './constants';
|
||||
|
||||
import { Paper } from '@material-ui/core';
|
||||
import Table from '@common/Table/Table';
|
||||
import Link from '@common/Link/Link';
|
||||
|
||||
import { TFunction } from 'i18next';
|
||||
import { PlayerHistoryQueryVariables } from '@libs/graphql/types';
|
||||
import { PlayerHistory as PlayerHistoryT, Item } from './types';
|
||||
|
||||
export interface Props {
|
||||
server: string;
|
||||
playerID: number;
|
||||
t: TFunction;
|
||||
}
|
||||
|
||||
function PlayerHistory({ t, server, playerID }: Props) {
|
||||
const [query, setQuery] = useQueryParams({
|
||||
page: withDefault(NumberParam, 0),
|
||||
limit: withDefault(NumberParam, LIMIT),
|
||||
});
|
||||
const { data: queryData, loading: queryLoading } = useQuery<
|
||||
PlayerHistoryT,
|
||||
PlayerHistoryQueryVariables
|
||||
>(PLAYER_HISTORY, {
|
||||
fetchPolicy: 'cache-and-network',
|
||||
variables: {
|
||||
limit: query.limit,
|
||||
offset: query.page * query.limit,
|
||||
sort: ['createDate DESC'],
|
||||
filter: {
|
||||
playerID: [playerID],
|
||||
},
|
||||
server,
|
||||
},
|
||||
});
|
||||
const records = queryData?.playerHistory?.items ?? [];
|
||||
const loading = records.length === 0 && queryLoading;
|
||||
const total = queryData?.playerHistory?.total ?? 0;
|
||||
|
||||
return (
|
||||
<Paper>
|
||||
<Table
|
||||
columns={[
|
||||
{
|
||||
field: 'createDate',
|
||||
label: t('playerHistory.columns.createDate'),
|
||||
sortable: false,
|
||||
type: 'date',
|
||||
},
|
||||
{
|
||||
field: 'tribe',
|
||||
label: t('playerHistory.columns.tribe'),
|
||||
sortable: false,
|
||||
valueFormatter: (v: Item) => {
|
||||
return v.tribe ? (
|
||||
<Link
|
||||
to={SERVER_PAGE.TRIBE_PAGE.INDEX_PAGE}
|
||||
params={{ id: v.tribe.id, key: server }}
|
||||
>
|
||||
{v.tribe.tag}
|
||||
</Link>
|
||||
) : (
|
||||
'-'
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'points',
|
||||
label: t('playerHistory.columns.points'),
|
||||
sortable: false,
|
||||
valueFormatter: (v: Item) => {
|
||||
return `${v.points.toLocaleString()} (#${v.rank})`;
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'totalVillages',
|
||||
label: t('playerHistory.columns.totalVillages'),
|
||||
sortable: false,
|
||||
valueFormatter: (v: Item) => {
|
||||
return v.totalVillages.toLocaleString();
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'scoreAtt',
|
||||
label: t('playerHistory.columns.scoreAtt'),
|
||||
sortable: false,
|
||||
valueFormatter: (v: Item) => {
|
||||
return `${v.scoreAtt.toLocaleString()} (#${v.rankAtt})`;
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'scoreDef',
|
||||
label: t('playerHistory.columns.scoreDef'),
|
||||
valueFormatter: (v: Item) => {
|
||||
return `${v.scoreDef.toLocaleString()} (#${v.rankDef})`;
|
||||
},
|
||||
sortable: false,
|
||||
},
|
||||
{
|
||||
field: 'scoreSup',
|
||||
label: t('playerHistory.columns.scoreSup'),
|
||||
valueFormatter: (v: Item) => {
|
||||
return `${v.scoreSup.toLocaleString()} (#${v.rankSup})`;
|
||||
},
|
||||
sortable: false,
|
||||
},
|
||||
{
|
||||
field: 'scoreTotal',
|
||||
label: t('playerHistory.columns.scoreTotal'),
|
||||
valueFormatter: (v: Item) => {
|
||||
return `${v.scoreTotal.toLocaleString()} (#${v.rankTotal})`;
|
||||
},
|
||||
sortable: false,
|
||||
},
|
||||
]}
|
||||
loading={loading}
|
||||
data={records}
|
||||
size="small"
|
||||
footerProps={{
|
||||
page: loading ? 0 : query.page,
|
||||
rowsPerPage: query.limit,
|
||||
count: total,
|
||||
onChangePage: page => {
|
||||
if (window.scrollTo) {
|
||||
window.scrollTo({ top: 0, behavior: `smooth` });
|
||||
}
|
||||
setQuery({ page });
|
||||
},
|
||||
onChangeRowsPerPage: rowsPerPage => {
|
||||
if (window.scrollTo) {
|
||||
window.scrollTo({ top: 0, behavior: `smooth` });
|
||||
}
|
||||
setQuery({ limit: rowsPerPage, page: 0 });
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</Paper>
|
||||
);
|
||||
}
|
||||
|
||||
export default PlayerHistory;
|
||||
|
|
@ -0,0 +1 @@
|
|||
export const LIMIT = 50;
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
import { gql } from '@apollo/client';
|
||||
|
||||
export const PLAYER_HISTORY = gql`
|
||||
query playerHistory(
|
||||
$server: String!
|
||||
$filter: PlayerHistoryFilter
|
||||
$sort: [String!]
|
||||
$limit: Int
|
||||
$offset: Int
|
||||
) {
|
||||
playerHistory(
|
||||
server: $server
|
||||
filter: $filter
|
||||
sort: $sort
|
||||
limit: $limit
|
||||
offset: $offset
|
||||
) {
|
||||
items {
|
||||
tribe {
|
||||
id
|
||||
tag
|
||||
}
|
||||
points
|
||||
rank
|
||||
totalVillages
|
||||
scoreAtt
|
||||
rankAtt
|
||||
scoreDef
|
||||
rankDef
|
||||
scoreSup
|
||||
rankSup
|
||||
scoreTotal
|
||||
rankTotal
|
||||
createDate
|
||||
}
|
||||
total
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
import { List } from '@libs/graphql/types';
|
||||
|
||||
export type Item = {
|
||||
rank: number;
|
||||
points: number;
|
||||
totalVillages: number;
|
||||
scoreAtt: number;
|
||||
rankAtt: number;
|
||||
scoreDef: number;
|
||||
rankDef: number;
|
||||
scoreSup: number;
|
||||
rankSup: number;
|
||||
scoreTotal: number;
|
||||
rankTotal: number;
|
||||
createDate: string | Date;
|
||||
tribe?: {
|
||||
id: number;
|
||||
tag: string;
|
||||
};
|
||||
};
|
||||
|
||||
export type PlayerHistory = {
|
||||
playerHistory?: List<Item[]>;
|
||||
};
|
||||
17
src/libs/i18n/en/server-page/player-page/history-page.ts
Normal file
17
src/libs/i18n/en/server-page/player-page/history-page.ts
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
const translations = {
|
||||
title: `{{key}} - {{name}}'s player history`,
|
||||
playerHistory: {
|
||||
columns: {
|
||||
createDate: 'Date',
|
||||
tribe: 'Tribe',
|
||||
points: 'Points',
|
||||
totalVillages: 'Villages',
|
||||
scoreAtt: 'ODA',
|
||||
scoreDef: 'ODD',
|
||||
scoreSup: 'ODS',
|
||||
scoreTotal: 'OD',
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export default translations;
|
||||
|
|
@ -1,10 +1,12 @@
|
|||
import * as NAMESPACES from '@config/namespaces';
|
||||
import common from './common';
|
||||
import indexPage from './index-page';
|
||||
import historyPage from './history-page';
|
||||
|
||||
const translations = {
|
||||
[NAMESPACES.SERVER_PAGE.PLAYER_PAGE.COMMON]: common,
|
||||
[NAMESPACES.SERVER_PAGE.PLAYER_PAGE.INDEX_PAGE]: indexPage,
|
||||
[NAMESPACES.SERVER_PAGE.PLAYER_PAGE.HISTORY_PAGE]: historyPage,
|
||||
};
|
||||
|
||||
export default translations;
|
||||
|
|
|
|||
17
src/libs/i18n/pl/server-page/player-page/history-page.ts
Normal file
17
src/libs/i18n/pl/server-page/player-page/history-page.ts
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
const translations = {
|
||||
title: `{{key}} - historia gracza {{name}}`,
|
||||
playerHistory: {
|
||||
columns: {
|
||||
createDate: 'Data',
|
||||
tribe: 'Plemię',
|
||||
points: 'Punkty',
|
||||
totalVillages: 'Wioski',
|
||||
scoreAtt: 'Agresor',
|
||||
scoreDef: 'Obrońca',
|
||||
scoreSup: 'Wspierający',
|
||||
scoreTotal: 'Pokonani ogólnie',
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export default translations;
|
||||
|
|
@ -1,10 +1,12 @@
|
|||
import * as NAMESPACES from '@config/namespaces';
|
||||
import common from './common';
|
||||
import indexPage from './index-page';
|
||||
import historyPage from './history-page';
|
||||
|
||||
const translations = {
|
||||
[NAMESPACES.SERVER_PAGE.PLAYER_PAGE.COMMON]: common,
|
||||
[NAMESPACES.SERVER_PAGE.PLAYER_PAGE.INDEX_PAGE]: indexPage,
|
||||
[NAMESPACES.SERVER_PAGE.PLAYER_PAGE.HISTORY_PAGE]: historyPage,
|
||||
};
|
||||
|
||||
export default translations;
|
||||
|
|
|
|||
Reference in New Issue
Block a user