Rename ref to prevent collision with react elements

It seems that, at least in dev mode, 'ref' may incorrectly refer to
react elements.

Signed-off-by: Kevin Decherf <kevin@kdecherf.com>

components/metrics/ReferrersTable.js

@@ -19,7 +19,7 @@ export default function ReferrersTable({ websiteId, websiteDomain, showFilters,
   const [filter, setFilter] = useState(FILTER_COMBINED);
   const {
     resolve,
-    query: { ref: currentRef },
+    query: { referrer: currentRef },
   } = usePageQuery();
 
   const buttons = [
@@ -37,7 +37,7 @@ export default function ReferrersTable({ websiteId, websiteDomain, showFilters,
   const renderLink = ({ w: link, x: label }) => {
     return (
       <div className={styles.row}>
-        <Link href={resolve({ ref: label })} replace={true}>
+        <Link href={resolve({ referrer: label })} replace={true}>
           <a
             className={classNames(styles.label, {
               [styles.inactive]: currentRef && label !== currentRef,

components/metrics/WebsiteChart.js

@@ -33,7 +33,7 @@ export default function WebsiteChart({
   const {
     router,
     resolve,
-    query: { url, ref },
+    query: { url, referrer },
   } = usePageQuery();
   const { get } = useApi();
 
@@ -46,12 +46,12 @@ export default function WebsiteChart({
         unit,
         tz: timezone,
         url,
-        ref,
+        referrer,
       },
       onDataLoad,
       headers: { [TOKEN_HEADER]: shareToken?.token },
     },
-    [modified, url, ref],
+    [modified, url, referrer],
   );
 
   const chartData = useMemo(() => {
@@ -88,7 +88,7 @@ export default function WebsiteChart({
           stickyClassName={styles.sticky}
           enabled={stickyHeader}
         >
-          <FilterTags params={{ url, ref }} onClick={handleCloseFilter} />
+          <FilterTags params={{ url, referrer }} onClick={handleCloseFilter} />
           <div className="col-12 col-lg-9">
             <MetricsBar websiteId={websiteId} />
           </div>

lib/filters.js

@@ -49,8 +49,10 @@ export const refFilter = (data, { domain, domainOnly, raw }) => {
   const regex = new RegExp(`http[s]?://([a-z0-9-]+\\.)*${domain}`);
   const links = {};
 
-  const isValidRef = ref => {
+  const isValidRef = referrer => {
-    return ref !== '' && ref !== null && !ref.startsWith('/') && !ref.startsWith('#');
+    return (
+      referrer !== '' && referrer !== null && !referrer.startsWith('/') && !referrer.startsWith('#')
+    );
   };
 
   const cleanUrl = url => {
@@ -71,8 +73,8 @@ export const refFilter = (data, { domain, domainOnly, raw }) => {
 
       if (protocol.startsWith('http')) {
         const path = removeTrailingSlash(pathname);
-        const ref = searchParams.get('ref');
+        const referrer = searchParams.get('ref');
-        const query = ref ? `?ref=${ref}` : '';
+        const query = referrer ? `?referrer=${referrer}` : '';
 
         return removeTrailingSlash(`${removeWWW(hostname)}${path}`) + query;
       }

lib/queries.js

@@ -335,7 +335,7 @@ export async function getEvents(websites, start_at) {
 
 export function getWebsiteStats(website_id, start_at, end_at, filters = {}) {
   const params = [website_id, start_at, end_at];
-  const { url, ref } = filters;
+  const { url, referrer } = filters;
   let urlFilter = '';
   let refFilter = '';
 
@@ -344,9 +344,9 @@ export function getWebsiteStats(website_id, start_at, end_at, filters = {}) {
     params.push(decodeURIComponent(url));
   }
 
-  if (ref) {
+  if (referrer) {
     refFilter = `and referrer like $${params.length + 1}`;
-    params.push(`%${decodeURIComponent(ref)}%`);
+    params.push(`%${decodeURIComponent(referrer)}%`);
   }
 
   return rawQuery(
@@ -382,7 +382,7 @@ export function getPageviewStats(
   filters = {},
 ) {
   const params = [website_id, start_at, end_at];
-  const { url, ref } = filters;
+  const { url, referrer } = filters;
 
   let urlFilter = '';
   let refFilter = '';
@@ -392,9 +392,9 @@ export function getPageviewStats(
     params.push(decodeURIComponent(url));
   }
 
-  if (ref) {
+  if (referrer) {
     refFilter = `and referrer like $${params.length + 1}`;
-    params.push(`%${decodeURIComponent(ref)}%`);
+    params.push(`%${decodeURIComponent(referrer)}%`);
   }
 
   return rawQuery(

pages/api/website/[id]/pageviews.js

@@ -11,7 +11,7 @@ export default async (req, res) => {
       return unauthorized(res);
     }
 
-    const { id, start_at, end_at, unit, tz, url, ref } = req.query;
+    const { id, start_at, end_at, unit, tz, url, referrer } = req.query;
 
     const websiteId = +id;
     const startDate = new Date(+start_at);
@@ -22,10 +22,10 @@ export default async (req, res) => {
     }
 
     const [pageviews, sessions] = await Promise.all([
-      getPageviewStats(websiteId, startDate, endDate, tz, unit, '*', { url, ref }),
+      getPageviewStats(websiteId, startDate, endDate, tz, unit, '*', { url, referrer }),
       getPageviewStats(websiteId, startDate, endDate, tz, unit, 'distinct session_id', {
         url,
-        ref,
+        referrer,
       }),
     ]);
 

pages/api/website/[id]/stats.js

@@ -8,7 +8,7 @@ export default async (req, res) => {
       return unauthorized(res);
     }
 
-    const { id, start_at, end_at, url, ref } = req.query;
+    const { id, start_at, end_at, url, referrer } = req.query;
 
     const websiteId = +id;
     const startDate = new Date(+start_at);
@@ -18,8 +18,11 @@ export default async (req, res) => {
     const prevStartDate = new Date(+start_at - distance);
     const prevEndDate = new Date(+end_at - distance);
 
-    const metrics = await getWebsiteStats(websiteId, startDate, endDate, { url, ref });
+    const metrics = await getWebsiteStats(websiteId, startDate, endDate, { url, referrer });
-    const prevPeriod = await getWebsiteStats(websiteId, prevStartDate, prevEndDate, { url, ref });
+    const prevPeriod = await getWebsiteStats(websiteId, prevStartDate, prevEndDate, {
+      url,
+      referrer,
+    });
 
     const stats = Object.keys(metrics[0]).reduce((obj, key) => {
       obj[key] = {