global SearchPage - use ModeSelector instead of Tabs
This commit is contained in:
parent
57d07eeaf9
commit
66dc43b859
|
@ -13,8 +13,9 @@ import extractVersionCodeFromHostname from '@utils/extractVersionCodeFromHostnam
|
|||
import { SEARCH_PAGE } from '@config/namespaces';
|
||||
import { MODES, LIMIT } from './constants';
|
||||
|
||||
import { Container, Paper, Tabs, Tab } from '@material-ui/core';
|
||||
import { Container, Paper } from '@material-ui/core';
|
||||
import MainLayout from '@common/MainLayout/MainLayout';
|
||||
import ModeSelector from '@common/ModeSelector/ModeSelector';
|
||||
import PlayerTable from './components/PlayerTable/PlayerTable';
|
||||
import TribeTable from './components/TribeTable/TribeTable';
|
||||
|
||||
|
@ -34,14 +35,6 @@ function SearchPage() {
|
|||
[query.q, query.mode, query.page, limit],
|
||||
{ behavior: 'auto', block: 'start' }
|
||||
);
|
||||
const currentTab = Object.values(MODES).findIndex(m => query.mode === m);
|
||||
|
||||
const handleTabChange = (_e: React.ChangeEvent<{}>, newTab: number) => {
|
||||
const newMode = Object.values(MODES)[newTab];
|
||||
if (newMode !== query.mode) {
|
||||
setQuery({ mode: Object.values(MODES)[newTab], page: 0, limit: LIMIT });
|
||||
}
|
||||
};
|
||||
|
||||
const handlePageChange = (page: number) => {
|
||||
setQuery({ page });
|
||||
|
@ -67,10 +60,28 @@ function SearchPage() {
|
|||
>
|
||||
<Container>
|
||||
<Paper>
|
||||
<Tabs centered value={currentTab} onChange={handleTabChange}>
|
||||
<Tab label={t('modes.player')} />
|
||||
<Tab label={t('modes.tribe')} />
|
||||
</Tabs>
|
||||
<ModeSelector
|
||||
buttonProps={{
|
||||
variant: 'outlined',
|
||||
}}
|
||||
onSelect={m => setQuery({ mode: m.name, page: 0, limit: LIMIT })}
|
||||
modes={[
|
||||
{
|
||||
name: 'player',
|
||||
label: t('modes.player'),
|
||||
get selected() {
|
||||
return this.name === query.mode;
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'tribe',
|
||||
label: t('modes.tribe'),
|
||||
get selected() {
|
||||
return this.name === query.mode;
|
||||
},
|
||||
},
|
||||
]}
|
||||
/>
|
||||
{query.mode === MODES.TRIBE ? (
|
||||
<TribeTable {...tableProps} />
|
||||
) : (
|
||||
|
|
|
@ -7,7 +7,7 @@ import { SERVER_PAGE } from '@config/namespaces';
|
|||
|
||||
import { Container, Paper } from '@material-ui/core';
|
||||
import ServerPageLayout from '@features/ServerPage/common/PageLayout/PageLayout';
|
||||
import ModeSelector from '@features/ServerPage/common/ModeSelector/ModeSelector';
|
||||
import ModeSelector from '@common/ModeSelector/ModeSelector';
|
||||
import LiveEnnoblements from './components/LiveEnnoblements/LiveEnnoblements';
|
||||
import LatestSavedEnnoblements from './components/LatestSavedEnnoblements/LatestSavedEnnoblements';
|
||||
|
||||
|
|
|
@ -10,7 +10,7 @@ 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 ModeSelector from '@features/ServerPage/common/ModeSelector/ModeSelector';
|
||||
import ModeSelector from '@common/ModeSelector/ModeSelector';
|
||||
import Paper from '../Paper/Paper';
|
||||
|
||||
import { TFunction } from 'i18next';
|
||||
|
|
|
@ -9,7 +9,7 @@ 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 ModeSelector from '@features/ServerPage/common/ModeSelector/ModeSelector';
|
||||
import ModeSelector from '@common/ModeSelector/ModeSelector';
|
||||
import Paper from '../Paper/Paper';
|
||||
|
||||
import { TFunction } from 'i18next';
|
||||
|
|
|
@ -11,7 +11,7 @@ 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 ModeSelector from '@features/ServerPage/common/ModeSelector/ModeSelector';
|
||||
import ModeSelector from '@common/ModeSelector/ModeSelector';
|
||||
import Paper from '../Paper/Paper';
|
||||
|
||||
import { TFunction } from 'i18next';
|
||||
|
|
|
@ -10,7 +10,7 @@ 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 ModeSelector from '@features/ServerPage/common/ModeSelector/ModeSelector';
|
||||
import ModeSelector from '@common/ModeSelector/ModeSelector';
|
||||
import Paper from '../Paper/Paper';
|
||||
|
||||
import { TFunction } from 'i18next';
|
||||
|
|
|
@ -7,7 +7,7 @@ import { LIMIT } from './constants';
|
|||
import { useTheme } from '@material-ui/core/styles';
|
||||
import { Paper, useMediaQuery } from '@material-ui/core';
|
||||
import LineChart from '@common/Chart/LineChart';
|
||||
import ModeSelector from '@features/ServerPage/common/ModeSelector/ModeSelector';
|
||||
import ModeSelector from '@common/ModeSelector/ModeSelector';
|
||||
|
||||
import { TFunction } from 'i18next';
|
||||
import { Serie } from '@nivo/line';
|
||||
|
|
|
@ -7,7 +7,7 @@ import { LIMIT } from './constants';
|
|||
import { useTheme } from '@material-ui/core/styles';
|
||||
import { Paper, useMediaQuery } from '@material-ui/core';
|
||||
import LineChart from '@common/Chart/LineChart';
|
||||
import ModeSelector from '@features/ServerPage/common/ModeSelector/ModeSelector';
|
||||
import ModeSelector from '@common/ModeSelector/ModeSelector';
|
||||
|
||||
import { TFunction } from 'i18next';
|
||||
import { Serie } from '@nivo/line';
|
||||
|
|
|
@ -9,7 +9,7 @@ import { Paper } from '@material-ui/core';
|
|||
import Table from '@common/Table/Table';
|
||||
import { Column } from '@common/Table/types';
|
||||
import PlayerProfileLink from '@features/ServerPage/common/PlayerProfileLink/PlayerProfileLink';
|
||||
import ModeSelector from '@features/ServerPage/common/ModeSelector/ModeSelector';
|
||||
import ModeSelector from '@common/ModeSelector/ModeSelector';
|
||||
import ColouredNumber from './ColouredNumber';
|
||||
|
||||
import { TFunction } from 'i18next';
|
||||
|
|
|
@ -26,7 +26,7 @@ const translations = {
|
|||
noOptions: 'Brak opcji',
|
||||
infoWhileGenerating: 'To może potrwać chwilę!',
|
||||
infoAfterGenerating:
|
||||
'Możesz użyć tego linka by prowadzić edycję mapy w przyszłości, lub by przesłać ją do innych graczy:',
|
||||
'Możesz użyć tego linka by prowadzić edycję mapy w przyszłości, lub by przesłać ją do innych graczy',
|
||||
};
|
||||
|
||||
export default translations;
|
||||
|
|
Reference in New Issue
Block a user