From ecfc7ea68e0661f0e5c64d965c9f82549480d395 Mon Sep 17 00:00:00 2001 From: Kevin Decherf Date: Sun, 20 Mar 2022 22:10:41 +0100 Subject: [PATCH] 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 --- components/metrics/ReferrersTable.js | 4 ++-- components/metrics/WebsiteChart.js | 8 ++++---- lib/filters.js | 10 ++++++---- lib/queries.js | 12 ++++++------ pages/api/website/[id]/pageviews.js | 6 +++--- pages/api/website/[id]/stats.js | 9 ++++++--- 6 files changed, 27 insertions(+), 22 deletions(-) diff --git a/components/metrics/ReferrersTable.js b/components/metrics/ReferrersTable.js index c7079e8d..93cdb956 100644 --- a/components/metrics/ReferrersTable.js +++ b/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 (
- + { @@ -88,7 +88,7 @@ export default function WebsiteChart({ stickyClassName={styles.sticky} enabled={stickyHeader} > - +
diff --git a/lib/filters.js b/lib/filters.js index e9723b42..9f00d529 100644 --- a/lib/filters.js +++ b/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 => { - return ref !== '' && ref !== null && !ref.startsWith('/') && !ref.startsWith('#'); + const isValidRef = referrer => { + 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 query = ref ? `?ref=${ref}` : ''; + const referrer = searchParams.get('ref'); + const query = referrer ? `?referrer=${referrer}` : ''; return removeTrailingSlash(`${removeWWW(hostname)}${path}`) + query; } diff --git a/lib/queries.js b/lib/queries.js index 5bcd18ba..6b3c6c4e 100644 --- a/lib/queries.js +++ b/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( diff --git a/pages/api/website/[id]/pageviews.js b/pages/api/website/[id]/pageviews.js index 22966ca7..e2069f8c 100644 --- a/pages/api/website/[id]/pageviews.js +++ b/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, }), ]); diff --git a/pages/api/website/[id]/stats.js b/pages/api/website/[id]/stats.js index 9dd82361..cdb374e2 100644 --- a/pages/api/website/[id]/stats.js +++ b/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 prevPeriod = await getWebsiteStats(websiteId, prevStartDate, prevEndDate, { url, ref }); + const metrics = await getWebsiteStats(websiteId, startDate, endDate, { url, referrer }); + const prevPeriod = await getWebsiteStats(websiteId, prevStartDate, prevEndDate, { + url, + referrer, + }); const stats = Object.keys(metrics[0]).reduce((obj, key) => { obj[key] = {