diff --git a/common/app/routes/map/components/Block.jsx b/common/app/routes/map/components/Block.jsx
new file mode 100644
index 0000000000..d9bb3f0481
--- /dev/null
+++ b/common/app/routes/map/components/Block.jsx
@@ -0,0 +1,82 @@
+import React, { PropTypes } from 'react';
+import FA from 'react-fontawesome';
+import PureComponent from 'react-pure-render/component';
+import { Panel } from 'react-bootstrap';
+import classnames from 'classnames';
+
+
+export default class Block extends PureComponent {
+ static displayName = 'Block';
+ static propTypes = {
+ title: PropTypes.string,
+ time: PropTypes.string,
+ challenges: PropTypes.array
+ };
+
+ renderChallenges(challenges) {
+ if (!Array.isArray(challenges) || !challenges.length) {
+ return
No Challenges Found
;
+ }
+ return challenges.map(challenge => {
+ const { title, dashedName, isLocked, isRequired } = challenge;
+ const challengeClassName = classnames({
+ 'text-primary': true,
+ 'padded-ionic-icon': true,
+ 'negative-15': true,
+ 'challenge-title': true,
+ 'ion-checkmark-circled': !isLocked,
+ 'ion-locked': isLocked,
+ 'disabled': isLocked
+ });
+ if (isLocked) {
+ return (
+
+ { title }
+ {
+ isRequired ?
+ * :
+ ''
+ }
+
+ );
+ }
+ return (
+
+
+ { title }
+ complete
+ {
+ isRequired ?
+ * :
+ ''
+ }
+
+
+ );
+ });
+ }
+
+ render() {
+ const { title, time, challenges } = this.props;
+ return (
+
+ { title }
+ ({ time })
+
+ }
+ id={ title }
+ key={ title }>
+ { this.renderChallenges(challenges) }
+
+ );
+ }
+}
diff --git a/common/app/routes/map/components/Coding-Prep.jsx b/common/app/routes/map/components/Coding-Prep.jsx
new file mode 100644
index 0000000000..5dda4951fc
--- /dev/null
+++ b/common/app/routes/map/components/Coding-Prep.jsx
@@ -0,0 +1,61 @@
+import React from 'react';
+import PureComponent from 'react-pure-render/component';
+import dedent from 'dedent';
+import SuperBlock from './Super-Block.jsx';
+
+const lockMessage = dedent`
+ To qualify for these nonprofit projects,
+ you must first earn all three foundational certifications:
+ Front End, Data Visualization, and Back End
+`.replace(/[\n]/g, ' ');
+
+const codingPrep = [{
+ title: 'Coding Interview Training',
+ time: '70 Hours',
+ challenges: [
+ {
+ title: 'Soft Skill Training',
+ isLocked: true
+ },
+ {
+ title: 'Critical Thinking Training',
+ isLocked: true
+ },
+ {
+ title: 'Whiteboard Coding Training',
+ isLocked: true
+ }
+ ]
+}, {
+ title: 'Mock Interviews',
+ time: '10 Hours',
+ challenges: [
+ {
+ title: 'Mock Interview #1',
+ isLocked: true
+ },
+ {
+ title: 'Mock Interview #2',
+ isLocked: true
+ },
+ {
+ title: 'Mock Interview #3',
+ isLocked: true
+ }
+ ]
+}];
+
+export default class CodingPrep extends PureComponent {
+ static displayName = 'CodingPrep;'
+
+ render() {
+ return (
+
+
+
+ );
+ }
+}
diff --git a/common/app/routes/map/components/Full-Stack.jsx b/common/app/routes/map/components/Full-Stack.jsx
new file mode 100644
index 0000000000..7cbc060c86
--- /dev/null
+++ b/common/app/routes/map/components/Full-Stack.jsx
@@ -0,0 +1,54 @@
+import React from 'react';
+import PureComponent from 'react-pure-render/component';
+import dedent from 'dedent';
+import SuperBlock from './Super-Block.jsx';
+
+const lockMessage = dedent`
+ To qualify for these nonprofit projects,
+ you must first earn all three foundational certifications:
+ Front End, Data Visualization, and Back End
+`.replace(/[\n]/g, ' ');
+
+const nonprofitProjects = {
+ title: 'Nonprofit Projects',
+ time: '800 Hours',
+ challenges: [
+ {
+ title: 'Greenfield Nonprofit Project #1',
+ isLocked: true,
+ isRequired: true
+ },
+ {
+ title: 'Greenfield Nonprofit Project #2',
+ isLocked: true,
+ isRequired: true
+ },
+ {
+ title: 'Legacy Code Nonprofit Project #1',
+ isLocked: true,
+ isRequired: true
+ },
+ {
+ title: 'Legacy Code Nonprofit Project #2',
+ isLocked: true,
+ isRequired: true
+ },
+ {
+ title: 'Claim your Full Stack Development Certification',
+ isLocked: true
+ }
+ ]
+};
+
+export default class FullStack extends PureComponent {
+ static displayName = 'FullStack';
+ render() {
+ const title = 'Full Stack Development Certification';
+ return (
+
+ );
+ }
+}
diff --git a/common/app/routes/map/components/Map.jsx b/common/app/routes/map/components/Map.jsx
index aea717bba7..7c6bc08a1c 100644
--- a/common/app/routes/map/components/Map.jsx
+++ b/common/app/routes/map/components/Map.jsx
@@ -1,20 +1,10 @@
import React, { PropTypes } from 'react';
-import FA from 'react-fontawesome';
import PureComponent from 'react-pure-render/component';
-import {
- Input,
- Button,
- Row,
- Panel
-} from 'react-bootstrap';
+import { Input, Button, Row } from 'react-bootstrap';
-const challengeClassName = `
- text-primary
- padded-ionic-icon
- negative-15
- challenge-title
- ion-checkmark-circled
-`.replace(/[\n]/g, '');
+import SuperBlock from './Super-Block.jsx';
+import FullStack from './Full-Stack.jsx';
+import CodingPrep from './Coding-Prep.jsx';
export default class ShowMap extends PureComponent {
static displayName = 'Map';
@@ -22,69 +12,15 @@ export default class ShowMap extends PureComponent {
superBlocks: PropTypes.array
};
- renderChallenges(challenges) {
- if (!Array.isArray(challenges) || !challenges.length) {
- return No Challenges Found
;
- }
- return challenges.map(challenge => {
- const { title, dashedName } = challenge;
- return (
-
-
- { title }
- complete
-
-
- );
- });
- }
-
- renderBlocks(blocks) {
- if (!Array.isArray(blocks) || !blocks.length) {
- return No Blocks Found
;
- }
- return blocks.map(block => {
- const { title, time, challenges } = block;
- return (
-
- { title }
- ({ time })
-
- }
- id={ title }
- key={ title }>
- { this.renderChallenges(challenges) }
-
- );
- });
- }
-
renderSuperBlocks(superBlocks) {
if (!Array.isArray(superBlocks) || !superBlocks.length) {
return No Super Blocks
;
}
return superBlocks.map((superBlock) => {
- const { title, blocks } = superBlock;
return (
- { title } }
- id={ title }
- key={ title }>
-
- { this.renderBlocks(blocks) }
-
-
+
);
});
}
@@ -120,6 +56,8 @@ export default class ShowMap extends PureComponent {
{ this.renderSuperBlocks(superBlocks) }
+
+
);
diff --git a/common/app/routes/map/components/Static-Blocks.jsx b/common/app/routes/map/components/Static-Blocks.jsx
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/common/app/routes/map/components/Super-Block.jsx b/common/app/routes/map/components/Super-Block.jsx
new file mode 100644
index 0000000000..323568de44
--- /dev/null
+++ b/common/app/routes/map/components/Super-Block.jsx
@@ -0,0 +1,53 @@
+import React, { PropTypes } from 'react';
+import PureComponent from 'react-pure-render/component';
+import FA from 'react-fontawesome';
+import { Panel } from 'react-bootstrap';
+
+import Block from './Block.jsx';
+
+export default class SuperBlock extends PureComponent {
+ static displayName = 'SuperBlock';
+ static propTypes = {
+ title: PropTypes.string,
+ message: PropTypes.string,
+ blocks: PropTypes.array
+ };
+
+ renderBlocks(blocks) {
+ if (!Array.isArray(blocks) || !blocks.length) {
+ return No Blocks Found
;
+ }
+ return blocks.map(block => {
+ return (
+
+ );
+ });
+ }
+
+ render() {
+ const { title, blocks, message } = this.props;
+ return (
+ { title } }
+ id={ title }
+ key={ title }>
+ {
+ message ?
+
+ { message }
+
:
+ ''
+ }
+
+ { this.renderBlocks(blocks) }
+
+
+ );
+ }
+}