Skip to content
This repository was archived by the owner on Mar 9, 2021. It is now read-only.

Commit 4ed54d3

Browse files
vinaypuppalMd Zubair Ahmed
vinaypuppal
authored and
Md Zubair Ahmed
committed
Chapter pages and few small changes (#140)
* for non completed guides direct users to github (fixes #136) * fix text color issue * implement chapter pages * name the guides as "Learn X" * change the title of the page to the title of the guide * generate export map for chapter pages * add chapter name also to learn pages title
1 parent 75ed61d commit 4ed54d3

File tree

10 files changed

+590
-237
lines changed

10 files changed

+590
-237
lines changed

‎components/common/header/index.js‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,14 @@ class NavBar extends React.Component {
6363
render() {
6464
const pathName = this.props.router.pathname;
6565
const metaData = MetaInfo[pathName === '/' ? 'home' : pathName.split('/')[1]];
66-
const title = metaData.title;
66+
const title =
67+
pathName.split('/')[1] === 'learn' && pathName.split('/')[2]
68+
? `${this.props.router.query.chapter.replace(
69+
/-/gi,
70+
' '
71+
)} | Learn ${this.props.router.query.subject[0].toUpperCase() +
72+
this.props.router.query.subject.slice(1)} | Coderplex`
73+
: metaData.title;
6774
const description = metaData.description;
6875
const image = metaData.image;
6976
return (

‎components/learn/subject-card.js‎

Lines changed: 19 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,7 @@ export default ({ subject }) => (
8181
<i className={subject.icon} />
8282
</div>
8383
<div className="content">
84-
<h3 className="title">{subject.title}</h3>
84+
<h3 className="title">Learn {subject.title}</h3>
8585
<p className="subtitle" fontSize={[12, 14, 16]}>
8686
{subject.domain}
8787
</p>
@@ -95,11 +95,26 @@ export default ({ subject }) => (
9595
<span>20 hours</span>
9696
</Box>
9797
</Flex>
98-
<Link href={`/learn/subject?id=${subject.subjectId}`} as={subject.url}>
99-
<Button inverted medium fluid href={subject.url} className="view">
98+
{subject.isGuideCompleted ? (
99+
<Link
100+
href={`/learn/subject?subject=${subject.subjectId}&chapter=${subject.path.split('/').reverse()[0]}`}
101+
as={subject.path}>
102+
<Button inverted medium fluid href={subject.path} className="view">
103+
VIEW GUIDE
104+
</Button>
105+
</Link>
106+
) : (
107+
<Button
108+
inverted
109+
medium
110+
fluid
111+
href={subject.githubUrl}
112+
target="_blank"
113+
rel="noopener noreferrer"
114+
className="view">
100115
VIEW GUIDE
101116
</Button>
102-
</Link>
117+
)}
103118
</div>
104119
</SubjectCard>
105120
);

‎components/learn/subject-marked.js‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import React from 'react';
22
import marked from 'marked';
33
import styled from 'react-emotion';
4+
import ContentLoader from 'react-content-loader';
5+
46
import { breakpoints } from '../../utils/base.styles';
57

68
const Marked = styled.div`
@@ -101,7 +103,17 @@ export default class MarkedJS extends React.Component {
101103
return (
102104
<div>
103105
{this.props.loading ? (
104-
<div>Loading...</div>
106+
<div>
107+
<ContentLoader height={200} width={600} speed={2} primaryColor={'#f3f3f3'} secondaryColor={'#ecebeb'}>
108+
<rect x="0" y="0" rx="3" ry="3" width="600" height="10" />
109+
<rect x="0" y="20" rx="3" ry="3" width="500" height="10" />
110+
<rect x="0" y="40" rx="3" ry="3" width="600" height="10" />
111+
<rect x="0" y="60" rx="3" ry="3" width="500" height="10" />
112+
<rect x="0" y="80" rx="3" ry="3" width="600" height="10" />
113+
<rect x="0" y="100" rx="3" ry="3" width="500" height="10" />
114+
<rect x="0" y="120" rx="3" ry="3" width="500" height="10" />
115+
</ContentLoader>
116+
</div>
105117
) : (
106118
<Marked
107119
dangerouslySetInnerHTML={{

‎components/learn/syllabus-tree/syllabus-tree-container.js‎

Lines changed: 78 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -1,91 +1,93 @@
11
import React from 'react';
22
import styled from 'react-emotion';
3-
3+
import { withRouter } from 'next/router';
44
import TreeView from './syllabus-tree-component';
55

6-
export default class SyllabusTree extends React.Component {
7-
state = {
8-
nodeStateTracker: this.props.data.map(() => true),
9-
activeUnit: this.props.data[0].unit.name,
10-
activeChapter: this.props.data[0].chapters[0].url,
11-
};
6+
export default withRouter(
7+
class SyllabusTree extends React.Component {
8+
state = {
9+
nodeStateTracker: [false, ...this.props.data.map(() => true).slice(1)],
10+
activeUnit: this.props.data[0].unit,
11+
activeChapter: this.props.data[0].chapters[0].cdnUrl,
12+
};
1213

13-
handleClick = i => {
14-
this.setState({
15-
nodeStateTracker: [
16-
...this.state.nodeStateTracker.slice(0, i),
17-
!this.state.nodeStateTracker[i],
18-
...this.state.nodeStateTracker.slice(i + 1),
19-
],
20-
});
21-
};
14+
handleClick = i => {
15+
this.setState({
16+
nodeStateTracker: [
17+
...this.state.nodeStateTracker.slice(0, i),
18+
!this.state.nodeStateTracker[i],
19+
...this.state.nodeStateTracker.slice(i + 1),
20+
],
21+
});
22+
};
2223

23-
clickOnChapter(chapter, unitName) {
24-
if (chapter.url !== this.state.activeChapter) {
25-
this.setState({ activeChapter: chapter.url, activeUnit: unitName });
26-
this.props.changeChapter(chapter);
24+
clickOnChapter(chapter, unitName) {
25+
if (chapter.cdnUrl !== this.state.activeChapter) {
26+
this.setState({ activeChapter: chapter.cdnUrl, activeUnit: unitName });
27+
this.props.changeChapter(chapter);
28+
}
2729
}
28-
}
2930

30-
render() {
31-
const Container = styled.div`
32-
& .chapter {
33-
padding: 5px;
34-
font-size: 0.85rem;
35-
user-select: none;
36-
border-left: 2px solid #fff;
37-
color: #888;
38-
:hover {
31+
render() {
32+
const Container = styled.div`
33+
& .chapter {
34+
padding: 5px;
35+
font-size: 0.85rem;
36+
user-select: none;
37+
border-left: 2px solid #fff;
38+
color: #888;
39+
:hover {
40+
background-color: #f5f5f5;
41+
border-left: 2px solid #374355;
42+
cursor: pointer;
43+
}
44+
}
45+
46+
& .active {
47+
color: #374355;
3948
background-color: #f5f5f5;
4049
border-left: 2px solid #374355;
41-
cursor: pointer;
50+
:hover {
51+
cursor: default;
52+
}
4253
}
43-
}
4454
45-
& .active {
46-
color: #374355;
47-
background-color: #f5f5f5;
48-
border-left: 2px solid #374355;
49-
:hover {
50-
cursor: default;
55+
& .unit_name {
56+
order: 1;
57+
flex: 1 1 auto;
58+
align-self: auto;
5159
}
52-
}
60+
`;
5361

54-
& .unit_name {
55-
order: 1;
56-
flex: 1 1 auto;
57-
align-self: auto;
58-
}
59-
`;
60-
61-
return (
62-
<Container>
63-
{this.props.data.map((unitNode, i) => {
64-
const UnitNameComponent = (
65-
<div className="unit_name" key={unitNode.unit.name} onClick={() => this.handleClick(i)}>
66-
{unitNode.unit.name}
67-
</div>
68-
);
69-
return (
70-
<TreeView
71-
key={i}
72-
unitName={unitNode.unit.name}
73-
UnitNameComponent={UnitNameComponent}
74-
activeUnit={this.state.activeUnit}
75-
collapsed={this.state.nodeStateTracker[i]}
76-
onClick={() => this.handleClick(i)}>
77-
{unitNode.chapters.map(chapter => (
78-
<div
79-
className={`chapter ${this.state.activeChapter === chapter.url ? 'active' : ''}`}
80-
key={chapter.url}
81-
onClick={() => this.clickOnChapter(chapter, unitNode.unit.name)}>
82-
{chapter.name}
83-
</div>
84-
))}
85-
</TreeView>
86-
);
87-
})}
88-
</Container>
89-
);
62+
return (
63+
<Container>
64+
{this.props.data.map((unitNode, i) => {
65+
const UnitNameComponent = (
66+
<div className="unit_name" key={unitNode.unit} onClick={() => this.handleClick(i)}>
67+
{unitNode.unit}
68+
</div>
69+
);
70+
return (
71+
<TreeView
72+
key={i}
73+
unitName={unitNode.unit}
74+
UnitNameComponent={UnitNameComponent}
75+
activeUnit={this.state.activeUnit}
76+
collapsed={this.state.nodeStateTracker[i]}
77+
onClick={() => this.handleClick(i)}>
78+
{unitNode.chapters.map(chapter => (
79+
<div
80+
className={`chapter ${this.state.activeChapter === chapter.cdnUrl ? 'active' : ''}`}
81+
key={chapter.cdnUrl}
82+
onClick={() => this.clickOnChapter(chapter, unitNode.unit)}>
83+
{chapter.name}
84+
</div>
85+
))}
86+
</TreeView>
87+
);
88+
})}
89+
</Container>
90+
);
91+
}
9092
}
91-
}
93+
);

0 commit comments

Comments
 (0)