twhelp/version.tribalwarshelp.com
Archived
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

[FEATURE]: add a new page - TribeChangesPage

Browse Source
This commit is contained in:
Dawid Wysokiński 2020-12-15 06:19:16 +01:00
parent 6839ffb700
commit b1b8009161
13 changed files with 244 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/config/namespaces.ts
View File

@ -10,6 +10,7 @@ export const SERVER_PAGE = {
COMMON: 'server-page/player-page/common',
INDEX_PAGE: '/server-page/player-page/index-page',
HISTORY_PAGE: '/server-page/player-page/history-page',
TRIBE_CHANGES_PAGE: '/server-page/player-page/tribe-changes-page',
ENNOBLEMENTS_PAGE: '/server-page/player-page/ennoblements-page',
},
};

4
src/features/ServerPage/features/PlayerPage/PlayerPage.tsx
View File

@ -6,6 +6,7 @@ import PlayerProvider from './libs/PlayerPageContext/Provider';
import IndexPage from './features/IndexPage/IndexPage';
import HistoryPage from './features/HistoryPage/HistoryPage';
import EnnoblementsPage from './features/EnnoblementsPage/EnnoblementsPage';
import TribeChangesPage from './features/TribeChangesPage/TribeChangesPage';
import NotFoundPage from '../NotFoundPage/NotFoundPage';
const EnhancedRoute = ({ children, ...rest }: RouteProps) => {
@ -25,6 +26,9 @@ function PlayerPage() {
<EnhancedRoute exact path={SERVER_PAGE.PLAYER_PAGE.HISTORY_PAGE}>
<HistoryPage />
</EnhancedRoute>
<EnhancedRoute exact path={SERVER_PAGE.PLAYER_PAGE.TRIBE_CHANGES_PAGE}>
<TribeChangesPage />
</EnhancedRoute>
<EnhancedRoute exact path={SERVER_PAGE.PLAYER_PAGE.ENNOBLEMENTS_PAGE}>
<EnnoblementsPage />
</EnhancedRoute>

4
src/features/ServerPage/features/PlayerPage/features/HistoryPage/components/PlayerHistory/PlayerHistory.tsx
View File

@ -192,7 +192,9 @@ function PlayerHistory({ t, server, playerID }: Props) {
if (window.scrollTo) {
window.scrollTo({ top: 0, behavior: `smooth` });
}
setQuery({ limit: rowsPerPage, page: 0 });
requestAnimationFrame(() => {
setQuery({ limit: rowsPerPage, page: 0 });
});
},
}}
/>

26
src/features/ServerPage/features/PlayerPage/features/TribeChangesPage/TribeChangesPage.tsx Normal file
View File

@ -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 TribeChanges from './components/TribeChanges/TribeChanges';
function TribeChangesPage() {
const { key } = useServer();
const player = usePlayer();
const { t } = useTranslation(SERVER_PAGE.PLAYER_PAGE.TRIBE_CHANGES_PAGE);
useTitle(t('title', { key, name: player.name }));
return (
<PageLayout>
<Container>
<TribeChanges t={t} server={key} playerID={player.id} />
</Container>
</PageLayout>
);
}
export default TribeChangesPage;

119
src/features/ServerPage/features/PlayerPage/features/TribeChangesPage/components/TribeChanges/TribeChanges.tsx Normal file
View File

