refactor: init org card component (#113)

src/orgs/atoms/init-org-atom.ts

@@ -1,5 +1,5 @@
 import { atom } from 'jotai';
 
-import { OrgDetails } from '~/orgs/core/schemas';
+import { OrgListItem } from '~/orgs/core/schemas';
 
-export const initOrgAtom = atom<OrgDetails | null>(null);
+export const initOrgAtom = atom<OrgListItem | null>(null);

src/orgs/components/init-org-card.tsx

@@ -0,0 +1,44 @@
+'use client';
+
+import { usePathname } from 'next/navigation';
+
+import { useAtomValue } from 'jotai';
+
+import { HREFS } from '~/shared/core/constants';
+import { initPathAtom } from '~/shared/atoms/init-path-atom';
+
+import { JobCardSkeleton } from '~/jobs/components/job-card/skeleton';
+
+import { initOrgAtom } from '../atoms/init-org-atom';
+
+import { OrgCard } from './org-card';
+
+interface Props {
+  filterParamsString: string;
+}
+
+export const InitOrgCard = ({ filterParamsString }: Props) => {
+  const pathname = usePathname();
+
+  const initPath = useAtomValue(initPathAtom);
+  const initOrg = useAtomValue(initOrgAtom);
+
+  // Do not render if initially in /jobs
+  if (initPath === HREFS.ORGS_PAGE) return null;
+
+  // Do not render if on /jobs page and no initOrg
+  if (!initOrg && pathname === HREFS.ORGS_PAGE) return null;
+
+  // Render initOrg if set
+  if (initOrg)
+    return (
+      <OrgCard
+        isInit
+        orgItem={initOrg}
+        filterParamsString={filterParamsString}
+      />
+    );
+
+  // Defaults to a skeleton (job card skeleton for now)
+  return <JobCardSkeleton />;
+};

src/orgs/components/org-list.tsx

@@ -4,8 +4,10 @@ import { InternalErrorResult } from '~/shared/components/internal-error-result';
 import { VirtualWrapper } from '~/shared/components/virtual-wrapper';
 
 import { useOrgList } from '~/orgs/hooks/use-org-list';
+import { JobCardSkeleton } from '~/jobs/components/job-card/skeleton';
 import { useFiltersContext } from '~/filters/providers/filters-provider/context';
 
+import { InitOrgCard } from './init-org-card';
 import { OrgCard } from './org-card';
 
 export const OrgList = () => {
@@ -31,14 +33,13 @@ export const OrgList = () => {
       {error && <InternalErrorResult onReset={reloadPage} />}
 
       {isPending ? (
-        <p>Card Skeleton</p>
+        <JobCardSkeleton />
       ) : (
         isSuccess &&
         (hasOrgs ? (
           <>
             <div>
-              <p>Init org card</p>
-              <p>{JSON.stringify({ filterParamsString })}</p>
+              <InitOrgCard filterParamsString={filterParamsString} />
             </div>
 
             <VirtualWrapper count={orgs.length}>
@@ -54,7 +55,7 @@ export const OrgList = () => {
 
             {hasNextPage ? (
               <div ref={inViewRef}>
-                <p>Card Skeleton</p>
+                <JobCardSkeleton />
               </div>
             ) : (
               <p>TODO: No more orgs UI</p>