Skip to content

Commit 03aa399

Browse files
leecalcoteleecalcote
authored
Merge pull request #7197 from saurabhraghuvanshii/link
fix links of learning-paths
2 parents 83843b1 + f502c33 commit 03aa399

5 files changed

Lines changed: 51 additions & 34 deletions

File tree

‎src/components/Learn-Components/TOC-Chapters/index.js‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React,{ useState, useEffect } from "react";
1+
import React, { useState, useEffect } from "react";
22
import { HiOutlineChevronLeft } from "@react-icons/all-files/hi/HiOutlineChevronLeft";
33
import { Link } from "gatsby";
44
import { getActiveServiceMesh } from "../../../utils/getActiveServiceMesh";
@@ -8,7 +8,7 @@ import { IoMdClose } from "@react-icons/all-files/io/IoMdClose";
88
import { IoIosArrowDropdownCircle } from "@react-icons/all-files/io/IoIosArrowDropdownCircle";
99

1010

11-
const TOC = ({ TOCData,courseData, chapterData, location }) => {
11+
const TOC = ({ TOCData, courseData, chapterData, location }) => {
1212
const [path, setPath] = useState("");
1313
const [expand, setExpand] = useState(false);
1414

@@ -24,7 +24,7 @@ const TOC = ({ TOCData,courseData, chapterData, location }) => {
2424

2525
useEffect(() => {
2626
const path = location.pathname.split("/");
27-
if (path[2] === "learning-paths"){
27+
if (path[2] === "learning-paths") {
2828
setPath(getCurrentPage(location));
2929
} else
3030
return;
@@ -35,7 +35,7 @@ const TOC = ({ TOCData,courseData, chapterData, location }) => {
3535
return (
3636
<TOCWrapper>
3737
<div className="chapter-back">
38-
<Link to={`/${courseData.fields.slug}`}>
38+
<Link to={courseData.fields.slug.startsWith("/") ? courseData.fields.slug : `/${courseData.fields.slug}`}>
3939
<HiOutlineChevronLeft />
4040
<h4>{courseData.frontmatter.courseTitle}</h4>
4141
</Link>
@@ -58,7 +58,7 @@ const TOC = ({ TOCData,courseData, chapterData, location }) => {
5858
</div>
5959
</div>
6060
<div className="toc-list">
61-
<ul className={`toc-ul ${expand ? "toc-ul-open" : ""}`}>
61+
<ul className={`toc-ul ${expand ? "toc-ul-open" : ""}`}>
6262
{availableChapters.map((item) => (
6363
<li key={item} className={item === path ? "active-link" : ""}>
6464
<p className="toc-item" key={item}>

‎src/sections/Learn-Layer5/Chapters/index.js‎

Lines changed: 15 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ const Chapters = ({ chapterData, courseData, location, serviceMeshesList, TOCDat
1818
const serviceMeshImages = courseData.frontmatter.meshesYouLearn || [];
1919
const tableOfContents = TOCData
2020
.filter(node => !!node.fields.section)
21-
.map( toc => ({ section: toc.fields.section, chapter: toc.fields.chapter }) );
21+
.map(toc => ({ section: toc.fields.section, chapter: toc.fields.chapter }));
2222

2323

2424
const replaceSlugPart = (index) => (oldSlug) => (replacement) => {
@@ -30,23 +30,30 @@ const Chapters = ({ chapterData, courseData, location, serviceMeshesList, TOCDat
3030
const replaceChapterInSlug = (slugWithReplacedMesh) => replaceSlugPart(5)(slugWithReplacedMesh);
3131

3232
useEffect(() => {
33-
localStorage.setItem(`bookmarkpath-${location.pathname.split("/")[4]}`, location.pathname);
33+
34+
let bookmarkPath = location.pathname;
35+
if (bookmarkPath.endsWith(".html")) {
36+
bookmarkPath = bookmarkPath.replace(".html", "");
37+
}
38+
localStorage.setItem(`bookmarkpath-${location.pathname.split("/")[4]}`, bookmarkPath);
3439
}, []);
3540

3641
const isMeshActive = (sm) => chapterData.fields.slug.split("/")[4] === sm;
3742

3843
const mapMeshWithFormattedSlug = (sm, serviceMeshes) => {
3944
let chapterFound = false;
4045
tableOfContents.forEach(toc => {
41-
if (toc.section === sm.fields.section){
46+
if (toc.section === sm.fields.section) {
4247
if (toc.chapter === chapterData.fields.slug.split("/")[5]) chapterFound = true;
4348
}
4449
});
4550

4651
if (!serviceMeshes.map(sm => sm.section).includes(sm.fields.section))
47-
serviceMeshes.push({ section: sm.fields.section, slug: chapterFound ?
48-
replaceServiceMeshInSlug( sm.fields.section)
49-
: replaceChapterInSlug(replaceServiceMeshInSlug(sm.fields.section))(tableOfContents[0].chapter) });
52+
serviceMeshes.push({
53+
section: sm.fields.section, slug: chapterFound ?
54+
replaceServiceMeshInSlug(sm.fields.section)
55+
: replaceChapterInSlug(replaceServiceMeshInSlug(sm.fields.section))(tableOfContents[0].chapter)
56+
});
5057

5158
};
5259

@@ -86,7 +93,7 @@ const Chapters = ({ chapterData, courseData, location, serviceMeshesList, TOCDat
8693
</>);
8794
});
8895

89-
if (showQuizModal){
96+
if (showQuizModal) {
9097
return <QuizModal />;
9198
}
9299

@@ -99,7 +106,7 @@ const Chapters = ({ chapterData, courseData, location, serviceMeshesList, TOCDat
99106
<div className="toc-switcher-parent-div">
100107
<TOC courseData={courseData} TOCData={TOCData} chapterData={chapterData} location={location} />
101108
<div>
102-
{ serviceMeshImages.length !== 0 && availableServiceMeshesArray.length != 0 && (
109+
{serviceMeshImages.length !== 0 && availableServiceMeshesArray.length != 0 && (
103110
<>
104111
<h4>Technologies Available</h4>
105112
<div className="service-mesh-switcher">

‎src/sections/Learn-Layer5/Course-Overview/index.js‎

Lines changed: 23 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ const CourseOverview = ({ course, chapters, serviceMeshesList, children }) => {
5555

5656
useEffect(() => {
5757
let bookmarkPath = localStorage.getItem("bookmarkpath-" + course.fields.slug.split("/")[3]);
58-
if (bookmarkPath){
58+
if (bookmarkPath) {
5959
setHasBookmark(true);
6060
setBookmarkUrl(bookmarkPath);
6161
}
@@ -64,7 +64,7 @@ const CourseOverview = ({ course, chapters, serviceMeshesList, children }) => {
6464
return (
6565
<CourseOverviewWrapper>
6666
<div className="course-back-btn">
67-
<Link to={`/learn/learning-paths/${course.fields.learnpath}`}>
67+
<Link to={"/learn/learning-paths/${course.fields.learnpath}"}>
6868
<IoChevronBackOutline /> <h4>Learning Paths/Courses</h4>
6969
</Link>
7070
</div>
@@ -88,12 +88,12 @@ const CourseOverview = ({ course, chapters, serviceMeshesList, children }) => {
8888
</div>
8989
<Button
9090
title={hasBookmark ? "Start Again" : "Get Started"}
91-
$url={`${extractedSection}/${course.frontmatter.toc[0]}`}
91+
$url={getChapterTitle(course.frontmatter.toc[0], chapters) ? "/${getChapterTitle(course.frontmatter.toc[0], chapters).fields.slug}" : "#"}
9292
/>
9393
{hasBookmark && (
9494
<Button
9595
className="start-again-button"
96-
$primary title="Resume"
96+
$primary title="Resume"
9797
$url={bookmarkUrl}
9898
/>
9999
)}
@@ -113,20 +113,27 @@ const CourseOverview = ({ course, chapters, serviceMeshesList, children }) => {
113113
{children}
114114
</SRLWrapper>
115115
<h2 className="course-toc">Table Of Contents</h2>
116-
{course.frontmatter.toc.map((item, index) => (
117-
<Link key={index} to={`${extractedSection}/${item}`} className="chapter-link">
118-
<ChapterCard
119-
chapterNum={index + 1}
120-
chapter={getChapterTitle(item, chapters)}
121-
/>
122-
</Link>
123-
))}
116+
{course.frontmatter.toc.map((item, index) => {
117+
const chapterNode = getChapterTitle(item, chapters);
118+
return (
119+
<Link
120+
key={index}
121+
to={chapterNode ? "/${chapterNode.fields.slug}" : "#"}
122+
className="chapter-link"
123+
>
124+
<ChapterCard
125+
chapterNum={index + 1}
126+
chapter={chapterNode}
127+
/>
128+
</Link>
129+
);
130+
})}
124131
</Col>
125132
<Col $md={12} $lg={4} $xl={5}>
126133
<div className="service-meshes-you-can-learn">
127-
{console.log("lenght of the service mesh array: ", availableServiceMeshes.length) }
128-
{ console.log("array: ",availableServiceMeshes)}
129-
{ serviceMeshImages.length !== 0 && availableServiceMeshes.length != 0 && (
134+
{console.log("lenght of the service mesh array: ", availableServiceMeshes.length)}
135+
{console.log("array: ", availableServiceMeshes)}
136+
{serviceMeshImages.length !== 0 && availableServiceMeshes.length != 0 && (
130137
<>
131138
<h2>Technologies You Can Learn</h2>
132139
<ServiceMeshesAvailable serviceMeshes={availableServiceMeshes} />
@@ -145,7 +152,7 @@ const CourseOverview = ({ course, chapters, serviceMeshesList, children }) => {
145152
<SubscribeLearnPath />
146153
</Col>
147154
</Row>
148-
</div>
155+
</div>f
149156
<BookmarkNotification showNotification={showNotification} closeNotification={() => setShowNotification(false)} />
150157
</CourseOverviewWrapper>
151158
);

‎src/sections/Learn-Layer5/Courses-List/index.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ const CoursesList = ({ coursesData, learnPath }) => {
3333
{coursesData.map((tutorial, index) => {
3434
return (
3535
<Col $sm={12} key={tutorial.id} name={tutorial.frontmatter.courseTitle}>
36-
<Link to={tutorial.fields.course}>
36+
<Link to={tutorial.fields.slug.startsWith("/") ? tutorial.fields.slug : `/${tutorial.fields.slug}`}>
3737
<ContentCard chapterNum={index + 1} chapter={tutorial} />
3838
</Link>
3939
</Col>

‎src/utils/getCurrentPage.js‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,12 @@
11
export const getCurrentPage = (location) => {
22
if (location !== undefined && location.href !== undefined) {
33
const currentChapter = location.href.split("/");
4-
if(currentChapter[currentChapter.length - 1] != "")
5-
return currentChapter[currentChapter.length - 1];
6-
else
7-
return currentChapter[currentChapter.length - 2];
4+
let chapter = currentChapter[currentChapter.length - 1] != ""
5+
? currentChapter[currentChapter.length - 1]
6+
: currentChapter[currentChapter.length - 2];
7+
if (chapter && chapter.endsWith(".html")) {
8+
chapter = chapter.replace(".html", "");
9+
}
10+
return chapter;
811
}
912
};

0 commit comments

Comments
 (0)