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>
This commit is contained in:
Kevin Decherf 2022-03-20 22:10:41 +01:00
parent 2b4ddb5388
commit ecfc7ea68e
6 changed files with 27 additions and 22 deletions

View File

@ -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,

View File

@ -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>

View File

@ -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;
}

View File

@ -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(

View File

@ -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,
}),
]);

View File

@ -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] = {