feat: add new hooks

src/hooks/index.ts

@@ -0,0 +1,10 @@
+export { default as useUserInfo } from './useUserInfo';
+export { default as useVerify } from './useVerify';
+export { default as useDisclosure } from './useDisclosure';
+export { default as useMediaQuery } from './useMediaQuery';
+export { default as useChangeRoute } from './useChangeRoute';
+export { default as useUrlQuery } from './useUrlQuery';
+export { default as useDebounce } from './useDebounce';
+export { default as useTitle } from './useTitle';
+
+export * from './useRedux';

src/hooks/useChangeRoute.js

@@ -0,0 +1,22 @@
+import { useRouter, usePathname, useSearchParams } from 'next/navigation';
+
+export default function useChangeRoute() {
+  const { replace } = useRouter();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+  let query = {};
+  searchParams.forEach((value, key) => {
+    query[key] = value;
+  });
+
+  const changeRoute = (newQueries) => {
+    const queryParams = new URLSearchParams();
+    Object.entries({ ...query, ...newQueries }).forEach(([key, value]) => {
+      if (value) queryParams.set(key, value);
+    });
+
+    replace(`${pathname}?${queryParams.toString()}`, { scroll: false });
+  };
+
+  return changeRoute;
+}

src/hooks/useDebounce.js

@@ -0,0 +1,19 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+function useDebounce(value, delay) {
+  const [debouncedValue, setDebouncedValue] = useState(value);
+
+  useEffect(() => {
+    const timer = setTimeout(() => setDebouncedValue(value), delay);
+
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [value, delay]);
+
+  return debouncedValue;
+}
+
+export default useDebounce;

src/hooks/useDisclosure.js

@@ -0,0 +1,20 @@
+'use client';
+import { useState } from 'react';
+
+export default function useDisclosure() {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const open = () => {
+    if (!isOpen) setIsOpen(true);
+  };
+
+  const close = () => {
+    if (isOpen) setIsOpen(false);
+  };
+
+  const toggle = () => {
+    isOpen ? close() : open();
+  };
+
+  return [isOpen, { open, close, toggle }];
+}

src/hooks/useMediaQuery.js

@@ -0,0 +1,21 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+
+const useMediaQuery = (query) => {
+  const [matches, setMatches] = useState(false);
+
+  useEffect(() => {
+    const media = window.matchMedia(query);
+    if (media.matches !== matches) {
+      setMatches(media.matches);
+    }
+    const listener = () => setMatches(media.matches);
+    window.addEventListener('resize', listener);
+    return () => window.removeEventListener('resize', listener);
+  }, [matches, query]);
+
+  return matches;
+};
+
+export default useMediaQuery;

src/hooks/useRedux.js

@@ -0,0 +1,4 @@
+import { useDispatch, useSelector } from 'react-redux';
+
+export const useAppDispatch = () => useDispatch();
+export const useAppSelector = useSelector;

src/hooks/useTitle.js

@@ -0,0 +1,10 @@
+import { useEffect, useState } from 'react';
+
+export default function useTitle(initialTitle) {
+  const [title, setTitle] = useState(initialTitle);
+  const updateTitle = () => {
+    document.title = title;
+  };
+  useEffect(updateTitle, [title]);
+  return setTitle;
+}

src/hooks/useUA.ts

@@ -1,13 +0,0 @@
-import { useState, useEffect } from 'react';
-
-import { Hosting } from '@/utils/ua';
-
-export default function useUA() {
-  const [inWX, setInWX] = useState(true);
-
-  useEffect(() => {
-    setInWX(Hosting.isWX(window?.navigator?.userAgent?.toLowerCase()));
-  }, []);
-
-  return { inWX };
-}

src/hooks/useUrlQuery.js

@@ -0,0 +1,11 @@
+import { useSearchParams } from 'next/navigation';
+
+export default function useUrlQuery() {
+  const searchParams = useSearchParams();
+  let query = {};
+  searchParams.forEach((value, key) => {
+    query[key] = value;
+  });
+
+  return query;
+}

src/hooks/useUserInfo.js

@@ -0,0 +1,17 @@
+import { useGetUserInfoQuery } from '@/store/services';
+import useVerify from './useVerify';
+import { useAppDispatch } from './useRedux';
+import { userLogin } from '@/store';
+
+export default function useUserInfo() {
+  const dispatch = useAppDispatch();
+  const isVerify = useVerify();
+
+  const { data, isLoading, error, isError } = useGetUserInfoQuery(undefined, {
+    skip: !isVerify,
+  });
+
+  if (isError) dispatch(userLogin(''));
+
+  return { userInfo: data?.data, isVerify, isLoading, error, isError };
+}

src/hooks/useVerify.js

@@ -0,0 +1,17 @@
+import { useSelector } from 'react-redux';
+import jwt from 'jsonwebtoken';
+
+export default function useVerify() {
+  const { token } = useSelector((state) => state.user);
+  let status;
+
+  if (!token) return false;
+
+  jwt.verify(token, process.env.NEXT_PUBLIC_ACCESS_TOKEN_SECRET, (err, decoded) => {
+    if (err) status = false;
+    if (decoded) status = true;
+  });
+
+  if (status) return true;
+  else return false;
+}