Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 4ed54d3

Browse files
vinaypuppalMd Zubair Ahmed
vinaypuppal
authored and
Md Zubair Ahmed
committed
Chapter pages and few small changes (coderplex-org#140)
* for non completed guides direct users to github (fixes coderplex-org#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)