From 6288c540578d5c24d4e45e093e5ceafd88e7a622 Mon Sep 17 00:00:00 2001 From: Kichiyaki Date: Tue, 5 Jan 2021 21:43:39 +0100 Subject: [PATCH 1/2] delete formatDistanceToNow (it's useless right now), add ServerTable (SearchPage) --- src/features/SearchPage/SearchPage.tsx | 45 +++++++---- .../components/ServerTable/ServerTable.tsx | 76 +++++++++++++++++++ .../components/ServerTable/constants.ts | 39 ++++++++++ .../components/ServerTable/queries.ts | 21 +++++ .../components/ServerTable/types.ts | 14 ++++ .../components/ServerTable/useServers.ts | 41 ++++++++++ src/features/SearchPage/constants.ts | 3 +- src/libs/date/formatDistanceToNow.ts | 17 ----- 8 files changed, 223 insertions(+), 33 deletions(-) create mode 100644 src/features/SearchPage/components/ServerTable/ServerTable.tsx create mode 100644 src/features/SearchPage/components/ServerTable/constants.ts create mode 100644 src/features/SearchPage/components/ServerTable/queries.ts create mode 100644 src/features/SearchPage/components/ServerTable/types.ts create mode 100644 src/features/SearchPage/components/ServerTable/useServers.ts delete mode 100644 src/libs/date/formatDistanceToNow.ts diff --git a/src/features/SearchPage/SearchPage.tsx b/src/features/SearchPage/SearchPage.tsx index 7b2101e..4302605 100644 --- a/src/features/SearchPage/SearchPage.tsx +++ b/src/features/SearchPage/SearchPage.tsx @@ -11,17 +11,18 @@ import useTitle from '@libs/useTitle'; import useScrollToElement from '@libs/useScrollToElement'; import { validateRowsPerPage } from '@common/Table/helpers'; import { SEARCH_PAGE } from '@config/namespaces'; -import { MODES, LIMIT } from './constants'; +import { MODE, LIMIT } from './constants'; import { Container, Paper } from '@material-ui/core'; import ModeSelector from '@common/ModeSelector/ModeSelector'; import PlayerTable from './components/PlayerTable/PlayerTable'; import TribeTable from './components/TribeTable/TribeTable'; +import ServerTable from './components/ServerTable/ServerTable'; function SearchPage() { const [query, setQuery] = useQueryParams({ q: withDefault(StringParam, ''), - mode: withDefault(StringParam, MODES.PLAYER), + mode: withDefault(StringParam, MODE.PLAYER), page: withDefault(NumberParam, 0), limit: withDefault(NumberParam, LIMIT), }); @@ -43,14 +44,25 @@ function SearchPage() { setQuery({ limit: rowsPerPage, page: 0 }); }; - const tableProps = { - t: t, - q: query.q, - limit: limit, - page: query.page, - version: version.code, - onChangePage: handlePageChange, - onChangeRowsPerPage: handleRowsPerPageChange, + const getTable = () => { + const tableProps = { + t: t, + q: query.q, + limit: limit, + page: query.page, + version: version.code, + onChangePage: handlePageChange, + onChangeRowsPerPage: handleRowsPerPageChange, + }; + + switch (query.mode.toLowerCase()) { + case MODE.TRIBE: + return ; + case MODE.SERVER: + return ; + default: + return ; + } }; return ( @@ -74,13 +86,16 @@ function SearchPage() { return this.name === query.mode; }, }, + { + name: 'server', + label: t('modes.server'), + get selected() { + return this.name === query.mode; + }, + }, ]} /> - {query.mode === MODES.TRIBE ? ( - - ) : ( - - )} + {getTable()} ); diff --git a/src/features/SearchPage/components/ServerTable/ServerTable.tsx b/src/features/SearchPage/components/ServerTable/ServerTable.tsx new file mode 100644 index 0000000..7c1217d --- /dev/null +++ b/src/features/SearchPage/components/ServerTable/ServerTable.tsx @@ -0,0 +1,76 @@ +import React from 'react'; +import useServers from './useServers'; +import * as NAMESPACES from '@config/namespaces'; +import * as ROUTES from '@config/routes'; +import { COLUMNS } from './constants'; + +import Table from '@common/Table/Table'; +import Link from '@common/Link/Link'; +import { Props as TableFooterProps } from '@common/Table/TableFooter'; + +import { TFunction } from 'i18next'; +import { Server } from './types'; + +export interface Props { + t: TFunction; + page: number; + limit: number; + q: string; + onChangePage: TableFooterProps['onChangePage']; + onChangeRowsPerPage: TableFooterProps['onChangeRowsPerPage']; +} + +function ServerTable({ + t, + q, + limit, + page, + onChangePage, + onChangeRowsPerPage, +}: Props) { + const { servers, total, loading } = useServers(page, limit, q); + + return ( + { + const newCol = { + ...column, + label: column.label ? t(column.label) : '', + }; + switch (index) { + case 0: + newCol.valueFormatter = (server: Server) => ( + + {t(`${NAMESPACES.COMMON}:serverStatus.` + server.status)} + + ); + break; + case 1: + newCol.valueFormatter = (server: Server) => ( + + {server.key} + + ); + break; + } + return newCol; + })} + loading={loading} + data={servers} + size="small" + idFieldName="key" + footerProps={{ + page, + rowsPerPage: limit, + count: total, + onChangePage, + onChangeRowsPerPage, + }} + /> + ); +} + +export default ServerTable; diff --git a/src/features/SearchPage/components/ServerTable/constants.ts b/src/features/SearchPage/components/ServerTable/constants.ts new file mode 100644 index 0000000..dac3de3 --- /dev/null +++ b/src/features/SearchPage/components/ServerTable/constants.ts @@ -0,0 +1,39 @@ +import formatNumber from '@utils/formatNumber'; +import { Column } from '@common/Table/types'; +import { Server } from './types'; + +export const COLUMNS: Column[] = [ + { + field: 'status', + label: 'serverTable.columns.status', + sortable: false, + }, + { + field: 'key', + label: 'serverTable.columns.key', + sortable: false, + }, + { + field: 'numberOfPlayers', + label: 'serverTable.columns.numberOfPlayers', + sortable: false, + valueFormatter: (server: Server) => + formatNumber('commas', server.numberOfPlayers), + }, + { + field: 'numberOfTribes', + label: 'serverTable.columns.numberOfTribes', + sortable: false, + valueFormatter: (server: Server) => + formatNumber('commas', server.numberOfTribes), + }, + { + field: 'numberOfVillages', + label: 'serverTable.columns.numberOfVillages', + sortable: false, + valueFormatter: (server: Server) => + formatNumber('commas', server.numberOfVillages), + }, +]; + +export const LIMIT = 25; diff --git a/src/features/SearchPage/components/ServerTable/queries.ts b/src/features/SearchPage/components/ServerTable/queries.ts new file mode 100644 index 0000000..c30f325 --- /dev/null +++ b/src/features/SearchPage/components/ServerTable/queries.ts @@ -0,0 +1,21 @@ +import { gql } from '@apollo/client'; + +export const SERVERS = gql` + query servers( + $filter: ServerFilter + $sort: [String!] + $limit: Int + $offset: Int + ) { + servers(filter: $filter, sort: $sort, limit: $limit, offset: $offset) { + items { + key + status + numberOfPlayers + numberOfTribes + numberOfVillages + } + total + } + } +`; diff --git a/src/features/SearchPage/components/ServerTable/types.ts b/src/features/SearchPage/components/ServerTable/types.ts new file mode 100644 index 0000000..86f9a0d --- /dev/null +++ b/src/features/SearchPage/components/ServerTable/types.ts @@ -0,0 +1,14 @@ +import { List } from '@libs/graphql/types'; +import { ServerStatus } from '@config/app'; + +export type Server = { + key: string; + status: ServerStatus; + numberOfPlayers: number; + numberOfTribes: number; + numberOfVillages: number; +}; + +export type ServerList = { + servers?: List; +}; diff --git a/src/features/SearchPage/components/ServerTable/useServers.ts b/src/features/SearchPage/components/ServerTable/useServers.ts new file mode 100644 index 0000000..7bb7999 --- /dev/null +++ b/src/features/SearchPage/components/ServerTable/useServers.ts @@ -0,0 +1,41 @@ +import { useQuery } from '@apollo/client'; +import { SERVERS } from './queries'; + +import { ServersQueryVariables } from '@libs/graphql/types'; +import { Server, ServerList } from './types'; + +export type QueryResult = { + servers: Server[]; + loading: boolean; + total: number; +}; + +const useServers = (page: number, limit: number, q: string): QueryResult => { + const skip = q.trim() === ''; + const { loading: loadingServers, data } = useQuery< + ServerList, + ServersQueryVariables + >(SERVERS, { + fetchPolicy: 'cache-and-network', + variables: { + limit, + offset: page * limit, + sort: ['status DESC', 'key ASC'], + filter: { + keyIEQ: '%' + q + '%', + }, + }, + skip, + }); + const servers = data?.servers?.items ?? []; + const loading = loadingServers && servers.length === 0 && !skip; + const total = data?.servers?.total ?? 0; + + return { + servers, + loading, + total, + }; +}; + +export default useServers; diff --git a/src/features/SearchPage/constants.ts b/src/features/SearchPage/constants.ts index 8fc95ac..c49e4f2 100644 --- a/src/features/SearchPage/constants.ts +++ b/src/features/SearchPage/constants.ts @@ -1,6 +1,7 @@ -export const MODES = { +export const MODE = { PLAYER: 'player', TRIBE: 'tribe', + SERVER: 'server', }; export const LIMIT = 25; diff --git a/src/libs/date/formatDistanceToNow.ts b/src/libs/date/formatDistanceToNow.ts deleted file mode 100644 index d341c0a..0000000 --- a/src/libs/date/formatDistanceToNow.ts +++ /dev/null @@ -1,17 +0,0 @@ -import { formatDistanceToNow } from 'date-fns'; -import locales, { Locale } from './locales'; - -export type Options = { - includeSeconds?: boolean; - addSuffix?: boolean; - locale: Locale; -}; - -const _formatDistanceToNow = (date: Date | number, opts: Options) => { - return formatDistanceToNow(date, { - ...opts, - locale: locales[opts.locale] ?? locales.en, - }); -}; - -export default _formatDistanceToNow; From 52fbbc1bfda0cc11654c634c90811a887ea5db02 Mon Sep 17 00:00:00 2001 From: Kichiyaki Date: Tue, 5 Jan 2021 21:52:24 +0100 Subject: [PATCH 2/2] [SearchPage - Server Mode] add pl and en translations --- .../SearchPage/components/ServerTable/constants.ts | 4 ++-- src/libs/i18n/en/search-page.ts | 10 ++++++++++ src/libs/i18n/pl/search-page.ts | 10 ++++++++++ src/libs/i18n/pt/search-page.ts | 10 ++++++++++ src/libs/i18n/pt_br/search-page.ts | 10 ++++++++++ 5 files changed, 42 insertions(+), 2 deletions(-) diff --git a/src/features/SearchPage/components/ServerTable/constants.ts b/src/features/SearchPage/components/ServerTable/constants.ts index dac3de3..05b93a9 100644 --- a/src/features/SearchPage/components/ServerTable/constants.ts +++ b/src/features/SearchPage/components/ServerTable/constants.ts @@ -9,8 +9,8 @@ export const COLUMNS: Column[] = [ sortable: false, }, { - field: 'key', - label: 'serverTable.columns.key', + field: 'server', + label: 'serverTable.columns.server', sortable: false, }, { diff --git a/src/libs/i18n/en/search-page.ts b/src/libs/i18n/en/search-page.ts index b536455..0e864d9 100644 --- a/src/libs/i18n/en/search-page.ts +++ b/src/libs/i18n/en/search-page.ts @@ -3,6 +3,7 @@ const translations = { modes: { player: 'Player', tribe: 'Tribe', + server: 'Server', }, playerTable: { columns: { @@ -22,6 +23,15 @@ const translations = { mostVillages: 'Most villages', }, }, + serverTable: { + columns: { + status: 'Status', + server: 'Server', + numberOfPlayers: 'Number of players', + numberOfTribes: 'Number of tribes', + numberOfVillages: 'Number of villages', + }, + }, }; export default translations; diff --git a/src/libs/i18n/pl/search-page.ts b/src/libs/i18n/pl/search-page.ts index 6c62dc8..506fae4 100644 --- a/src/libs/i18n/pl/search-page.ts +++ b/src/libs/i18n/pl/search-page.ts @@ -3,6 +3,7 @@ const translations = { modes: { player: 'Gracz', tribe: 'Plemię', + server: 'Serwer', }, playerTable: { columns: { @@ -22,6 +23,15 @@ const translations = { mostVillages: 'Najwięcej wiosek', }, }, + serverTable: { + columns: { + status: 'Status', + server: 'Serwer', + numberOfPlayers: 'Liczba graczy', + numberOfTribes: 'Liczba plemion', + numberOfVillages: 'Liczba wiosek', + }, + }, }; export default translations; diff --git a/src/libs/i18n/pt/search-page.ts b/src/libs/i18n/pt/search-page.ts index 7ee5a43..3ea5430 100644 --- a/src/libs/i18n/pt/search-page.ts +++ b/src/libs/i18n/pt/search-page.ts @@ -3,6 +3,7 @@ const translations = { modes: { player: 'Jogador', tribe: 'Tribo', + server: 'Servidor', }, playerTable: { columns: { @@ -22,6 +23,15 @@ const translations = { mostVillages: 'Mais aldeias', }, }, + serverTable: { + columns: { + status: 'Status', + server: 'Servidor', + numberOfPlayers: 'Number of players', + numberOfTribes: 'Number of tribes', + numberOfVillages: 'Number of villages', + }, + }, }; export default translations; diff --git a/src/libs/i18n/pt_br/search-page.ts b/src/libs/i18n/pt_br/search-page.ts index 0b46398..28bcc0f 100644 --- a/src/libs/i18n/pt_br/search-page.ts +++ b/src/libs/i18n/pt_br/search-page.ts @@ -1,6 +1,7 @@ const translations = { title: 'Pesquisa - {{query}}', modes: { + server: 'Servidor', player: 'Jogador', tribe: 'Tribo', }, @@ -22,6 +23,15 @@ const translations = { mostVillages: 'Maior quantidade de aldeias', }, }, + serverTable: { + columns: { + status: 'Status', + server: 'Servidor', + numberOfPlayers: 'Number of players', + numberOfTribes: 'Number of tribes', + numberOfVillages: 'Number of villages', + }, + }, }; export default translations;