Layout updates.

src/components/metrics/EventsChart.js

@@ -3,7 +3,7 @@ import { Loading } from 'react-basics';
 import { colord } from 'colord';
 import BarChart from './BarChart';
 import { getDateArray } from 'lib/date';
-import { useApi, useLocale, useDateRange, useTimezone, usePageQuery } from 'components/hooks';
+import { useApi, useLocale, useDateRange, useTimezone, useNavigation } from 'components/hooks';
 import { EVENT_COLORS } from 'lib/constants';
 import { renderDateLabels, renderStatusTooltipPopup } from 'lib/charts';
 
@@ -14,7 +14,7 @@ export function EventsChart({ websiteId, className, token }) {
   const [timezone] = useTimezone();
   const {
     query: { url, event },
-  } = usePageQuery();
+  } = useNavigation();
 
   const { data, isLoading } = useQuery(['events', websiteId, modified, event], () =>
     get(`/websites/${websiteId}/events`, {

src/components/metrics/FilterTags.js

@@ -1,6 +1,6 @@
 import { safeDecodeURI } from 'next-basics';
 import { Button, Icon, Icons, Text } from 'react-basics';
-import usePageQuery from 'components/hooks/usePageQuery';
+import useNavigation from 'components/hooks/useNavigation';
 import useMessages from 'components/hooks/useMessages';
 import styles from './FilterTags.module.css';
 
@@ -8,9 +8,9 @@ export function FilterTags({ params }) {
   const { formatMessage, labels } = useMessages();
   const {
     router,
-    resolveUrl,
+    makeUrl,
     query: { view },
-  } = usePageQuery();
+  } = useNavigation();
 
   if (Object.keys(params).filter(key => params[key]).length === 0) {
     return null;
@@ -18,9 +18,9 @@ export function FilterTags({ params }) {
 
   function handleCloseFilter(param) {
     if (!param) {
-      router.push(resolveUrl({ view }, true));
+      router.push(makeUrl({ view }, true));
     } else {
-      router.push(resolveUrl({ [param]: undefined }));
+      router.push(makeUrl({ [param]: undefined }));
     }
   }
 

src/components/metrics/MetricsTable.js

@@ -6,7 +6,7 @@ import classNames from 'classnames';
 import useApi from 'components/hooks/useApi';
 import { percentFilter } from 'lib/filters';
 import useDateRange from 'components/hooks/useDateRange';
-import usePageQuery from 'components/hooks/usePageQuery';
+import useNavigation from 'components/hooks/useNavigation';
 import ErrorMessage from 'components/common/ErrorMessage';
 import ListTable from './ListTable';
 import { DEFAULT_ANIMATION_DURATION } from 'lib/constants';
@@ -28,9 +28,9 @@ export function MetricsTable({
 }) {
   const [{ startDate, endDate, modified }] = useDateRange(websiteId);
   const {
-    resolveUrl,
+    makeUrl,
     query: { url, referrer, title, os, browser, device, country, region, city },
-  } = usePageQuery();
+  } = useNavigation();
   const { formatMessage, labels } = useMessages();
   const { get, useQuery } = useApi();
   const { dir } = useLocale();
@@ -103,7 +103,7 @@ export function MetricsTable({
       {data && !error && <ListTable {...props} data={filteredData} className={className} />}
       <div className={styles.footer}>
         {data && !error && limit && (
-          <Link href={resolveUrl({ view: type })}>
+          <Link href={makeUrl({ view: type })}>
             <Button variant="quiet">
               <Text>{formatMessage(labels.more)}</Text>
               <Icon size="sm" rotate={dir === 'rtl' ? 180 : 0}>

src/components/metrics/PagesTable.js

@@ -2,19 +2,19 @@ import FilterLink from 'components/common/FilterLink';
 import FilterButtons from 'components/common/FilterButtons';
 import MetricsTable from './MetricsTable';
 import useMessages from 'components/hooks/useMessages';
-import usePageQuery from 'components/hooks/usePageQuery';
+import useNavigation from 'components/hooks/useNavigation';
 import { emptyFilter } from 'lib/filters';
 
 export function PagesTable({ websiteId, showFilters, ...props }) {
   const {
     router,
-    resolveUrl,
+    makeUrl,
     query: { view = 'url' },
-  } = usePageQuery();
+  } = useNavigation();
   const { formatMessage, labels } = useMessages();
 
   const handleSelect = key => {
-    router.push(resolveUrl({ view: key }), null, { shallow: true });
+    router.push(makeUrl({ view: key }), { scroll: true });
   };
 
   const buttons = [