Fix issue with generating URLs.

components/metrics/MetricsTable.js

@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react';
-import { FormattedMessage } from 'react-intl';
+import { defineMessages, useIntl } from 'react-intl';
 import firstBy from 'thenby';
 import classNames from 'classnames';
 import Link from 'components/common/Link';
@@ -14,6 +14,10 @@ import DataTable from './DataTable';
 import { DEFAULT_ANIMATION_DURATION } from 'lib/constants';
 import styles from './MetricsTable.module.css';
 
+const messages = defineMessages({
+  more: { id: 'label.more', defaultMessage: 'More' },
+});
+
 export default function MetricsTable({
   websiteId,
   type,
@@ -31,6 +35,7 @@ export default function MetricsTable({
     router,
     query: { url, referrer, os, browser, device, country },
   } = usePageQuery();
+  const { formatMessage } = useIntl();
 
   const { data, loading, error } = useFetch(
     `/website/${websiteId}/metrics`,
@@ -80,7 +85,7 @@ export default function MetricsTable({
             size="small"
             iconRight
           >
-            <FormattedMessage id="label.more" defaultMessage="More" />
+            {formatMessage(messages.more)}
           </Link>
         )}
       </div>

hooks/usePageQuery.js

@@ -1,13 +1,11 @@
 import { useMemo } from 'react';
 import { useRouter } from 'next/router';
-
-function getQueryString(params) {
-  return new URLSearchParams({ ...params }).toString();
-}
+import { buildUrl } from 'next-basics';
 
 export default function usePageQuery() {
   const router = useRouter();
   const { pathname, search } = location;
+  const { asPath } = router;
 
   const query = useMemo(() => {
     if (!search) {
@@ -26,11 +24,7 @@ export default function usePageQuery() {
   }, [search]);
 
   function resolve(params) {
-    const search = getQueryString({ ...query, ...params });
-
-    const { asPath } = router;
-
-    return `${asPath.split('?')[0]}${search}`;
+    return buildUrl(asPath.split('?')[0], { ...query, ...params });
   }
 
   return { pathname, query, resolve, router };

package.json

@@ -85,7 +85,7 @@
     "maxmind": "^4.3.6",
     "moment-timezone": "^0.5.35",
     "next": "^12.2.5",
-    "next-basics": "^0.6.0",
+    "next-basics": "^0.7.0",
     "node-fetch": "^3.2.8",
     "npm-run-all": "^4.1.5",
     "prop-types": "^15.7.2",

yarn.lock

@@ -4731,10 +4731,10 @@ natural-compare@^1.4.0:
   resolved "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz"
   integrity sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc=
 
-next-basics@^0.6.0:
-  version "0.6.0"
-  resolved "https://registry.yarnpkg.com/next-basics/-/next-basics-0.6.0.tgz#bbb3b2dafa69931c3b7aad0cd456332ddcf019c7"
-  integrity sha512-S9deRGhQPj9tN9WSroK8UAcxFuoV38YNFO9B5qEQpt7ZUNCkAUITccW98LGlJ5WfNzkp7dnXVgmL3+yvRWlH4w==
+next-basics@^0.7.0:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/next-basics/-/next-basics-0.7.0.tgz#ef2a23dcb3bbfb2170df26b8b5f50c823edc1a2a"
+  integrity sha512-Z6u8IU77XqadrntFx98CVmfOBcDOiHvemUW753STMte81W9TLflRgOSg1thIg5iwgzQfvCIaU5I1sd06XvvdeA==
   dependencies:
     bcryptjs "^2.4.3"
     jsonwebtoken "^8.5.1"