global SearchPage - use ModeSelector instead of Tabs

This commit is contained in:
Dawid Wysokiński 2020-12-27 14:57:00 +01:00
parent 57d07eeaf9
commit 66dc43b859
11 changed files with 33 additions and 22 deletions

View File

@ -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} />
) : (

View File

@ -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';

View File

@ -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';

View File

@ -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';

View File

@ -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';

View File

@ -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';

View File

@ -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';

View File

@ -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';

View File

@ -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';

View File

@ -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;