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) } +
+
+ ); + } +}