Refactored to use app folder.

src/components/hooks/useApi.ts

@@ -1,4 +1,3 @@
-import { useRouter } from 'next/router';
 import * as reactQuery from '@tanstack/react-query';
 import { useApi as nextUseApi } from 'next-basics';
 import { getClientAuthToken } from 'lib/client';
@@ -8,12 +7,11 @@ import useStore from 'store/app';
 const selector = state => state.shareToken;
 
 export function useApi() {
-  const { basePath } = useRouter();
   const shareToken = useStore(selector);
 
   const { get, post, put, del } = nextUseApi(
     { authorization: `Bearer ${getClientAuthToken()}`, [SHARE_TOKEN_HEADER]: shareToken?.token },
-    basePath,
+    process.env.basePath,
   );
 
   return { get, post, put, del, ...reactQuery };

src/components/hooks/useCountryNames.js

@@ -1,5 +1,4 @@
 import { useState, useEffect } from 'react';
-import { useRouter } from 'next/router';
 import { httpGet } from 'next-basics';
 import enUS from 'public/intl/country/en-US.json';
 
@@ -9,10 +8,9 @@ const countryNames = {
 
 export function useCountryNames(locale) {
   const [list, setList] = useState(countryNames[locale] || enUS);
-  const { basePath } = useRouter();
 
   async function loadData(locale) {
-    const { data } = await httpGet(`${basePath}/intl/country/${locale}.json`);
+    const { data } = await httpGet(`${process.env.basePath}/intl/country/${locale}.json`);
 
     if (data) {
       countryNames[locale] = data;

src/components/hooks/useFilterQuery.js

@@ -1,16 +0,0 @@
-import { useState } from 'react';
-import { useApi } from 'components/hooks/useApi';
-
-export function useFilterQuery(key, fn, options) {
-  const [params, setParams] = useState({
-    query: '',
-    page: 1,
-  });
-  const { useQuery } = useApi();
-
-  const result = useQuery([...key, params], fn.bind(null, params), options);
-
-  return { ...result, params, setParams };
-}
-
-export default useFilterQuery;

src/components/hooks/useFilterQuery.ts

@@ -0,0 +1,26 @@
+import { useCallback, useState } from 'react';
+import { useApi } from 'components/hooks/useApi';
+
+export function useFilterQuery(key: any[], fn, options?: any) {
+  const [params, setParams] = useState({
+    query: '',
+    page: 1,
+  });
+  const { useQuery } = useApi();
+
+  const result = useQuery<{
+    page: number;
+    pageSize: number;
+    count: number;
+    data: any[];
+  }>([...key, params], fn.bind(null, params), options);
+
+  const getProps = useCallback(() => {
+    const { data, isLoading, error } = result;
+    return { result: data, isLoading, error, params, setParams };
+  }, [result, params, setParams]);
+
+  return { ...result, getProps };
+}
+
+export default useFilterQuery;

src/components/hooks/useLanguageNames.js

@@ -1,5 +1,4 @@
 import { useState, useEffect } from 'react';
-import { useRouter } from 'next/router';
 import { httpGet } from 'next-basics';
 import enUS from 'public/intl/language/en-US.json';
 
@@ -9,10 +8,9 @@ const languageNames = {
 
 export function useLanguageNames(locale) {
   const [list, setList] = useState(languageNames[locale] || enUS);
-  const { basePath } = useRouter();
 
   async function loadData(locale) {
-    const { data } = await httpGet(`${basePath}/intl/language/${locale}.json`);
+    const { data } = await httpGet(`${process.env.basePath}/intl/language/${locale}.json`);
 
     if (data) {
       languageNames[locale] = data;

src/components/hooks/useLocale.js

@@ -1,5 +1,4 @@
 import { useEffect } from 'react';
-import { useRouter } from 'next/router';
 import { httpGet, setItem } from 'next-basics';
 import { LOCALE_CONFIG } from 'lib/constants';
 import { getDateLocale, getTextDirection } from 'lib/lang';
@@ -15,13 +14,12 @@ const selector = state => state.locale;
 
 export function useLocale() {
   const locale = useStore(selector);
-  const { basePath } = useRouter();
   const forceUpdate = useForceUpdate();
   const dir = getTextDirection(locale);
   const dateLocale = getDateLocale(locale);
 
   async function loadMessages(locale) {
-    const { ok, data } = await httpGet(`${basePath}/intl/messages/${locale}.json`);
+    const { ok, data } = await httpGet(`${process.env.basePath}/intl/messages/${locale}.json`);
 
     if (ok) {
       messages[locale] = data;

src/components/hooks/usePageQuery.js

@@ -1,30 +1,24 @@
 import { useMemo } from 'react';
-import { useRouter } from 'next/router';
+import { usePathname, useRouter, useSearchParams } from 'next/navigation';
 import { buildUrl } from 'next-basics';
 
 export function usePageQuery() {
   const router = useRouter();
-  const { pathname, search } = location;
-  const { asPath } = router;
+  const pathname = usePathname();
+  const params = useSearchParams();
 
   const query = useMemo(() => {
-    if (!search) {
-      return {};
+    const obj = {};
+
+    for (const [key, value] of params.entries()) {
+      obj[key] = decodeURIComponent(value);
     }
 
-    const params = search.substring(1).split('&');
-
-    return params.reduce((obj, item) => {
-      const [key, value] = item.split('=');
-
-      obj[key] = decodeURIComponent(value);
-
-      return obj;
-    }, {});
-  }, [search]);
+    return obj;
+  }, [params]);
 
   function resolveUrl(params, reset) {
-    return buildUrl(asPath.split('?')[0], { ...(reset ? {} : query), ...params });
+    return buildUrl(pathname, { ...(reset ? {} : query) });
   }
 
   return { pathname, query, resolveUrl, router };

src/components/hooks/useRequireLogin.ts

@@ -1,10 +1,8 @@
 import { useEffect } from 'react';
-import { useRouter } from 'next/router';
 import useApi from 'components/hooks/useApi';
 import useUser from 'components/hooks/useUser';
 
-export function useRequireLogin(handler: (data?: object) => void) {
-  const { basePath } = useRouter();
+export function useRequireLogin(handler?: (data?: object) => void) {
   const { get } = useApi();
   const { user, setUser } = useUser();
 
@@ -15,7 +13,7 @@ export function useRequireLogin(handler: (data?: object) => void) {
 
         setUser(typeof handler === 'function' ? handler(data) : (data as any)?.user);
       } catch {
-        location.href = `${basePath}/login`;
+        location.href = `${process.env.basePath}/login`;
       }
     }