Refactored queries.

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

@@ -43,7 +43,7 @@ export default function WebsiteExpandedView({
   const { formatMessage, labels } = useMessages();
   const {
     router,
-    makeUrl,
+    renderUrl,
     pathname,
     query: { view },
   } = useNavigation();
@@ -52,69 +52,69 @@ export default function WebsiteExpandedView({
     {
       key: 'url',
       label: formatMessage(labels.pages),
-      url: makeUrl({ view: 'url' }),
+      url: renderUrl({ view: 'url' }),
     },
     {
       key: 'referrer',
       label: formatMessage(labels.referrers),
-      url: makeUrl({ view: 'referrer' }),
+      url: renderUrl({ view: 'referrer' }),
     },
     {
       key: 'browser',
       label: formatMessage(labels.browsers),
-      url: makeUrl({ view: 'browser' }),
+      url: renderUrl({ view: 'browser' }),
     },
     {
       key: 'os',
       label: formatMessage(labels.os),
-      url: makeUrl({ view: 'os' }),
+      url: renderUrl({ view: 'os' }),
     },
     {
       key: 'device',
       label: formatMessage(labels.devices),
-      url: makeUrl({ view: 'device' }),
+      url: renderUrl({ view: 'device' }),
     },
     {
       key: 'country',
       label: formatMessage(labels.countries),
-      url: makeUrl({ view: 'country' }),
+      url: renderUrl({ view: 'country' }),
     },
     {
       key: 'region',
       label: formatMessage(labels.regions),
-      url: makeUrl({ view: 'region' }),
+      url: renderUrl({ view: 'region' }),
     },
     {
       key: 'city',
       label: formatMessage(labels.cities),
-      url: makeUrl({ view: 'city' }),
+      url: renderUrl({ view: 'city' }),
     },
     {
       key: 'language',
       label: formatMessage(labels.languages),
-      url: makeUrl({ view: 'language' }),
+      url: renderUrl({ view: 'language' }),
     },
     {
       key: 'screen',
       label: formatMessage(labels.screens),
-      url: makeUrl({ view: 'screen' }),
+      url: renderUrl({ view: 'screen' }),
     },
     {
       key: 'event',
       label: formatMessage(labels.events),
-      url: makeUrl({ view: 'event' }),
+      url: renderUrl({ view: 'event' }),
     },
     {
       key: 'query',
       label: formatMessage(labels.queryParameters),
-      url: makeUrl({ view: 'query' }),
+      url: renderUrl({ view: 'query' }),
     },
   ];
 
   const DetailsComponent = views[view] || (() => null);
 
   const handleChange = (view: any) => {
-    router.push(makeUrl({ view }));
+    router.push(renderUrl({ view }));
   };
 
   const renderValue = (value: string) => items.find(({ key }) => key === value)?.label;

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

@@ -11,7 +11,7 @@ export function WebsiteFilterButton({
   className?: string;
 }) {
   const { formatMessage, labels } = useMessages();
-  const { makeUrl, router } = useNavigation();
+  const { renderUrl, router } = useNavigation();
 
   const fieldOptions = [
     { name: 'url', type: 'string', label: formatMessage(labels.url) },
@@ -25,7 +25,7 @@ export function WebsiteFilterButton({
   ];
 
   const handleAddFilter = ({ name, value }) => {
-    router.push(makeUrl({ [name]: value }));
+    router.push(renderUrl({ [name]: value }));
   };
 
   return (

src/app/(main)/websites/[websiteId]/event-data/EventDataTable.tsx

@@ -6,7 +6,7 @@ import { DATA_TYPES } from 'lib/constants';
 
 export function EventDataTable({ data = [] }) {
   const { formatMessage, labels } = useMessages();
-  const { makeUrl } = useNavigation();
+  const { renderUrl } = useNavigation();
 
   if (data.length === 0) {
     return <Empty />;
@@ -16,7 +16,7 @@ export function EventDataTable({ data = [] }) {
     <GridTable data={data}>
       <GridColumn name="eventName" label={formatMessage(labels.event)}>
         {row => (
-          <Link href={makeUrl({ event: row.eventName })} shallow={true}>
+          <Link href={renderUrl({ event: row.eventName })} shallow={true}>
             {row.eventName}
           </Link>
         )}

src/app/(main)/websites/[websiteId]/event-data/EventDataValueTable.tsx

@@ -8,12 +8,12 @@ import { DATA_TYPES } from 'lib/constants';
 
 export function EventDataValueTable({ data = [], event }: { data: any[]; event: string }) {
   const { formatMessage, labels } = useMessages();
-  const { makeUrl } = useNavigation();
+  const { renderUrl } = useNavigation();
 
   const Title = () => {
     return (
       <>
-        <Link href={makeUrl({ event: undefined })}>
+        <Link href={renderUrl({ event: undefined })}>
           <Button>
             <Icon rotate={180}>
               <Icons.ArrowRight />

src/app/(main)/websites/[websiteId]/event-data/page.tsx

@@ -1,15 +1,15 @@
 import WebsiteHeader from '../WebsiteHeader';
 import WebsiteEventData from './WebsiteEventData';
 
-export default function WebsiteEventDataPage({ params: { id } }) {
-  if (!id) {
+export default function WebsiteEventDataPage({ params: { websiteId } }) {
+  if (!websiteId) {
     return null;
   }
 
   return (
     <>
-      <WebsiteHeader websiteId={id} />
-      <WebsiteEventData websiteId={id} />
+      <WebsiteHeader websiteId={websiteId} />
+      <WebsiteEventData websiteId={websiteId} />
     </>
   );
 }

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

@@ -1,5 +1,5 @@
 import WebsiteDetails from './WebsiteDetails';
 
-export default function WebsitePage({ params: { id } }) {
-  return <WebsiteDetails websiteId={id} />;
+export default function WebsitePage({ params: { websiteId } }) {
+  return <WebsiteDetails websiteId={websiteId} />;
 }

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

@@ -1,9 +1,9 @@
 import Realtime from './Realtime';
 
-export default function WebsiteRealtimePage({ params: { id } }) {
-  if (!id) {
+export default function WebsiteRealtimePage({ params: { websiteId } }) {
+  if (!websiteId) {
     return null;
   }
 
-  return <Realtime websiteId={id} />;
+  return <Realtime websiteId={websiteId} />;
 }

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

@@ -1,9 +1,9 @@
 import WebsiteReports from './WebsiteReports';
 
-export default function WebsiteReportsPage({ params: { id } }) {
-  if (!id) {
+export default function WebsiteReportsPage({ params: { websiteId } }) {
+  if (!websiteId) {
     return null;
   }
 
-  return <WebsiteReports websiteId={id} />;
+  return <WebsiteReports websiteId={websiteId} />;
 }