From 90fa656d409377b6779ac2c5ac69dae2e43b9197 Mon Sep 17 00:00:00 2001
From: Boris Kubiak <kubiakboris@gmail.com>
Date: Wed, 21 Oct 2020 15:44:43 +0200
Subject: [PATCH] Add favicon to websites

---
 components/common/Favicon.js           | 21 +++++++++++++++++++++
 components/common/Favicon.module.css   |  3 +++
 components/metrics/WebsiteChart.js     |  3 ++-
 components/metrics/WebsiteHeader.js    |  8 ++++++--
 components/pages/TestConsole.js        |  7 ++++++-
 components/pages/WebsiteDetails.js     |  1 +
 components/pages/WebsiteList.js        |  4 ++--
 components/settings/WebsiteSettings.js |  4 +++-
 8 files changed, 44 insertions(+), 7 deletions(-)
 create mode 100644 components/common/Favicon.js
 create mode 100644 components/common/Favicon.module.css

diff --git a/components/common/Favicon.js b/components/common/Favicon.js
new file mode 100644
index 00000000..07ec696c
--- /dev/null
+++ b/components/common/Favicon.js
@@ -0,0 +1,21 @@
+import React from 'react';
+import styles from './Favicon.module.css';
+
+function getHostName(url) {
+  const match = url.match(/^(?:https?:\/\/)?(?:[^@\n]+@)?(?:www\.)?([^:/\n?=]+)/im);
+  return match && match.length > 1 ? match[1] : null;
+}
+
+export default function Favicon({ domain, ...props }) {
+  const hostName = domain ? getHostName(domain) : null;
+
+  return hostName ? (
+    <img
+      className={styles.favicon}
+      src={`https://icons.duckduckgo.com/ip3/${hostName}.ico`}
+      height="16"
+      alt=""
+      {...props}
+    />
+  ) : null;
+}
diff --git a/components/common/Favicon.module.css b/components/common/Favicon.module.css
new file mode 100644
index 00000000..82c85c42
--- /dev/null
+++ b/components/common/Favicon.module.css
@@ -0,0 +1,3 @@
+.favicon {
+  margin-right: 8px;
+}
diff --git a/components/metrics/WebsiteChart.js b/components/metrics/WebsiteChart.js
index 07ba5161..a5390f78 100644
--- a/components/metrics/WebsiteChart.js
+++ b/components/metrics/WebsiteChart.js
@@ -20,6 +20,7 @@ import { TOKEN_HEADER } from '../../lib/constants';
 export default function WebsiteChart({
   websiteId,
   title,
+  domain,
   stickyHeader = false,
   showLink = false,
   onDataLoad = () => {},
@@ -66,7 +67,7 @@ export default function WebsiteChart({
 
   return (
     <div className={styles.container}>
-      <WebsiteHeader websiteId={websiteId} title={title} showLink={showLink} />
+      <WebsiteHeader websiteId={websiteId} title={title} domain={domain} showLink={showLink} />
       <div className={classNames(styles.header, 'row')}>
         <StickyHeader
           className={classNames(styles.metrics, 'col row')}
diff --git a/components/metrics/WebsiteHeader.js b/components/metrics/WebsiteHeader.js
index 803d18cc..d5015d7c 100644
--- a/components/metrics/WebsiteHeader.js
+++ b/components/metrics/WebsiteHeader.js
@@ -4,14 +4,18 @@ import Link from 'components/common/Link';
 import PageHeader from 'components/layout/PageHeader';
 import RefreshButton from 'components/common/RefreshButton';
 import ButtonLayout from 'components/layout/ButtonLayout';
+import Favicon from 'components/common/Favicon';
 import ActiveUsers from './ActiveUsers';
 import Arrow from 'assets/arrow-right.svg';
 import styles from './WebsiteHeader.module.css';
 
-export default function WebsiteHeader({ websiteId, title, showLink = false }) {
+export default function WebsiteHeader({ websiteId, title, domain, showLink = false }) {
   return (
     <PageHeader>
-      <div className={styles.title}>{title}</div>
+      <div className={styles.title}>
+        <Favicon domain={domain} />
+        {title}
+      </div>
       <ActiveUsers className={styles.active} websiteId={websiteId} />
       <ButtonLayout align="right">
         <RefreshButton websiteId={websiteId} />
diff --git a/components/pages/TestConsole.js b/components/pages/TestConsole.js
index fef6c620..b715b4a8 100644
--- a/components/pages/TestConsole.js
+++ b/components/pages/TestConsole.js
@@ -82,7 +82,12 @@ export default function TestConsole() {
           </div>
           <div className="row">
             <div className="col-12">
-              <WebsiteChart websiteId={website.website_id} title={website.name} showLink />
+              <WebsiteChart
+                websiteId={website.website_id}
+                title={website.name}
+                domain={website.domain}
+                showLink
+              />
               <PageHeader>Events</PageHeader>
               <EventsChart websiteId={website.website_id} />
             </div>
diff --git a/components/pages/WebsiteDetails.js b/components/pages/WebsiteDetails.js
index 6c310909..81cde3ad 100644
--- a/components/pages/WebsiteDetails.js
+++ b/components/pages/WebsiteDetails.js
@@ -120,6 +120,7 @@ export default function WebsiteDetails({ websiteId }) {
           <WebsiteChart
             websiteId={websiteId}
             title={data.name}
+            domain={data.domain}
             onDataLoad={handleDataLoad}
             showLink={false}
             stickyHeader
diff --git a/components/pages/WebsiteList.js b/components/pages/WebsiteList.js
index cd96ae9f..03552470 100644
--- a/components/pages/WebsiteList.js
+++ b/components/pages/WebsiteList.js
@@ -17,9 +17,9 @@ export default function WebsiteList({ userId }) {
 
   return (
     <Page>
-      {data.map(({ website_id, name }) => (
+      {data.map(({ website_id, name, domain }) => (
         <div key={website_id} className={styles.website}>
-          <WebsiteChart websiteId={website_id} title={name} showLink />
+          <WebsiteChart websiteId={website_id} title={name} domain={domain} showLink />
         </div>
       ))}
       {data.length === 0 && (
diff --git a/components/settings/WebsiteSettings.js b/components/settings/WebsiteSettings.js
index 0ff6246d..686605f2 100644
--- a/components/settings/WebsiteSettings.js
+++ b/components/settings/WebsiteSettings.js
@@ -13,6 +13,7 @@ import ShareUrlForm from 'components/forms/ShareUrlForm';
 import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
 import ButtonLayout from 'components/layout/ButtonLayout';
 import Toast from 'components/common/Toast';
+import Favicon from 'components/common/Favicon';
 import Pen from 'assets/pen.svg';
 import Trash from 'assets/trash.svg';
 import Plus from 'assets/plus.svg';
@@ -60,8 +61,9 @@ export default function WebsiteSettings() {
     </ButtonLayout>
   );
 
-  const DetailsLink = ({ website_id, name }) => (
+  const DetailsLink = ({ website_id, name, domain }) => (
     <Link href="/website/[...id]" as={`/website/${website_id}/${name}`}>
+      <Favicon domain={domain} />
       {name}
     </Link>
   );