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

fix Tabs component animation

Browse Source
This commit is contained in:
Dawid Wysokiński 2020-12-28 08:41:00 +01:00
parent d0228af0ba
commit 4d64201c51
32 changed files with 450 additions and 474 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/config/routes.ts
View File

@ -3,7 +3,6 @@ export const INDEX_PAGE = '/';
export const SEARCH_PAGE = '/search';
export const SERVER_PAGE = {
BASE: '/server',
INDEX_PAGE: '/server/:key',
TRIBE_PAGE: {
INDEX_PAGE: '/server/:key/tribe/:id',

2
src/features/App.tsx
View File

@ -20,7 +20,7 @@ function App() {
<Route path={ROUTES.SEARCH_PAGE} exact>
<SearchPage />
</Route>
<Route path={ROUTES.SERVER_PAGE.BASE}>
<Route path={ROUTES.SERVER_PAGE.INDEX_PAGE}>
<ServerPage />
</Route>
<Route path="*">

66
src/features/ServerPage/ServerPage.tsx
View File

@ -1,7 +1,7 @@
import React from 'react';
import { SERVER_PAGE } from '@config/routes';
import { Switch, Route, RouteProps } from 'react-router-dom';
import { Switch, Route } from 'react-router-dom';
import ServerProvider from './libs/ServerContext/Provider';
import IndexPage from './features/IndexPage/IndexPage';
import PlayerPage from './features/PlayerPage/PlayerPage';
@ -10,44 +10,38 @@ import VillagePage from './features/VillagePage/VillagePage';
import RankingPage from './features/RankingPage/RankingPage';
import MapPage from './features/MapPage/MapPage';
import EnnoblementsPage from './features/EnnoblementsPage/EnnoblementsPage';
import NotFoundPage from '../NotFoundPage/NotFoundPage';
const EnhancedRoute = ({ children, ...rest }: RouteProps) => {
return (
<Route {...rest}>
<ServerProvider>{children}</ServerProvider>
</Route>
);
};
import NotFoundPage from './features/NotFoundPage/NotFoundPage';
function ServerPage() {
return (
<Switch>
<EnhancedRoute exact path={SERVER_PAGE.INDEX_PAGE}>
<IndexPage />
</EnhancedRoute>
<EnhancedRoute path={SERVER_PAGE.PLAYER_PAGE.INDEX_PAGE}>
<PlayerPage />
</EnhancedRoute>
<EnhancedRoute path={SERVER_PAGE.TRIBE_PAGE.INDEX_PAGE}>
<TribePage />
</EnhancedRoute>
<EnhancedRoute exact path={SERVER_PAGE.VILLAGE_PAGE.INDEX_PAGE}>
<VillagePage />
</EnhancedRoute>
<EnhancedRoute path={SERVER_PAGE.RANKING_PAGE.BASE}>
<RankingPage />
</EnhancedRoute>
<EnhancedRoute path={SERVER_PAGE.MAP_PAGE}>
<MapPage />
</EnhancedRoute>
<EnhancedRoute path={SERVER_PAGE.ENNOBLEMENTS_PAGE}>
<EnnoblementsPage />
</EnhancedRoute>
<Route path="*">
<NotFoundPage />
</Route>
</Switch>
<ServerProvider>
<Switch>
<Route exact path={SERVER_PAGE.INDEX_PAGE}>
<IndexPage />
</Route>
<Route path={SERVER_PAGE.PLAYER_PAGE.INDEX_PAGE}>
<PlayerPage />
</Route>
<Route path={SERVER_PAGE.TRIBE_PAGE.INDEX_PAGE}>
<TribePage />
</Route>
<Route exact path={SERVER_PAGE.VILLAGE_PAGE.INDEX_PAGE}>
<VillagePage />
</Route>
<Route path={SERVER_PAGE.RANKING_PAGE.BASE}>
<RankingPage />
</Route>
<Route path={SERVER_PAGE.MAP_PAGE}>
<MapPage />
</Route>
<Route exact path={SERVER_PAGE.ENNOBLEMENTS_PAGE}>
<EnnoblementsPage />
</Route>
<Route path="*">
<NotFoundPage />
</Route>
</Switch>
</ServerProvider>
);
}

50
src/features/ServerPage/features/NotFoundPage/NotFoundPage.tsx
View File

@ -1,35 +1,61 @@
import React from 'react';
import { useTranslation } from 'react-i18next';
import useTitle from '@libs/useTitle';
import { NOT_FOUND_PAGE } from '@config/namespaces';
import { makeStyles } from '@material-ui/core/styles';
import { Typography } from '@material-ui/core';
import PageLayout from '@features/ServerPage/common/PageLayout/PageLayout';
const useStyles = makeStyles(theme => ({
container: {
marginTop: theme.spacing(5),
padding: theme.spacing(3, 0),
width: '100%',
minHeight: 'inherit',
display: 'flex',
textAlign: 'center',
alignItems: 'center',
'& > div': {
flex: 1,
},
},
}));
export interface Props {
title?: string;
description?: string;
wrapIntoServerPageLayout?: boolean;
}
function NotFoundPage({ title, description }: Props) {
function NotFoundPage({
title,
description,
wrapIntoServerPageLayout = true,
}: Props) {
const classes = useStyles();
const { t } = useTranslation(NOT_FOUND_PAGE);
useTitle(t('title'));
const jsx = (
<div className={classes.container}>
<div>
<Typography variant="h1">{title ? title : t('title')}</Typography>
{description && <Typography variant="h4">{description}</Typography>}
</div>
</div>
);
if (!wrapIntoServerPageLayout) {
return jsx;
}
return (
<PageLayout>
<PageLayout noPadding>
<div className={classes.container}>
<Typography gutterBottom variant="h1">
{title ? title : 'Page not found'}
</Typography>
{description && (
<Typography gutterBottom variant="h4">
{description}
</Typography>
)}
<div>
<Typography variant="h1">{title ? title : t('title')}</Typography>
{description && <Typography variant="h4">{description}</Typography>}
</div>
</div>
</PageLayout>
);

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

@ -1,41 +1,38 @@
import React from 'react';
import { SERVER_PAGE } from '@config/routes';
import { Switch, Route, RouteProps } from 'react-router-dom';
import { Switch, Route } from 'react-router-dom';
import PlayerProvider from './libs/PlayerPageContext/Provider';
import PageLayout from './common/PageLayout/PageLayout';
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) => {
return (
<Route {...rest}>
<PlayerProvider>{children}</PlayerProvider>
</Route>
);
};
function PlayerPage() {
return (
<Switch>
<EnhancedRoute exact path={SERVER_PAGE.PLAYER_PAGE.INDEX_PAGE}>
<IndexPage />
</EnhancedRoute>
<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>
<Route path="*">
<NotFoundPage />
</Route>
</Switch>
<PlayerProvider>
<PageLayout>
<Switch>
<Route exact path={SERVER_PAGE.PLAYER_PAGE.INDEX_PAGE}>
<IndexPage />
</Route>
<Route exact path={SERVER_PAGE.PLAYER_PAGE.HISTORY_PAGE}>
<HistoryPage />
</Route>
<Route exact path={SERVER_PAGE.PLAYER_PAGE.TRIBE_CHANGES_PAGE}>
<TribeChangesPage />
</Route>
<Route exact path={SERVER_PAGE.PLAYER_PAGE.ENNOBLEMENTS_PAGE}>
<EnnoblementsPage />
</Route>
<Route path="*">
<NotFoundPage wrapIntoServerPageLayout={false} />
</Route>
</Switch>
</PageLayout>
</PlayerProvider>
);
}

17
src/features/ServerPage/features/PlayerPage/common/PageLayout/useTabs.ts
View File

@ -26,13 +26,16 @@ const useTabs = (t: TFunction) => {
},
];
}, [t]);
const currentTab = useMemo(
() =>
tabs.findIndex(({ to }) => {
return matchPath(loc.pathname, { exact: true, path: to });
}),
[loc.pathname, tabs]
);
const currentTab = useMemo(() => {
const currentTab = tabs.findIndex(({ to }) => {
return matchPath(loc.pathname, { exact: true, path: to });
});
return currentTab === -1
? process.env.NODE_ENV === 'production'
? -1
: 0
: currentTab;
}, [loc.pathname, tabs]);
return {
tabs,
currentTab,

9
src/features/ServerPage/features/PlayerPage/features/EnnoblementsPage/EnnoblementsPage.tsx
View File

@ -6,7 +6,6 @@ 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 Ennoblements from './components/Ennoblements/Ennoblements';
function EnnoblementsPage() {
@ -15,11 +14,9 @@ function EnnoblementsPage() {
const { t } = useTranslation(SERVER_PAGE.PLAYER_PAGE.ENNOBLEMENTS_PAGE);
useTitle(t('title', { key, name: player.name }));
return (
<PageLayout>
<Container>
<Ennoblements t={t} server={key} playerID={player.id} />
</Container>
</PageLayout>
<Container>
<Ennoblements t={t} server={key} playerID={player.id} />
</Container>
);
}

9
src/features/ServerPage/features/PlayerPage/features/HistoryPage/HistoryPage.tsx
View File

@ -6,7 +6,6 @@ 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() {
@ -15,11 +14,9 @@ function HistoryPage() {
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>
<Container>
<PlayerHistory t={t} server={key} playerID={player.id} />
</Container>
);
}

271
src/features/ServerPage/features/PlayerPage/features/IndexPage/IndexPage.tsx
View File

@ -20,7 +20,6 @@ import {
Chip,
} from '@material-ui/core';
import Link from '@common/Link/Link';
import PageLayout from '../../common/PageLayout/PageLayout';
import Statistics from './components/Statistics/Statistics';
import NameChanges from './components/NameChanges/NameChanges';
@ -32,144 +31,140 @@ function IndexPage() {
useTitle(t('title', { key, name: player.name }));
return (
<PageLayout>
<Container>
<Grid container spacing={2}>
<Grid component={Hidden} xsDown implementation="css" item xs={12}>
<Statistics server={key} playerID={player.id} t={t} />
</Grid>
{[
{
field: 'joinedAt',
value: format(
new Date(player.joinedAt),
DATE_FORMAT.DAY_MONTH_AND_YEAR
),
},
{
field: 'points',
value: `${formatNumber('commas', player.points)} (#${
player.rank
})`,
},
{
field: 'totalVillages',
value: formatNumber('commas', player.totalVillages),
},
{
field: 'dailyGrowth',
value: formatNumber('commas', player.dailyGrowth),
},
{
field: 'scoreAtt',
value: `${formatNumber('commas', player.scoreAtt)} (#${
player.rankAtt
})`,
},
{
field: 'scoreDef',
value: `${formatNumber('commas', player.scoreDef)} (#${
player.rankDef
})`,
},
{
field: 'scoreSup',
value: `${formatNumber('commas', player.scoreSup)} (#${
player.rankSup
})`,
},
{
field: 'scoreTotal',
value: `${formatNumber('commas', player.scoreTotal)} (#${
player.rankTotal
})`,
},
{
field: 'deletedAt',
value: player.deletedAt
? format(
new Date(player.deletedAt),
DATE_FORMAT.DAY_MONTH_AND_YEAR
)
: '-',
},
{
field: 'bestRank',
subtitle: format(
new Date(player.bestRankAt),
DATE_FORMAT.HOUR_MINUTES_DAY_MONTH_AND_YEAR
),
value: player.bestRank,
},
{
field: 'mostPoints',
subtitle: format(
new Date(player.mostPointsAt),
DATE_FORMAT.HOUR_MINUTES_DAY_MONTH_AND_YEAR
),
value: formatNumber('commas', player.mostPoints),
},
{
field: 'mostVillages',
subtitle: format(
new Date(player.mostVillagesAt),
DATE_FORMAT.HOUR_MINUTES_DAY_MONTH_AND_YEAR
),
value: formatNumber('commas', player.mostVillages),
},
].map(({ field, value, subtitle }) => {
return (
<Grid key={field} item xs={12} sm={6} md={4} lg={3}>
<Card className={classes.card}>
<CardContent className={classes.cardContent}>
<Typography gutterBottom variant="h5">
{t('fields.' + field)}
<br />
{subtitle && (
<Typography variant="subtitle2" component="span">
{subtitle}
</Typography>
)}
</Typography>
<Typography variant="h4">{value}</Typography>
</CardContent>
</Card>
</Grid>
);
})}
<Grid item xs={12} md={4}>
<Card>
<CardContent>
<Typography variant="h5" gutterBottom>
{t('fields.servers')}
</Typography>
<div className={classes.serverContainer}>
{[...player.servers].sort().map(server => {
return (
<Link
key={server}
to={ROUTES.SERVER_PAGE.PLAYER_PAGE.INDEX_PAGE}
params={{ key: server, id: player.id }}
>
<Chip
className={classes.chip}
color="secondary"
label={server}
clickable
/>
</Link>
);
})}
</div>
</CardContent>
</Card>
</Grid>
<Grid item xs={12} md={8}>
<NameChanges t={t} nameChanges={player.nameChanges} />
</Grid>
<Container>
<Grid container spacing={2}>
<Grid component={Hidden} xsDown implementation="css" item xs={12}>
<Statistics server={key} playerID={player.id} t={t} />
</Grid>
</Container>
</PageLayout>
{[
{
field: 'joinedAt',
value: format(
new Date(player.joinedAt),
DATE_FORMAT.DAY_MONTH_AND_YEAR
),
},
{
field: 'points',
value: `${formatNumber('commas', player.points)} (#${player.rank})`,
},
{
field: 'totalVillages',
value: formatNumber('commas', player.totalVillages),
},
{
field: 'dailyGrowth',
value: formatNumber('commas', player.dailyGrowth),
},
{
field: 'scoreAtt',
value: `${formatNumber('commas', player.scoreAtt)} (#${
player.rankAtt
})`,
},
{
field: 'scoreDef',
value: `${formatNumber('commas', player.scoreDef)} (#${
player.rankDef
})`,
},
{
field: 'scoreSup',
value: `${formatNumber('commas', player.scoreSup)} (#${
player.rankSup
})`,
},
{
field: 'scoreTotal',
value: `${formatNumber('commas', player.scoreTotal)} (#${
player.rankTotal
})`,
},
{
field: 'deletedAt',
value: player.deletedAt
? format(
new Date(player.deletedAt),
DATE_FORMAT.DAY_MONTH_AND_YEAR
)
: '-',
},
{
field: 'bestRank',
subtitle: format(
new Date(player.bestRankAt),
DATE_FORMAT.HOUR_MINUTES_DAY_MONTH_AND_YEAR
),
value: player.bestRank,
},
{
field: 'mostPoints',
subtitle: format(
new Date(player.mostPointsAt),
DATE_FORMAT.HOUR_MINUTES_DAY_MONTH_AND_YEAR
),
value: formatNumber('commas', player.mostPoints),
},
{
field: 'mostVillages',
subtitle: format(
new Date(player.mostVillagesAt),
DATE_FORMAT.HOUR_MINUTES_DAY_MONTH_AND_YEAR
),
value: formatNumber('commas', player.mostVillages),
},
].map(({ field, value, subtitle }) => {
return (
<Grid key={field} item xs={12} sm={6} md={4} lg={3}>
<Card className={classes.card}>
<CardContent className={classes.cardContent}>
<Typography gutterBottom variant="h5">
{t('fields.' + field)}
<br />
{subtitle && (
<Typography variant="subtitle2" component="span">
{subtitle}
</Typography>
)}
</Typography>
<Typography variant="h4">{value}</Typography>
</CardContent>
</Card>
</Grid>
);
})}
<Grid item xs={12} md={4}>
<Card>
<CardContent>
<Typography variant="h5" gutterBottom>
{t('fields.servers')}
</Typography>
<div className={classes.serverContainer}>
{[...player.servers].sort().map(server => {
return (
<Link
key={server}
to={ROUTES.SERVER_PAGE.PLAYER_PAGE.INDEX_PAGE}
params={{ key: server, id: player.id }}
>
<Chip
className={classes.chip}
color="secondary"
label={server}
clickable
/>
</Link>
);
})}
</div>
</CardContent>
</Card>
</Grid>
<Grid item xs={12} md={8}>
<NameChanges t={t} nameChanges={player.nameChanges} />
</Grid>
</Grid>
</Container>
);
}

1
src/features/ServerPage/features/PlayerPage/features/IndexPage/components/Statistics/Statistics.tsx
View File

@ -66,6 +66,7 @@ function Statistics({ t, server, playerID }: Props) {
<Paper>
<ModeSelector
onSelect={m => setMode(m.name as Mode)}
buttonProps={{ size: 'medium' }}
modes={[
{
name: 'points',

9
src/features/ServerPage/features/PlayerPage/features/TribeChangesPage/TribeChangesPage.tsx
View File

@ -6,7 +6,6 @@ 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() {
@ -15,11 +14,9 @@ function TribeChangesPage() {
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>
<Container>
<TribeChanges t={t} server={key} playerID={player.id} />
</Container>
);
}

27
src/features/ServerPage/features/RankingPage/RankingPage.tsx
View File

@ -2,23 +2,26 @@ import React from 'react';
import { SERVER_PAGE } from '@config/routes';
import { Switch, Route } from 'react-router-dom';
import PageLayout from './common/PageLayout/PageLayout';
import PlayerPage from './features/PlayerPage/PlayerPage';
import TribePage from './features/TribePage/TribePage';
import NotFoundPage from '../../../NotFoundPage/NotFoundPage';
import NotFoundPage from '../NotFoundPage/NotFoundPage';
function RankingPage() {
return (
<Switch>
<Route path={SERVER_PAGE.RANKING_PAGE.PLAYER_PAGE.INDEX_PAGE}>
<PlayerPage />
</Route>
<Route path={SERVER_PAGE.RANKING_PAGE.TRIBE_PAGE.INDEX_PAGE}>
<TribePage />
</Route>
<Route path="*">
<NotFoundPage />
</Route>
</Switch>
<PageLayout>
<Switch>
<Route path={SERVER_PAGE.RANKING_PAGE.PLAYER_PAGE.INDEX_PAGE}>
<PlayerPage />
</Route>
<Route path={SERVER_PAGE.RANKING_PAGE.TRIBE_PAGE.INDEX_PAGE}>
<TribePage />
</Route>
<Route path="*">
<NotFoundPage wrapIntoServerPageLayout={false} />
</Route>
</Switch>
</PageLayout>
);
}

4
src/features/ServerPage/features/RankingPage/common/PageLayout/PageLayout.tsx
View File

@ -59,12 +59,14 @@ const useStyles = makeStyles(theme => ({
boxShadow: theme.shadows[4],
},
content: {
height: '100%',
padding: theme.spacing(3, 0),
'&.no-padding': {
padding: '0 0',
},
},
tabs: {
overflowX: 'auto',
},
}));
export default PageLayout;

17
src/features/ServerPage/features/RankingPage/common/PageLayout/useTabs.ts
View File

@ -42,13 +42,16 @@ const useTabs = (t: TFunction) => {
},
];
}, [t]);
const currentTab = useMemo(
() =>
tabs.findIndex(({ to }) => {
return matchPath(loc.pathname, { exact: true, path: to });
}),
[loc.pathname, tabs]
);
const currentTab = useMemo(() => {
const currentTab = tabs.findIndex(({ to }) => {
return matchPath(loc.pathname, { exact: true, path: to });
});
return currentTab === -1
? process.env.NODE_ENV === 'production'
? -1
: 0
: currentTab;
}, [loc.pathname, tabs]);
return {
tabs,
currentTab,

2
src/features/ServerPage/features/RankingPage/features/PlayerPage/PlayerPage.tsx
View File

@ -24,7 +24,7 @@ function PlayerPage() {
<ArchivePage />
</Route>
<Route path="*">
<NotFoundPage />
<NotFoundPage wrapIntoServerPageLayout={false} />
</Route>
</Switch>
);

9
src/features/ServerPage/features/RankingPage/features/PlayerPage/features/ArchivePage/ArchivePage.tsx
View File

@ -5,7 +5,6 @@ import useServer from '@features/ServerPage/libs/ServerContext/useServer';
import { SERVER_PAGE } from '@config/namespaces';
import { Container } from '@material-ui/core';
import PageLayout from '@features/ServerPage/features/RankingPage/common/PageLayout/PageLayout';
import Ranking from './components/Ranking/Ranking';
function ArchivePage() {
@ -15,11 +14,9 @@ function ArchivePage() {
);
useTitle(t('title', { key }));
return (
<PageLayout>
<Container>
<Ranking t={t} server={key} />
</Container>
</PageLayout>
<Container>
<Ranking t={t} server={key} />
</Container>
);
}

9
src/features/ServerPage/features/RankingPage/features/PlayerPage/features/DailyPage/DailyPage.tsx
View File

@ -5,7 +5,6 @@ import useServer from '@features/ServerPage/libs/ServerContext/useServer';
import { SERVER_PAGE } from '@config/namespaces';
import { Container } from '@material-ui/core';
import PageLayout from '@features/ServerPage/features/RankingPage/common/PageLayout/PageLayout';
import Ranking from './components/Ranking/Ranking';
function DailyPage() {
@ -13,11 +12,9 @@ function DailyPage() {
const { t } = useTranslation(SERVER_PAGE.RANKING_PAGE.PLAYER_PAGE.DAILY_PAGE);
useTitle(t('title', { key }));
return (
<PageLayout>
<Container>
<Ranking t={t} server={key} />
</Container>
</PageLayout>
<Container>
<Ranking t={t} server={key} />
</Container>
);
}

11
src/features/ServerPage/features/RankingPage/features/PlayerPage/features/IndexPage/IndexPage.tsx
View File

@ -5,19 +5,16 @@ import useServer from '@features/ServerPage/libs/ServerContext/useServer';
import { SERVER_PAGE } from '@config/namespaces';
import { Container } from '@material-ui/core';
import PageLayout from '@features/ServerPage/features/RankingPage/common/PageLayout/PageLayout';
import Ranking from './components/Ranking/Ranking'
import Ranking from './components/Ranking/Ranking';
function IndexPage() {
const { key } = useServer();
const { t } = useTranslation(SERVER_PAGE.RANKING_PAGE.PLAYER_PAGE.INDEX_PAGE);
useTitle(t('title', { key }));
return (
<PageLayout>
<Container>
<Ranking t={t} server={key} />
</Container>
</PageLayout>
<Container>
<Ranking t={t} server={key} />
</Container>
);
}

9
src/features/ServerPage/features/RankingPage/features/PlayerPage/features/ODPage/ODPage.tsx
View File

@ -5,7 +5,6 @@ import useServer from '@features/ServerPage/libs/ServerContext/useServer';
import { SERVER_PAGE } from '@config/namespaces';
import { Container } from '@material-ui/core';
import PageLayout from '@features/ServerPage/features/RankingPage/common/PageLayout/PageLayout';
import Ranking from './components/Ranking/Ranking';
function ODPage() {
@ -13,11 +12,9 @@ function ODPage() {
const { t } = useTranslation(SERVER_PAGE.RANKING_PAGE.PLAYER_PAGE.OD_PAGE);
useTitle(t('title', { key }));
return (
<PageLayout>
<Container>
<Ranking t={t} server={key} />
</Container>
</PageLayout>
<Container>
<Ranking t={t} server={key} />
</Container>
);
}

2
src/features/ServerPage/features/RankingPage/features/TribePage/TribePage.tsx
View File

@ -24,7 +24,7 @@ function TribePage() {
<ArchivePage />
</Route>
<Route path="*">
<NotFoundPage />
<NotFoundPage wrapIntoServerPageLayout={false} />
</Route>
</Switch>
);

9
src/features/ServerPage/features/RankingPage/features/TribePage/features/ArchivePage/ArchivePage.tsx
View File

@ -5,7 +5,6 @@ import useServer from '@features/ServerPage/libs/ServerContext/useServer';
import { SERVER_PAGE } from '@config/namespaces';
import { Container } from '@material-ui/core';
import PageLayout from '@features/ServerPage/features/RankingPage/common/PageLayout/PageLayout';
import Ranking from './components/Ranking/Ranking';
function ArchivePage() {
@ -15,11 +14,9 @@ function ArchivePage() {
);
useTitle(t('title', { key }));
return (
<PageLayout>
<Container>
<Ranking t={t} server={key} />
</Container>
</PageLayout>
<Container>
<Ranking t={t} server={key} />
</Container>
);
}

9
src/features/ServerPage/features/RankingPage/features/TribePage/features/DailyPage/DailyPage.tsx
View File

@ -5,7 +5,6 @@ import useServer from '@features/ServerPage/libs/ServerContext/useServer';
import { SERVER_PAGE } from '@config/namespaces';
import { Container } from '@material-ui/core';
import PageLayout from '@features/ServerPage/features/RankingPage/common/PageLayout/PageLayout';
import Ranking from './components/Ranking/Ranking';
function DailyPage() {
@ -13,11 +12,9 @@ function DailyPage() {
const { t } = useTranslation(SERVER_PAGE.RANKING_PAGE.TRIBE_PAGE.DAILY_PAGE);
useTitle(t('title', { key }));
return (
<PageLayout>
<Container>
<Ranking t={t} server={key} />
</Container>
</PageLayout>
<Container>
<Ranking t={t} server={key} />
</Container>
);
}

9
src/features/ServerPage/features/RankingPage/features/TribePage/features/IndexPage/IndexPage.tsx
View File

@ -5,7 +5,6 @@ import useServer from '@features/ServerPage/libs/ServerContext/useServer';
import { SERVER_PAGE } from '@config/namespaces';
import { Container } from '@material-ui/core';
import PageLayout from '@features/ServerPage/features/RankingPage/common/PageLayout/PageLayout';
import Ranking from './components/Ranking/Ranking';
function IndexPage() {
@ -13,11 +12,9 @@ function IndexPage() {
const { t } = useTranslation(SERVER_PAGE.RANKING_PAGE.TRIBE_PAGE.INDEX_PAGE);
useTitle(t('title', { key }));
return (
<PageLayout>
<Container>
<Ranking t={t} server={key} />
</Container>
</PageLayout>
<Container>
<Ranking t={t} server={key} />
</Container>
);
}

9
src/features/ServerPage/features/RankingPage/features/TribePage/features/ODPage/ODPage.tsx
View File

@ -5,7 +5,6 @@ import useServer from '@features/ServerPage/libs/ServerContext/useServer';
import { SERVER_PAGE } from '@config/namespaces';
import { Container } from '@material-ui/core';
import PageLayout from '@features/ServerPage/features/RankingPage/common/PageLayout/PageLayout';
import Ranking from './components/Ranking/Ranking';
function ODPage() {
@ -13,11 +12,9 @@ function ODPage() {
const { t } = useTranslation(SERVER_PAGE.RANKING_PAGE.TRIBE_PAGE.OD_PAGE);
useTitle(t('title', { key }));
return (
<PageLayout>
<Container>
<Ranking t={t} server={key} />
</Container>
</PageLayout>
<Container>
<Ranking t={t} server={key} />
</Container>
);
}

55
src/features/ServerPage/features/TribePage/TribePage.tsx
View File

@ -1,8 +1,9 @@
import React from 'react';
import { SERVER_PAGE } from '@config/routes';
import { Switch, Route, RouteProps } from 'react-router-dom';
import { Switch, Route } from 'react-router-dom';
import TribeProvider from './libs/TribePageContext/Provider';
import PageLayout from './common/PageLayout/PageLayout';
import IndexPage from './features/IndexPage/IndexPage';
import MembersPage from './features/MembersPage/MembersPage';
import HistoryPage from './features/HistoryPage/HistoryPage';
@ -10,36 +11,32 @@ import EnnoblementsPage from './features/EnnoblementsPage/EnnoblementsPage';
import TribeChangesPage from './features/TribeChangesPage/TribeChangesPage';
import NotFoundPage from '../NotFoundPage/NotFoundPage';
const EnhancedRoute = ({ children, ...rest }: RouteProps) => {
return (
<Route {...rest}>
<TribeProvider>{children}</TribeProvider>
</Route>
);
};
function TribePage() {
return (
<Switch>
<EnhancedRoute exact path={SERVER_PAGE.TRIBE_PAGE.INDEX_PAGE}>
<IndexPage />
</EnhancedRoute>
<EnhancedRoute exact path={SERVER_PAGE.TRIBE_PAGE.MEMBERS_PAGE}>
<MembersPage />
</EnhancedRoute>
<EnhancedRoute exact path={SERVER_PAGE.TRIBE_PAGE.HISTORY_PAGE}>
<HistoryPage />
</EnhancedRoute>
<EnhancedRoute exact path={SERVER_PAGE.TRIBE_PAGE.TRIBE_CHANGES_PAGE}>
<TribeChangesPage />
</EnhancedRoute>
<EnhancedRoute exact path={SERVER_PAGE.TRIBE_PAGE.ENNOBLEMENTS_PAGE}>
<EnnoblementsPage />
</EnhancedRoute>
<Route path="*">
<NotFoundPage />
</Route>
</Switch>
<TribeProvider>
<PageLayout>
<Switch>
<Route exact path={SERVER_PAGE.TRIBE_PAGE.INDEX_PAGE}>
<IndexPage />
</Route>
<Route exact path={SERVER_PAGE.TRIBE_PAGE.MEMBERS_PAGE}>
<MembersPage />
</Route>
<Route exact path={SERVER_PAGE.TRIBE_PAGE.HISTORY_PAGE}>
<HistoryPage />
</Route>
<Route exact path={SERVER_PAGE.TRIBE_PAGE.TRIBE_CHANGES_PAGE}>
<TribeChangesPage />
</Route>
<Route exact path={SERVER_PAGE.TRIBE_PAGE.ENNOBLEMENTS_PAGE}>
<EnnoblementsPage />
</Route>
<Route path="*">
<NotFoundPage wrapIntoServerPageLayout={false} />
</Route>
</Switch>
</PageLayout>
</TribeProvider>
);
}

17
src/features/ServerPage/features/TribePage/common/PageLayout/useTabs.ts
View File

@ -30,13 +30,16 @@ const useTabs = (t: TFunction) => {
},
];
}, [t]);
const currentTab = useMemo(
() =>
tabs.findIndex(({ to }) => {
return matchPath(loc.pathname, { exact: true, path: to });
}),
[loc.pathname, tabs]
);
const currentTab = useMemo(() => {
const currentTab = tabs.findIndex(({ to }) => {
return matchPath(loc.pathname, { exact: true, path: to });
});
return currentTab === -1
? process.env.NODE_ENV === 'production'
? -1
: 0
: currentTab;
}, [loc.pathname, tabs]);
return {
tabs,
currentTab,

9
src/features/ServerPage/features/TribePage/features/EnnoblementsPage/EnnoblementsPage.tsx
View File

@ -6,7 +6,6 @@ import useTribe from '../../libs/TribePageContext/useTribe';
import { SERVER_PAGE } from '@config/namespaces';
import { Container } from '@material-ui/core';
import PageLayout from '../../common/PageLayout/PageLayout';
import Ennoblements from './components/Ennoblements/Ennoblements';
function EnnoblementsPage() {
@ -15,11 +14,9 @@ function EnnoblementsPage() {
const { t } = useTranslation(SERVER_PAGE.TRIBE_PAGE.ENNOBLEMENTS_PAGE);
useTitle(t('title', { key, tag: tribe.tag }));
return (
<PageLayout>
<Container>
<Ennoblements t={t} server={key} tribeID={tribe.id} />
</Container>
</PageLayout>
<Container>
<Ennoblements t={t} server={key} tribeID={tribe.id} />
</Container>
);
}

9
src/features/ServerPage/features/TribePage/features/HistoryPage/HistoryPage.tsx
View File

@ -6,7 +6,6 @@ import useTribe from '../../libs/TribePageContext/useTribe';
import { SERVER_PAGE } from '@config/namespaces';
import { Container } from '@material-ui/core';
import PageLayout from '../../common/PageLayout/PageLayout';
import TribeHistory from './components/TribeHistory/TribeHistory';
function HistoryPage() {
@ -15,11 +14,9 @@ function HistoryPage() {
const { t } = useTranslation(SERVER_PAGE.TRIBE_PAGE.HISTORY_PAGE);
useTitle(t('title', { key, tag: tribe.tag }));
return (
<PageLayout>
<Container>
<TribeHistory t={t} server={key} tribeID={tribe.id} />
</Container>
</PageLayout>
<Container>
<TribeHistory t={t} server={key} tribeID={tribe.id} />
</Container>
);
}

205
src/features/ServerPage/features/TribePage/features/IndexPage/IndexPage.tsx
View File

@ -17,7 +17,6 @@ import {
CardContent,
Typography,
} from '@material-ui/core';
import PageLayout from '../../common/PageLayout/PageLayout';
import Statistics from './components/Statistics/Statistics';
function IndexPage() {
@ -28,110 +27,108 @@ function IndexPage() {
useTitle(t('title', { key, tag: tribe.tag }));
return (
<PageLayout>
<Container>
<Grid container spacing={2}>
<Grid component={Hidden} xsDown implementation="css" item xs={12}>
<Statistics server={key} tribeID={tribe.id} t={t} />
</Grid>
{[
{
field: 'createdAt',
value: format(
new Date(tribe.createdAt),
DATE_FORMAT.DAY_MONTH_AND_YEAR
),
},
{
field: 'points',
value: `${formatNumber('commas', tribe.points)} (#${tribe.rank})`,
},
{
field: 'allPoints',
value: formatNumber('commas', tribe.allPoints),
},
{
field: 'totalVillages',
value: formatNumber('commas', tribe.totalVillages),
},
{
field: 'dominance',
value: formatNumber('dominance', tribe.dominance),
},
{
field: 'scoreAtt',
value: `${formatNumber('commas', tribe.scoreAtt)} (#${
tribe.rankAtt
})`,
},
{
field: 'scoreDef',
value: `${formatNumber('commas', tribe.scoreDef)} (#${
tribe.rankDef
})`,
},
{
field: 'scoreTotal',
value: `${formatNumber('commas', tribe.scoreTotal)} (#${
tribe.rankTotal
})`,
},
{
field: 'deletedAt',
value: tribe.deletedAt
? format(
new Date(tribe.deletedAt),
DATE_FORMAT.DAY_MONTH_AND_YEAR
)
: '-',
},
{
field: 'bestRank',
subtitle: format(
new Date(tribe.bestRankAt),
DATE_FORMAT.HOUR_MINUTES_DAY_MONTH_AND_YEAR
),
value: tribe.bestRank,
},
{
field: 'mostPoints',
subtitle: format(
new Date(tribe.mostPointsAt),
DATE_FORMAT.HOUR_MINUTES_DAY_MONTH_AND_YEAR
),
value: formatNumber('commas', tribe.mostPoints),
},
{
field: 'mostVillages',
subtitle: format(
new Date(tribe.mostVillagesAt),
DATE_FORMAT.HOUR_MINUTES_DAY_MONTH_AND_YEAR
),
value: formatNumber('commas', tribe.mostVillages),
},
].map(({ field, value, subtitle }) => {
return (
<Grid key={field} item xs={12} sm={6} md={4} lg={3}>
<Card className={classes.card}>
<CardContent className={classes.cardContent}>
<Typography gutterBottom variant="h5">
{t('fields.' + field)}
<br />
{subtitle && (
<Typography variant="subtitle2" component="span">
{subtitle}
</Typography>
)}
</Typography>
<Typography variant="h4">{value}</Typography>
</CardContent>
</Card>
</Grid>
);
})}
<Container>
<Grid container spacing={2}>
<Grid component={Hidden} xsDown implementation="css" item xs={12}>
<Statistics server={key} tribeID={tribe.id} t={t} />
</Grid>
</Container>
</PageLayout>
{[
{
field: 'createdAt',
value: format(
new Date(tribe.createdAt),
DATE_FORMAT.DAY_MONTH_AND_YEAR
),
},
{
field: 'points',
value: `${formatNumber('commas', tribe.points)} (#${tribe.rank})`,
},
{
field: 'allPoints',
value: formatNumber('commas', tribe.allPoints),
},
{
field: 'totalVillages',
value: formatNumber('commas', tribe.totalVillages),
},
{
field: 'dominance',
value: formatNumber('dominance', tribe.dominance),
},
{
field: 'scoreAtt',
value: `${formatNumber('commas', tribe.scoreAtt)} (#${
tribe.rankAtt
})`,
},
{
field: 'scoreDef',
value: `${formatNumber('commas', tribe.scoreDef)} (#${
tribe.rankDef
})`,
},
{
field: 'scoreTotal',
value: `${formatNumber('commas', tribe.scoreTotal)} (#${
tribe.rankTotal
})`,
},
{
field: 'deletedAt',
value: tribe.deletedAt
? format(
new Date(tribe.deletedAt),
DATE_FORMAT.DAY_MONTH_AND_YEAR
)
: '-',
},
{
field: 'bestRank',
subtitle: format(
new Date(tribe.bestRankAt),
DATE_FORMAT.HOUR_MINUTES_DAY_MONTH_AND_YEAR
),
value: tribe.bestRank,
},
{
field: 'mostPoints',
subtitle: format(
new Date(tribe.mostPointsAt),
DATE_FORMAT.HOUR_MINUTES_DAY_MONTH_AND_YEAR
),
value: formatNumber('commas', tribe.mostPoints),
},
{
field: 'mostVillages',
subtitle: format(
new Date(tribe.mostVillagesAt),
DATE_FORMAT.HOUR_MINUTES_DAY_MONTH_AND_YEAR
),
value: formatNumber('commas', tribe.mostVillages),
},
].map(({ field, value, subtitle }) => {
return (
<Grid key={field} item xs={12} sm={6} md={4} lg={3}>
<Card className={classes.card}>
<CardContent className={classes.cardContent}>
<Typography gutterBottom variant="h5">
{t('fields.' + field)}
<br />
{subtitle && (
<Typography variant="subtitle2" component="span">
{subtitle}
</Typography>
)}
</Typography>
<Typography variant="h4">{value}</Typography>
</CardContent>
</Card>
</Grid>
);
})}
</Grid>
</Container>
);
}

1
src/features/ServerPage/features/TribePage/features/IndexPage/components/Statistics/Statistics.tsx
View File

@ -66,6 +66,7 @@ function Statistics({ t, server, tribeID }: Props) {
<Paper>
<ModeSelector
onSelect={m => setMode(m.name as Mode)}
buttonProps={{ size: 'medium' }}
modes={[
{
name: 'points',

9
src/features/ServerPage/features/TribePage/features/MembersPage/MembersPage.tsx
View File

@ -6,7 +6,6 @@ import useTribe from '../../libs/TribePageContext/useTribe';
import { SERVER_PAGE } from '@config/namespaces';
import { Container } from '@material-ui/core';
import PageLayout from '../../common/PageLayout/PageLayout';
import Members from './components/Members/Members';
function MembersPage() {
@ -15,11 +14,9 @@ function MembersPage() {
const { t } = useTranslation(SERVER_PAGE.TRIBE_PAGE.MEMBERS_PAGE);
useTitle(t('title', { key, tag: tribe.tag }));
return (
<PageLayout>
<Container>
<Members t={t} server={key} tribeID={tribe.id} />
</Container>
</PageLayout>
<Container>
<Members t={t} server={key} tribeID={tribe.id} />
</Container>
);
}

9
src/features/ServerPage/features/TribePage/features/TribeChangesPage/TribeChangesPage.tsx
View File

@ -6,7 +6,6 @@ import useTribe from '../../libs/TribePageContext/useTribe';
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() {
@ -15,11 +14,9 @@ function TribeChangesPage() {
const { t } = useTranslation(SERVER_PAGE.TRIBE_PAGE.TRIBE_CHANGES_PAGE);
useTitle(t('title', { key, tag: tribe.tag }));
return (
<PageLayout>
<Container>
<TribeChanges t={t} server={key} tribeID={tribe.id} />
</Container>
</PageLayout>
<Container>
<TribeChanges t={t} server={key} tribeID={tribe.id} />
</Container>
);
}