Added Learning Path detail page, Updated LearningPathCards

Melissa-Gibney · Melissa-Gibney · commit 77f0192624d2 · 2025-10-21T17:04:33.000-04:00
Updated the learning path cards to use the router parameter. Need to use the parameter in the link address on card click. Added the learning path detail page, but need to flesh it out after the link issue is resolved.
diff --git a/Caddyfile b/Caddyfile
@@ -8,7 +8,7 @@ localhost:80 {
             access-control-allow-headers     {http.request.header.access-control-request-headers}
             access-control-allow-methods     "get, post, put, options"
         }
-        reverse_proxy https://play.picoctf.org {
+        reverse_proxy "https://play.picoctf.org" {
             header_up host            play.picoctf.org
             header_up origin          https://play.picoctf.org
             header_up referer         https://play.picoctf.org
@@ -22,14 +22,14 @@ localhost:80 {
             access-control-allow-headers     {http.request.header.access-control-request-headers}
             access-control-allow-methods     "get, options"
         }
-        reverse_proxy https://play.picoctf.org {
+        reverse_proxy "https://play.picoctf.org" {
             header_up host            play.picoctf.org
             header_up origin          https://play.picoctf.org
             header_up referer         https://play.picoctf.org
         }
     }
 
-    reverse_proxy http://frontend:5173
+    reverse_proxy "http://frontend:5173"
 
     @preflight {
         method OPTIONS
diff --git a/frontend/react_app/src/App.tsx b/frontend/react_app/src/App.tsx
@@ -17,9 +17,10 @@ import Primer from "./pages/resources/Primer";
 import Community from "./pages/resources/Community";
 import ExternalResources from "./pages/resources/ExternalResources";
 import LearningGuides from "./pages/resources/LearningGuides";
-import LearningPathsHome from './pages/practice/learning-paths/LearningPathHome';
+import LearningHome from './pages/practice/learning-paths/Home';
 import { mockLearningPathsHome } from './mock-data/LearningPathsData';
 import { mockProfile } from './mock-data/ProfileData';
+import PathDetail from './pages/practice/learning-paths/Path';
 
 declare module "@react-types/shared" {
   	interface RouterConfig {
@@ -45,12 +46,14 @@ function App() {
           			<Route path='practice' element={<Outlet/>}>
             			<Route path='games' element={<Games/>}/>
             			<Route path='gym' element={<Gym/>}/>
-            			<Route path='learning-paths' element={<LearningPathsHome paths={mockLearningPathsHome.paths}/>}/>
+            			<Route path='learning-paths' element={<Outlet/>}>
+							<Route index={true} element={<LearningHome paths={mockLearningPathsHome.paths}/>}/>
+							<Route path=':pathID' element={<PathDetail/>}/>
+						</Route>
           			</Route>
           			<Route path='profile' element={<Profile activity={mockProfile.activity} 
             			skillDistribution={mockProfile.skillDistribution} 
             			challengeCompletion={mockProfile.challengeCompletion} 
-            			badges={mockProfile.badges} 
             			userInfo={mockProfile.userInfo}/>}/>
           			<Route path='resources' element={<Outlet/>}>
             			<Route path='community' element={<Community/>}/>
diff --git a/frontend/react_app/src/components/General/PageNavbar.tsx b/frontend/react_app/src/components/General/PageNavbar.tsx
@@ -41,7 +41,7 @@ function PageNavbar() {
                     <NavbarItem className="hidden lg:flex">
                         <NotificationModal/>
                     </NavbarItem>
-                    <NavbarItem> {/* GRAPHICS_ISSUE - this item is not showing up on the webpage as of 9/23/25 */}
+                    <NavbarItem>
                         <Button as={Link} color="default" href="/profile" variant="flat" radius="full" isIconOnly={true}>
                             <Avatar size='sm'/>
                         </Button>
diff --git a/frontend/react_app/src/components/learning-paths/LearningPathCard.tsx b/frontend/react_app/src/components/learning-paths/LearningPathCard.tsx
@@ -1,4 +1,5 @@
-import { Card, CardBody } from "@heroui/react";
+import { Card, CardBody, Link } from "@heroui/react";
+import { useNavigate } from "react-router-dom";
 
 import DifficultyChip, { type DifficultyProp } from "../general/DifficultyChip";
 import IconCard from "../general/IconCard";
@@ -18,6 +19,7 @@ export interface LearningPathCardProps {
 }
 
 function getBottomContent(hasProgress: boolean, numCompletedChallenges: number, numSolves: number, numTotalChallenges: number) {
+
     if(hasProgress) {
         return (
             <ProgressWithTextDiv color="primary" ariaLabel={"Amount Completed"} value={numCompletedChallenges/numTotalChallenges*100} endingText={numCompletedChallenges + "/" + numTotalChallenges + " challenges"}/>
@@ -44,15 +46,15 @@ function getBottomContent(hasProgress: boolean, numCompletedChallenges: number,
     );
 }
 
-const LearningPathCard: React.FC<LearningPathCardProps> = ({ description, difficulty, hasProgress, link, name, numCompletedChallenges, numSolves, numTotalChallenges }) => {
+const LearningPathCard: React.FC<LearningPathCardProps> = ({ description, difficulty, hasProgress, id, name, numCompletedChallenges, numSolves, numTotalChallenges }) => {
 
     return (
         /* API_NEEDED - Get the link to the learning path and navigate there on press */
-        <Card className="flex w-full min-w-[384px] max-w-[400px] h-[288px] border-small border-default-300 p-6 bg-content1-base" radius="md" shadow="none" isPressable isHoverable /*onPress={() => onLearningPathCardPress()}*/>
+        <Card as={Link} className="flex w-full min-w-[384px] max-w-[400px] h-[288px] border-small border-default-300 p-6 bg-content1-base" radius="md" shadow="none" href={"/" + id} isPressable isHoverable>
             <CardBody className="flex flex-col w-full h-full justify-between p-0 m-0">
                 <div className="flex flex-col w-full h-fit gap-6">
                     <div className="flex flex-row w-full justify-between">
-                        <IconCard background={"primary"} icon={"book"}/>
+                        <IconCard background={"primary"} icon={"book"} size={"sm"}/>
                         <DifficultyChip difficultyLvl={difficulty["difficultyLvl"]}/>
                     </div>
                     <div className="flex flex-col w-full h-fit items-start gap-2">
diff --git a/frontend/react_app/src/components/profile/UserStudiesCard.tsx b/frontend/react_app/src/components/profile/UserStudiesCard.tsx
@@ -20,23 +20,23 @@ const UserStudiesCard: React.FC<UserStudiesCardProps> = ({  }) => {
                     Researchers facilitating this study may...
                 </p>
                 <Accordion className="p-0 m-0">
-                    <AccordionItem key="1" aria-label="View platform activity data. Click to expand." title="View platform activity data">
-                        Placeholder Text
+                    <AccordionItem key="1" aria-label="View platform activity data" title="View platform activity data">
+                        Researchers may view data related to your platform usage, such as flag submissions, playlist progress, and classroom memberships.
                     </AccordionItem>
-                    <AccordionItem key="2" aria-label="View email address. Click to expand." title="View email addresses">
-                        Placeholder Text
+                    <AccordionItem key="2" aria-label="View email address" title="View email addresses">
+                        Researchers may view your email address. You may be contacted directly regarding surveys or other follow-up questions.
                     </AccordionItem>
-                    <AccordionItem key="3" aria-label="View basic demographic data. Click to expand." title="View basic demographic data">
-                        Placeholder Text
+                    <AccordionItem key="3" aria-label="View basic demographic data" title="View basic demographic data">
+                        Researchers may view basic demographic data, such as your player type and grade.
                     </AccordionItem>
-                    <AccordionItem key="4" aria-label="View locational demographic data. Click to expand." title="View locational demographic data">
-                        Placeholder Text
+                    <AccordionItem key="4" aria-label="View locational demographic data" title="View locational demographic data">
+                        Researchers may view demographic data regarding your geographical location, such as your country, postal code, and school name.
                     </AccordionItem>
-                    <AccordionItem key="5" aria-label="View personal demographic data. Click to expand." title="View personal demographic data">
-                        Placeholder Text
+                    <AccordionItem key="5" aria-label="View personal demographic data" title="View personal demographic data">
+                        Researchers may view your selected gender and race/ethnicity self-identifications.
                     </AccordionItem>
-                    <AccordionItem key="6" aria-label="View webshell logs. Click to expand." title="View webshell logs">
-                        Placeholder Text
+                    <AccordionItem key="6" aria-label="View webshell logs" title="View webshell logs">
+                        Researchers may view logs of your webshell sessions.
                     </AccordionItem>
                 </Accordion>
             </CardBody>
diff --git a/frontend/react_app/src/mock-data/LearningPathsData.tsx b/frontend/react_app/src/mock-data/LearningPathsData.tsx
@@ -1,4 +1,4 @@
-import type { LearningPathsHomeProps } from "../pages/practice/learning-paths/LearningPathHome";
+import type { LearningPathsHomeProps } from "../pages/practice/learning-paths/Home";
 
 export const mockLearningPathsHome: LearningPathsHomeProps = {
     paths: [
diff --git a/frontend/react_app/src/pages/practice/learning-paths/Home.tsx b/frontend/react_app/src/pages/practice/learning-paths/Home.tsx
@@ -7,7 +7,7 @@ export interface LearningPathsHomeProps {
     paths: LearningPathCardProps[];
 }
 
-const LearningPathsHome: React.FC<LearningPathsHomeProps> = ({ paths }) => {
+const Home: React.FC<LearningPathsHomeProps> = ({ paths }) => {
 
     let continuingPaths: LearningPathCardProps[] = [];
 
@@ -58,4 +58,4 @@ const LearningPathsHome: React.FC<LearningPathsHomeProps> = ({ paths }) => {
     );
 }
 
-export default LearningPathsHome;
+export default Home;
diff --git a/frontend/react_app/src/pages/practice/learning-paths/Path.tsx b/frontend/react_app/src/pages/practice/learning-paths/Path.tsx
@@ -0,0 +1,58 @@
+import "../../Page.css";
+import Header from "../../../components/General/PageNavbar";
+import { useParams } from "react-router";
+import { BreadcrumbItem, Breadcrumbs } from "@heroui/react";
+import LearningPathsContentListCard from "../../../components/learning-paths/LearningPathsAccordion";
+import LearningPathOverviewDiv from "../../../components/learning-paths/LearningPathOverviewDiv";
+
+export interface PathDetailProps {
+}
+
+const PathDetail: React.FC<PathDetailProps> = ({  }) => {
+
+    // API_NEEDED - Get the path detail information using the path's ID
+    let params = useParams();
+    const id = params.pathID;
+
+    return (
+        <div className="Page">
+            <Header/>
+            <div className="flex flex-col w-full px-32 py-10 gap-6 items-center">
+                <Breadcrumbs>
+                    <BreadcrumbItem href="/practice/learning-paths">Practice</BreadcrumbItem>
+                    <BreadcrumbItem href="/practice/learning-paths">Learning Paths</BreadcrumbItem>
+                    <BreadcrumbItem href="/practice/learning-paths/page">Learning Path Page</BreadcrumbItem>
+                </Breadcrumbs>
+
+                <div className="flex flex-row w-full h-fit gap-64">
+                    <LearningPathOverviewDiv 
+                        difficulty={"Easy"} 
+                        name={"My Path"} 
+                        numChallenges={0} 
+                        numSolves={0} 
+                        prereqs={[]} 
+                        skills={[]}
+                    />
+                    <LearningPathsContentListCard 
+                        name={"My Path"} 
+                        progress={{
+                            color:"primary", 
+                            ariaLabel:"temp", 
+                            value: 0.5, 
+                            endingText: "50%"
+                        }} 
+                        list={[
+                            {
+                                item: {},
+                                itemProgress: {},
+                                children: []
+                            }
+                        ]}
+                    />
+                </div>
+            </div>
+        </div>
+    );
+}
+
+export default PathDetail;
diff --git a/frontend/react_app/src/stories/learning-paths/LearningPathOverviewDiv.stories.ts b/frontend/react_app/src/stories/learning-paths/LearningPathOverviewDiv.stories.ts
@@ -27,7 +27,7 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
   args: {
-    difficulty: {Enum: 1},
+    difficulty: "Easy",
     name: "Learning Path Name",
     numChallenges: 15,
     numSolves: 1347,
diff --git a/frontend/react_app/src/stories/pages/practice/learning-paths/LearningPathHome.stories.ts b/frontend/react_app/src/stories/pages/practice/learning-paths/LearningPathHome.stories.ts
@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
-import LearningPathsHome from '../../../../pages/practice/learning-paths/LearningPathHome';
+import LearningPathsHome from '../../../../pages/practice/learning-paths/Home';
 
 const meta = {
   title: 'Pages/Practice/Learning Paths/Home',

Original file line number	Diff line number	Diff line change
`@@ -8,7 +8,7 @@ localhost:80 {`
`8`	`8`	`access-control-allow-headers {http.request.header.access-control-request-headers}`
`9`	`9`	`access-control-allow-methods "get, post, put, options"`
`10`	`10`	`}`
`11`		`- reverse_proxy https://play.picoctf.org {`
	`11`	`+ reverse_proxy "https://play.picoctf.org" {`
`12`	`12`	`header_up host play.picoctf.org`
`13`	`13`	`header_up origin https://play.picoctf.org`
`14`	`14`	`header_up referer https://play.picoctf.org`
`@@ -22,14 +22,14 @@ localhost:80 {`
`22`	`22`	`access-control-allow-headers {http.request.header.access-control-request-headers}`
`23`	`23`	`access-control-allow-methods "get, options"`
`24`	`24`	`}`
`25`		`- reverse_proxy https://play.picoctf.org {`
	`25`	`+ reverse_proxy "https://play.picoctf.org" {`
`26`	`26`	`header_up host play.picoctf.org`
`27`	`27`	`header_up origin https://play.picoctf.org`
`28`	`28`	`header_up referer https://play.picoctf.org`
`29`	`29`	`}`
`30`	`30`	`}`
`31`	`31`
`32`		`- reverse_proxy http://frontend:5173`
	`32`	`+ reverse_proxy "http://frontend:5173"`
`33`	`33`
`34`	`34`	`@preflight {`
`35`	`35`	`method OPTIONS`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import type { LearningPathsHomeProps } from "../pages/practice/learning-paths/LearningPathHome";`
	`1`	`+import type { LearningPathsHomeProps } from "../pages/practice/learning-paths/Home";`
`2`	`2`
`3`	`3`	`export const mockLearningPathsHome: LearningPathsHomeProps = {`
`4`	`4`	`paths: [`
Original file line number	Diff line number	Diff line change
`@@ -7,7 +7,7 @@ export interface LearningPathsHomeProps {`
`7`	`7`	`paths: LearningPathCardProps[];`
`8`	`8`	`}`
`9`	`9`
`10`		`-const LearningPathsHome: React.FC<LearningPathsHomeProps> = ({ paths }) => {`
	`10`	`+const Home: React.FC<LearningPathsHomeProps> = ({ paths }) => {`
`11`	`11`
`12`	`12`	`let continuingPaths: LearningPathCardProps[] = [];`
`13`	`13`
`@@ -58,4 +58,4 @@ const LearningPathsHome: React.FC<LearningPathsHomeProps> = ({ paths }) => {`
`58`	`58`	`);`
`59`	`59`	`}`
`60`	`60`
`61`		`-export default LearningPathsHome;`
	`61`	`+export default Home;`