From 30b384f7ed620ff0d16c40b34251f1a088508774 Mon Sep 17 00:00:00 2001
From: cassandraGoose <cassandra.torske@gmail.com>
Date: Wed, 24 Apr 2024 21:20:12 -0600
Subject: [PATCH] setup other pages to handle the new pathway data layout

---
 app/_components/CompetencyCard.tsx            |  26 +----
 .../_components/PathwayProgressDetails.tsx    | 107 +++++-------------
 .../PathwayProgressDetailsCompetencyList.tsx  |  76 +++++++++++++
 app/pathways/[pathway]/page.tsx               |  36 ++++--
 app/pathways/page.tsx                         |  24 +---
 5 files changed, 145 insertions(+), 124 deletions(-)
 create mode 100644 app/dashboard/[pathway]/_components/PathwayProgressDetailsCompetencyList.tsx

diff --git a/app/_components/CompetencyCard.tsx b/app/_components/CompetencyCard.tsx
index 8100241..fb221b1 100644
--- a/app/_components/CompetencyCard.tsx
+++ b/app/_components/CompetencyCard.tsx
@@ -5,32 +5,18 @@ export default function CompetencyCard({competency}: { competency: Competency })
   return (
     <div
       key={competency.id}
-      className="border-black card rounded-md border md:max-w-[32%]"
+      className="border-black card rounded-md border md:w-[32%] w-full"
     >
-      <div className="card-body h-[70%] overflow-y-hidden">
-        <p className="card-title" data-testid="competency-title">
+      <div className="card-body max-h-80">
+        <p className="card-title items-start grow-0" data-testid="competency-title">
           {competency.title}
         </p>
-        <p className="line-clamp-5 text-ellipsis">{competency.description}</p>
-        <div className="flex flex-wrap space-y-2 lg:space-x-2 lg:space-y-0 sm:space-y-0 sm:space-x-2">
-          {competency.contentAreas &&
-            competency.contentAreas.map((contentArea: ContentArea) => {
-              return (
-                <div
-                  className="badge badge-outline h-fit md:text-xxs"
-                  key={contentArea.id}
-                  data-testid="competency-content-area-badge"
-                >
-                  {contentArea.title}
-                </div>
-              );
-            })}
-        </div>
+        <p className="text-clamp-5 overflow-hidden ">{competency.description}</p>
       </div>
-      {competency?.proofs?.length && (<div className="card-body card-actions flex flex-col bg-primary text-bright">
+    {competency?.proofs?.length ? (<div className="card-body card-actions flex flex-col bg-primary text-bright">
         <p className="text-sm">Proof of competency:</p>
          <ProofButtons competency={competency} />
-      </div>)}
+      </div>): null}
     </div>
   );
 }
