Merge pull request #13 from COMPASS-DPG/fix/competencyDataChange

Fix/competency data change
COMPASS-DPG · Dec 18, 2023 · caaa2df · caaa2df
2 parents cf893e5 + 52f13e1
commit caaa2df
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 29 deletions.
diff --git a/src/app/3cp/marketplace/page.tsx b/src/app/3cp/marketplace/page.tsx
@@ -9,15 +9,23 @@ import ProfileNavbar from '@/components/wpcasOverView/ProfileNavbar';
 
 import { getAllCourses } from '@/services/marketPlaceServices';
 
-type competencyType = {
-  [key: string]: string[];
+export type LevelsType = {
+  id: string;
+  levelNumber: number;
+  name: string;
+};
+
+type CompetencyType = {
+  id: string;
+  name: string;
+  levels: LevelsType[];
 };
 
 export type CourseType = {
   courseId: string;
   title: string;
   providerLogo: string;
-  competency: competencyType;
+  competency: CompetencyType[];
   providerName: string;
   author: string;
   language: string[];

diff --git a/src/components/3cp/Competency.tsx b/src/components/3cp/Competency.tsx
@@ -5,17 +5,18 @@ import { CourseType } from '@/app/3cp/marketplace/page';
 const Competencies = ({ courseDetails }: { courseDetails: CourseType }) => {
   return (
     <div className='py-4 '>
-      {Object.keys(courseDetails?.competency).map((key, index) => {
-        return (
-          <SingleCompetency
-            key={index}
-            competency={{
-              name: key,
-              levels: courseDetails?.competency[key],
-            }}
-          />
-        );
-      })}
+      {courseDetails?.competency?.length > 0 &&
+        courseDetails?.competency?.map((competency) => {
+          return (
+            <SingleCompetency
+              key={competency?.id}
+              competency={{
+                name: competency?.name,
+                levels: competency?.levels,
+              }}
+            />
+          );
+        })}
     </div>
   );
 };

diff --git a/src/components/3cp/SingleCompetency.tsx b/src/components/3cp/SingleCompetency.tsx
@@ -4,12 +4,15 @@ import { MdKeyboardArrowDown, MdKeyboardArrowUp } from 'react-icons/md';
 
 import { outfit, poppins } from '@/components/FontFamily';
 
+import { LevelsType } from '@/app/3cp/marketplace/page';
+
 type CompetencyType = {
   name: string;
-  levels: string[];
+  levels: LevelsType[];
 };
 const SingleCompetency = ({ competency }: { competency: CompetencyType }) => {
   const [open, setOpen] = useState(false);
+
   return (
     <div className={`${outfit.className} mb-3 text-[#272728]`}>
       <div className=' rounded-lg border p-2'>
@@ -34,13 +37,14 @@ const SingleCompetency = ({ competency }: { competency: CompetencyType }) => {
               </p>
             </div>
             <ul className='flex flex-col gap-2 pl-2'>
-              {competency?.levels?.map((level, index) => {
-                return (
-                  <li key={index} className='flex items-start'>
-                    &bull; {level}
-                  </li>
-                );
-              })}
+              {competency?.levels?.length > 0 &&
+                competency?.levels?.map((level) => {
+                  return (
+                    <li key={level?.id} className='flex items-start'>
+                      &bull; {level?.name}
+                    </li>
+                  );
+                })}
             </ul>
           </div>
         )}

diff --git a/src/components/3cp/SingleCourse.tsx b/src/components/3cp/SingleCourse.tsx
@@ -71,13 +71,17 @@ const SingleCourse = ({
             </p>
             <div className='pl-6 '>
               <ol className='grid  list-decimal grid-cols-2 text-[14px] text-[#787878] '>
-                {Object.keys(course?.competency ?? {})?.map((key) => {
-                  return (
-                    <li key={key}>
-                      {key} ( {course?.competency[key]?.join(', ')} )
-                    </li>
-                  );
-                })}
+                {course?.competency?.length > 0 &&
+                  course?.competency?.map((competency) => {
+                    return (
+                      <li key={competency?.id}>
+                        {competency?.name}{' '}
+                        {competency?.levels?.map((level) => {
+                          return `L${level?.levelNumber},`;
+                        })}
+                      </li>
+                    );
+                  })}
               </ol>
             </div>
           </div>