Use safe URI decoding.

src/components/hooks/useNavigation.ts

@@ -1,6 +1,6 @@
 import { useMemo } from 'react';
 import { usePathname, useRouter, useSearchParams } from 'next/navigation';
-import { buildUrl } from 'next-basics';
+import { buildUrl, safeDecodeURIComponent } from 'next-basics';
 
 export function useNavigation(): {
   pathname: string;
@@ -16,7 +16,7 @@ export function useNavigation(): {
     const obj = {};
 
     for (const [key, value] of params.entries()) {
-      obj[key] = decodeURIComponent(value);
+      obj[key] = safeDecodeURIComponent(value);
     }
 
     return obj;

src/components/metrics/Legend.tsx

@@ -1,4 +1,5 @@
 import { StatusLight } from 'react-basics';
+import { safeDecodeURIComponent } from 'next-basics';
 import { colord } from 'colord';
 import classNames from 'classnames';
 import { LegendItem } from 'chart.js/auto';
@@ -31,7 +32,7 @@ export function Legend({
             onClick={() => onClick(item)}
           >
             <StatusLight color={color.alpha(color.alpha() + 0.2).toHex()}>
-              <span className={locale}>{text}</span>
+              <span className={locale}>{safeDecodeURIComponent(text)}</span>
             </StatusLight>
           </div>
         );

src/queries/analytics/reports/getUTM.ts

@@ -1,6 +1,7 @@
 import clickhouse from 'lib/clickhouse';
 import { CLICKHOUSE, PRISMA, runQuery } from 'lib/db';
 import prisma from 'lib/prisma';
+import { safeDecodeURIComponent } from 'next-basics';
 
 export async function getUTM(
   ...args: [
@@ -99,7 +100,7 @@ function parseParameters(data: any[]) {
 
       for (const [key, value] of searchParams) {
         if (key.match(/^utm_(\w+)$/)) {
-          const name = decodeURIComponent(value);
+          const name = safeDecodeURIComponent(value);
           if (!obj[key]) {
             obj[key] = { [name]: +num };
           } else if (!obj[key][name]) {