add Table

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",

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<T> {
+  columns: Column[];
+  actions?: Action[];
+  data: T[];
+  orderBy?: string;
+  orderDirection?: OrderDirection;
+  selection?: boolean;
+  idFieldName?: string;
+  onRequestSort?: (
+    property: string,
+    orderDirection: OrderDirection
+  ) => void | Promise<void>;
+  onSelect?: (rows: T[]) => void;
+  loading?: boolean;
+  tableProps?: TableProps;
+  tableBodyProps?: TableBodyProps;
+  footerProps?: TableFooterProps;
+  hideFooter?: boolean;
+}
+
+function Table<T extends object>({
+  columns,
+  data,
+  orderBy = '',
+  orderDirection = 'asc',
+  onRequestSort,
+  idFieldName = 'id',
+  selection = false,
+  loading = false,
+  actions = [],
+  tableBodyProps = {},
+  tableProps = {},
+  hideFooter = false,
+  footerProps,
+}: Props<T>) {
+  return (
+    <MUITable {...tableProps}>
+      <TableHead
+        columns={columns}
+        selection={selection}
+        orderBy={orderBy}
+        orderDirection={orderDirection}
+        onRequestSort={onRequestSort}
+        allSelected={false}
+      />
+      <TableBody {...tableBodyProps}>
+        {loading ? (
+          <TableLoading />
+        ) : data.length > 0 ? (
+          data.map((item, index) => {
+            return (
+              <TableRow
+                key={
+                  isObjKey(item, idFieldName) ? item[idFieldName] + '' : index
+                }
+                row={item}
+                actions={actions}
+                selected={false}
+                selection={selection}
+                columns={columns}
+              />
+            );
+          })
+        ) : (
+          <TableEmpty />
+        )}
+      </TableBody>
+      {!hideFooter && (
+        <TableFooter
+          count={footerProps?.count ?? data.length}
+          {...footerProps}
+        />
+      )}
+    </MUITable>
+  );
+}
+
+export default Table;

src/common/Table/TableEmpty.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+import { TableRow, TableCell, Typography } from '@material-ui/core';
+
+function TableEmpty() {
+  return (
+    <TableRow>
+      <TableCell colSpan={100}>
+        <Typography align="center">No records to display</Typography>
+      </TableCell>
+    </TableRow>
+  );
+}
+
+export default TableEmpty;

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<number | { value: number; label: string }>;
+  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<HTMLButtonElement> | null,
+    page: number
+  ) => {
+    if (onChangePage) {
+      onChangePage(page);
+    }
+  };
+  const handleRowsPerPageChange = (
+    e: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>
+  ) => {
+    if (onChangeRowsPerPage) {
+      onChangeRowsPerPage(parseInt(e.target.value));
+    }
+  };
+
+  return (
+    <MUITableFooter>
+      <TableRow>
+        <TablePagination
+          count={count}
+          page={page}
+          onChangePage={handlePageChange}
+          onChangeRowsPerPage={handleRowsPerPageChange}
+          rowsPerPage={rowsPerPage}
+          rowsPerPageOptions={rowsPerPageOptions}
+          size={size}
+          colSpan={100}
+        />
+      </TableRow>
+    </MUITableFooter>
+  );
+}
+
+export default TableFooter;

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<void>;
+}
+
+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 (
+    <MUITableHead>
+      <TableRow>
+        {selection && (
+          <TableCell padding="checkbox">
+            <Checkbox checked={allSelected} onClick={handleSelectAll} />
+          </TableCell>
+        )}
+        {columns.map(col => {
+          return (
+            <TableCell
+              key={col.field}
+              padding={col.disablePadding ? 'none' : 'default'}
+              align={col.align ? col.align : 'left'}
+              sortDirection={
+                (orderBy === col.field
+                  ? orderDirection
+                  : false) as SortDirection
+              }
+            >
+              {col.sortable ? (
+                <TableSortLabel
+                  active={orderBy === col.field}
+                  onClick={createSortHandler(col.field)}
+                  direction={orderBy === col.field ? orderDirection : 'asc'}
+                >
+                  {col.label ?? col.field}
+                </TableSortLabel>
+              ) : (
+                col.label ?? col.field
+              )}
+            </TableCell>
+          );
+        })}
+      </TableRow>
+    </MUITableHead>
+  );
+}
+
+export default TableHead;

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 (
+    <TableRow>
+      <TableCell colSpan={100}>
+        <Box
+          paddingY={2}
+          display="flex"
+          alignItems="center"
+          justifyContent="center"
+        >
+          <CircularProgress size={200} />
+        </Box>
+      </TableCell>
+    </TableRow>
+  );
+}
+
+export default TableLoading;

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<T> = {
+  actions: Action[];
+  columns: Column[];
+  row: T;
+  selection: boolean;
+  selected: boolean;
+  onSelect?: (row: T) => void;
+};
+
+function EnhancedTableRow<T extends object>({
+  actions,
+  columns,
+  row,
+  selection = false,
+  selected = false,
+  onSelect,
+}: Props<T>) {
+  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 (
+    <TableRow>
+      {selection && (
+        <TableCell padding="checkbox">
+          <Checkbox checked={selected} onClick={handleSelect} />
+        </TableCell>
+      )}
+      {columns.map(col => {
+        const val = get(row, col.field, '');
+        return (
+          <TableCell
+            key={col.field}
+            padding={col.disablePadding ? 'none' : 'default'}
+            align={col.align ? col.align : 'left'}
+          >
+            {col.valueFormatter
+              ? col.valueFormatter(val)
+              : col.type
+              ? formatValue(val, col.type)
+              : val}
+          </TableCell>
+        );
+      })}
+      {actions.length > 0 && (
+        <TableCell>
+          {actions.map((action, index) =>
+            action.tooltip ? (
+              <Tooltip key={index} title={action.tooltip}>
+                <div>{action.icon}</div>
+              </Tooltip>
+            ) : (
+              <div key={index}>{action.icon}</div>
+            )
+          )}
+        </TableCell>
+      )}
+    </TableRow>
+  );
+}
+
+export default EnhancedTableRow;

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

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<HTMLButtonElement | null>(null);
   const { t } = useTranslation(COMMON);
   const versionCode = extractVersionCodeFromHostname(window.location.hostname);
