feat(challenge): Initial build of the challenge service

common/app/Map/Map.jsx

@@ -4,23 +4,32 @@ import { connect } from 'react-redux';
 import { Col, Row } from 'react-bootstrap';
 
 import ns from './ns.json';
+import { Loader } from '../helperComponents';
 import SuperBlock from './Super-Block.jsx';
 import { superBlocksSelector } from '../redux';
+import { fetchMapUi } from './redux';
 
 const mapStateToProps = state => ({
   superBlocks: superBlocksSelector(state)
 });
 
-const mapDispatchToProps = {};
+const mapDispatchToProps = { fetchMapUi };
 const propTypes = {
+  fetchMapUi: PropTypes.func.isRequired,
   params: PropTypes.object,
   superBlocks: PropTypes.array
 };
 
 export class ShowMap extends PureComponent {
-  renderSuperBlocks(superBlocks) {
+
+  renderSuperBlocks() {
+    const { superBlocks } = this.props;
     if (!Array.isArray(superBlocks) || !superBlocks.length) {
-      return <div>No Super Blocks</div>;
+      return (
+        <div style={{ hieght: '300px' }}>
+          <Loader />
+        </div>
+      );
     }
     return superBlocks.map(dashedName => (
       <SuperBlock
@@ -31,12 +40,11 @@ export class ShowMap extends PureComponent {
   }
 
   render() {
-    const { superBlocks } = this.props;
     return (
       <Row>
         <Col xs={ 12 }>
           <div className={ `${ns}-accordion center-block` }>
-            { this.renderSuperBlocks(superBlocks) }
+            { this.renderSuperBlocks() }
             <div className='spacer' />
           </div>
         </Col>