Resolve favicon locally (WIP)

components/common/Favicon.js

@@ -2,27 +2,14 @@ import React from 'react';
 import PropTypes from 'prop-types';
 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;
-}
+function Favicon({ url, ...props }) {
+  const faviconUrl = url ? url : '/default-favicon.png';
 
-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;
+  return <img className={styles.favicon} src={faviconUrl} height="16" alt="" {...props} />;
 }
 
 Favicon.propTypes = {
-  domain: PropTypes.string,
+  url: PropTypes.string,
 };
 
 export default Favicon;

components/metrics/WebsiteChart.js

@@ -18,7 +18,7 @@ import styles from './WebsiteChart.module.css';
 export default function WebsiteChart({
   websiteId,
   title,
-  domain,
+  favicon,
   stickyHeader = false,
   showLink = false,
   showChart = true,
@@ -81,7 +81,7 @@ export default function WebsiteChart({
 
   return (
     <div className={styles.container}>
-      <WebsiteHeader websiteId={websiteId} title={title} domain={domain} showLink={showLink} />
+      <WebsiteHeader websiteId={websiteId} title={title} favicon={favicon} showLink={showLink} />
       <div className={classNames(styles.header, 'row')}>
         <StickyHeader
           className={classNames(styles.metrics, 'col row')}

components/metrics/WebsiteHeader.js

@@ -11,10 +11,10 @@ import ActiveUsers from './ActiveUsers';
 import Arrow from 'assets/arrow-right.svg';
 import styles from './WebsiteHeader.module.css';
 
-export default function WebsiteHeader({ websiteId, title, domain, showLink = false }) {
+export default function WebsiteHeader({ websiteId, title, favicon, showLink = false }) {
   const header = showLink ? (
     <>
-      <Favicon domain={domain} />
+      <Favicon url={favicon} />
       <Link
         className={styles.titleLink}
         href="/website/[...id]"
@@ -25,7 +25,7 @@ export default function WebsiteHeader({ websiteId, title, domain, showLink = fal
     </>
   ) : (
     <>
-      <Favicon domain={domain} />
+      <Favicon url={favicon} />
       <OverflowText tooltipId={`${websiteId}-title`}>{title}</OverflowText>
     </>
   );

components/pages/TestConsole.js

@@ -106,7 +106,7 @@ export default function TestConsole() {
               <WebsiteChart
                 websiteId={website.website_id}
                 title={website.name}
-                domain={website.domain}
+                favicon={website.favicon}
                 showLink
               />
               <PageHeader>Events</PageHeader>

components/pages/WebsiteDetails.js

@@ -141,7 +141,7 @@ export default function WebsiteDetails({ websiteId }) {
           <WebsiteChart
             websiteId={websiteId}
             title={data.name}
-            domain={data.domain}
+            favicon={data.favicon}
             onDataLoad={handleDataLoad}
             showLink={false}
             stickyHeader

components/pages/WebsiteList.js

@@ -46,13 +46,13 @@ export default function WebsiteList({ websites, showCharts, limit }) {
 
   return (
     <div>
-      {ordered.map(({ website_id, name, domain }, index) =>
+      {ordered.map(({ website_id, name, favicon }, index) =>
         index < limit ? (
           <div key={website_id} className={styles.website}>
             <WebsiteChart
               websiteId={website_id}
               title={name}
-              domain={domain}
+              favicon={favicon}
               showChart={showCharts}
               showLink
             />

components/settings/WebsiteSettings.js

@@ -83,13 +83,13 @@ export default function WebsiteSettings() {
     </ButtonLayout>
   );
 
-  const DetailsLink = ({ website_id, name, domain }) => (
+  const DetailsLink = ({ website_id, name, favicon }) => (
     <Link
       className={styles.detailLink}
       href="/website/[...id]"
       as={`/website/${website_id}/${name}`}
     >
-      <Favicon domain={domain} />
+      <Favicon url={favicon} />
       <OverflowText tooltipId={`${website_id}-name`}>{name}</OverflowText>
     </Link>
   );