-  const { data, loading } = useQuery<VersionList>(VERSIONS, {
-    fetchPolicy: 'cache-first',
-    variables: {
-      filter: {
-        sort: 'code ASC',
-        codeNEQ: [versionCode],
+  const { data, loading } = useQuery<VersionList, VersionsQueryVariables>(
+    VERSIONS,
+    {
+      fetchPolicy: 'cache-first',
+      variables: {
+        filter: {
+          sort: 'code ASC',
+          codeNEQ: [versionCode],
+        },
       },
-    },
-  });
+    }
+  );
   const versions = data?.versions?.items ?? [];
 
   const handleClick = (

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<ServerList>(SERVERS, {
+  const { data, loading: loadingServers } = useQuery<
+    ServerList,
+    ServersQueryVariables
+  >(SERVERS, {
     fetchPolicy: 'cache-and-network',
     variables: {
       filter: {

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 (
+    <Route {...rest}>
+      <ServerProvider>{children}</ServerProvider>
+    </Route>
+  );
+};
+
 function ServerPage() {
   return (
     <Switch>
-      <Route path={SERVER_PAGE.INDEX_PAGE}>
+      <EnhancedRoute path={SERVER_PAGE.INDEX_PAGE}>
         <IndexPage />
-      </Route>
+      </EnhancedRoute>
       <Route path="*">
         <NotFoundPage />
       </Route>

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 (
-    <ServerProvider>
-      <div
-        className={clsx({
-          [classes.shiftContent]: isDesktop,
-        })}
-      >
-        <TopBar openSidebar={open ? closeSidebar : openSidebar} t={t} />
-        <Toolbar />
-        <Sidebar
-          onClose={closeSidebar}
-          open={shouldOpenSidebar}
-          variant={isDesktop ? 'persistent' : 'temporary'}
-          t={t}
-          onOpen={openSidebar}
-        />
-        <main className={classes.content}>{children}</main>
-      </div>
-    </ServerProvider>
+    <div
+      className={clsx({
+        [classes.shiftContent]: isDesktop,
+      })}
+    >
+      <TopBar openSidebar={open ? closeSidebar : openSidebar} t={t} />
+      <Toolbar />
+      <Sidebar
+        onClose={closeSidebar}
+        open={shouldOpenSidebar}
+        variant={isDesktop ? 'persistent' : 'temporary'}
+        t={t}
+        onOpen={openSidebar}
+      />
+      <main className={classes.content}>{children}</main>
+    </div>
   );
 }
 

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 (
     <PageLayout>
-      <p>
-        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.
-      </p>
+      <Container>
+        <RecentlyDeletedPlayers server={key} />
+      </Container>
     </PageLayout>
   );
 }

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 (
+    <Paper>
+      <Toolbar>
+        <Typography variant="h4">Test?</Typography>
+      </Toolbar>
+      <Table
+        columns={COLUMNS}
+        loading={loading}
+        data={players}
+        footerProps={{ rowsPerPage: LIMIT }}
+      />
+    </Paper>
+  );
+}
+
+export default RecentlyDeletedPlayers;

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;

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
+      }
+    }
+  }
+`;

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<Player[]>;
+};

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<Params>();
-  const { loading: loadingServers, data } = useQuery<ServerList>(SERVERS, {
+  const { loading: loadingServers, data } = useQuery<
+    ServerList,
+    ServersQueryVariables
+  >(SERVERS, {
     fetchPolicy: 'cache-first',
     variables: {
       filter: {

src/libs/graphql/types.ts

@@ -2,3 +2,41 @@ export type List<T> = {
   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;
+};

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;

src/libs/useTitle.ts

@@ -29,4 +29,4 @@ function useTitle(
 
 export default typeof document !== 'undefined'
   ? useTitle
-  : (_title: string) => {};
+  : (_title: string) => _title;

src/utils/isObjKey.ts

@@ -0,0 +1,3 @@
+export default function isObjKey<T>(obj: T, key: any): key is keyof T {
+  return key in obj;
+}

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"