Merge pull request #1 from mathix420/feat/filter-by-query-param

feat: filter by query params

src/app/(main)/websites/[websiteId]/WebsiteDetails.tsx

@@ -16,7 +16,7 @@ export default function WebsiteDetails({ websiteId }: { websiteId: string }) {
   const showLinks = !pathname.includes('/share/');
 
   const {
-    query: { view, url, referrer, os, browser, device, country, region, city, title },
+    query: { view, url, referrer, query, os, browser, device, country, region, city, title },
   } = useNavigation();
 
   if (isLoading || error) {
@@ -26,7 +26,7 @@ export default function WebsiteDetails({ websiteId }: { websiteId: string }) {
   return (
     <>
       <WebsiteHeader websiteId={websiteId} showLinks={showLinks} />
-      <FilterTags params={{ url, referrer, os, browser, device, country, region, city, title }} />
+      <FilterTags params={{ url, referrer, query, os, browser, device, country, region, city, title }} />
       <WebsiteMetricsBar websiteId={websiteId} sticky={true} />
       <WebsiteChart websiteId={websiteId} />
       {!website && <Loading icon="dots" style={{ minHeight: 300 }} />}

src/app/(main)/websites/[websiteId]/WebsiteFilterButton.tsx

@@ -16,6 +16,7 @@ export function WebsiteFilterButton({
   const fieldOptions = [
     { name: 'url', type: 'string', label: formatMessage(labels.url) },
     { name: 'referrer', type: 'string', label: formatMessage(labels.referrer) },
+    { name: 'query', type: 'string', label: formatMessage(labels.query) },
     { name: 'browser', type: 'string', label: formatMessage(labels.browser) },
     { name: 'os', type: 'string', label: formatMessage(labels.os) },
     { name: 'device', type: 'string', label: formatMessage(labels.device) },

src/components/hooks/queries/useWebsitePageviews.ts

@@ -6,7 +6,7 @@ export function useWebsitePageviews(websiteId: string, options?: { [key: string]
   const { startDate, endDate, unit } = dateRange;
   const [timezone] = useTimezone();
   const {
-    query: { url, referrer, os, browser, device, country, region, city, title },
+    query: { url, referrer, query, os, browser, device, country, region, city, title },
   } = useNavigation();
 
   const params = {
@@ -16,6 +16,7 @@ export function useWebsitePageviews(websiteId: string, options?: { [key: string]
     timezone,
     url,
     referrer,
+    query,
     os,
     browser,
     device,

src/components/hooks/queries/useWebsiteStats.ts

@@ -5,7 +5,7 @@ export function useWebsiteStats(websiteId: string, options?: { [key: string]: st
   const [dateRange] = useDateRange(websiteId);
   const { startDate, endDate } = dateRange;
   const {
-    query: { url, referrer, title, os, browser, device, country, region, city },
+    query: { url, referrer, query, title, os, browser, device, country, region, city },
   } = useNavigation();
 
   const params = {
@@ -13,6 +13,7 @@ export function useWebsiteStats(websiteId: string, options?: { [key: string]: st
     endAt: +endDate,
     url,
     referrer,
+    query,
     title,
     os,
     browser,

src/components/metrics/MetricsTable.tsx

@@ -48,7 +48,7 @@ export function MetricsTable({
   const [{ startDate, endDate }] = useDateRange(websiteId);
   const {
     renderUrl,
-    query: { url, referrer, title, os, browser, device, country, region, city },
+    query: { url, referrer, query, title, os, browser, device, country, region, city },
   } = useNavigation();
   const { formatMessage, labels } = useMessages();
   const { dir } = useLocale();
@@ -61,6 +61,7 @@ export function MetricsTable({
       endAt: +endDate,
       url,
       referrer,
+      query,
       os,
       title,
       browser,

src/pages/api/websites/[websiteId]/pageviews.ts

@@ -14,6 +14,7 @@ export interface WebsitePageviewRequestQuery {
   timezone?: string;
   url?: string;
   referrer?: string;
+  query?: string;
   title?: string;
   os?: string;
   browser?: string;
@@ -34,6 +35,7 @@ const schema = {
     timezone: TimezoneTest,
     url: yup.string(),
     referrer: yup.string(),
+    query: yup.string(),
     title: yup.string(),
     os: yup.string(),
     browser: yup.string(),
@@ -52,7 +54,7 @@ export default async (
   await useAuth(req, res);
   await useValidate(schema, req, res);
 
-  const { websiteId, timezone, url, referrer, title, os, browser, device, country, region, city } =
+  const { websiteId, timezone, url, referrer, query, title, os, browser, device, country, region, city } =
     req.query;
 
   if (req.method === 'GET') {
@@ -69,6 +71,7 @@ export default async (
       unit,
       url,
       referrer,
+      query,
       title,
       os,
       browser,