Imported libraries, removed next-basics.

src/components/common/FilterLink.tsx

@@ -1,6 +1,5 @@
 import classNames from 'classnames';
 import { useMessages, useNavigation } from 'components/hooks';
-import { safeDecodeURIComponent } from 'next-basics';
 import Link from 'next/link';
 import { ReactNode } from 'react';
 import { Icon, Icons } from 'react-basics';
@@ -39,7 +38,7 @@ export function FilterLink({
       {!value && `(${label || formatMessage(labels.unknown)})`}
       {value && (
         <Link href={renderUrl({ [id]: value })} className={styles.label} replace>
-          {safeDecodeURIComponent(label || value)}
+          {label || value}
         </Link>
       )}
       {externalUrl && (

src/components/hooks/queries/useTeams.ts

@@ -11,6 +11,7 @@ export function useTeams(userId: string) {
     queryFn: (params: any) => {
       return get(`/users/${userId}/teams`, params);
     },
+    enabled: !!userId,
   });
 }
 

src/components/hooks/useApi.ts

@@ -1,7 +1,8 @@
+import { useCallback } from 'react';
 import * as reactQuery from '@tanstack/react-query';
-import { useApi as nextUseApi } from 'next-basics';
 import { getClientAuthToken } from 'lib/client';
 import { SHARE_TOKEN_HEADER } from 'lib/constants';
+import { httpGet, httpPost, httpPut, httpDelete } from 'lib/fetch';
 import useStore from 'store/app';
 
 const selector = (state: { shareToken: { token?: string } }) => state.shareToken;
@@ -9,12 +10,50 @@ const selector = (state: { shareToken: { token?: string } }) => state.shareToken
 export function useApi() {
   const shareToken = useStore(selector);
 
-  const { get, post, put, del } = nextUseApi(
-    { authorization: `Bearer ${getClientAuthToken()}`, [SHARE_TOKEN_HEADER]: shareToken?.token },
-    process.env.basePath,
-  );
+  const defaultHeaders = {
+    authorization: `Bearer ${getClientAuthToken()}`,
+    [SHARE_TOKEN_HEADER]: shareToken?.token,
+  };
+  const basePath = process.env.basePath;
 
-  return { get, post, put, del, ...reactQuery };
+  function getUrl(url: string, basePath = ''): string {
+    return url.startsWith('http') ? url : `${basePath}/api${url}`;
+  }
+
+  const getHeaders = (headers: any = {}) => {
+    return { ...defaultHeaders, ...headers };
+  };
+
+  return {
+    get: useCallback(
+      async (url: string, params: object = {}, headers: object = {}) => {
+        return httpGet(getUrl(url, basePath), params, getHeaders(headers));
+      },
+      [httpGet],
+    ),
+
+    post: useCallback(
+      async (url: string, params: object = {}, headers: object = {}) => {
+        return httpPost(getUrl(url, basePath), params, getHeaders(headers));
+      },
+      [httpPost],
+    ),
+
+    put: useCallback(
+      async (url: string, params: object = {}, headers: object = {}) => {
+        return httpPut(getUrl(url, basePath), params, getHeaders(headers));
+      },
+      [httpPut],
+    ),
+
+    del: useCallback(
+      async (url: string, params: object = {}, headers: object = {}) => {
+        return httpDelete(getUrl(url, basePath), params, getHeaders(headers));
+      },
+      [httpDelete],
+    ),
+    ...reactQuery,
+  };
 }
 
 export default useApi;

src/components/hooks/useCountryNames.ts

@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react';
-import { httpGet } from 'next-basics';
+import { httpGet } from 'lib/fetch';
 import enUS from '../../../public/intl/country/en-US.json';
 
 const countryNames = {

src/components/hooks/useDateRange.ts

@@ -1,5 +1,5 @@
 import { getMinimumUnit, parseDateRange } from 'lib/date';
-import { setItem } from 'next-basics';
+import { setItem } from 'lib/storage';
 import { DATE_RANGE_CONFIG, DEFAULT_DATE_COMPARE, DEFAULT_DATE_RANGE } from 'lib/constants';
 import websiteStore, { setWebsiteDateRange, setWebsiteDateCompare } from 'store/websites';
 import appStore, { setDateRange } from 'store/app';

src/components/hooks/useLanguageNames.ts

@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react';
-import { httpGet } from 'next-basics';
+import { httpGet } from 'lib/fetch';
 import enUS from '../../../public/intl/language/en-US.json';
 
 const languageNames = {

src/components/hooks/useLocale.ts

@@ -1,5 +1,6 @@
 import { useEffect } from 'react';
-import { httpGet, setItem } from 'next-basics';
+import { httpGet } from 'lib/fetch';
+import { setItem } from 'lib/storage';
 import { LOCALE_CONFIG } from 'lib/constants';
 import { getDateLocale, getTextDirection } from 'lib/lang';
 import useStore, { setLocale } from 'store/app';

src/components/hooks/useNavigation.ts

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

src/components/hooks/useTheme.ts

@@ -1,6 +1,6 @@
 import { useEffect, useMemo } from 'react';
 import useStore, { setTheme } from 'store/app';
-import { getItem, setItem } from 'next-basics';
+import { getItem, setItem } from 'lib/storage';
 import { DEFAULT_THEME, THEME_COLORS, THEME_CONFIG } from 'lib/constants';
 import { colord } from 'colord';
 

src/components/hooks/useTimezone.ts

@@ -1,4 +1,4 @@
-import { setItem } from 'next-basics';
+import { setItem } from 'lib/storage';
 import { TIMEZONE_CONFIG } from 'lib/constants';
 import { formatInTimeZone, zonedTimeToUtc, utcToZonedTime } from 'date-fns-tz';
 import useStore, { setTimezone } from 'store/app';

src/components/input/TeamsButton.tsx

@@ -16,7 +16,7 @@ export function TeamsButton({
 }) {
   const { user } = useLogin();
   const { formatMessage, labels } = useMessages();
-  const { result } = useTeams(user?.id);
+  const { result } = useTeams(user.id);
   const { teamId } = useTeamUrl();
   const team = result?.data?.find(({ id }) => id === teamId);
 

src/components/metrics/Legend.tsx

@@ -1,5 +1,4 @@
 import { StatusLight } from 'react-basics';
-import { safeDecodeURIComponent } from 'next-basics';
 import { colord } from 'colord';
 import classNames from 'classnames';
 import { LegendItem } from 'chart.js/auto';
@@ -28,9 +27,7 @@ export function Legend({
             className={classNames(styles.label, { [styles.hidden]: hidden })}
             onClick={() => onClick(item)}
           >
-            <StatusLight color={color.alpha(color.alpha() + 0.2).toHex()}>
-              {safeDecodeURIComponent(text)}
-            </StatusLight>
+            <StatusLight color={color.alpha(color.alpha() + 0.2).toHex()}>{text}</StatusLight>
           </div>
         );
       })}

src/components/metrics/QueryParametersTable.tsx

@@ -1,5 +1,4 @@
 import { useState } from 'react';
-import { safeDecodeURI } from 'next-basics';
 import FilterButtons from 'components/common/FilterButtons';
 import { emptyFilter, paramFilter } from 'lib/filters';
 import { FILTER_RAW, FILTER_COMBINED } from 'lib/constants';
@@ -39,8 +38,8 @@ export function QueryParametersTable({
           x
         ) : (
           <div className={styles.item}>
-            <div className={styles.param}>{safeDecodeURI(p)}</div>
-            <div className={styles.value}>{safeDecodeURI(v)}</div>
+            <div className={styles.param}>{p}</div>
+            <div className={styles.value}>{v}</div>
           </div>
         )
       }