refactor: optimize rendering logic in List and page

Author: nmsn

src/app/learn/[type]/List.js

@@ -25,9 +25,16 @@ import { ChallengesCard } from './ChallengesCard';
 import { CourseCard } from './CourseCard';
 import { GrowPathCard } from './GrowPathCard';
 
-export function List({type, data}) {
+const CardComponents = {
+  courses: CourseCard,
+  challenges: ChallengesCard,
+  career_path: GrowPathCard,
+};
+
+export function List({ type, data }) {
   const openFilter = useOpenFilter();
-  // console.log(data, 'datadatadatadata')
+  const CardComponent = CardComponents[type];
+
   return (
     <div>
       <div
@@ -40,11 +47,7 @@ export function List({type, data}) {
           '3xl:grid-cols-5': !openFilter,
         })}
       >
-        {type === 'courses' && data.list?.map(i => <CourseCard data={i} key={`open-courses-${i.base.course_series_id}`} />)}
-        {type === 'challenges' &&
-          data.list?.map(i => <ChallengesCard data={i} key={`Challenges-${i.base.course_series_id}`} />)}
-        {type === 'career_path' &&
-          data.list?.map(i => <GrowPathCard data={i} key={`GrowPathCard-${i.base.course_series_id}`} />)}
+        {CardComponent && data.list?.map(i => <CardComponent data={i} key={`${type}-${i.base.course_series_id}`} />)}
       </div>
       <OPagination total={data.count} />
     </div>

src/app/learn/[type]/page.js

@@ -25,38 +25,35 @@ import { Container } from './Container';
 import { ListSkeleton } from './ListSkeleton';
 // import { LearnNavBar } from './nav'
 
+const titles = {
+  courses: {
+    title: 'Open Courses',
+    desc: 'Selected open courses from technical skills to practical tasks, accessible to everyone with no cost!',
+  },
+  challenges: {
+    title: 'Challenges',
+    desc: 'Hands-on Bootcamp, Workshop or Hackerhouse, etc.',
+  },
+  career_path: {
+    title: 'Career Path',
+    desc: 'Learning paths designed for different levels of builder',
+  },
+};
 
 export default async function Page({ params, searchParams }) {
+  const titleData = titles?.[params?.type];
+
   return (
     <div>
       <div className="px-6">
-        {params.type === 'courses' && (
-          <Title
-            title="Open Courses"
-            desc="Selected open courses from technical skills to practical tasks, accessible to everyone with no cost!"
-            // link="https://forms.gle/s2tDbixtdqTU8xbp9"
-            // linkText="Click Here"
-          />
-        )}
-        {params.type === 'challenges' && (
-          <Title
-            title="Challenges"
-            desc="Hands-on Bootcamp, Workshop or Hackerhouse, etc."
-            // link="https://forms.gle/s2tDbixtdqTU8xbp9"
-            // linkText="Click Here"
-          />
-        )}
-        {params.type === 'career_path' && (
-          <Title
-            title="Career Path"
-            desc="Learning paths designed for different levels of builder"
-          />
-        )}
+        {titleData && <Title title={titleData.title} desc={titleData.desc} />}
         {/* <LearnNavBar /> */}
         <div className="relative flex max-md:overflow-x-hidden">
-          <Filter type={params.type === 'courses' ? 'open_course' : params.type}>{params.type === 'challenges' && <ChallengesFilter />}</Filter>
+          <Filter type={params.type === 'courses' ? 'open_course' : params.type}>
+            {params.type === 'challenges' && <ChallengesFilter />}
+          </Filter>
           <Suspense fallback={<ListSkeleton />}>
-            <Container type={params.type} searchParams={searchParams}  />
+            <Container type={params.type} searchParams={searchParams} />
           </Suspense>
         </div>
       </div>