Merge 98558a61e3 into 777515f754

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

@@ -18,6 +18,7 @@ import ScreenTable from '@/components/metrics/ScreenTable';
 import TagsTable from '@/components/metrics/TagsTable';
 import ChannelsTable from '@/components/metrics/ChannelsTable';
 import styles from './WebsiteExpandedView.module.css';
+import { sub } from 'date-fns';
 
 const views = {
   url: PagesTable,
@@ -136,8 +137,8 @@ export default function WebsiteExpandedView({
 
   const DetailsComponent = views[view] || (() => null);
 
-  const handleChange = (view: any) => {
+  const handleChange = (view?: any) => {
-    router.push(renderUrl({ view }));
+    router.push(renderUrl({ view }, false, ['subview']));
   };
 
   const renderValue = (value: string) => items.find(({ key }) => key === value)?.label;
@@ -146,7 +147,7 @@ export default function WebsiteExpandedView({
     <div className={styles.layout}>
       <div className={styles.menu}>
         <LinkButton
-          href={renderUrl({ view: undefined })}
+          href={renderUrl({ view: undefined, subview: undefined })}
           className={styles.back}
           variant="quiet"
           scroll={false}
@@ -156,7 +157,7 @@ export default function WebsiteExpandedView({
           </Icon>
           <Text>{formatMessage(labels.back)}</Text>
         </LinkButton>
-        <SideNav className={styles.nav} items={items} selectedKey={view} shallow={true} />
+        <SideNav onSelect={handleChange} className={styles.nav} items={items} selectedKey={view} shallow={true} />
         <Dropdown
           className={styles.dropdown}
           items={items}
@@ -181,4 +182,4 @@ export default function WebsiteExpandedView({
       </div>
     </div>
   );
-}
+}

src/components/hooks/useNavigation.ts

@@ -6,7 +6,7 @@ export function useNavigation(): {
   pathname: string;
   query: { [key: string]: string };
   router: any;
-  renderUrl: (params: any, reset?: boolean) => string;
+  renderUrl: (params: any, reset?: boolean, removeParams?: string[]) => string;
 } {
   const router = useRouter();
   const pathname = usePathname();
@@ -22,8 +22,17 @@ export function useNavigation(): {
     return obj;
   }, [params]);
 
-  function renderUrl(params: any, reset?: boolean) {
+  function renderUrl(params: any, reset?: boolean, removeParams: string[] = []) {
-    return reset ? pathname : buildUrl(pathname, { ...query, ...params });
+    if (reset) {
+      return pathname;
+    } else {
+      const newParams = { ...query, ...params };
+      removeParams.forEach(param => {
+        delete newParams[param];
+      });
+
+      return buildUrl(pathname, newParams);
+    }
   }
 
   return { pathname, query, router, renderUrl };

src/components/metrics/PagesTable.tsx

@@ -14,13 +14,13 @@ export function PagesTable({ allowFilter, ...props }: PagesTableProps) {
   const {
     router,
     renderUrl,
-    query: { view = 'url' },
+    query: { subview = "url" },
   } = useNavigation();
   const { formatMessage, labels } = useMessages();
   const { domain } = useContext(WebsiteContext);
 
   const handleSelect = (key: any) => {
-    router.push(renderUrl({ view: key }), { scroll: false });
+    router.push(renderUrl({ subview: key }), { scroll: false });
   };
 
   const buttons = [
@@ -45,11 +45,11 @@ export function PagesTable({ allowFilter, ...props }: PagesTableProps) {
   const renderLink = ({ x }) => {
     return (
       <FilterLink
-        id={view === 'entry' || view === 'exit' ? 'url' : view}
+        id={subview === 'entry' || subview === 'exit' ? 'url' : subview}
         value={x}
         label={!x && formatMessage(labels.none)}
         externalUrl={
-          view !== 'title'
+          subview !== 'title'
             ? `${domain.startsWith('http') ? domain : `https://${domain}`}${x}`
             : null
         }
@@ -61,12 +61,12 @@ export function PagesTable({ allowFilter, ...props }: PagesTableProps) {
     <MetricsTable
       {...props}
       title={formatMessage(labels.pages)}
-      type={view}
+      type={subview}
       metric={formatMessage(labels.visitors)}
       dataFilter={emptyFilter}
       renderLabel={renderLink}
     >
-      {allowFilter && <FilterButtons items={buttons} selectedKey={view} onSelect={handleSelect} />}
+      {allowFilter && <FilterButtons items={buttons} selectedKey={subview} onSelect={handleSelect} />}
     </MetricsTable>
   );
 }

src/components/metrics/ReferrersTable.tsx

@@ -15,12 +15,12 @@ export function ReferrersTable({ allowFilter, ...props }: ReferrersTableProps) {
   const {
     router,
     renderUrl,
-    query: { view = 'referrer' },
+    query: { subview = 'referrer' },
   } = useNavigation();
   const { formatMessage, labels } = useMessages();
 
   const handleSelect = (key: any) => {
-    router.push(renderUrl({ view: key }), { scroll: false });
+    router.push(renderUrl({ subview: key }), { scroll: false });
   };
 
   const buttons = [
@@ -35,7 +35,7 @@ export function ReferrersTable({ allowFilter, ...props }: ReferrersTableProps) {
   ];
 
   const renderLink = ({ x: referrer }) => {
-    if (view === 'grouped') {
+    if (subview === 'grouped') {
       if (referrer === '_other') {
         return `(${formatMessage(labels.other)})`;
       } else {
@@ -92,15 +92,15 @@ export function ReferrersTable({ allowFilter, ...props }: ReferrersTableProps) {
         title={formatMessage(labels.referrers)}
         type="referrer"
         metric={formatMessage(labels.visitors)}
-        dataFilter={view === 'grouped' ? groupedFilter : undefined}
+        dataFilter={subview === 'grouped' ? groupedFilter : undefined}
         renderLabel={renderLink}
       >
         {allowFilter && (
-          <FilterButtons items={buttons} selectedKey={view} onSelect={handleSelect} />
+          <FilterButtons items={buttons} selectedKey={subview} onSelect={handleSelect} />
         )}
       </MetricsTable>
     </>
   );
 }
 
-export default ReferrersTable;
+export default ReferrersTable;