@ -0,0 +1,119 @@
import React from 'react';
import { useQuery } from '@apollo/client';
import { useQueryParams, NumberParam, withDefault } from 'use-query-params';
import { SERVER_PAGE } from '@config/routes';
import { TRIBE_CHANGES } 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 { TribeChangesQueryVariables } from '@libs/graphql/types';
import { TribeChangesQuery, TribeChange } from './types';
export interface Props {
server: string;
playerID: number;
t: TFunction;
}
function TribeChanges({ t, server, playerID }: Props) {
const [query, setQuery] = useQueryParams({
page: withDefault(NumberParam, 0),
limit: withDefault(NumberParam, LIMIT),
});
const { data: queryData, loading: queryLoading } = useQuery<
TribeChangesQuery,
TribeChangesQueryVariables
>(TRIBE_CHANGES, {
fetchPolicy: 'cache-and-network',
variables: {
limit: query.limit,
offset: query.page * query.limit,
sort: ['createdAt DESC'],
filter: {
playerID: [playerID],
},
server,
},
});
const tribeChangesItems = queryData?.tribeChanges?.items ?? [];
const loading = tribeChangesItems.length === 0 && queryLoading;
const total = queryData?.tribeChanges?.total ?? 0;
return (
<Paper>
<Table
idFieldName="createdAt"
columns={[
{
field: 'createdAt',
label: t('tribeChanges.columns.createdAt'),
sortable: false,
type: 'datetime',
},
{
field: 'oldTribe',
label: t('tribeChanges.columns.oldTribe'),
sortable: false,
valueFormatter: (v: TribeChange) => {
return v.oldTribe ? (
<Link
to={SERVER_PAGE.TRIBE_PAGE.INDEX_PAGE}
params={{ id: v.oldTribe.id, key: server }}
>
{v.oldTribe.tag}
</Link>
) : (
'-'
);
},
},
{
field: 'newTribe',
label: t('tribeChanges.columns.newTribe'),
sortable: false,
valueFormatter: (v: TribeChange) => {
return v.newTribe ? (
<Link
to={SERVER_PAGE.TRIBE_PAGE.INDEX_PAGE}
params={{ id: v.newTribe.id, key: server }}
>
{v.newTribe.tag}
</Link>
) : (
'-'
);
},
},
]}
loading={loading}
data={tribeChangesItems}
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` });
}
requestAnimationFrame(() => {
setQuery({ limit: rowsPerPage, page: 0 });
});
},
}}
/>
</Paper>
);
}
export default TribeChanges;

1
src/features/ServerPage/features/PlayerPage/features/TribeChangesPage/components/TribeChanges/constants.ts Normal file
View File

@ -0,0 +1 @@
export const LIMIT = 25;

32
src/features/ServerPage/features/PlayerPage/features/TribeChangesPage/components/TribeChanges/queries.ts Normal file
View File

@ -0,0 +1,32 @@
import { gql } from '@apollo/client';
export const TRIBE_CHANGES = gql`
query tribeChanges(
$server: String!
$filter: TribeChangeFilter
$sort: [String!]
$limit: Int
$offset: Int
) {
tribeChanges(
server: $server
filter: $filter
sort: $sort
limit: $limit
offset: $offset
) {
items {
oldTribe {
id
tag
}
newTribe {
id
tag
}
createdAt
}
total
}
}
`;

17
src/features/ServerPage/features/PlayerPage/features/TribeChangesPage/components/TribeChanges/types.ts Normal file
View File

@ -0,0 +1,17 @@
import { List } from '@libs/graphql/types';
export type TribeChange = {
oldTribe?: {
id: number;
tag: string;
};
newTribe?: {
id: number;
tag: string;
};
createdAt: Date | string;
};
export type TribeChangesQuery = {
tribeChanges?: List<TribeChange[]>;
};

13
src/libs/graphql/types.ts
View File

@ -67,6 +67,19 @@ export type TribeFilter = {
export type TribesQueryVariables = QueryVariablesWithServer<TribeFilter>;
export type TribeChangesFilter = {
playerID?: number[];
playerIDNEQ?: number[];
or?: {
oldTribeID?: number[];
newTribeID?: number[];
};
};
export type TribeChangesQueryVariables = QueryVariablesWithServer<
TribeChangesFilter
>;
export type EnnoblementFilter = {
or?: {
newOwnerID?: number[];

2
src/libs/i18n/en/server-page/player-page/index.ts
View File

@ -3,12 +3,14 @@ import common from './common';
import indexPage from './index-page';
import historyPage from './history-page';
import ennoblementsPage from './ennoblements-page';
import tribeChangesPage from './tribe-changes-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,
[NAMESPACES.SERVER_PAGE.PLAYER_PAGE.ENNOBLEMENTS_PAGE]: ennoblementsPage,
[NAMESPACES.SERVER_PAGE.PLAYER_PAGE.TRIBE_CHANGES_PAGE]: tribeChangesPage,
};
export default translations;

12
src/libs/i18n/en/server-page/player-page/tribe-changes-page.ts Normal file
View File

@ -0,0 +1,12 @@
const translations = {
title: `{{key}} - {{name}}'s tribe changes`,
tribeChanges: {
columns: {
createdAt: 'Date',
oldTribe: 'Old tribe',
newTribe: 'New tribe',
},
},
};
export default translations;

2
src/libs/i18n/pl/server-page/player-page/index.ts
View File

@ -3,12 +3,14 @@ import common from './common';
import indexPage from './index-page';
import historyPage from './history-page';
import ennoblementsPage from './ennoblements-page';
import tribeChangesPage from './tribe-changes-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,
[NAMESPACES.SERVER_PAGE.PLAYER_PAGE.ENNOBLEMENTS_PAGE]: ennoblementsPage,
[NAMESPACES.SERVER_PAGE.PLAYER_PAGE.TRIBE_CHANGES_PAGE]: tribeChangesPage,
};
export default translations;

12
src/libs/i18n/pl/server-page/player-page/tribe-changes-page.ts Normal file
View File

@ -0,0 +1,12 @@
const translations = {
title: `{{key}} - zmiany plemienia {{name}}`,
tribeChanges: {
columns: {
createdAt: 'Data',
oldTribe: 'Poprzednie plemię',
newTribe: 'Nowe plemię',
},
},
};
export default translations;