From db354af3e6405935ae33840bfae3a569fbfafc05 Mon Sep 17 00:00:00 2001
From: John Ballesteros <johnshift.dev@gmail.com>
Date: Mon, 18 Mar 2024 11:55:19 +0800
Subject: [PATCH] refactor: shared card wrapper component

---
 src/jobs/components/job-card/index.tsx          |  7 ++++---
 .../components/card-wrapper.tsx}                | 17 ++++++++---------
 2 files changed, 12 insertions(+), 12 deletions(-)
 rename src/{jobs/components/job-card/client-wrapper.tsx => shared/components/card-wrapper.tsx} (54%)

diff --git a/src/jobs/components/job-card/index.tsx b/src/jobs/components/job-card/index.tsx
index cfaca930d..1653e7858 100644
--- a/src/jobs/components/job-card/index.tsx
+++ b/src/jobs/components/job-card/index.tsx
@@ -1,14 +1,15 @@
 import Link from 'next/link';
 
+import { CardWrapper } from '~/shared/components/card-wrapper';
 import { Divider } from '~/shared/components/divider';
 import { Heading } from '~/shared/components/heading';
 
 import { JOB_TEST_IDS } from '~/jobs/core/constants';
 import { JobDetails } from '~/jobs/core/schemas';
 import { createJobCardInfoTags } from '~/jobs/utils/create-job-card-info-tags';
+import { activeJobIdAtom } from '~/jobs/atoms/active-job-id-atom';
 import { JobSkills } from '~/jobs/components/job-skills';
 
-import { JobCardClientWrapper } from './client-wrapper';
 import { JobCardInfoTags } from './info-tags';
 import { JobCardOrg } from './org';
 import { JobCardProjects } from './projects';
@@ -25,7 +26,7 @@ export const JobCard = ({ job, isInit, filterParamsString = '' }: Props) => {
   const jobTags = createJobCardInfoTags(job);
 
   return (
-    <JobCardClientWrapper id={shortUUID}>
+    <CardWrapper id={shortUUID} idAtom={activeJobIdAtom}>
       <Link
         className="flex flex-col gap-3 p-6"
         href={`/jobs/${shortUUID}/details${filterParamsString}`}
@@ -61,6 +62,6 @@ export const JobCard = ({ job, isInit, filterParamsString = '' }: Props) => {
           <JobCardTsBookmark timestamp={timestamp} />
         </div>
       </Link>
-    </JobCardClientWrapper>
+    </CardWrapper>
   );
 };
diff --git a/src/jobs/components/job-card/client-wrapper.tsx b/src/shared/components/card-wrapper.tsx
similarity index 54%
rename from src/jobs/components/job-card/client-wrapper.tsx
rename to src/shared/components/card-wrapper.tsx
index 0cdbd2275..0bd238bc0 100644
--- a/src/jobs/components/job-card/client-wrapper.tsx
+++ b/src/shared/components/card-wrapper.tsx
@@ -1,22 +1,21 @@
 'use client';
 
-import { useAtom } from 'jotai';
+import { PrimitiveAtom, useAtom } from 'jotai';
 
 import { cn } from '~/shared/utils/cn';
 
-import { activeJobIdAtom } from '~/jobs/atoms/active-job-id-atom';
-
 interface Props {
   id: string;
+  idAtom: PrimitiveAtom<string | null>;
   children: React.ReactNode;
 }
 
-export const JobCardClientWrapper = ({ id, children }: Props) => {
-  const [activeJobId, setActiveJobId] = useAtom(activeJobIdAtom);
-  const isActive = id === activeJobId;
+export const CardWrapper = ({ id, idAtom, children }: Props) => {
+  const [activeId, setActiveId] = useAtom(idAtom);
+  const isActive = activeId === id;
 
-  const onClickCard = () => {
-    setActiveJobId(id);
+  const onClick = () => {
+    setActiveId(id);
   };
 
   return (
@@ -28,7 +27,7 @@ export const JobCardClientWrapper = ({ id, children }: Props) => {
             isActive,
         },
       )}
-      onClick={onClickCard}
+      onClick={onClick}
     >
       {children}
     </div>