move map as a supdirectory of challenges

2016-05-10 19:28:40 -07:00
parent 33d3e94e62
commit 1eb6390b85
28 changed files with 93 additions and 383 deletions
--- a/common/app/routes/challenges/components/map/Map.jsx
+++ b/common/app/routes/challenges/components/map/Map.jsx
@@ -0,0 +1,87 @@
+import React, { PropTypes } from 'react';
+import classnames from 'classnames';
+import PureComponent from 'react-pure-render/component';
+import { Input, Button, Row } from 'react-bootstrap';
+
+import SuperBlock from './Super-Block.jsx';
+import FullStack from './Full-Stack.jsx';
+import CodingPrep from './Coding-Prep.jsx';
+
+const clearIcon = <i className='fa fa-times' />;
+const searchIcon = <i className='fa fa-search' />;
+export default class ShowMap extends PureComponent {
+  static displayName = 'Map';
+  static propTypes = {
+    clearFilter: PropTypes.func,
+    filter: PropTypes.string,
+    superBlocks: PropTypes.array,
+    updateFilter: PropTypes.func
+  };
+
+  renderSuperBlocks(superBlocks, setChallenge) {
+    if (!Array.isArray(superBlocks) || !superBlocks.length) {
+      return <div>No Super Blocks</div>;
+    }
+    return superBlocks.map((superBlock) => {
+      return (
+        <SuperBlock
+          key={ superBlock.title }
+          setChallenge={ setChallenge }
+          { ...superBlock }/>
+      );
+    });
+  }
+
+  render() {
+    const {
+      setChallenge,
+      superBlocks,
+      updateFilter,
+      clearFilter,
+      filter
+    } = this.props;
+    const inputIcon = !filter ?
+      searchIcon :
+      <span onClick={ clearFilter }>{ clearIcon }</span>;
+    const inputClass = classnames({
+      'map-filter': true,
+      filled: !!filter
+    });
+    return (
+      <div>
+        <div className='map-wrapper'>
+          <div
+            className='text-center map-fixed-header'
+            style={{ top: '50px' }}>
+            <p>Challenges required for certifications are marked with a *</p>
+            <Row className='map-buttons'>
+              <Button
+                block={ true }
+                bsStyle='primary'
+                className='center-block'>
+                Collapse all challenges
+              </Button>
+            </Row>
+            <Row className='map-buttons'>
+              <Input
+                addonAfter={ inputIcon }
+                autocompleted='off'
+                className={ inputClass }
+                onChange={ updateFilter }
+                placeholder='Type a challenge name'
+                type='text'
+                value={ filter }/>
+            </Row>
+            <hr />
+          </div>
+        </div>
+        <div
+          className='map-accordion'>
+          { this.renderSuperBlocks(superBlocks, setChallenge) }
+          <FullStack />
+          <CodingPrep />
+        </div>
+      </div>
+    );
+  }
+}