diff --git a/app/dashboard/[pathway]/_components/PathwayProgressDetails.tsx b/app/dashboard/[pathway]/_components/PathwayProgressDetails.tsx
index 099084a..4016e93 100644
--- a/app/dashboard/[pathway]/_components/PathwayProgressDetails.tsx
+++ b/app/dashboard/[pathway]/_components/PathwayProgressDetails.tsx
@@ -1,91 +1,42 @@
-"use client";
-
-import { useState } from "react";
-import { Competency, Pathway, ContentArea } from "../../../lib/interface";
-import Link from "next/link";
-
-export default function PathwayProgressDetails({ pathway, pathwayId }: { pathway: Pathway, pathwayId: string }) {
-  const [collapsed, setCollapsed] = useState(false);
+import { Fragment } from 'react';
+import { Competency, Pathway, ContentArea } from '../../../lib/interface';
+import PathwayProgressDetailsCompetencyList from './PathwayProgressDetailsCompetencyList';
 
+export default function PathwayProgressDetails({
+  pathway,
+  pathwayId,
+}: {
+  pathway: Pathway;
+  pathwayId: string;
+}) {
   const totalCompetencies = pathway.contentAreas.reduce((acc, contentArea) => {
-      acc.push(...contentArea.competencies);
-      return acc;
-    }, [] as Competency[]);
+    acc.push(...contentArea.competencies);
+    return acc;
+  }, [] as Competency[]);
 
   const getCompletedCompetencies = (contentAreas: ContentArea[]) => {
     return totalCompetencies.reduce((acc, competency) => {
       if (competency.proofs && competency.proofs.length > 0) acc++;
       return acc;
     }, 0);
-  }
-
-  const checkCompetencyCompleted = (competency: Competency) => {
-    return competency.proofs && competency.proofs.length > 0;
-  }
+  };
 
   return (
-    <div className="flex justify-center items-start mt-0">
-        <div
-          className="w-full border border-secondary bg-bright mt-16 rounded-md p-4"
-        >
-          <div>
-            <div className="flex justify-between items-center">
-              <p className="text-xl" data-testid="competency-progress">
-                {getCompletedCompetencies(pathway.contentAreas)} / {totalCompetencies.length} competencies met
-              </p>
-              <button
-                data-testid="toggle-competency-details"
-                className="text-4xl"
-                aria-controls={`${pathway.title}-details`}
-                aria-expanded={!collapsed}
-                onClick={() => setCollapsed(!collapsed)}
-              >
-                {collapsed ? "-" : "+"}
-              </button>
-            </div>
-          </div>
-          <div
-            className={` ${collapsed ? "block" : "hidden"} overflow-x-auto`}
-            id={`${pathway.title}-details`}
-          >
-            <table className="table table-xs">
-              <thead>
-                <tr>
-                  <th className="text-primary">Completed</th>
-                  <th className="text-primary">Competency</th>
-                  <th className="text-primary">Description</th>
-                </tr>
-              </thead>
-              <tbody>
-                {totalCompetencies.map((competency: Competency) => (
-                  <tr key={competency.id}>
-                    <td>
-                      <span className="flex items-center space-x-3 pl-4 text-xl" data-testid="completed-check">
-                        {checkCompetencyCompleted(competency) ? '✓' : null}
-                      </span>
-                    </td>
-                    <td>
-                      <span className="flex items-center space-x-3">
-                        <p>{competency.title}</p>
-                      </span>
-                    </td>
-                    <td>
-                      <p>{competency.description}</p>
-                    </td>
-                    <td>
-                      <Link
-                        data-testid="view-proofs"
-                        href={`/dashboard/${pathwayId}/${competency.id}`}
-                        className='btn btn-secondary'>
-                        Proof
-                      </Link>
-                    </td>
-                  </tr>
-                ))}
-              </tbody>
-            </table>
-          </div>
-        </div>
+    <div className="mt-0 flex flex-col items-start justify-center space-y-6">
+      <p className="text-xl" data-testid="competency-progress">
+        {getCompletedCompetencies(pathway.contentAreas)} /{' '}
+        {totalCompetencies.length} competencies met
+      </p>
+      {pathway.contentAreas.map((contentArea) => {
+        return (
+          <Fragment key={contentArea.id}>
+            <PathwayProgressDetailsCompetencyList
+              contentArea={contentArea}
+              pathwayId={pathwayId}
+            />
+          </Fragment>
+        );
+      })}
     </div>
   );
 }
