Merge pull request #33 from Bouncey/feat/auth0

Feat/auth0

packages/learn/src/templates/Challenges/components/HelpModal.js

@@ -0,0 +1,70 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
+import { Button, Modal } from 'react-bootstrap';
+
+import { createQuestion, closeModal, isHelpModalOpenSelector } from '../redux';
+
+const mapStateToProps = state => ({ isOpen: isHelpModalOpenSelector(state) });
+const mapDispatchToProps = dispatch =>
+  bindActionCreators(
+    { createQuestion, closeHelpModal: () => closeModal('help') },
+    dispatch
+  );
+
+const propTypes = {
+  closeHelpModal: PropTypes.func.isRequired,
+  createQuestion: PropTypes.func.isRequired,
+  isOpen: PropTypes.bool
+};
+
+const RSA =
+  'https://forum.freecodecamp.org/t/the-read-search-ask-methodology-for-' +
+  'getting-unstuck/137307';
+
+export class HelpModal extends PureComponent {
+  render() {
+    const { isOpen, closeHelpModal, createQuestion } = this.props;
+    return (
+      <Modal show={isOpen}>
+        <Modal.Header>
+          Ask for help?
+          <span className='close closing-x' onClick={closeHelpModal}>
+            ×
+          </span>
+        </Modal.Header>
+        <Modal.Body className='text-center'>
+          <h3>
+            If you've already tried the&nbsp;
+            <a href={RSA} target='_blank' title='Read, search, ask'>
+              Read-Search-Ask
+            </a>&nbsp; method, then you can ask for help on the freeCodeCamp
+            forum.
+          </h3>
+          <Button
+            block={true}
+            bsSize='lg'
+            bsStyle='primary'
+            onClick={createQuestion}
+            >
+            Create a help post on the forum
+          </Button>
+          <Button
+            block={true}
+            bsSize='lg'
+            bsStyle='primary'
+            onClick={closeHelpModal}
+            >
+            Cancel
+          </Button>
+        </Modal.Body>
+      </Modal>
+    );
+  }
+}
+
+HelpModal.displayName = 'HelpModal';
+HelpModal.propTypes = propTypes;
+
+export default connect(mapStateToProps, mapDispatchToProps)(HelpModal);