From 9f73aba90073f748b4a5dc0e621ab17da9caaa8e Mon Sep 17 00:00:00 2001
From: Mike Cao <mike@mikecao.com>
Date: Wed, 13 Dec 2023 00:02:54 -0800
Subject: [PATCH] Added external links for pages.

---
 src/app/(main)/websites/[id]/WebsiteDetails.tsx    |  4 ++--
 .../(main)/websites/[id]/WebsiteExpandedView.tsx   |  6 +++---
 src/app/(main)/websites/[id]/WebsiteTableView.tsx  |  9 ++++++++-
 src/components/metrics/MetricsTable.tsx            |  1 +
 src/components/metrics/PagesTable.tsx              | 14 +++++++++++---
 5 files changed, 25 insertions(+), 9 deletions(-)

diff --git a/src/app/(main)/websites/[id]/WebsiteDetails.tsx b/src/app/(main)/websites/[id]/WebsiteDetails.tsx
index 7d8d2d99..b234ea0a 100644
--- a/src/app/(main)/websites/[id]/WebsiteDetails.tsx
+++ b/src/app/(main)/websites/[id]/WebsiteDetails.tsx
@@ -33,8 +33,8 @@ export default function WebsiteDetails({ websiteId }: { websiteId: string }) {
       {!website && <Loading icon="dots" style={{ minHeight: 300 }} />}
       {website && (
         <>
-          {!view && <WebsiteTableView websiteId={websiteId} />}
-          {view && <WebsiteExpandedView websiteId={websiteId} />}
+          {!view && <WebsiteTableView websiteId={websiteId} domainName={website.domain} />}
+          {view && <WebsiteExpandedView websiteId={websiteId} domainName={website.domain} />}
         </>
       )}
     </>
diff --git a/src/app/(main)/websites/[id]/WebsiteExpandedView.tsx b/src/app/(main)/websites/[id]/WebsiteExpandedView.tsx
index 9fb1b3f6..f01d9363 100644
--- a/src/app/(main)/websites/[id]/WebsiteExpandedView.tsx
+++ b/src/app/(main)/websites/[id]/WebsiteExpandedView.tsx
@@ -35,10 +35,10 @@ const views = {
 
 export default function WebsiteExpandedView({
   websiteId,
-  websiteDomain,
+  domainName,
 }: {
   websiteId: string;
-  websiteDomain?: string;
+  domainName?: string;
 }) {
   const { formatMessage, labels } = useMessages();
   const {
@@ -143,7 +143,7 @@ export default function WebsiteExpandedView({
       <div className={styles.content}>
         <DetailsComponent
           websiteId={websiteId}
-          websiteDomain={websiteDomain}
+          domainName={domainName}
           animate={false}
           virtualize={true}
           itemCount={25}
diff --git a/src/app/(main)/websites/[id]/WebsiteTableView.tsx b/src/app/(main)/websites/[id]/WebsiteTableView.tsx
index e530f2ba..7cc415e5 100644
--- a/src/app/(main)/websites/[id]/WebsiteTableView.tsx
+++ b/src/app/(main)/websites/[id]/WebsiteTableView.tsx
@@ -10,10 +10,17 @@ import CountriesTable from 'components/metrics/CountriesTable';
 import EventsTable from 'components/metrics/EventsTable';
 import EventsChart from 'components/metrics/EventsChart';
 
-export default function WebsiteTableView({ websiteId }: { websiteId: string }) {
+export default function WebsiteTableView({
+  websiteId,
+  domainName,
+}: {
+  websiteId: string;
+  domainName: string;
+}) {
   const [countryData, setCountryData] = useState();
   const tableProps = {
     websiteId,
+    domainName,
     limit: 10,
   };
 
diff --git a/src/components/metrics/MetricsTable.tsx b/src/components/metrics/MetricsTable.tsx
index 77e70311..6c9293e1 100644
--- a/src/components/metrics/MetricsTable.tsx
+++ b/src/components/metrics/MetricsTable.tsx
@@ -17,6 +17,7 @@ import styles from './MetricsTable.module.css';
 
 export interface MetricsTableProps extends ListTableProps {
   websiteId: string;
+  domainName: string;
   type?: string;
   className?: string;
   dataFilter?: (data: any) => any;
diff --git a/src/components/metrics/PagesTable.tsx b/src/components/metrics/PagesTable.tsx
index 11379a2e..042af9c0 100644
--- a/src/components/metrics/PagesTable.tsx
+++ b/src/components/metrics/PagesTable.tsx
@@ -9,7 +9,7 @@ export interface PagesTableProps extends MetricsTableProps {
   allowFilter?: boolean;
 }
 
-export function PagesTable({ allowFilter, ...props }: PagesTableProps) {
+export function PagesTable({ allowFilter, domainName, ...props }: PagesTableProps) {
   const {
     router,
     makeUrl,
@@ -17,7 +17,7 @@ export function PagesTable({ allowFilter, ...props }: PagesTableProps) {
   } = useNavigation();
   const { formatMessage, labels } = useMessages();
 
-  const handleSelect = key => {
+  const handleSelect = (key: any) => {
     router.push(makeUrl({ view: key }), { scroll: true });
   };
 
@@ -33,12 +33,20 @@ export function PagesTable({ allowFilter, ...props }: PagesTableProps) {
   ];
 
   const renderLink = ({ x }) => {
-    return <FilterLink id={view} value={x} label={!x && formatMessage(labels.none)} />;
+    return (
+      <FilterLink
+        id={view}
+        value={x}
+        label={!x && formatMessage(labels.none)}
+        externalUrl={`${domainName.startsWith('http') ? domainName : `https://${domainName}`}${x}`}
+      />
+    );
   };
 
   return (
     <MetricsTable
       {...props}
+      domainName={domainName}
       title={formatMessage(labels.pages)}
       type={view}
       metric={formatMessage(labels.views)}