diff --git a/app/dashboard/[pathway]/_components/PathwayProgressDetailsCompetencyList.tsx b/app/dashboard/[pathway]/_components/PathwayProgressDetailsCompetencyList.tsx
new file mode 100644
index 0000000..a36bb83
--- /dev/null
+++ b/app/dashboard/[pathway]/_components/PathwayProgressDetailsCompetencyList.tsx
@@ -0,0 +1,76 @@
+'use client';
+
+import { useState } from 'react';
+import Link from 'next/link';
+import { Competency, ContentArea } from '../../../lib/interface';
+
+export default function PathwayProgressDetailsCompetencyList({ contentArea, pathwayId}: { contentArea: ContentArea, pathwayId: string }) {
+  const [collapsed, setCollapsed] = useState(false);
+
+  const checkCompetencyCompleted = (competency: Competency) => {
+    return competency.proofs && competency.proofs.length > 0;
+  };
+
+  return (<div key={contentArea.id} className="w-full rounded-md border border-secondary bg-bright p-4">
+  <div>
+    <div className="flex items-center justify-between">
+    <p className="text-xl">{contentArea.title}</p>
+
+      <button
+        data-testid="toggle-competency-details"
+        className="text-4xl"
+        aria-controls={`${contentArea.title}-details`}
+        aria-expanded={!collapsed}
+        onClick={() => setCollapsed(!collapsed)}
+      >
+        {collapsed ? '-' : '+'}
+      </button>
+    </div>
+  </div>
+  <div
+    className={` ${collapsed ? 'block' : 'hidden'} overflow-x-auto`}
+    id={`${contentArea.title}-details`}
+  >
+    <table className="table table-xs">
+      <thead>
+        <tr>
+          <th className="text-primary">Completed</th>
+          <th className="text-primary">Competency</th>
+          <th className="text-primary">Description</th>
+        </tr>
+      </thead>
+      <tbody>
+        {contentArea.competencies.map((competency: Competency) => (
+          <tr key={competency.id}>
+            <td>
+              <span
+                className="flex items-center space-x-3 pl-4 text-xl"
+                data-testid="completed-check"
+              >
+                {checkCompetencyCompleted(competency) ? '✓' : null}
+              </span>
+            </td>
+            <td>
+              <span className="flex items-center space-x-3">
+                <p>{competency.title}</p>
+              </span>
+            </td>
+            <td>
+              <p>{competency.description}</p>
+            </td>
+            <td>
+              <Link
+                data-testid="view-proofs"
+                href={`/dashboard/${pathwayId}/${competency.id}`}
+                className="btn btn-secondary"
+              >
+                Proof
+              </Link>
+            </td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  </div>
+</div>);
+}
\ No newline at end of file
diff --git a/app/pathways/[pathway]/page.tsx b/app/pathways/[pathway]/page.tsx
index 260fb54..385bc9b 100644
--- a/app/pathways/[pathway]/page.tsx
+++ b/app/pathways/[pathway]/page.tsx
@@ -22,7 +22,9 @@ export default async function Page({
   let hasPathway;
   if (!!user) {
     userPathways = await getSingleUserPathway(singlePathway.id.toString());
-    hasPathway = userPathways?.pathways.find((pathway) => pathway.id === singlePathway.id);
+    hasPathway = userPathways?.pathways.find(
+      (pathway) => pathway.id === singlePathway.id,
+    );
   }
 
   return (
@@ -33,7 +35,12 @@ export default async function Page({
             <h1 className="text-2xl" data-testid="pathway-title">
               {singlePathway.title}
             </h1>
-            {!!user && <FollowPathwayButton pathway={singlePathway} hasPathway={!!hasPathway}/>}
+            {!!user && (
+              <FollowPathwayButton
+                pathway={singlePathway}
+                hasPathway={!!hasPathway}
+              />
+            )}
           </div>
           <p data-testid="pathway-description">{singlePathway.description}</p>
           <div className="flex flex-col items-center justify-center space-y-8">
@@ -45,12 +52,27 @@ export default async function Page({
               below by uploading artifacts (called &apos;proofs&apos;) to act as
               proof of your skills and knowledge.
             </p>
-            <div className="card-body flex w-full flex-row flex-wrap">
-              {singlePathway.competencies.map((competency) => {
+            <div>
+              {singlePathway.contentAreas.map((contentArea) => {
                 return (
-                  <Fragment key={competency.id}>
-                    <CompetencyCard competency={competency} />
-                  </Fragment>
+                  <>
+                    <hr />
+                    <section
+                      className="my-8 flex flex-col items-center"
+                      key={contentArea.id}
+                    >
+                      <h2 className="text-xl">{contentArea.title}</h2>
+                      <div className="card-body flex w-full flex-row flex-wrap justify-around">
+                        {contentArea.competencies.map((competency) => {
+                          return (
+                            <Fragment key={competency.id}>
+                              <CompetencyCard competency={competency} />
+                            </Fragment>
+                          );
+                        })}
+                      </div>
+                    </section>
+                  </>
                 );
               })}
             </div>
diff --git a/app/pathways/page.tsx b/app/pathways/page.tsx
index 9a95751..c3037b3 100644
--- a/app/pathways/page.tsx
+++ b/app/pathways/page.tsx
@@ -3,7 +3,7 @@ import { notFound } from 'next/navigation';
 import Link from 'next/link';
 import { getFilteredPathways, getFilteredPathwaysCount } from '../lib/queries';
 import PathwayCard from '../_components/PathwayCard';
-import { Competency } from '../lib/interface';
+import { ContentArea } from '../lib/interface';
 import ContentAreaPill from '../_components/ContentAreaPill';
 import Search from '../_components/Search';
 import Pagination from '../_components/Pagination';
@@ -24,28 +24,14 @@ export default async function Page({
     notFound();
   }
 
-  const createContentAreaList = (competencies: Competency[]) => {
-    if (!competencies) notFound();
-    return competencies.map((competency) => {
-      if (!competency.contentAreas) notFound();
-
-      return competency.contentAreas.map((contentArea) => {
-        return { title: contentArea.title, parentId: competency.id };
-      });
-    });
-  };
-
-  const createCardActionChild = (competencies: Competency[]) => {
-    const contentAreas = createContentAreaList(competencies);
-
+  const createCardActionChild = (contentAreas: ContentArea[]) => {
     return (
       <div className="flex flex-wrap">
         {contentAreas
-          .flat()
-          .map((contentArea: { title: string; parentId: number }) => (
+          .map((contentArea) => (
             <span
               className="mr-2"
-              key={contentArea.title + contentArea.parentId}
+              key={contentArea.title + contentArea.id}
             >
               <ContentAreaPill contentArea={contentArea.title} />
             </span>
@@ -79,7 +65,7 @@ export default async function Page({
                 title={pathway.title}
                 description={pathway.description}
                 rightBlockChild={createRightBlockChild(pathway.id)}
-                cardActionChild={createCardActionChild(pathway.competencies)}
+                cardActionChild={createCardActionChild(pathway.contentAreas)}
               />
             );
           })}