Referrer filtering.

components/metrics/ReferrersTable.js

@@ -4,6 +4,12 @@ import MetricsTable from './MetricsTable';
 import FilterButtons from 'components/common/FilterButtons';
 import { refFilter } from 'lib/filters';
 import { safeDecodeURI } from 'lib/url';
+import Link from 'next/link';
+import classNames from 'classnames';
+import usePageQuery from 'hooks/usePageQuery';
+import External from 'assets/arrow-up-right-from-square.svg';
+import Icon from '../common/Icon';
+import styles from './ReferrersTable.module.css';
 
 export const FILTER_DOMAIN_ONLY = 0;
 export const FILTER_COMBINED = 1;
@@ -11,6 +17,10 @@ export const FILTER_RAW = 2;
 
 export default function ReferrersTable({ websiteId, websiteDomain, showFilters, ...props }) {
   const [filter, setFilter] = useState(FILTER_COMBINED);
+  const {
+    resolve,
+    query: { ref: currentRef },
+  } = usePageQuery();
 
   const buttons = [
     {
@@ -24,13 +34,24 @@ export default function ReferrersTable({ websiteId, websiteDomain, showFilters,
     { label: <FormattedMessage id="metrics.filter.raw" defaultMessage="Raw" />, value: FILTER_RAW },
   ];
 
-  const renderLink = ({ w: href, x: url }) => {
-    return (href || url).startsWith('http') ? (
-      <a href={href || url} target="_blank" rel="noreferrer">
-        {safeDecodeURI(url)}
-      </a>
-    ) : (
-      safeDecodeURI(url)
+  const renderLink = ({ w: link, x: label }) => {
+    console.log({ link, label });
+    return (
+      <div className={styles.row}>
+        <Link href={resolve({ ref: label })} replace={true}>
+          <a
+            className={classNames(styles.label, {
+              [styles.inactive]: currentRef && label !== currentRef,
+              [styles.active]: label === currentRef,
+            })}
+          >
+            {safeDecodeURI(label)}
+          </a>
+        </Link>
+        <a href={link || label} target="_blank" rel="noreferrer noopener" className={styles.link}>
+          <Icon icon={<External />} className={styles.icon} />
+        </a>
+      </div>
     );
   };