This repository was archived by the owner on Jun 4, 2019. It is now read-only.
-
-
Notifications
You must be signed in to change notification settings - Fork 236
Expand file tree
/
Copy pathChallengeView.js
More file actions
100 lines (87 loc) · 2.95 KB
/
Copy pathChallengeView.js
File metadata and controls
100 lines (87 loc) · 2.95 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
import React, { Component } from 'react';
import './styles/ChallengeView.css';
import ChallengeNotFound from './ChallengeNotFound';
class ChallengeView extends Component {
constructor(props) {
super(props);
// this component will always be rendered with a challenge path
// get challengeTitle from url String
const challengeTitle = props.match.params.challengeTitle;
// get challenges Array[]
const { challenges } = props;
// declare challengeIndex Number
const challengeIndex = this.getIndex(challenges, challengeTitle);
this.state = {
challengeIndex,
currentChallenge: challengeIndex === -1 ? null : challenges[challengeIndex]
}
}
getIndex = ( challenges, challengeTitle ) => (
challenges.findIndex(c => (
c.title.toLowerCase().replace(" ", "-") === challengeTitle
))
)
// each time a new path is pushed to history
// this component receives new props
componentWillReceiveProps(nextProps) {
const nextChallengeTitle = nextProps.match.params.challengeTitle;
const { challenges } = nextProps;
const nextChallengeIndex = this.getIndex(challenges, nextChallengeTitle);
const nextChallenge = challenges[nextChallengeIndex];
// update the currently loaded challenge and set it to state
this.setState({
challengeIndex: nextChallengeIndex,
currentChallenge: nextChallenge
});
}
render() {
const {
toggleMap,
handleAdvanceToPrevChallenge,
handleAdvanceToNextChallenge } = this.props;
const { challengeIndex, currentChallenge } = this.state;
// if the user trys to navigate to a non-existant challenge
// we render the ChallengeNotFound component
return challengeIndex === -1 ? (
<ChallengeNotFound />
) : (
<div className="container">
<div className="top">
<div className="challenge-title">Challenge: {currentChallenge.title}</div>
<iframe
id="repl" frameBorder="0" width="100%" height="100%"
src={currentChallenge.repl}></iframe>
</div>
<div className="bottom">
<button
id="prev-button"
onClick={
challengeIndex === 0 ? null : (
() => handleAdvanceToPrevChallenge(challengeIndex)
)
}
className={
challengeIndex === 0 ? "btn disabled" : "btn"
}
>
<i className="fa fa-arrow-left"></i>
Previous Challenge
</button>
<button
id="next-button"
className="btn"
onClick={() => handleAdvanceToNextChallenge(challengeIndex)}
>
Next Challenge
<i className="fa fa-arrow-right"></i>
</button>
<button id="map-button" className="btn" onClick={() => toggleMap()}>
Map
<i className="fa fa-list"></i>
</button>
</div>
</div>
)
}
}
export default ChallengeView;