Merge pull request #39 from Bouncey/fix/completiongModal

All challenge views use CompletionModal

packages/learn/src/templates/Challenges/backend/Show.js

@@ -9,6 +9,7 @@ import ChallengeTitle from '../components/Challenge-Title';
 import ChallengeDescription from '../components/Challenge-Description';
 import TestSuite from '../components/Test-Suite';
 import Output from '../components/Output';
+import CompletionModal from '../components/CompletionModal';
 import {
   executeChallenge,
   challengeTestsSelector,
@@ -77,11 +78,11 @@ export class BackEnd extends PureComponent {
     const {
       initTests,
       updateChallengeMeta,
-      data: { challengeNode: { fields: { tests } } },
+      data: { challengeNode: { fields: { tests }, challengeType } },
       pathContext: { challengeMeta }
     } = this.props;
     initTests(tests);
-    updateChallengeMeta(challengeMeta);
+    updateChallengeMeta({ ...challengeMeta, challengeType });
   }
 
   componentDidUpdate(prevProps) {
@@ -89,12 +90,14 @@ export class BackEnd extends PureComponent {
     const {
       initTests,
       updateChallengeMeta,
-      data: { challengeNode: { title: currentTitle, fields: { tests } } },
+      data: {
+        challengeNode: { title: currentTitle, fields: { tests }, challengeType }
+      },
       pathContext: { challengeMeta }
     } = this.props;
     if (prevTitle !== currentTitle) {
       initTests(tests);
-      updateChallengeMeta(challengeMeta);
+      updateChallengeMeta({ ...challengeMeta, challengeType });
     }
   }
 
@@ -107,7 +110,7 @@ export class BackEnd extends PureComponent {
       executeChallenge
     } = this.props;
 
-    // TODO: Should be tied to user.isSigned
+    // TODO: Should be tied to user.isSignedIn
     const buttonCopy = submitting
       ? 'Submit and go to my next challenge'
       : "I've completed this challenge";
@@ -141,6 +144,7 @@ export class BackEnd extends PureComponent {
             <TestSuite tests={tests} />
           </Row>
         </Col>
+        <CompletionModal />
       </Row>
     );
   }

packages/learn/src/templates/Challenges/project/ProjectForm.js

@@ -10,7 +10,8 @@ import {
 
 const propTypes = {
   isFrontEnd: PropTypes.bool,
-  isSubmitting: PropTypes.bool
+  isSubmitting: PropTypes.bool,
+  openModal: PropTypes.func.isRequired
 };
 
 const frontEndFields = ['solution'];
@@ -35,6 +36,7 @@ const options = {
 
 export class ProjectForm extends PureComponent {
   handleSubmit = values => {
+    this.props.openModal('completion');
     console.log(values);
   };
 

packages/learn/src/templates/Challenges/project/Show.js

@@ -8,6 +8,7 @@ import Helmet from 'react-helmet';
 import { ChallengeNode } from '../../../redux/propTypes';
 import SidePanel from './Side-Panel';
 import ToolPanel from './Tool-Panel';
+import CompletionModal from '../components/CompletionModal';
 import HelpModal from '../components/HelpModal';
 import { bindActionCreators } from 'redux';
 import { updateChallengeMeta, createFiles } from '../redux';
@@ -76,6 +77,7 @@ export class Project extends PureComponent {
           title={blockNameTitle}
         />
         <ToolPanel challengeType={challengeType} />
+        <CompletionModal />
         <HelpModal />
       </Fragment>
     );

packages/learn/src/templates/Challenges/project/Tool-Panel.js

@@ -14,23 +14,34 @@ import ProjectForm from './ProjectForm';
 const mapStateToProps = () => ({});
 
 const mapDispatchToProps = dispatch =>
-  bindActionCreators({ openHelpModal: () => openModal('help') }, dispatch);
+  bindActionCreators(
+    {
+      openHelpModal: () => openModal('help'),
+      openCompletionModal: () => openModal('completion')
+    },
+    dispatch
+  );
 
 const propTypes = {
   challengeType: PropTypes.number,
   guideUrl: PropTypes.string,
+  openCompletionModal: PropTypes.func.isRequired,
   openHelpModal: PropTypes.func.isRequired
 };
 
 export class ToolPanel extends PureComponent {
   render() {
-    const { guideUrl, challengeType, openHelpModal } = this.props;
-    console.log(this.props);
+    const {
+      guideUrl,
+      challengeType,
+      openHelpModal,
+      openCompletionModal
+    } = this.props;
 
     const isFrontEnd = challengeType === frontEndProject;
     return (
       <Fragment>
-        <ProjectForm isFrontEnd={isFrontEnd} />
+        <ProjectForm isFrontEnd={isFrontEnd} openModal={openCompletionModal} />
         <ButtonSpacer />
         {guideUrl && (
           <Fragment>