fix Tabs component animation
This commit is contained in:
parent
d0228af0ba
commit
4d64201c51
|
@ -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',
|
||||
|
|
|
@ -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="*">
|
||||
|
|
|
@ -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 (
|
||||
<ServerProvider>
|
||||
<Switch>
|
||||
<EnhancedRoute exact path={SERVER_PAGE.INDEX_PAGE}>
|
||||
<Route exact path={SERVER_PAGE.INDEX_PAGE}>
|
||||
<IndexPage />
|
||||
</EnhancedRoute>
|
||||
<EnhancedRoute path={SERVER_PAGE.PLAYER_PAGE.INDEX_PAGE}>
|
||||
</Route>
|
||||
<Route path={SERVER_PAGE.PLAYER_PAGE.INDEX_PAGE}>
|
||||
<PlayerPage />
|
||||
</EnhancedRoute>
|
||||
<EnhancedRoute path={SERVER_PAGE.TRIBE_PAGE.INDEX_PAGE}>
|
||||
</Route>
|
||||
<Route path={SERVER_PAGE.TRIBE_PAGE.INDEX_PAGE}>
|
||||
<TribePage />
|
||||
</EnhancedRoute>
|
||||
<EnhancedRoute exact path={SERVER_PAGE.VILLAGE_PAGE.INDEX_PAGE}>
|
||||
</Route>
|
||||
<Route exact path={SERVER_PAGE.VILLAGE_PAGE.INDEX_PAGE}>
|
||||
<VillagePage />
|
||||
</EnhancedRoute>
|
||||
<EnhancedRoute path={SERVER_PAGE.RANKING_PAGE.BASE}>
|
||||
</Route>
|
||||
<Route path={SERVER_PAGE.RANKING_PAGE.BASE}>
|
||||
<RankingPage />
|
||||
</EnhancedRoute>
|
||||
<EnhancedRoute path={SERVER_PAGE.MAP_PAGE}>
|
||||
</Route>
|
||||
<Route path={SERVER_PAGE.MAP_PAGE}>
|
||||
<MapPage />
|
||||
</EnhancedRoute>
|
||||
<EnhancedRoute path={SERVER_PAGE.ENNOBLEMENTS_PAGE}>
|
||||
</Route>
|
||||
<Route exact path={SERVER_PAGE.ENNOBLEMENTS_PAGE}>
|
||||
<EnnoblementsPage />
|
||||
</EnhancedRoute>
|
||||
</Route>
|
||||
<Route path="*">
|
||||
<NotFoundPage />
|
||||
</Route>
|
||||
</Switch>
|
||||
</ServerProvider>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
@ -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();
|
||||
return (
|
||||
<PageLayout>
|
||||
const { t } = useTranslation(NOT_FOUND_PAGE);
|
||||
useTitle(t('title'));
|
||||
|
||||
const jsx = (
|
||||
<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>
|
||||
);
|
||||
|
||||
if (!wrapIntoServerPageLayout) {
|
||||
return jsx;
|
||||
}
|
||||
|
||||
return (
|
||||
<PageLayout noPadding>
|
||||
<div className={classes.container}>
|
||||
<div>
|
||||
<Typography variant="h1">{title ? title : t('title')}</Typography>
|
||||
{description && <Typography variant="h4">{description}</Typography>}
|
||||
</div>
|
||||
</div>
|
||||
</PageLayout>
|
||||
);
|
||||
|
|
|
@ -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 (
|
||||
<PlayerProvider>
|
||||
<PageLayout>
|
||||
<Switch>
|
||||
<EnhancedRoute exact path={SERVER_PAGE.PLAYER_PAGE.INDEX_PAGE}>
|
||||
<Route exact path={SERVER_PAGE.PLAYER_PAGE.INDEX_PAGE}>
|
||||
<IndexPage />
|
||||
</EnhancedRoute>
|
||||
<EnhancedRoute exact path={SERVER_PAGE.PLAYER_PAGE.HISTORY_PAGE}>
|
||||
</Route>
|
||||
<Route exact path={SERVER_PAGE.PLAYER_PAGE.HISTORY_PAGE}>
|
||||
<HistoryPage />
|
||||
</EnhancedRoute>
|
||||
<EnhancedRoute exact path={SERVER_PAGE.PLAYER_PAGE.TRIBE_CHANGES_PAGE}>
|
||||
</Route>
|
||||
<Route exact path={SERVER_PAGE.PLAYER_PAGE.TRIBE_CHANGES_PAGE}>
|
||||
<TribeChangesPage />
|
||||
</EnhancedRoute>
|
||||
<EnhancedRoute exact path={SERVER_PAGE.PLAYER_PAGE.ENNOBLEMENTS_PAGE}>
|
||||
</Route>
|
||||
<Route exact path={SERVER_PAGE.PLAYER_PAGE.ENNOBLEMENTS_PAGE}>
|
||||
<EnnoblementsPage />
|
||||
</EnhancedRoute>
|
||||
</Route>
|
||||
<Route path="*">
|
||||
<NotFoundPage />
|
||||
<NotFoundPage wrapIntoServerPageLayout={false} />
|
||||
</Route>
|
||||
</Switch>
|
||||
</PageLayout>
|
||||
</PlayerProvider>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
@ -26,13 +26,16 @@ const useTabs = (t: TFunction) => {
|
|||
},
|
||||
];
|
||||
}, [t]);
|
||||
const currentTab = useMemo(
|
||||
() =>
|
||||
tabs.findIndex(({ to }) => {
|
||||
const currentTab = useMemo(() => {
|
||||
const currentTab = tabs.findIndex(({ to }) => {
|
||||
return matchPath(loc.pathname, { exact: true, path: to });
|
||||
}),
|
||||
[loc.pathname, tabs]
|
||||
);
|
||||
});
|
||||
return currentTab === -1
|
||||
? process.env.NODE_ENV === 'production'
|
||||
? -1
|
||||
: 0
|
||||
: currentTab;
|
||||
}, [loc.pathname, tabs]);
|
||||
return {
|
||||
tabs,
|
||||
currentTab,
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
@ -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,7 +31,6 @@ 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}>
|
||||
|
@ -48,9 +46,7 @@ function IndexPage() {
|
|||
},
|
||||
{
|
||||
field: 'points',
|
||||
value: `${formatNumber('commas', player.points)} (#${
|
||||
player.rank
|
||||
})`,
|
||||
value: `${formatNumber('commas', player.points)} (#${player.rank})`,
|
||||
},
|
||||
{
|
||||
field: 'totalVillages',
|
||||
|
@ -169,7 +165,6 @@ function IndexPage() {
|
|||
</Grid>
|
||||
</Grid>
|
||||
</Container>
|
||||
</PageLayout>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
@ -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',
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
@ -2,12 +2,14 @@ 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 (
|
||||
<PageLayout>
|
||||
<Switch>
|
||||
<Route path={SERVER_PAGE.RANKING_PAGE.PLAYER_PAGE.INDEX_PAGE}>
|
||||
<PlayerPage />
|
||||
|
@ -16,9 +18,10 @@ function RankingPage() {
|
|||
<TribePage />
|
||||
</Route>
|
||||
<Route path="*">
|
||||
<NotFoundPage />
|
||||
<NotFoundPage wrapIntoServerPageLayout={false} />
|
||||
</Route>
|
||||
</Switch>
|
||||
</PageLayout>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -42,13 +42,16 @@ const useTabs = (t: TFunction) => {
|
|||
},
|
||||
];
|
||||
}, [t]);
|
||||
const currentTab = useMemo(
|
||||
() =>
|
||||
tabs.findIndex(({ to }) => {
|
||||
const currentTab = useMemo(() => {
|
||||
const currentTab = tabs.findIndex(({ to }) => {
|
||||
return matchPath(loc.pathname, { exact: true, path: to });
|
||||
}),
|
||||
[loc.pathname, tabs]
|
||||
);
|
||||
});
|
||||
return currentTab === -1
|
||||
? process.env.NODE_ENV === 'production'
|
||||
? -1
|
||||
: 0
|
||||
: currentTab;
|
||||
}, [loc.pathname, tabs]);
|
||||
return {
|
||||
tabs,
|
||||
currentTab,
|
||||
|
|
|
@ -24,7 +24,7 @@ function PlayerPage() {
|
|||
<ArchivePage />
|
||||
</Route>
|
||||
<Route path="*">
|
||||
<NotFoundPage />
|
||||
<NotFoundPage wrapIntoServerPageLayout={false} />
|
||||
</Route>
|
||||
</Switch>
|
||||
);
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
@ -24,7 +24,7 @@ function TribePage() {
|
|||
<ArchivePage />
|
||||
</Route>
|
||||
<Route path="*">
|
||||
<NotFoundPage />
|
||||
<NotFoundPage wrapIntoServerPageLayout={false} />
|
||||
</Route>
|
||||
</Switch>
|
||||
);
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
@ -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 (
|
||||
<TribeProvider>
|
||||
<PageLayout>
|
||||
<Switch>
|
||||
<EnhancedRoute exact path={SERVER_PAGE.TRIBE_PAGE.INDEX_PAGE}>
|
||||
<Route exact path={SERVER_PAGE.TRIBE_PAGE.INDEX_PAGE}>
|
||||
<IndexPage />
|
||||
</EnhancedRoute>
|
||||
<EnhancedRoute exact path={SERVER_PAGE.TRIBE_PAGE.MEMBERS_PAGE}>
|
||||
</Route>
|
||||
<Route exact path={SERVER_PAGE.TRIBE_PAGE.MEMBERS_PAGE}>
|
||||
<MembersPage />
|
||||
</EnhancedRoute>
|
||||
<EnhancedRoute exact path={SERVER_PAGE.TRIBE_PAGE.HISTORY_PAGE}>
|
||||
</Route>
|
||||
<Route exact path={SERVER_PAGE.TRIBE_PAGE.HISTORY_PAGE}>
|
||||
<HistoryPage />
|
||||
</EnhancedRoute>
|
||||
<EnhancedRoute exact path={SERVER_PAGE.TRIBE_PAGE.TRIBE_CHANGES_PAGE}>
|
||||
</Route>
|
||||
<Route exact path={SERVER_PAGE.TRIBE_PAGE.TRIBE_CHANGES_PAGE}>
|
||||
<TribeChangesPage />
|
||||
</EnhancedRoute>
|
||||
<EnhancedRoute exact path={SERVER_PAGE.TRIBE_PAGE.ENNOBLEMENTS_PAGE}>
|
||||
</Route>
|
||||
<Route exact path={SERVER_PAGE.TRIBE_PAGE.ENNOBLEMENTS_PAGE}>
|
||||
<EnnoblementsPage />
|
||||
</EnhancedRoute>
|
||||
</Route>
|
||||
<Route path="*">
|
||||
<NotFoundPage />
|
||||
<NotFoundPage wrapIntoServerPageLayout={false} />
|
||||
</Route>
|
||||
</Switch>
|
||||
</PageLayout>
|
||||
</TribeProvider>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
@ -30,13 +30,16 @@ const useTabs = (t: TFunction) => {
|
|||
},
|
||||
];
|
||||
}, [t]);
|
||||
const currentTab = useMemo(
|
||||
() =>
|
||||
tabs.findIndex(({ to }) => {
|
||||
const currentTab = useMemo(() => {
|
||||
const currentTab = tabs.findIndex(({ to }) => {
|
||||
return matchPath(loc.pathname, { exact: true, path: to });
|
||||
}),
|
||||
[loc.pathname, tabs]
|
||||
);
|
||||
});
|
||||
return currentTab === -1
|
||||
? process.env.NODE_ENV === 'production'
|
||||
? -1
|
||||
: 0
|
||||
: currentTab;
|
||||
}, [loc.pathname, tabs]);
|
||||
return {
|
||||
tabs,
|
||||
currentTab,
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
@ -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,7 +27,6 @@ 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}>
|
||||
|
@ -131,7 +129,6 @@ function IndexPage() {
|
|||
})}
|
||||
</Grid>
|
||||
</Container>
|
||||
</PageLayout>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
@ -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',
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
Reference in New Issue
Block a user