From 88eb65ff651aa32a9457cace68b29835091b9f90 Mon Sep 17 00:00:00 2001 From: Kichiyaki Date: Fri, 13 Nov 2020 14:21:28 +0100 Subject: [PATCH] add Table --- package.json | 1 + src/common/Table/Table.tsx | 94 +++ src/common/Table/TableEmpty.tsx | 15 + src/common/Table/TableFooter.tsx | 62 ++ src/common/Table/TableHead.tsx | 90 +++ src/common/Table/TableLoading.tsx | 22 + src/common/Table/TableRow.tsx | 84 +++ src/common/Table/types.ts | 16 + .../VersionSelector/VersionSelector.tsx | 22 +- .../ServerSelection/ServerSelection.tsx | 6 +- src/features/ServerPage/ServerPage.tsx | 15 +- .../common/PageLayout/PageLayout.tsx | 35 +- .../features/IndexPage/IndexPage.tsx | 577 +----------------- .../RecentlyDeletedPlayers.tsx | 49 ++ .../RecentlyDeletedPlayers/constants.ts | 24 + .../RecentlyDeletedPlayers/queries.ts | 14 + .../RecentlyDeletedPlayers/types.ts | 12 + .../libs/ServerContext/Provider.tsx | 6 +- src/libs/graphql/types.ts | 38 ++ src/libs/i18n/en/table.ts | 11 + src/libs/useTitle.ts | 2 +- src/utils/isObjKey.ts | 3 + yarn.lock | 5 + 23 files changed, 600 insertions(+), 603 deletions(-) create mode 100644 src/common/Table/Table.tsx create mode 100644 src/common/Table/TableEmpty.tsx create mode 100644 src/common/Table/TableFooter.tsx create mode 100644 src/common/Table/TableHead.tsx create mode 100644 src/common/Table/TableLoading.tsx create mode 100644 src/common/Table/TableRow.tsx create mode 100644 src/common/Table/types.ts create mode 100644 src/features/ServerPage/features/IndexPage/components/RecentlyDeletedPlayers/RecentlyDeletedPlayers.tsx create mode 100644 src/features/ServerPage/features/IndexPage/components/RecentlyDeletedPlayers/constants.ts create mode 100644 src/features/ServerPage/features/IndexPage/components/RecentlyDeletedPlayers/queries.ts create mode 100644 src/features/ServerPage/features/IndexPage/components/RecentlyDeletedPlayers/types.ts create mode 100644 src/libs/i18n/en/table.ts create mode 100644 src/utils/isObjKey.ts diff --git a/package.json b/package.json index 0925b8c..432cd65 100644 --- a/package.json +++ b/package.json @@ -56,6 +56,7 @@ ] }, "devDependencies": { + "@types/lodash": "^4.14.165", "@types/react-router-dom": "^5.1.6", "babel-plugin-module-resolver": "^4.0.0", "babel-plugin-transform-imports": "^2.0.0", diff --git a/src/common/Table/Table.tsx b/src/common/Table/Table.tsx new file mode 100644 index 0000000..1cc902b --- /dev/null +++ b/src/common/Table/Table.tsx @@ -0,0 +1,94 @@ +import React from 'react'; +import isObjKey from '@utils/isObjKey'; +import { Action, Column, OrderDirection } from './types'; + +import { + Table as MUITable, + TableBody, + TableProps, + TableBodyProps, +} from '@material-ui/core'; +import TableHead from './TableHead'; +import TableRow from './TableRow'; +import TableLoading from './TableLoading'; +import TableEmpty from './TableEmpty'; +import TableFooter, { Props as TableFooterProps } from './TableFooter'; + +export interface Props { + columns: Column[]; + actions?: Action[]; + data: T[]; + orderBy?: string; + orderDirection?: OrderDirection; + selection?: boolean; + idFieldName?: string; + onRequestSort?: ( + property: string, + orderDirection: OrderDirection + ) => void | Promise; + onSelect?: (rows: T[]) => void; + loading?: boolean; + tableProps?: TableProps; + tableBodyProps?: TableBodyProps; + footerProps?: TableFooterProps; + hideFooter?: boolean; +} + +function Table({ + columns, + data, + orderBy = '', + orderDirection = 'asc', + onRequestSort, + idFieldName = 'id', + selection = false, + loading = false, + actions = [], + tableBodyProps = {}, + tableProps = {}, + hideFooter = false, + footerProps, +}: Props) { + return ( + + + + {loading ? ( + + ) : data.length > 0 ? ( + data.map((item, index) => { + return ( + + ); + }) + ) : ( + + )} + + {!hideFooter && ( + + )} + + ); +} + +export default Table; diff --git a/src/common/Table/TableEmpty.tsx b/src/common/Table/TableEmpty.tsx new file mode 100644 index 0000000..275ece3 --- /dev/null +++ b/src/common/Table/TableEmpty.tsx @@ -0,0 +1,15 @@ +import React from 'react'; + +import { TableRow, TableCell, Typography } from '@material-ui/core'; + +function TableEmpty() { + return ( + + + No records to display + + + ); +} + +export default TableEmpty; diff --git a/src/common/Table/TableFooter.tsx b/src/common/Table/TableFooter.tsx new file mode 100644 index 0000000..31d186f --- /dev/null +++ b/src/common/Table/TableFooter.tsx @@ -0,0 +1,62 @@ +import React from 'react'; + +import { + TablePagination, + TableRow, + TableFooter as MUITableFooter, +} from '@material-ui/core'; + +export interface Props { + page?: number; + count?: number; + onChangePage?: (page: number) => void; + rowsPerPage?: number; + onChangeRowsPerPage?: (limit: number) => void; + rowsPerPageOptions?: Array; + size?: 'small' | 'medium'; +} + +function TableFooter({ + onChangePage, + page = 0, + count = 0, + onChangeRowsPerPage, + rowsPerPageOptions = [25, 50, 100], + rowsPerPage = 50, + size = 'small', +}: Props) { + const handlePageChange = ( + event: React.MouseEvent | null, + page: number + ) => { + if (onChangePage) { + onChangePage(page); + } + }; + const handleRowsPerPageChange = ( + e: React.ChangeEvent + ) => { + if (onChangeRowsPerPage) { + onChangeRowsPerPage(parseInt(e.target.value)); + } + }; + + return ( + + + + + + ); +} + +export default TableFooter; diff --git a/src/common/Table/TableHead.tsx b/src/common/Table/TableHead.tsx new file mode 100644 index 0000000..6158680 --- /dev/null +++ b/src/common/Table/TableHead.tsx @@ -0,0 +1,90 @@ +import React from 'react'; +import { Column, OrderDirection } from './types'; + +import { + TableHead as MUITableHead, + TableRow, + TableCell, + TableSortLabel, + Checkbox, + SortDirection, +} from '@material-ui/core'; + +export interface Props { + columns: Column[]; + selection: boolean; + onSelectAll?: () => void; + allSelected: boolean; + orderDirection: OrderDirection; + orderBy: string; + onRequestSort?: ( + property: string, + orderDirection: OrderDirection + ) => void | Promise; +} + +function TableHead({ + columns, + onSelectAll, + orderBy = '', + orderDirection = 'asc', + selection = false, + allSelected = false, + onRequestSort, +}: Props) { + const createSortHandler = (property: string) => () => { + if (onRequestSort) { + if (property === orderBy) { + onRequestSort(property, orderDirection === 'asc' ? 'desc' : 'asc'); + } else { + onRequestSort(property, 'asc'); + } + } + }; + + const handleSelectAll = () => { + if (onSelectAll) { + onSelectAll(); + } + }; + + return ( + + + {selection && ( + + + + )} + {columns.map(col => { + return ( + + {col.sortable ? ( + + {col.label ?? col.field} + + ) : ( + col.label ?? col.field + )} + + ); + })} + + + ); +} + +export default TableHead; diff --git a/src/common/Table/TableLoading.tsx b/src/common/Table/TableLoading.tsx new file mode 100644 index 0000000..d8f762d --- /dev/null +++ b/src/common/Table/TableLoading.tsx @@ -0,0 +1,22 @@ +import React from 'react'; + +import { TableRow, CircularProgress, Box, TableCell } from '@material-ui/core'; + +function TableLoading() { + return ( + + + + + + + + ); +} + +export default TableLoading; diff --git a/src/common/Table/TableRow.tsx b/src/common/Table/TableRow.tsx new file mode 100644 index 0000000..440110f --- /dev/null +++ b/src/common/Table/TableRow.tsx @@ -0,0 +1,84 @@ +import React from 'react'; +import { get, isString, isNumber } from 'lodash'; +import { format } from 'date-fns'; +import { Action, Column } from './types'; + +import { TableRow, TableCell, Checkbox, Tooltip } from '@material-ui/core'; + +export type Props = { + actions: Action[]; + columns: Column[]; + row: T; + selection: boolean; + selected: boolean; + onSelect?: (row: T) => void; +}; + +function EnhancedTableRow({ + actions, + columns, + row, + selection = false, + selected = false, + onSelect, +}: Props) { + const handleSelect = () => { + if (onSelect) { + onSelect(row); + } + }; + + const formatValue = ( + v: string | number, + type: 'datetime' | 'date' | 'normal' + ) => { + if ((isString(v) || isNumber(v)) && type === 'date') { + return format(new Date(v), 'yyyy-MM-dd'); + } + if ((isString(v) || isNumber(v)) && type === 'datetime') { + return format(new Date(v), 'yyyy-MM-dd HH:mm:ss'); + } + return v; + }; + + return ( + + {selection && ( + + + + )} + {columns.map(col => { + const val = get(row, col.field, ''); + return ( + + {col.valueFormatter + ? col.valueFormatter(val) + : col.type + ? formatValue(val, col.type) + : val} + + ); + })} + {actions.length > 0 && ( + + {actions.map((action, index) => + action.tooltip ? ( + +
{action.icon}
+ + ) : ( +
{action.icon}
+ ) + )} + + )} + + ); +} + +export default EnhancedTableRow; diff --git a/src/common/Table/types.ts b/src/common/Table/types.ts new file mode 100644 index 0000000..3780bd4 --- /dev/null +++ b/src/common/Table/types.ts @@ -0,0 +1,16 @@ +export type Action = { + icon: React.ReactNode; + tooltip?: string; +}; + +export type Column = { + field: string; + label?: string; + sortable?: boolean; + valueFormatter?: (v: boolean | string | number) => boolean | string | number; + disablePadding?: boolean; + type?: 'normal' | 'datetime' | 'date'; + align?: 'left' | 'right' | 'center'; +}; + +export type OrderDirection = 'asc' | 'desc'; diff --git a/src/common/VersionSelector/VersionSelector.tsx b/src/common/VersionSelector/VersionSelector.tsx index 0d7c7ca..3d5711e 100644 --- a/src/common/VersionSelector/VersionSelector.tsx +++ b/src/common/VersionSelector/VersionSelector.tsx @@ -3,8 +3,9 @@ import { useQuery } from '@apollo/client'; import { useTranslation } from 'react-i18next'; import { COMMON } from '@config/namespaces'; import { VERSIONS } from './queries'; -import { VersionList } from './types'; import extractVersionCodeFromHostname from '@utils/extractVersionCodeFromHostname'; +import { VersionsQueryVariables } from '@libs/graphql/types'; +import { VersionList } from './types'; import { Button, Menu, MenuItem, Link, Tooltip } from '@material-ui/core'; import { Language as LanguageIcon } from '@material-ui/icons'; @@ -13,15 +14,18 @@ function VersionSelector() { const [anchorEl, setAnchorEl] = useState(null); const { t } = useTranslation(COMMON); const versionCode = extractVersionCodeFromHostname(window.location.hostname); - const { data, loading } = useQuery(VERSIONS, { - fetchPolicy: 'cache-first', - variables: { - filter: { - sort: 'code ASC', - codeNEQ: [versionCode], + const { data, loading } = useQuery( + VERSIONS, + { + fetchPolicy: 'cache-first', + variables: { + filter: { + sort: 'code ASC', + codeNEQ: [versionCode], + }, }, - }, - }); + } + ); const versions = data?.versions?.items ?? []; const handleClick = ( diff --git a/src/features/IndexPage/components/ServerSelection/ServerSelection.tsx b/src/features/IndexPage/components/ServerSelection/ServerSelection.tsx index fa699ec..d2ce41b 100644 --- a/src/features/IndexPage/components/ServerSelection/ServerSelection.tsx +++ b/src/features/IndexPage/components/ServerSelection/ServerSelection.tsx @@ -11,6 +11,7 @@ import { generatePath } from 'react-router'; import * as ROUTES from '@config/routes'; import * as NAMESPACES from '@config/namespaces'; import { SERVER_STATUS } from '@config/app'; +import { ServersQueryVariables } from '@libs/graphql/types'; import { ServerList } from './types'; import { SERVERS } from './queries'; import extractVersionCodeFromHostname from '@utils/extractVersionCodeFromHostname'; @@ -39,7 +40,10 @@ export default function ServerSelection() { q: withDefault(StringParam, ''), }); const { t } = useTranslation(NAMESPACES.INDEX_PAGE); - const { data, loading: loadingServers } = useQuery(SERVERS, { + const { data, loading: loadingServers } = useQuery< + ServerList, + ServersQueryVariables + >(SERVERS, { fetchPolicy: 'cache-and-network', variables: { filter: { diff --git a/src/features/ServerPage/ServerPage.tsx b/src/features/ServerPage/ServerPage.tsx index a14155e..00778d7 100644 --- a/src/features/ServerPage/ServerPage.tsx +++ b/src/features/ServerPage/ServerPage.tsx @@ -1,16 +1,25 @@ import React from 'react'; import { SERVER_PAGE } from '@config/routes'; -import { Switch, Route } from 'react-router-dom'; +import { Switch, Route, RouteProps } from 'react-router-dom'; +import ServerProvider from '@features/ServerPage/libs/ServerContext/Provider'; import IndexPage from './features/IndexPage/IndexPage'; import NotFoundPage from '../NotFoundPage/NotFoundPage'; +const EnhancedRoute = ({ children, ...rest }: RouteProps) => { + return ( + + {children} + + ); +}; + function ServerPage() { return ( - + - + diff --git a/src/features/ServerPage/common/PageLayout/PageLayout.tsx b/src/features/ServerPage/common/PageLayout/PageLayout.tsx index dcf7497..8690915 100644 --- a/src/features/ServerPage/common/PageLayout/PageLayout.tsx +++ b/src/features/ServerPage/common/PageLayout/PageLayout.tsx @@ -7,7 +7,6 @@ import { DRAWER_WIDTH } from './components/Sidebar/contants'; import { makeStyles, useTheme } from '@material-ui/core/styles'; import { useMediaQuery, Toolbar } from '@material-ui/core'; -import ServerProvider from '@features/ServerPage/libs/ServerContext/Provider'; import Sidebar from './components/Sidebar/Sidebar'; import TopBar from './components/TopBar/TopBar'; @@ -51,24 +50,22 @@ function PageLayout({ children }: Props) { }; return ( - -
- - - -
{children}
-
- +
+ + + +
{children}
+
); } diff --git a/src/features/ServerPage/features/IndexPage/IndexPage.tsx b/src/features/ServerPage/features/IndexPage/IndexPage.tsx index 294e486..d78b85b 100644 --- a/src/features/ServerPage/features/IndexPage/IndexPage.tsx +++ b/src/features/ServerPage/features/IndexPage/IndexPage.tsx @@ -1,578 +1,17 @@ import React from 'react'; +import useServer from '../../libs/ServerContext/useServer'; + +import { Container } from '@material-ui/core'; import PageLayout from '@features/ServerPage/common/PageLayout/PageLayout'; +import RecentlyDeletedPlayers from './components/RecentlyDeletedPlayers/RecentlyDeletedPlayers'; function IndexPage() { + const { key } = useServer(); return ( -

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque vel, - sequi laborum fugit et libero facilis officiis, fuga dolorem iste ea in - iusto at, repellendus facere. Facilis voluptatibus error illum? Lorem - ipsum dolor sit amet consectetur, adipisicing elit. Officiis eveniet, - facilis aut neque, aliquam ullam amet consequuntur numquam asperiores - ducimus ab, explicabo iure? Aliquid numquam ab excepturi facere dolores - illum. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fugit, - quae consequuntur? Unde dicta, non inventore magni at rem, debitis et - molestiae officia obcaecati expedita suscipit est fugiat deserunt, - beatae hic? Lorem ipsum dolor sit amet consectetur adipisicing elit. - Molestiae recusandae facilis iure, ipsum excepturi voluptates amet - libero explicabo! Mollitia magni consequuntur perspiciatis consectetur - officiis cum. Illum exercitationem eveniet dolorum maiores. Lorem ipsum - dolor sit amet, consectetur adipisicing elit. Amet commodi molestiae - veritatis ad suscipit at, eos sapiente illum laborum ipsum, unde - reiciendis, praesentium temporibus officia optio nemo dolorum magni - tempora. Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga, - consectetur laborum? Impedit deserunt dolor qui eligendi aspernatur - magnam ratione at inventore, placeat est. Commodi nobis tenetur suscipit - cupiditate ipsum excepturi. Lorem ipsum dolor sit amet consectetur - adipisicing elit. Vitae illum, explicabo maxime placeat aliquam quos, - harum aliquid aspernatur officia ullam voluptatum beatae? Fugit laborum - in recusandae eius tempore ab quasi. Lorem ipsum dolor sit amet - consectetur adipisicing elit. Doloremque vel, sequi laborum fugit et - libero facilis officiis, fuga dolorem iste ea in iusto at, repellendus - facere. Facilis voluptatibus error illum? Lorem ipsum dolor sit amet - consectetur, adipisicing elit. Officiis eveniet, facilis aut neque, - aliquam ullam amet consequuntur numquam asperiores ducimus ab, explicabo - iure? Aliquid numquam ab excepturi facere dolores illum. Lorem ipsum - dolor sit, amet consectetur adipisicing elit. Fugit, quae consequuntur? - Unde dicta, non inventore magni at rem, debitis et molestiae officia - obcaecati expedita suscipit est fugiat deserunt, beatae hic? Lorem ipsum - dolor sit amet consectetur adipisicing elit. Molestiae recusandae - facilis iure, ipsum excepturi voluptates amet libero explicabo! Mollitia - magni consequuntur perspiciatis consectetur officiis cum. Illum - exercitationem eveniet dolorum maiores. Lorem ipsum dolor sit amet, - consectetur adipisicing elit. Amet commodi molestiae veritatis ad - suscipit at, eos sapiente illum laborum ipsum, unde reiciendis, - praesentium temporibus officia optio nemo dolorum magni tempora. Lorem - ipsum dolor sit amet consectetur adipisicing elit. Fuga, consectetur - laborum? Impedit deserunt dolor qui eligendi aspernatur magnam ratione - at inventore, placeat est. Commodi nobis tenetur suscipit cupiditate - ipsum excepturi. Lorem ipsum dolor sit amet consectetur adipisicing - elit. Vitae illum, explicabo maxime placeat aliquam quos, harum aliquid - aspernatur officia ullam voluptatum beatae? Fugit laborum in recusandae - eius tempore ab quasi. Lorem ipsum dolor sit amet consectetur - adipisicing elit. Doloremque vel, sequi laborum fugit et libero facilis - officiis, fuga dolorem iste ea in iusto at, repellendus facere. Facilis - voluptatibus error illum? Lorem ipsum dolor sit amet consectetur, - adipisicing elit. Officiis eveniet, facilis aut neque, aliquam ullam - amet consequuntur numquam asperiores ducimus ab, explicabo iure? Aliquid - numquam ab excepturi facere dolores illum. Lorem ipsum dolor sit, amet - consectetur adipisicing elit. Fugit, quae consequuntur? Unde dicta, non - inventore magni at rem, debitis et molestiae officia obcaecati expedita - suscipit est fugiat deserunt, beatae hic? Lorem ipsum dolor sit amet - consectetur adipisicing elit. Molestiae recusandae facilis iure, ipsum - excepturi voluptates amet libero explicabo! Mollitia magni consequuntur - perspiciatis consectetur officiis cum. Illum exercitationem eveniet - dolorum maiores. Lorem ipsum dolor sit amet, consectetur adipisicing - elit. Amet commodi molestiae veritatis ad suscipit at, eos sapiente - illum laborum ipsum, unde reiciendis, praesentium temporibus officia - optio nemo dolorum magni tempora. Lorem ipsum dolor sit amet consectetur - adipisicing elit. Fuga, consectetur laborum? Impedit deserunt dolor qui - eligendi aspernatur magnam ratione at inventore, placeat est. Commodi - nobis tenetur suscipit cupiditate ipsum excepturi. Lorem ipsum dolor sit - amet consectetur adipisicing elit. Vitae illum, explicabo maxime placeat - aliquam quos, harum aliquid aspernatur officia ullam voluptatum beatae? - Fugit laborum in recusandae eius tempore ab quasi. Lorem ipsum dolor sit - amet consectetur adipisicing elit. Doloremque vel, sequi laborum fugit - et libero facilis officiis, fuga dolorem iste ea in iusto at, - repellendus facere. Facilis voluptatibus error illum? Lorem ipsum dolor - sit amet consectetur, adipisicing elit. Officiis eveniet, facilis aut - neque, aliquam ullam amet consequuntur numquam asperiores ducimus ab, - explicabo iure? Aliquid numquam ab excepturi facere dolores illum. Lorem - ipsum dolor sit, amet consectetur adipisicing elit. Fugit, quae - consequuntur? Unde dicta, non inventore magni at rem, debitis et - molestiae officia obcaecati expedita suscipit est fugiat deserunt, - beatae hic? Lorem ipsum dolor sit amet consectetur adipisicing elit. - Molestiae recusandae facilis iure, ipsum excepturi voluptates amet - libero explicabo! Mollitia magni consequuntur perspiciatis consectetur - officiis cum. Illum exercitationem eveniet dolorum maiores. Lorem ipsum - dolor sit amet, consectetur adipisicing elit. Amet commodi molestiae - veritatis ad suscipit at, eos sapiente illum laborum ipsum, unde - reiciendis, praesentium temporibus officia optio nemo dolorum magni - tempora. Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga, - consectetur laborum? Impedit deserunt dolor qui eligendi aspernatur - magnam ratione at inventore, placeat est. Commodi nobis tenetur suscipit - cupiditate ipsum excepturi. Lorem ipsum dolor sit amet consectetur - adipisicing elit. Vitae illum, explicabo maxime placeat aliquam quos, - harum aliquid aspernatur officia ullam voluptatum beatae? Fugit laborum - in recusandae eius tempore ab quasi. Lorem ipsum dolor sit amet - consectetur adipisicing elit. Doloremque vel, sequi laborum fugit et - libero facilis officiis, fuga dolorem iste ea in iusto at, repellendus - facere. Facilis voluptatibus error illum? Lorem ipsum dolor sit amet - consectetur, adipisicing elit. Officiis eveniet, facilis aut neque, - aliquam ullam amet consequuntur numquam asperiores ducimus ab, explicabo - iure? Aliquid numquam ab excepturi facere dolores illum. Lorem ipsum - dolor sit, amet consectetur adipisicing elit. Fugit, quae consequuntur? - Unde dicta, non inventore magni at rem, debitis et molestiae officia - obcaecati expedita suscipit est fugiat deserunt, beatae hic? Lorem ipsum - dolor sit amet consectetur adipisicing elit. Molestiae recusandae - facilis iure, ipsum excepturi voluptates amet libero explicabo! Mollitia - magni consequuntur perspiciatis consectetur officiis cum. Illum - exercitationem eveniet dolorum maiores. Lorem ipsum dolor sit amet, - consectetur adipisicing elit. Amet commodi molestiae veritatis ad - suscipit at, eos sapiente illum laborum ipsum, unde reiciendis, - praesentium temporibus officia optio nemo dolorum magni tempora. Lorem - ipsum dolor sit amet consectetur adipisicing elit. Fuga, consectetur - laborum? Impedit deserunt dolor qui eligendi aspernatur magnam ratione - at inventore, placeat est. Commodi nobis tenetur suscipit cupiditate - ipsum excepturi. Lorem ipsum dolor sit amet consectetur adipisicing - elit. Vitae illum, explicabo maxime placeat aliquam quos, harum aliquid - aspernatur officia ullam voluptatum beatae? Fugit laborum in recusandae - eius tempore ab quasi. Lorem ipsum dolor sit amet consectetur - adipisicing elit. Doloremque vel, sequi laborum fugit et libero facilis - officiis, fuga dolorem iste ea in iusto at, repellendus facere. Facilis - voluptatibus error illum? Lorem ipsum dolor sit amet consectetur, - adipisicing elit. Officiis eveniet, facilis aut neque, aliquam ullam - amet consequuntur numquam asperiores ducimus ab, explicabo iure? Aliquid - numquam ab excepturi facere dolores illum. Lorem ipsum dolor sit, amet - consectetur adipisicing elit. Fugit, quae consequuntur? Unde dicta, non - inventore magni at rem, debitis et molestiae officia obcaecati expedita - suscipit est fugiat deserunt, beatae hic? Lorem ipsum dolor sit amet - consectetur adipisicing elit. Molestiae recusandae facilis iure, ipsum - excepturi voluptates amet libero explicabo! Mollitia magni consequuntur - perspiciatis consectetur officiis cum. Illum exercitationem eveniet - dolorum maiores. Lorem ipsum dolor sit amet, consectetur adipisicing - elit. Amet commodi molestiae veritatis ad suscipit at, eos sapiente - illum laborum ipsum, unde reiciendis, praesentium temporibus officia - optio nemo dolorum magni tempora. Lorem ipsum dolor sit amet consectetur - adipisicing elit. Fuga, consectetur laborum? Impedit deserunt dolor qui - eligendi aspernatur magnam ratione at inventore, placeat est. Commodi - nobis tenetur suscipit cupiditate ipsum excepturi. Lorem ipsum dolor sit - amet consectetur adipisicing elit. Vitae illum, explicabo maxime placeat - aliquam quos, harum aliquid aspernatur officia ullam voluptatum beatae? - Fugit laborum in recusandae eius tempore ab quasi. Lorem ipsum dolor sit - amet consectetur adipisicing elit. Doloremque vel, sequi laborum fugit - et libero facilis officiis, fuga dolorem iste ea in iusto at, - repellendus facere. Facilis voluptatibus error illum? Lorem ipsum dolor - sit amet consectetur, adipisicing elit. Officiis eveniet, facilis aut - neque, aliquam ullam amet consequuntur numquam asperiores ducimus ab, - explicabo iure? Aliquid numquam ab excepturi facere dolores illum. Lorem - ipsum dolor sit, amet consectetur adipisicing elit. Fugit, quae - consequuntur? Unde dicta, non inventore magni at rem, debitis et - molestiae officia obcaecati expedita suscipit est fugiat deserunt, - beatae hic? Lorem ipsum dolor sit amet consectetur adipisicing elit. - Molestiae recusandae facilis iure, ipsum excepturi voluptates amet - libero explicabo! Mollitia magni consequuntur perspiciatis consectetur - officiis cum. Illum exercitationem eveniet dolorum maiores. Lorem ipsum - dolor sit amet, consectetur adipisicing elit. Amet commodi molestiae - veritatis ad suscipit at, eos sapiente illum laborum ipsum, unde - reiciendis, praesentium temporibus officia optio nemo dolorum magni - tempora. Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga, - consectetur laborum? Impedit deserunt dolor qui eligendi aspernatur - magnam ratione at inventore, placeat est. Commodi nobis tenetur suscipit - cupiditate ipsum excepturi. Lorem ipsum dolor sit amet consectetur - adipisicing elit. Vitae illum, explicabo maxime placeat aliquam quos, - harum aliquid aspernatur officia ullam voluptatum beatae? Fugit laborum - in recusandae eius tempore ab quasi. Lorem ipsum dolor sit amet - consectetur adipisicing elit. Doloremque vel, sequi laborum fugit et - libero facilis officiis, fuga dolorem iste ea in iusto at, repellendus - facere. Facilis voluptatibus error illum? Lorem ipsum dolor sit amet - consectetur, adipisicing elit. Officiis eveniet, facilis aut neque, - aliquam ullam amet consequuntur numquam asperiores ducimus ab, explicabo - iure? Aliquid numquam ab excepturi facere dolores illum. Lorem ipsum - dolor sit, amet consectetur adipisicing elit. Fugit, quae consequuntur? - Unde dicta, non inventore magni at rem, debitis et molestiae officia - obcaecati expedita suscipit est fugiat deserunt, beatae hic? Lorem ipsum - dolor sit amet consectetur adipisicing elit. Molestiae recusandae - facilis iure, ipsum excepturi voluptates amet libero explicabo! Mollitia - magni consequuntur perspiciatis consectetur officiis cum. Illum - exercitationem eveniet dolorum maiores. Lorem ipsum dolor sit amet, - consectetur adipisicing elit. Amet commodi molestiae veritatis ad - suscipit at, eos sapiente illum laborum ipsum, unde reiciendis, - praesentium temporibus officia optio nemo dolorum magni tempora. Lorem - ipsum dolor sit amet consectetur adipisicing elit. Fuga, consectetur - laborum? Impedit deserunt dolor qui eligendi aspernatur magnam ratione - at inventore, placeat est. Commodi nobis tenetur suscipit cupiditate - ipsum excepturi. Lorem ipsum dolor sit amet consectetur adipisicing - elit. Vitae illum, explicabo maxime placeat aliquam quos, harum aliquid - aspernatur officia ullam voluptatum beatae? Fugit laborum in recusandae - eius tempore ab quasi. Lorem ipsum dolor sit amet consectetur - adipisicing elit. Doloremque vel, sequi laborum fugit et libero facilis - officiis, fuga dolorem iste ea in iusto at, repellendus facere. Facilis - voluptatibus error illum? Lorem ipsum dolor sit amet consectetur, - adipisicing elit. Officiis eveniet, facilis aut neque, aliquam ullam - amet consequuntur numquam asperiores ducimus ab, explicabo iure? Aliquid - numquam ab excepturi facere dolores illum. Lorem ipsum dolor sit, amet - consectetur adipisicing elit. Fugit, quae consequuntur? Unde dicta, non - inventore magni at rem, debitis et molestiae officia obcaecati expedita - suscipit est fugiat deserunt, beatae hic? Lorem ipsum dolor sit amet - consectetur adipisicing elit. Molestiae recusandae facilis iure, ipsum - excepturi voluptates amet libero explicabo! Mollitia magni consequuntur - perspiciatis consectetur officiis cum. Illum exercitationem eveniet - dolorum maiores. Lorem ipsum dolor sit amet, consectetur adipisicing - elit. Amet commodi molestiae veritatis ad suscipit at, eos sapiente - illum laborum ipsum, unde reiciendis, praesentium temporibus officia - optio nemo dolorum magni tempora. Lorem ipsum dolor sit amet consectetur - adipisicing elit. Fuga, consectetur laborum? Impedit deserunt dolor qui - eligendi aspernatur magnam ratione at inventore, placeat est. Commodi - nobis tenetur suscipit cupiditate ipsum excepturi. Lorem ipsum dolor sit - amet consectetur adipisicing elit. Vitae illum, explicabo maxime placeat - aliquam quos, harum aliquid aspernatur officia ullam voluptatum beatae? - Fugit laborum in recusandae eius tempore ab quasi. Lorem ipsum dolor sit - amet consectetur adipisicing elit. Doloremque vel, sequi laborum fugit - et libero facilis officiis, fuga dolorem iste ea in iusto at, - repellendus facere. Facilis voluptatibus error illum? Lorem ipsum dolor - sit amet consectetur, adipisicing elit. Officiis eveniet, facilis aut - neque, aliquam ullam amet consequuntur numquam asperiores ducimus ab, - explicabo iure? Aliquid numquam ab excepturi facere dolores illum. Lorem - ipsum dolor sit, amet consectetur adipisicing elit. Fugit, quae - consequuntur? Unde dicta, non inventore magni at rem, debitis et - molestiae officia obcaecati expedita suscipit est fugiat deserunt, - beatae hic? Lorem ipsum dolor sit amet consectetur adipisicing elit. - Molestiae recusandae facilis iure, ipsum excepturi voluptates amet - libero explicabo! Mollitia magni consequuntur perspiciatis consectetur - officiis cum. Illum exercitationem eveniet dolorum maiores. Lorem ipsum - dolor sit amet, consectetur adipisicing elit. Amet commodi molestiae - veritatis ad suscipit at, eos sapiente illum laborum ipsum, unde - reiciendis, praesentium temporibus officia optio nemo dolorum magni - tempora. Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga, - consectetur laborum? Impedit deserunt dolor qui eligendi aspernatur - magnam ratione at inventore, placeat est. Commodi nobis tenetur suscipit - cupiditate ipsum excepturi. Lorem ipsum dolor sit amet consectetur - adipisicing elit. Vitae illum, explicabo maxime placeat aliquam quos, - harum aliquid aspernatur officia ullam voluptatum beatae? Fugit laborum - in recusandae eius tempore ab quasi. Lorem ipsum dolor sit amet - consectetur adipisicing elit. Doloremque vel, sequi laborum fugit et - libero facilis officiis, fuga dolorem iste ea in iusto at, repellendus - facere. Facilis voluptatibus error illum? Lorem ipsum dolor sit amet - consectetur, adipisicing elit. Officiis eveniet, facilis aut neque, - aliquam ullam amet consequuntur numquam asperiores ducimus ab, explicabo - iure? Aliquid numquam ab excepturi facere dolores illum. Lorem ipsum - dolor sit, amet consectetur adipisicing elit. Fugit, quae consequuntur? - Unde dicta, non inventore magni at rem, debitis et molestiae officia - obcaecati expedita suscipit est fugiat deserunt, beatae hic? Lorem ipsum - dolor sit amet consectetur adipisicing elit. Molestiae recusandae - facilis iure, ipsum excepturi voluptates amet libero explicabo! Mollitia - magni consequuntur perspiciatis consectetur officiis cum. Illum - exercitationem eveniet dolorum maiores. Lorem ipsum dolor sit amet, - consectetur adipisicing elit. Amet commodi molestiae veritatis ad - suscipit at, eos sapiente illum laborum ipsum, unde reiciendis, - praesentium temporibus officia optio nemo dolorum magni tempora. Lorem - ipsum dolor sit amet consectetur adipisicing elit. Fuga, consectetur - laborum? Impedit deserunt dolor qui eligendi aspernatur magnam ratione - at inventore, placeat est. Commodi nobis tenetur suscipit cupiditate - ipsum excepturi. Lorem ipsum dolor sit amet consectetur adipisicing - elit. Vitae illum, explicabo maxime placeat aliquam quos, harum aliquid - aspernatur officia ullam voluptatum beatae? Fugit laborum in recusandae - eius tempore ab quasi. Lorem ipsum dolor sit amet consectetur - adipisicing elit. Doloremque vel, sequi laborum fugit et libero facilis - officiis, fuga dolorem iste ea in iusto at, repellendus facere. Facilis - voluptatibus error illum? Lorem ipsum dolor sit amet consectetur, - adipisicing elit. Officiis eveniet, facilis aut neque, aliquam ullam - amet consequuntur numquam asperiores ducimus ab, explicabo iure? Aliquid - numquam ab excepturi facere dolores illum. Lorem ipsum dolor sit, amet - consectetur adipisicing elit. Fugit, quae consequuntur? Unde dicta, non - inventore magni at rem, debitis et molestiae officia obcaecati expedita - suscipit est fugiat deserunt, beatae hic? Lorem ipsum dolor sit amet - consectetur adipisicing elit. Molestiae recusandae facilis iure, ipsum - excepturi voluptates amet libero explicabo! Mollitia magni consequuntur - perspiciatis consectetur officiis cum. Illum exercitationem eveniet - dolorum maiores. Lorem ipsum dolor sit amet, consectetur adipisicing - elit. Amet commodi molestiae veritatis ad suscipit at, eos sapiente - illum laborum ipsum, unde reiciendis, praesentium temporibus officia - optio nemo dolorum magni tempora. Lorem ipsum dolor sit amet consectetur - adipisicing elit. Fuga, consectetur laborum? Impedit deserunt dolor qui - eligendi aspernatur magnam ratione at inventore, placeat est. Commodi - nobis tenetur suscipit cupiditate ipsum excepturi. Lorem ipsum dolor sit - amet consectetur adipisicing elit. Vitae illum, explicabo maxime placeat - aliquam quos, harum aliquid aspernatur officia ullam voluptatum beatae? - Fugit laborum in recusandae eius tempore ab quasi. Lorem ipsum dolor sit - amet consectetur adipisicing elit. Doloremque vel, sequi laborum fugit - et libero facilis officiis, fuga dolorem iste ea in iusto at, - repellendus facere. Facilis voluptatibus error illum? Lorem ipsum dolor - sit amet consectetur, adipisicing elit. Officiis eveniet, facilis aut - neque, aliquam ullam amet consequuntur numquam asperiores ducimus ab, - explicabo iure? Aliquid numquam ab excepturi facere dolores illum. Lorem - ipsum dolor sit, amet consectetur adipisicing elit. Fugit, quae - consequuntur? Unde dicta, non inventore magni at rem, debitis et - molestiae officia obcaecati expedita suscipit est fugiat deserunt, - beatae hic? Lorem ipsum dolor sit amet consectetur adipisicing elit. - Molestiae recusandae facilis iure, ipsum excepturi voluptates amet - libero explicabo! Mollitia magni consequuntur perspiciatis consectetur - officiis cum. Illum exercitationem eveniet dolorum maiores. Lorem ipsum - dolor sit amet, consectetur adipisicing elit. Amet commodi molestiae - veritatis ad suscipit at, eos sapiente illum laborum ipsum, unde - reiciendis, praesentium temporibus officia optio nemo dolorum magni - tempora. Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga, - consectetur laborum? Impedit deserunt dolor qui eligendi aspernatur - magnam ratione at inventore, placeat est. Commodi nobis tenetur suscipit - cupiditate ipsum excepturi. Lorem ipsum dolor sit amet consectetur - adipisicing elit. Vitae illum, explicabo maxime placeat aliquam quos, - harum aliquid aspernatur officia ullam voluptatum beatae? Fugit laborum - in recusandae eius tempore ab quasi. Lorem ipsum dolor sit amet - consectetur adipisicing elit. Doloremque vel, sequi laborum fugit et - libero facilis officiis, fuga dolorem iste ea in iusto at, repellendus - facere. Facilis voluptatibus error illum? Lorem ipsum dolor sit amet - consectetur, adipisicing elit. Officiis eveniet, facilis aut neque, - aliquam ullam amet consequuntur numquam asperiores ducimus ab, explicabo - iure? Aliquid numquam ab excepturi facere dolores illum. Lorem ipsum - dolor sit, amet consectetur adipisicing elit. Fugit, quae consequuntur? - Unde dicta, non inventore magni at rem, debitis et molestiae officia - obcaecati expedita suscipit est fugiat deserunt, beatae hic? Lorem ipsum - dolor sit amet consectetur adipisicing elit. Molestiae recusandae - facilis iure, ipsum excepturi voluptates amet libero explicabo! Mollitia - magni consequuntur perspiciatis consectetur officiis cum. Illum - exercitationem eveniet dolorum maiores. Lorem ipsum dolor sit amet, - consectetur adipisicing elit. Amet commodi molestiae veritatis ad - suscipit at, eos sapiente illum laborum ipsum, unde reiciendis, - praesentium temporibus officia optio nemo dolorum magni tempora. Lorem - ipsum dolor sit amet consectetur adipisicing elit. Fuga, consectetur - laborum? Impedit deserunt dolor qui eligendi aspernatur magnam ratione - at inventore, placeat est. Commodi nobis tenetur suscipit cupiditate - ipsum excepturi. Lorem ipsum dolor sit amet consectetur adipisicing - elit. Vitae illum, explicabo maxime placeat aliquam quos, harum aliquid - aspernatur officia ullam voluptatum beatae? Fugit laborum in recusandae - eius tempore ab quasi. Lorem ipsum dolor sit amet consectetur - adipisicing elit. Doloremque vel, sequi laborum fugit et libero facilis - officiis, fuga dolorem iste ea in iusto at, repellendus facere. Facilis - voluptatibus error illum? Lorem ipsum dolor sit amet consectetur, - adipisicing elit. Officiis eveniet, facilis aut neque, aliquam ullam - amet consequuntur numquam asperiores ducimus ab, explicabo iure? Aliquid - numquam ab excepturi facere dolores illum. Lorem ipsum dolor sit, amet - consectetur adipisicing elit. Fugit, quae consequuntur? Unde dicta, non - inventore magni at rem, debitis et molestiae officia obcaecati expedita - suscipit est fugiat deserunt, beatae hic? Lorem ipsum dolor sit amet - consectetur adipisicing elit. Molestiae recusandae facilis iure, ipsum - excepturi voluptates amet libero explicabo! Mollitia magni consequuntur - perspiciatis consectetur officiis cum. Illum exercitationem eveniet - dolorum maiores. Lorem ipsum dolor sit amet, consectetur adipisicing - elit. Amet commodi molestiae veritatis ad suscipit at, eos sapiente - illum laborum ipsum, unde reiciendis, praesentium temporibus officia - optio nemo dolorum magni tempora. Lorem ipsum dolor sit amet consectetur - adipisicing elit. Fuga, consectetur laborum? Impedit deserunt dolor qui - eligendi aspernatur magnam ratione at inventore, placeat est. Commodi - nobis tenetur suscipit cupiditate ipsum excepturi. Lorem ipsum dolor sit - amet consectetur adipisicing elit. Vitae illum, explicabo maxime placeat - aliquam quos, harum aliquid aspernatur officia ullam voluptatum beatae? - Fugit laborum in recusandae eius tempore ab quasi. Lorem ipsum dolor sit - amet consectetur adipisicing elit. Doloremque vel, sequi laborum fugit - et libero facilis officiis, fuga dolorem iste ea in iusto at, - repellendus facere. Facilis voluptatibus error illum? Lorem ipsum dolor - sit amet consectetur, adipisicing elit. Officiis eveniet, facilis aut - neque, aliquam ullam amet consequuntur numquam asperiores ducimus ab, - explicabo iure? Aliquid numquam ab excepturi facere dolores illum. Lorem - ipsum dolor sit, amet consectetur adipisicing elit. Fugit, quae - consequuntur? Unde dicta, non inventore magni at rem, debitis et - molestiae officia obcaecati expedita suscipit est fugiat deserunt, - beatae hic? Lorem ipsum dolor sit amet consectetur adipisicing elit. - Molestiae recusandae facilis iure, ipsum excepturi voluptates amet - libero explicabo! Mollitia magni consequuntur perspiciatis consectetur - officiis cum. Illum exercitationem eveniet dolorum maiores. Lorem ipsum - dolor sit amet, consectetur adipisicing elit. Amet commodi molestiae - veritatis ad suscipit at, eos sapiente illum laborum ipsum, unde - reiciendis, praesentium temporibus officia optio nemo dolorum magni - tempora. Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga, - consectetur laborum? Impedit deserunt dolor qui eligendi aspernatur - magnam ratione at inventore, placeat est. Commodi nobis tenetur suscipit - cupiditate ipsum excepturi. Lorem ipsum dolor sit amet consectetur - adipisicing elit. Vitae illum, explicabo maxime placeat aliquam quos, - harum aliquid aspernatur officia ullam voluptatum beatae? Fugit laborum - in recusandae eius tempore ab quasi. Lorem ipsum dolor sit amet - consectetur adipisicing elit. Doloremque vel, sequi laborum fugit et - libero facilis officiis, fuga dolorem iste ea in iusto at, repellendus - facere. Facilis voluptatibus error illum? Lorem ipsum dolor sit amet - consectetur, adipisicing elit. Officiis eveniet, facilis aut neque, - aliquam ullam amet consequuntur numquam asperiores ducimus ab, explicabo - iure? Aliquid numquam ab excepturi facere dolores illum. Lorem ipsum - dolor sit, amet consectetur adipisicing elit. Fugit, quae consequuntur? - Unde dicta, non inventore magni at rem, debitis et molestiae officia - obcaecati expedita suscipit est fugiat deserunt, beatae hic? Lorem ipsum - dolor sit amet consectetur adipisicing elit. Molestiae recusandae - facilis iure, ipsum excepturi voluptates amet libero explicabo! Mollitia - magni consequuntur perspiciatis consectetur officiis cum. Illum - exercitationem eveniet dolorum maiores. Lorem ipsum dolor sit amet, - consectetur adipisicing elit. Amet commodi molestiae veritatis ad - suscipit at, eos sapiente illum laborum ipsum, unde reiciendis, - praesentium temporibus officia optio nemo dolorum magni tempora. Lorem - ipsum dolor sit amet consectetur adipisicing elit. Fuga, consectetur - laborum? Impedit deserunt dolor qui eligendi aspernatur magnam ratione - at inventore, placeat est. Commodi nobis tenetur suscipit cupiditate - ipsum excepturi. Lorem ipsum dolor sit amet consectetur adipisicing - elit. Vitae illum, explicabo maxime placeat aliquam quos, harum aliquid - aspernatur officia ullam voluptatum beatae? Fugit laborum in recusandae - eius tempore ab quasi. Lorem ipsum dolor sit amet consectetur - adipisicing elit. Doloremque vel, sequi laborum fugit et libero facilis - officiis, fuga dolorem iste ea in iusto at, repellendus facere. Facilis - voluptatibus error illum? Lorem ipsum dolor sit amet consectetur, - adipisicing elit. Officiis eveniet, facilis aut neque, aliquam ullam - amet consequuntur numquam asperiores ducimus ab, explicabo iure? Aliquid - numquam ab excepturi facere dolores illum. Lorem ipsum dolor sit, amet - consectetur adipisicing elit. Fugit, quae consequuntur? Unde dicta, non - inventore magni at rem, debitis et molestiae officia obcaecati expedita - suscipit est fugiat deserunt, beatae hic? Lorem ipsum dolor sit amet - consectetur adipisicing elit. Molestiae recusandae facilis iure, ipsum - excepturi voluptates amet libero explicabo! Mollitia magni consequuntur - perspiciatis consectetur officiis cum. Illum exercitationem eveniet - dolorum maiores. Lorem ipsum dolor sit amet, consectetur adipisicing - elit. Amet commodi molestiae veritatis ad suscipit at, eos sapiente - illum laborum ipsum, unde reiciendis, praesentium temporibus officia - optio nemo dolorum magni tempora. Lorem ipsum dolor sit amet consectetur - adipisicing elit. Fuga, consectetur laborum? Impedit deserunt dolor qui - eligendi aspernatur magnam ratione at inventore, placeat est. Commodi - nobis tenetur suscipit cupiditate ipsum excepturi. Lorem ipsum dolor sit - amet consectetur adipisicing elit. Vitae illum, explicabo maxime placeat - aliquam quos, harum aliquid aspernatur officia ullam voluptatum beatae? - Fugit laborum in recusandae eius tempore ab quasi. Lorem ipsum dolor sit - amet consectetur adipisicing elit. Doloremque vel, sequi laborum fugit - et libero facilis officiis, fuga dolorem iste ea in iusto at, - repellendus facere. Facilis voluptatibus error illum? Lorem ipsum dolor - sit amet consectetur, adipisicing elit. Officiis eveniet, facilis aut - neque, aliquam ullam amet consequuntur numquam asperiores ducimus ab, - explicabo iure? Aliquid numquam ab excepturi facere dolores illum. Lorem - ipsum dolor sit, amet consectetur adipisicing elit. Fugit, quae - consequuntur? Unde dicta, non inventore magni at rem, debitis et - molestiae officia obcaecati expedita suscipit est fugiat deserunt, - beatae hic? Lorem ipsum dolor sit amet consectetur adipisicing elit. - Molestiae recusandae facilis iure, ipsum excepturi voluptates amet - libero explicabo! Mollitia magni consequuntur perspiciatis consectetur - officiis cum. Illum exercitationem eveniet dolorum maiores. Lorem ipsum - dolor sit amet, consectetur adipisicing elit. Amet commodi molestiae - veritatis ad suscipit at, eos sapiente illum laborum ipsum, unde - reiciendis, praesentium temporibus officia optio nemo dolorum magni - tempora. Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga, - consectetur laborum? Impedit deserunt dolor qui eligendi aspernatur - magnam ratione at inventore, placeat est. Commodi nobis tenetur suscipit - cupiditate ipsum excepturi. Lorem ipsum dolor sit amet consectetur - adipisicing elit. Vitae illum, explicabo maxime placeat aliquam quos, - harum aliquid aspernatur officia ullam voluptatum beatae? Fugit laborum - in recusandae eius tempore ab quasi. Lorem ipsum dolor sit amet - consectetur adipisicing elit. Doloremque vel, sequi laborum fugit et - libero facilis officiis, fuga dolorem iste ea in iusto at, repellendus - facere. Facilis voluptatibus error illum? Lorem ipsum dolor sit amet - consectetur, adipisicing elit. Officiis eveniet, facilis aut neque, - aliquam ullam amet consequuntur numquam asperiores ducimus ab, explicabo - iure? Aliquid numquam ab excepturi facere dolores illum. Lorem ipsum - dolor sit, amet consectetur adipisicing elit. Fugit, quae consequuntur? - Unde dicta, non inventore magni at rem, debitis et molestiae officia - obcaecati expedita suscipit est fugiat deserunt, beatae hic? Lorem ipsum - dolor sit amet consectetur adipisicing elit. Molestiae recusandae - facilis iure, ipsum excepturi voluptates amet libero explicabo! Mollitia - magni consequuntur perspiciatis consectetur officiis cum. Illum - exercitationem eveniet dolorum maiores. Lorem ipsum dolor sit amet, - consectetur adipisicing elit. Amet commodi molestiae veritatis ad - suscipit at, eos sapiente illum laborum ipsum, unde reiciendis, - praesentium temporibus officia optio nemo dolorum magni tempora. Lorem - ipsum dolor sit amet consectetur adipisicing elit. Fuga, consectetur - laborum? Impedit deserunt dolor qui eligendi aspernatur magnam ratione - at inventore, placeat est. Commodi nobis tenetur suscipit cupiditate - ipsum excepturi. Lorem ipsum dolor sit amet consectetur adipisicing - elit. Vitae illum, explicabo maxime placeat aliquam quos, harum aliquid - aspernatur officia ullam voluptatum beatae? Fugit laborum in recusandae - eius tempore ab quasi. Lorem ipsum dolor sit amet consectetur - adipisicing elit. Doloremque vel, sequi laborum fugit et libero facilis - officiis, fuga dolorem iste ea in iusto at, repellendus facere. Facilis - voluptatibus error illum? Lorem ipsum dolor sit amet consectetur, - adipisicing elit. Officiis eveniet, facilis aut neque, aliquam ullam - amet consequuntur numquam asperiores ducimus ab, explicabo iure? Aliquid - numquam ab excepturi facere dolores illum. Lorem ipsum dolor sit, amet - consectetur adipisicing elit. Fugit, quae consequuntur? Unde dicta, non - inventore magni at rem, debitis et molestiae officia obcaecati expedita - suscipit est fugiat deserunt, beatae hic? Lorem ipsum dolor sit amet - consectetur adipisicing elit. Molestiae recusandae facilis iure, ipsum - excepturi voluptates amet libero explicabo! Mollitia magni consequuntur - perspiciatis consectetur officiis cum. Illum exercitationem eveniet - dolorum maiores. Lorem ipsum dolor sit amet, consectetur adipisicing - elit. Amet commodi molestiae veritatis ad suscipit at, eos sapiente - illum laborum ipsum, unde reiciendis, praesentium temporibus officia - optio nemo dolorum magni tempora. Lorem ipsum dolor sit amet consectetur - adipisicing elit. Fuga, consectetur laborum? Impedit deserunt dolor qui - eligendi aspernatur magnam ratione at inventore, placeat est. Commodi - nobis tenetur suscipit cupiditate ipsum excepturi. Lorem ipsum dolor sit - amet consectetur adipisicing elit. Vitae illum, explicabo maxime placeat - aliquam quos, harum aliquid aspernatur officia ullam voluptatum beatae? - Fugit laborum in recusandae eius tempore ab quasi. Lorem ipsum dolor sit - amet consectetur adipisicing elit. Doloremque vel, sequi laborum fugit - et libero facilis officiis, fuga dolorem iste ea in iusto at, - repellendus facere. Facilis voluptatibus error illum? Lorem ipsum dolor - sit amet consectetur, adipisicing elit. Officiis eveniet, facilis aut - neque, aliquam ullam amet consequuntur numquam asperiores ducimus ab, - explicabo iure? Aliquid numquam ab excepturi facere dolores illum. Lorem - ipsum dolor sit, amet consectetur adipisicing elit. Fugit, quae - consequuntur? Unde dicta, non inventore magni at rem, debitis et - molestiae officia obcaecati expedita suscipit est fugiat deserunt, - beatae hic? Lorem ipsum dolor sit amet consectetur adipisicing elit. - Molestiae recusandae facilis iure, ipsum excepturi voluptates amet - libero explicabo! Mollitia magni consequuntur perspiciatis consectetur - officiis cum. Illum exercitationem eveniet dolorum maiores. Lorem ipsum - dolor sit amet, consectetur adipisicing elit. Amet commodi molestiae - veritatis ad suscipit at, eos sapiente illum laborum ipsum, unde - reiciendis, praesentium temporibus officia optio nemo dolorum magni - tempora. Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga, - consectetur laborum? Impedit deserunt dolor qui eligendi aspernatur - magnam ratione at inventore, placeat est. Commodi nobis tenetur suscipit - cupiditate ipsum excepturi. Lorem ipsum dolor sit amet consectetur - adipisicing elit. Vitae illum, explicabo maxime placeat aliquam quos, - harum aliquid aspernatur officia ullam voluptatum beatae? Fugit laborum - in recusandae eius tempore ab quasi. Lorem ipsum dolor sit amet - consectetur adipisicing elit. Doloremque vel, sequi laborum fugit et - libero facilis officiis, fuga dolorem iste ea in iusto at, repellendus - facere. Facilis voluptatibus error illum? Lorem ipsum dolor sit amet - consectetur, adipisicing elit. Officiis eveniet, facilis aut neque, - aliquam ullam amet consequuntur numquam asperiores ducimus ab, explicabo - iure? Aliquid numquam ab excepturi facere dolores illum. Lorem ipsum - dolor sit, amet consectetur adipisicing elit. Fugit, quae consequuntur? - Unde dicta, non inventore magni at rem, debitis et molestiae officia - obcaecati expedita suscipit est fugiat deserunt, beatae hic? Lorem ipsum - dolor sit amet consectetur adipisicing elit. Molestiae recusandae - facilis iure, ipsum excepturi voluptates amet libero explicabo! Mollitia - magni consequuntur perspiciatis consectetur officiis cum. Illum - exercitationem eveniet dolorum maiores. Lorem ipsum dolor sit amet, - consectetur adipisicing elit. Amet commodi molestiae veritatis ad - suscipit at, eos sapiente illum laborum ipsum, unde reiciendis, - praesentium temporibus officia optio nemo dolorum magni tempora. Lorem - ipsum dolor sit amet consectetur adipisicing elit. Fuga, consectetur - laborum? Impedit deserunt dolor qui eligendi aspernatur magnam ratione - at inventore, placeat est. Commodi nobis tenetur suscipit cupiditate - ipsum excepturi. Lorem ipsum dolor sit amet consectetur adipisicing - elit. Vitae illum, explicabo maxime placeat aliquam quos, harum aliquid - aspernatur officia ullam voluptatum beatae? Fugit laborum in recusandae - eius tempore ab quasi. Lorem ipsum dolor sit amet consectetur - adipisicing elit. Doloremque vel, sequi laborum fugit et libero facilis - officiis, fuga dolorem iste ea in iusto at, repellendus facere. Facilis - voluptatibus error illum? Lorem ipsum dolor sit amet consectetur, - adipisicing elit. Officiis eveniet, facilis aut neque, aliquam ullam - amet consequuntur numquam asperiores ducimus ab, explicabo iure? Aliquid - numquam ab excepturi facere dolores illum. Lorem ipsum dolor sit, amet - consectetur adipisicing elit. Fugit, quae consequuntur? Unde dicta, non - inventore magni at rem, debitis et molestiae officia obcaecati expedita - suscipit est fugiat deserunt, beatae hic? Lorem ipsum dolor sit amet - consectetur adipisicing elit. Molestiae recusandae facilis iure, ipsum - excepturi voluptates amet libero explicabo! Mollitia magni consequuntur - perspiciatis consectetur officiis cum. Illum exercitationem eveniet - dolorum maiores. Lorem ipsum dolor sit amet, consectetur adipisicing - elit. Amet commodi molestiae veritatis ad suscipit at, eos sapiente - illum laborum ipsum, unde reiciendis, praesentium temporibus officia - optio nemo dolorum magni tempora. Lorem ipsum dolor sit amet consectetur - adipisicing elit. Fuga, consectetur laborum? Impedit deserunt dolor qui - eligendi aspernatur magnam ratione at inventore, placeat est. Commodi - nobis tenetur suscipit cupiditate ipsum excepturi. Lorem ipsum dolor sit - amet consectetur adipisicing elit. Vitae illum, explicabo maxime placeat - aliquam quos, harum aliquid aspernatur officia ullam voluptatum beatae? - Fugit laborum in recusandae eius tempore ab quasi. Lorem ipsum dolor sit - amet consectetur adipisicing elit. Doloremque vel, sequi laborum fugit - et libero facilis officiis, fuga dolorem iste ea in iusto at, - repellendus facere. Facilis voluptatibus error illum? Lorem ipsum dolor - sit amet consectetur, adipisicing elit. Officiis eveniet, facilis aut - neque, aliquam ullam amet consequuntur numquam asperiores ducimus ab, - explicabo iure? Aliquid numquam ab excepturi facere dolores illum. Lorem - ipsum dolor sit, amet consectetur adipisicing elit. Fugit, quae - consequuntur? Unde dicta, non inventore magni at rem, debitis et - molestiae officia obcaecati expedita suscipit est fugiat deserunt, - beatae hic? Lorem ipsum dolor sit amet consectetur adipisicing elit. - Molestiae recusandae facilis iure, ipsum excepturi voluptates amet - libero explicabo! Mollitia magni consequuntur perspiciatis consectetur - officiis cum. Illum exercitationem eveniet dolorum maiores. Lorem ipsum - dolor sit amet, consectetur adipisicing elit. Amet commodi molestiae - veritatis ad suscipit at, eos sapiente illum laborum ipsum, unde - reiciendis, praesentium temporibus officia optio nemo dolorum magni - tempora. Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga, - consectetur laborum? Impedit deserunt dolor qui eligendi aspernatur - magnam ratione at inventore, placeat est. Commodi nobis tenetur suscipit - cupiditate ipsum excepturi. Lorem ipsum dolor sit amet consectetur - adipisicing elit. Vitae illum, explicabo maxime placeat aliquam quos, - harum aliquid aspernatur officia ullam voluptatum beatae? Fugit laborum - in recusandae eius tempore ab quasi. -

+ + + ); } diff --git a/src/features/ServerPage/features/IndexPage/components/RecentlyDeletedPlayers/RecentlyDeletedPlayers.tsx b/src/features/ServerPage/features/IndexPage/components/RecentlyDeletedPlayers/RecentlyDeletedPlayers.tsx new file mode 100644 index 0000000..2b761a2 --- /dev/null +++ b/src/features/ServerPage/features/IndexPage/components/RecentlyDeletedPlayers/RecentlyDeletedPlayers.tsx @@ -0,0 +1,49 @@ +import React from 'react'; +import { useQuery } from '@apollo/client'; +import { RECENTLY_DELETED_PLAYERS } from './queries'; +import { COLUMNS, LIMIT } from './constants'; +import { PlayersQueryVariables } from '@libs/graphql/types'; +import { PlayerList } from './types'; + +import { Paper, Toolbar, Typography } from '@material-ui/core'; +import Table from '@common/Table/Table'; + +export interface Props { + server: string; +} + +function RecentlyDeletedPlayers({ server }: Props) { + const { loading: loadingPlayers, data } = useQuery< + PlayerList, + PlayersQueryVariables + >(RECENTLY_DELETED_PLAYERS, { + fetchPolicy: 'cache-and-network', + variables: { + filter: { + limit: LIMIT, + sort: 'deletedAt DESC', + deletedAtGT: new Date(0), + }, + server, + }, + }); + const players = data?.players?.items ?? []; + const loading = loadingPlayers && players.length === 0; + + console.log(players, loading); + return ( + + + Test? + + + + ); +} + +export default RecentlyDeletedPlayers; diff --git a/src/features/ServerPage/features/IndexPage/components/RecentlyDeletedPlayers/constants.ts b/src/features/ServerPage/features/IndexPage/components/RecentlyDeletedPlayers/constants.ts new file mode 100644 index 0000000..151c34f --- /dev/null +++ b/src/features/ServerPage/features/IndexPage/components/RecentlyDeletedPlayers/constants.ts @@ -0,0 +1,24 @@ +import { Column } from '@common/Table/types'; + +export const COLUMNS: Column[] = [ + { + field: 'name', + label: 'recentlyDeletedPlayers.columns.name', + sortable: false, + }, + { + field: 'mostPoints', + label: 'recentlyDeletedPlayers.columns.mostPoints', + sortable: false, + valueFormatter: (param: string | number | boolean) => + (param as number).toLocaleString(), + }, + { + field: 'deletedAt', + label: 'recentlyDeletedPlayers.columns.deletedAt', + sortable: false, + type: 'datetime', + }, +]; + +export const LIMIT = 5; diff --git a/src/features/ServerPage/features/IndexPage/components/RecentlyDeletedPlayers/queries.ts b/src/features/ServerPage/features/IndexPage/components/RecentlyDeletedPlayers/queries.ts new file mode 100644 index 0000000..184764f --- /dev/null +++ b/src/features/ServerPage/features/IndexPage/components/RecentlyDeletedPlayers/queries.ts @@ -0,0 +1,14 @@ +import { gql } from '@apollo/client'; + +export const RECENTLY_DELETED_PLAYERS = gql` + query players($server: String!, $filter: PlayerFilter) { + players(server: $server, filter: $filter) { + items { + id + name + mostPoints + deletedAt + } + } + } +`; diff --git a/src/features/ServerPage/features/IndexPage/components/RecentlyDeletedPlayers/types.ts b/src/features/ServerPage/features/IndexPage/components/RecentlyDeletedPlayers/types.ts new file mode 100644 index 0000000..0ef398a --- /dev/null +++ b/src/features/ServerPage/features/IndexPage/components/RecentlyDeletedPlayers/types.ts @@ -0,0 +1,12 @@ +import { List } from '@libs/graphql/types'; + +export type Player = { + id: number; + name: string; + mostPoints: number; + deletedAt: string | Date; +}; + +export type PlayerList = { + players?: List; +}; diff --git a/src/features/ServerPage/libs/ServerContext/Provider.tsx b/src/features/ServerPage/libs/ServerContext/Provider.tsx index 3247d9f..449e64b 100644 --- a/src/features/ServerPage/libs/ServerContext/Provider.tsx +++ b/src/features/ServerPage/libs/ServerContext/Provider.tsx @@ -4,6 +4,7 @@ import { useQuery } from '@apollo/client'; import { SERVERS } from './queries'; import Context from './context'; import extractVersionCodeFromHostname from '@utils/extractVersionCodeFromHostname'; +import { ServersQueryVariables } from '@libs/graphql/types'; import { Params, ServerList } from './types'; import NotFoundPage from '@features/NotFoundPage/NotFoundPage'; @@ -15,7 +16,10 @@ export interface Props { function Provider({ children }: Props) { const { key } = useParams(); - const { loading: loadingServers, data } = useQuery(SERVERS, { + const { loading: loadingServers, data } = useQuery< + ServerList, + ServersQueryVariables + >(SERVERS, { fetchPolicy: 'cache-first', variables: { filter: { diff --git a/src/libs/graphql/types.ts b/src/libs/graphql/types.ts index 6a2791c..0511e32 100644 --- a/src/libs/graphql/types.ts +++ b/src/libs/graphql/types.ts @@ -2,3 +2,41 @@ export type List = { total: number; items: T; }; + +export type PlayerFilter = { + limit?: number; + offset?: number; + sort?: string; + id?: number[]; + deletedAtGT?: Date | string; +}; + +export type PlayersQueryVariables = { + server: string; + filter?: PlayerFilter; +}; + +export type ServerFilter = { + limit?: number; + offset?: number; + sort?: string; + key?: string[]; + keyIEQ?: string; + versionCode?: string[]; +}; + +export type ServersQueryVariables = { + filter?: ServerFilter; +}; + +export type VersionFilter = { + limit?: number; + offset?: number; + sort?: string; + code?: string[]; + codeNEQ?: string[]; +}; + +export type VersionsQueryVariables = { + filter?: VersionFilter; +}; diff --git a/src/libs/i18n/en/table.ts b/src/libs/i18n/en/table.ts new file mode 100644 index 0000000..9dea290 --- /dev/null +++ b/src/libs/i18n/en/table.ts @@ -0,0 +1,11 @@ +const translations = { + emptyDataSourceMessage: 'No records to display', + labelDisplayedRows: '{from}-{to} of {count}', + labelRowsPerPage: 'Rows per page:', + firstTooltip: 'First Page', + previousTooltip: 'Previous Page', + nextTooltip: 'Next Page', + lastTooltip: 'Last Page', +}; + +export default translations; diff --git a/src/libs/useTitle.ts b/src/libs/useTitle.ts index 9762ed7..84b214b 100644 --- a/src/libs/useTitle.ts +++ b/src/libs/useTitle.ts @@ -29,4 +29,4 @@ function useTitle( export default typeof document !== 'undefined' ? useTitle - : (_title: string) => {}; + : (_title: string) => _title; diff --git a/src/utils/isObjKey.ts b/src/utils/isObjKey.ts new file mode 100644 index 0000000..ffc8a06 --- /dev/null +++ b/src/utils/isObjKey.ts @@ -0,0 +1,3 @@ +export default function isObjKey(obj: T, key: any): key is keyof T { + return key in obj; +} diff --git a/yarn.lock b/yarn.lock index 6990530..bfcdbdf 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1731,6 +1731,11 @@ resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee" integrity sha1-7ihweulOEdK4J7y+UnC86n8+ce4= +"@types/lodash@^4.14.165": + version "4.14.165" + resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.165.tgz#74d55d947452e2de0742bad65270433b63a8c30f" + integrity sha512-tjSSOTHhI5mCHTy/OOXYIhi2Wt1qcbHmuXD1Ha7q70CgI/I71afO4XtLb/cVexki1oVYchpul/TOuu3Arcdxrg== + "@types/minimatch@*": version "3.0.3" resolved "https://registry.yarnpkg.com/@types/minimatch/-/minimatch-3.0.3.tgz#3dca0e3f33b200fc7d1139c0cd96c1268cadfd9d"