Add possibility to check village from EnnoblementsPage at in-game map

2020-12-24 17:34:26 +01:00 · 2020-12-24 17:34:26 +01:00 · 6885b2c1ba
commit 6885b2c1ba
parent 47f2cf6892
18 changed files with 78 additions and 34 deletions
--- a/src/common/Link/Link.tsx
+++ b/src/common/Link/Link.tsx
@ -47,9 +47,4 @@ const Link = forwardRef(
  }
 );

-Link.defaultProps = {
-  color: 'secondary',
-  underline: 'none',
-} as Props;
-
 export default Link;
--- a/src/common/Table/Table.tsx
+++ b/src/common/Table/Table.tsx
@ -20,7 +20,7 @@ import TableFooter, { Props as TableFooterProps } from './TableFooter';

 export interface Props<T> {
  columns: Column<T>[];
-  actions?: Action[];
+  actions?: Action<T>[];
  data: T[];
  orderBy?: string;
  orderDirection?: OrderDirection;
@ -65,6 +65,10 @@ function Table<T extends object>({
    footerProps?.rowsPerPage,
    footerProps?.rowsPerPageOptions
  );
+  const headColumns =
+    actions.length > 0
+      ? [...columns, { field: 'action', label: t('actions') }]
+      : columns;

  const isSelected = (row: T): boolean => {
    return (
@ -82,7 +86,7 @@ function Table<T extends object>({
    <TableContainer>
      <MUITable size={size} {...tableProps}>
        <TableHead
-          columns={columns}
+          columns={headColumns}
          selection={selection}
          orderBy={orderBy}
          orderDirection={orderDirection}
@ -98,7 +102,7 @@ function Table<T extends object>({
        <TableBody {...tableBodyProps}>
          {loading ? (
            <TableLoading
-              columns={columns}
+              columns={headColumns}
              size={size}
              rowsPerPage={rowsPerPage}
            />
--- a/src/common/Table/TableRow.tsx
+++ b/src/common/Table/TableRow.tsx
@ -8,7 +8,7 @@ import { TableRow, TableCell, Checkbox, Tooltip } from '@material-ui/core';
 import { Action, Column } from './types';

 export interface Props<T> {
-  actions: Action[];
+  actions: Action<T>[];
  columns: Column<T>[];
  row: T;
  selection: boolean;
@ -76,15 +76,21 @@ function EnhancedTableRow<T extends object>({
      })}
      {actions.length > 0 && (
        <TableCell size={size}>
-          {actions.map((action, index) =>
-            action.tooltip ? (
-              <Tooltip key={index} title={action.tooltip}>
-                <div>{action.icon}</div>
-              </Tooltip>
+          {actions.map((action, index) => {
+            const icon =
+              typeof action.icon === 'function'
+                ? action.icon(row, index)
+                : action.icon;
+            return action.tooltip ? (
+              <div key={index}>
+                <Tooltip key={index} title={action.tooltip}>
+                  <span>{icon}</span>
+                </Tooltip>
+              </div>
            ) : (
-              <div key={index}>{action.icon}</div>
-            )
-          )}
+              <div key={index}>{icon}</div>
+            );
+          })}
        </TableCell>
      )}
    </TableRow>
--- a/src/common/Table/types.ts
+++ b/src/common/Table/types.ts
@ -1,5 +1,5 @@
-export type Action = {
-  icon: React.ReactNode;
+export type Action<T> = {
+  icon: React.ReactNode | ((row: T, i: number) => React.ReactNode);
  tooltip?: string;
 };

--- a/src/config/app.ts
+++ b/src/config/app.ts
@ -1,4 +1,4 @@
-export const DEFAULT_LANGUAGE = process.env.REACT_APP_DEFAULT_LANGUAGE ?? 'en';
+export const DEFAULT_LANGUAGE = process.env.REACT_APP_DEFAULT_LANGUAGE ?? 'pl';

 export const NAME = 'TWHelp';

--- a/src/features/ServerPage/features/EnnoblementsPage/components/LatestSavedEnnoblements/LatestSavedEnnoblements.tsx
+++ b/src/features/ServerPage/features/EnnoblementsPage/components/LatestSavedEnnoblements/LatestSavedEnnoblements.tsx
@ -86,7 +86,6 @@ function LatestSavedEnnoblements({ t, server }: Props) {
        t={t}
        ennoblements={ennoblements}
        loading={loading}
-        server={server}
        footerProps={{
          page: loading ? 0 : query.page,
          rowsPerPage: limit,
--- a/src/features/ServerPage/features/EnnoblementsPage/components/LiveEnnoblements/LiveEnnoblements.tsx
+++ b/src/features/ServerPage/features/EnnoblementsPage/components/LiveEnnoblements/LiveEnnoblements.tsx
@ -27,13 +27,7 @@ function LiveEnnoblements({ t, server }: Props) {
  const loading = ennoblements.length === 0 && queryLoading;

  return (
-    <Table
-      t={t}
-      ennoblements={ennoblements}
-      loading={loading}
-      server={server}
-      hideFooter
-    />
+    <Table t={t} ennoblements={ennoblements} loading={loading} hideFooter />
  );
 }

--- a/src/features/ServerPage/features/EnnoblementsPage/components/Table/Table.tsx
+++ b/src/features/ServerPage/features/EnnoblementsPage/components/Table/Table.tsx
@ -1,7 +1,11 @@
 import React from 'react';
+import useServer from '@features/ServerPage/libs/ServerContext/useServer';
 import { SERVER_PAGE } from '@config/routes';
 import buildVillageName from '@utils/buildVillageName';
+import { buildVillageURL } from '@utils/buildTribalwarsURL';

+import { IconButton, Link as MUILink } from '@material-ui/core';
+import { Visibility } from '@material-ui/icons';
 import Table from '@common/Table/Table';
 import Link from '@common/Link/Link';
 import PlayerProfileLink from '@features/ServerPage/common/PlayerProfileLink/PlayerProfileLink';
@ -11,7 +15,6 @@ import { Props as TableFooterProps } from '@common/Table/TableFooter';
 import { Ennoblement } from './types';

 export interface Props {
-  server: string;
  t: TFunction;
  ennoblements: Ennoblement[];
  loading?: boolean;
@ -20,13 +23,13 @@ export interface Props {
 }

 function EnnoblementsTable({
-  server,
  t,
  ennoblements,
  loading,
  hideFooter,
  footerProps,
 }: Props) {
+  const { version, key: server } = useServer();
  return (
    <Table
      columns={[
@ -88,6 +91,18 @@ function EnnoblementsTable({
      size="small"
      hideFooter={hideFooter}
      footerProps={footerProps}
+      actions={[
+        {
+          icon: (e: Ennoblement) => (
+            <MUILink href={buildVillageURL(version.host, server, e.village.id)}>
+              <IconButton>
+                <Visibility />
+              </IconButton>
+            </MUILink>
+          ),
+          tooltip: t('table.actions.inGameProfile'),
+        },
+      ]}
    />
  );
 }
--- a/src/features/ServerPage/libs/ServerContext/context.ts
+++ b/src/features/ServerPage/libs/ServerContext/context.ts
@ -11,6 +11,10 @@ const ctx = createContext<Server>({
  historyUpdatedAt: new Date(0),
  statsUpdatedAt: new Date(0),
  status: SERVER_STATUS.OPEN,
+  version: {
+    code: '',
+    host: '',
+  },
 });

 export default ctx;
--- a/src/features/ServerPage/libs/ServerContext/queries.ts
+++ b/src/features/ServerPage/libs/ServerContext/queries.ts
@ -13,6 +13,10 @@ export const SERVERS = gql`
        dataUpdatedAt
        historyUpdatedAt
        statsUpdatedAt
+        version {
+          code
+          host
+        }
      }
    }
  }
--- a/src/features/ServerPage/libs/ServerContext/types.ts
+++ b/src/features/ServerPage/libs/ServerContext/types.ts
@ -10,6 +10,10 @@ export type Server = {
  dataUpdatedAt: string | Date;
  historyUpdatedAt: string | Date;
  statsUpdatedAt: string | Date;
+  version: {
+    code: string;
+    host: string;
+  };
 };

 export type ServerList = {
--- a/src/libs/i18n/en/server-page/ennoblements-page.ts
+++ b/src/libs/i18n/en/server-page/ennoblements-page.ts
@ -12,6 +12,9 @@ const translations = {
      oldOwner: 'Old owner',
      newOwner: 'New owner',
    },
+    actions: {
+      inGameProfile: 'In-game profile',
+    },
  },
  latestSavedEnnoblements: {
    inputs: {
--- a/src/libs/i18n/en/table.ts
+++ b/src/libs/i18n/en/table.ts
@ -6,6 +6,7 @@ const translations = {
  last: 'Last page',
  next: 'Next page',
  previous: 'Previous page',
+  actions: 'Actions',
 };

 export default translations;
--- a/src/libs/i18n/pl/server-page/ennoblements-page.ts
+++ b/src/libs/i18n/pl/server-page/ennoblements-page.ts
@ -12,6 +12,9 @@ const translations = {
      oldOwner: 'Stary właściciel',
      newOwner: 'Nowy właściciel',
    },
+    actions: {
+      inGameProfile: 'Profil w grze',
+    },
  },
  latestSavedEnnoblements: {
    inputs: {
--- a/src/libs/i18n/pl/server-page/index-page.ts
+++ b/src/libs/i18n/pl/server-page/index-page.ts
@ -17,7 +17,7 @@ const translations = {
    },
  },
  todaysBestStatsPlayers: {
-    title: 'Gracze - Dzienne statystyki',
+    title: 'Dzienne statystyki (gracze)',
    modes: {
      scoreAtt: 'Agresor',
      scoreDef: 'Obrońca',
@ -33,7 +33,7 @@ const translations = {
    },
  },
  todaysBestStatsTribes: {
-    title: 'Plemiona - Dzienne statystyki',
+    title: 'Dzienne statystyki (plemiona)',
    modes: {
      scoreAtt: 'Agresor',
      scoreDef: 'Obrońca',
@ -67,7 +67,7 @@ const translations = {
    },
  },
  odRankingPlayers: {
-    title: 'Ranking pokonanych przeciwników - gracze',
+    title: 'Ranking pokonanych przeciwników (gracze)',
    modes: {
      rankAtt: 'Agresor',
      rankDef: 'Obrońca',
@ -81,7 +81,7 @@ const translations = {
    },
  },
  odRankingTribes: {
-    title: 'Ranking pokonanych przeciwników - plemiona',
+    title: 'Ranking pokonanych przeciwników (plemiona)',
    modes: {
      rankAtt: 'Agresor',
      rankDef: 'Obrońca',
--- a/src/libs/i18n/pl/table.ts
+++ b/src/libs/i18n/pl/table.ts
@ -6,6 +6,7 @@ const translations = {
  last: 'Ostatnia strona',
  next: 'Następna strona',
  previous: 'Poprzednia strona',
+  actions: 'Akcje',
 };

 export default translations;
--- a/src/theme/createTheme.ts
+++ b/src/theme/createTheme.ts
@ -23,6 +23,10 @@ const createTheme = (): Theme => {
        MuiAppBar: {
          color: 'default',
        },
+        MuiLink: {
+          color: 'secondary',
+          underline: 'none',
+        },
      },
      overrides: {
        MuiTableContainer: {
--- a/src/utils/buildTribalwarsURL.ts
+++ b/src/utils/buildTribalwarsURL.ts
@ -0,0 +1,7 @@
+export const buildVillageURL = (
+  host: string,
+  server: string,
+  id: number
+): string => {
+  return `https://${server}.${host}/game.php?screen=info_village&id=${id}`;
+};