progress

src/app/dashboard/turnover/page.tsx

@@ -1,5 +1,6 @@
 "use client"
-import { useAppSelector, useDimensions } from "@/lib/hooks";
+import { useAppSelector } from "@/lib/hooks";
+import { useDimensions } from "@/lib/hooks/dimension";
 import { useGetResignCategoryQuery, useGetResignReasonQuery, useGetResignSummaryQuery, useGetResignTypeQuery } from "@/services/api";
 import { BarChart, pieArcLabelClasses, PieChart } from "@mui/x-charts";
 import { ChartsNoDataOverlay } from "@mui/x-charts/ChartsOverlay";

src/lib/hooks.ts

@@ -6,24 +6,3 @@ export const useAppDispatch = useDispatch.withTypes<AppDispatch>()
 export const useAppSelector = useSelector.withTypes<RootState>()
 export const useAppStore = useStore.withTypes<AppStore>()
 
-import { RefObject, useMemo, useSyncExternalStore } from "react"
-
-function subscribe(callback: (e: Event) => void) {
-  window.addEventListener("resize", callback)
-  return () => {
-    window.removeEventListener("resize", callback)
-  }
-}
-
-function useDimensions(ref: RefObject<HTMLElement>) {
-  const dimensions = useSyncExternalStore(
-    subscribe,
-    () => JSON.stringify({
-      width: ref.current?.offsetWidth ?? 0,
-      height: ref.current?.offsetHeight ?? 0,
-    })
-  )
-  return useMemo(() => JSON.parse(dimensions), [dimensions])
-}
-
-export { useDimensions }