From d3fc30f4c8f44628071dc0c12cfc481d408bc5b8 Mon Sep 17 00:00:00 2001
From: John Ballesteros <johnshift.dev@gmail.com>
Date: Sat, 16 Mar 2024 11:31:04 +0800
Subject: [PATCH] refactor: shared virtual-wrapper component

---
 src/jobs/components/job-list/index.tsx        |  7 ++---
 .../components/virtual-wrapper/index.tsx}     | 29 ++-----------------
 .../virtual-wrapper/use-virtual-wrapper.ts    | 24 +++++++++++++++
 3 files changed, 29 insertions(+), 31 deletions(-)
 rename src/{jobs/components/job-list/virtual-wrapper.tsx => shared/components/virtual-wrapper/index.tsx} (53%)
 create mode 100644 src/shared/components/virtual-wrapper/use-virtual-wrapper.ts

diff --git a/src/jobs/components/job-list/index.tsx b/src/jobs/components/job-list/index.tsx
index 4893042b5..c742ae5bb 100644
--- a/src/jobs/components/job-list/index.tsx
+++ b/src/jobs/components/job-list/index.tsx
@@ -3,6 +3,7 @@
 import { cn } from '~/shared/utils/cn';
 import { reloadPage } from '~/shared/utils/reload-page';
 import { InternalErrorResult } from '~/shared/components/internal-error-result';
+import { VirtualWrapper } from '~/shared/components/virtual-wrapper';
 
 import { useJobList } from '~/jobs/hooks/use-job-list';
 import { InitJobCard } from '~/jobs/components/init-job-card';
@@ -10,8 +11,6 @@ import { JobCard } from '~/jobs/components/job-card';
 import { JobCardSkeleton } from '~/jobs/components/job-card/skeleton';
 import { useFiltersContext } from '~/filters/providers/filters-provider/context';
 
-import { JobListVirtualWrapper } from './virtual-wrapper';
-
 export const JobList = () => {
   const {
     jobs,
@@ -42,7 +41,7 @@ export const JobList = () => {
           <>
             <InitJobCard filterParamsString={filterParamsString} />
 
-            <JobListVirtualWrapper count={jobs.length}>
+            <VirtualWrapper count={jobs.length}>
               {(index) => (
                 <div className={cn({ 'pt-8': index > 0 })}>
                   <JobCard
@@ -51,7 +50,7 @@ export const JobList = () => {
                   />
                 </div>
               )}
-            </JobListVirtualWrapper>
+            </VirtualWrapper>
 
             {hasNextPage ? (
               <div ref={inViewRef}>
diff --git a/src/jobs/components/job-list/virtual-wrapper.tsx b/src/shared/components/virtual-wrapper/index.tsx
similarity index 53%
rename from src/jobs/components/job-list/virtual-wrapper.tsx
rename to src/shared/components/virtual-wrapper/index.tsx
index 26f727980..194ee6ca4 100644
--- a/src/jobs/components/job-list/virtual-wrapper.tsx
+++ b/src/shared/components/virtual-wrapper/index.tsx
@@ -1,15 +1,11 @@
-'use client';
-
-import { useRef } from 'react';
-
-import { useVirtualizer } from '@tanstack/react-virtual';
+import { useVirtualWrapper } from './use-virtual-wrapper';
 
 interface Props {
   count: number;
   children: (index: number) => JSX.Element;
 }
 
-export const JobListVirtualWrapper = ({ count, children }: Props) => {
+export const VirtualWrapper = ({ count, children }: Props) => {
   const { parentRef, virtualizer, items } = useVirtualWrapper(count);
 
   return (
@@ -42,24 +38,3 @@ export const JobListVirtualWrapper = ({ count, children }: Props) => {
     </div>
   );
 };
-
-const OVERSCAN = 5;
-const ESTIMATE_SIZE = 500;
-
-const useVirtualWrapper = (count: number) => {
-  const parentRef = useRef<HTMLDivElement | null>(null);
-  const virtualizer = useVirtualizer({
-    count,
-    getScrollElement: () => parentRef.current,
-    estimateSize: () => ESTIMATE_SIZE,
-    overscan: OVERSCAN,
-    scrollMargin: parentRef.current?.offsetTop ?? 0,
-    initialRect: {
-      width: ESTIMATE_SIZE,
-      height: ESTIMATE_SIZE * 20,
-    },
-  });
-  const items = virtualizer.getVirtualItems();
-
-  return { parentRef, virtualizer, items };
-};
diff --git a/src/shared/components/virtual-wrapper/use-virtual-wrapper.ts b/src/shared/components/virtual-wrapper/use-virtual-wrapper.ts
new file mode 100644
index 000000000..509eaa6d0
--- /dev/null
+++ b/src/shared/components/virtual-wrapper/use-virtual-wrapper.ts
@@ -0,0 +1,24 @@
+import { useRef } from 'react';
+
+import { useVirtualizer } from '@tanstack/react-virtual';
+
+export const useVirtualWrapper = (count: number) => {
+  const parentRef = useRef<HTMLDivElement | null>(null);
+  const virtualizer = useVirtualizer({
+    count,
+    getScrollElement: () => parentRef.current,
+    estimateSize: () => ESTIMATE_SIZE,
+    overscan: OVERSCAN,
+    scrollMargin: parentRef.current?.offsetTop ?? 0,
+    initialRect: {
+      width: ESTIMATE_SIZE,
+      height: ESTIMATE_SIZE * 20,
+    },
+  });
+  const items = virtualizer.getVirtualItems();
+
+  return { parentRef, virtualizer, items };
+};
+
+const OVERSCAN = 5;
+const ESTIMATE_SIZE = 500;