From 6885b2c1ba45af9b974d330ecca24c6a913cd04f Mon Sep 17 00:00:00 2001
From: Kichiyaki <dawidwysokinski000@gmail.com>
Date: Thu, 24 Dec 2020 17:34:26 +0100
Subject: [PATCH] Add possibility to check village from EnnoblementsPage at
 in-game map

---
 src/common/Link/Link.tsx                      |  5 ----
 src/common/Table/Table.tsx                    | 10 +++++---
 src/common/Table/TableRow.tsx                 | 24 ++++++++++++-------
 src/common/Table/types.ts                     |  4 ++--
 src/config/app.ts                             |  2 +-
 .../LatestSavedEnnoblements.tsx               |  1 -
 .../LiveEnnoblements/LiveEnnoblements.tsx     |  8 +------
 .../components/Table/Table.tsx                | 19 +++++++++++++--
 .../ServerPage/libs/ServerContext/context.ts  |  4 ++++
 .../ServerPage/libs/ServerContext/queries.ts  |  4 ++++
 .../ServerPage/libs/ServerContext/types.ts    |  4 ++++
 .../i18n/en/server-page/ennoblements-page.ts  |  3 +++
 src/libs/i18n/en/table.ts                     |  1 +
 .../i18n/pl/server-page/ennoblements-page.ts  |  3 +++
 src/libs/i18n/pl/server-page/index-page.ts    |  8 +++----
 src/libs/i18n/pl/table.ts                     |  1 +
 src/theme/createTheme.ts                      |  4 ++++
 src/utils/buildTribalwarsURL.ts               |  7 ++++++
 18 files changed, 78 insertions(+), 34 deletions(-)
 create mode 100644 src/utils/buildTribalwarsURL.ts

diff --git a/src/common/Link/Link.tsx b/src/common/Link/Link.tsx
index 25e7ad6..4903ec0 100644
--- 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;
diff --git a/src/common/Table/Table.tsx b/src/common/Table/Table.tsx
index b98fc28..bce13b9 100644
--- 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}
             />
diff --git a/src/common/Table/TableRow.tsx b/src/common/Table/TableRow.tsx
index a5563bd..0ebac5a 100644
--- 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>
diff --git a/src/common/Table/types.ts b/src/common/Table/types.ts
index e0fe049..64cacdb 100644
--- 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;
 };
 
diff --git a/src/config/app.ts b/src/config/app.ts
index 8910572..f677a09 100644
--- 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';
 
diff --git a/src/features/ServerPage/features/EnnoblementsPage/components/LatestSavedEnnoblements/LatestSavedEnnoblements.tsx b/src/features/ServerPage/features/EnnoblementsPage/components/LatestSavedEnnoblements/LatestSavedEnnoblements.tsx
index cc0aad3..7b6988d 100644
--- 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,
diff --git a/src/features/ServerPage/features/EnnoblementsPage/components/LiveEnnoblements/LiveEnnoblements.tsx b/src/features/ServerPage/features/EnnoblementsPage/components/LiveEnnoblements/LiveEnnoblements.tsx
index 3ec983e..a131452 100644
--- 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 />
   );
 }
 
diff --git a/src/features/ServerPage/features/EnnoblementsPage/components/Table/Table.tsx b/src/features/ServerPage/features/EnnoblementsPage/components/Table/Table.tsx
index 5160569..9eb9b10 100644
--- 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'),
+        },
+      ]}
     />
   );
 }
diff --git a/src/features/ServerPage/libs/ServerContext/context.ts b/src/features/ServerPage/libs/ServerContext/context.ts
index e266e69..30ad7ec 100644
--- 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;
diff --git a/src/features/ServerPage/libs/ServerContext/queries.ts b/src/features/ServerPage/libs/ServerContext/queries.ts
index fc81866..dd2b5d9 100644
--- 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
+        }
       }
     }
   }
diff --git a/src/features/ServerPage/libs/ServerContext/types.ts b/src/features/ServerPage/libs/ServerContext/types.ts
index 41be22c..16395e6 100644
--- 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 = {
diff --git a/src/libs/i18n/en/server-page/ennoblements-page.ts b/src/libs/i18n/en/server-page/ennoblements-page.ts
index d6b81a4..3bfa945 100644
--- 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: {
diff --git a/src/libs/i18n/en/table.ts b/src/libs/i18n/en/table.ts
index 754e161..9e24b2a 100644
--- 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;
diff --git a/src/libs/i18n/pl/server-page/ennoblements-page.ts b/src/libs/i18n/pl/server-page/ennoblements-page.ts
index 6cce48b..c00746e 100644
--- 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: {
diff --git a/src/libs/i18n/pl/server-page/index-page.ts b/src/libs/i18n/pl/server-page/index-page.ts
index 7f114ae..b182fea 100644
--- 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',
diff --git a/src/libs/i18n/pl/table.ts b/src/libs/i18n/pl/table.ts
index b781abb..cce7693 100644
--- 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;
diff --git a/src/theme/createTheme.ts b/src/theme/createTheme.ts
index e8a96cf..9930114 100644
--- 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: {
diff --git a/src/utils/buildTribalwarsURL.ts b/src/utils/buildTribalwarsURL.ts
new file mode 100644
index 0000000..3064e26
--- /dev/null
+++ 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}`;
+};