Fix: Hint Button (#196)

* Create a guide URL for each challenge

* Format

packages/learn/src/components/Header/index.js

@@ -20,7 +20,9 @@ function Header() {
             <Link to='/'>Curriculum</Link>
           </li>
           <li>
-            <a href='https://forum.freecodecamp.org' target='_blank'>Forum</a>
+            <a href='https://forum.freecodecamp.org' target='_blank'>
+              Forum
+            </a>
           </li>
           <li>
             <UserState />

packages/learn/src/head/mathjax.js

@@ -1,14 +1,9 @@
 import React from 'react';
 
-const cdnAddr = 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/' +
+const cdnAddr =
-'2.7.4/MathJax.js?config=TeX-AMS_HTML';
+  'https://cdnjs.cloudflare.com/ajax/libs/mathjax/' +
+  '2.7.4/MathJax.js?config=TeX-AMS_HTML';
 
-const mathjax = [
+const mathjax = [<script key='mathjax' src={cdnAddr} type='text/javascript' />];
-  <script
+
-    key='mathjax'
+export default mathjax;
-    type='text/javascript'
-    src={cdnAddr}
-  />
-];
-  
-export default mathjax;

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

@@ -27,6 +27,7 @@ import {
   Form
 } from '../../../components/formHelpers';
 import Spacer from '../../../components/util/Spacer';
+import { createGuideUrl } from '../utils';
 
 // provided by redux form
 const reduxFormPropTypes = {
@@ -105,7 +106,9 @@ export class BackEnd extends PureComponent {
 
   render() {
     const {
-      data: { challengeNode: { fields: { blockName }, title, description } },
+      data: {
+        challengeNode: { fields: { blockName, slug }, title, description }
+      },
       output,
       tests,
       submitting,
@@ -133,7 +136,7 @@ export class BackEnd extends PureComponent {
               options={options}
               submit={executeChallenge}
             />
-            <ProjectToolPanel />
+            <ProjectToolPanel guideUrl={createGuideUrl(slug)} />
           </div>
           <div>
             <br />
@@ -181,6 +184,7 @@ export const query = graphql`
       challengeType
       fields {
         blockName
+        slug
         tests {
           text
           testString

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

@@ -16,7 +16,7 @@ import HelpModal from '../components/HelpModal';
 import ResetModal from '../components/ResetModal';
 
 import { randomCompliment } from '../utils/get-words';
-
+import { createGuideUrl } from '../utils';
 import { challengeTypes } from '../../../../utils/challengeTypes';
 import { ChallengeNode } from '../../../redux/propTypes';
 import {
@@ -160,10 +160,9 @@ class ShowClassic extends PureComponent {
       data: {
         challengeNode: {
           challengeType,
-          fields: { blockName },
+          fields: { blockName, slug },
           title,
-          description,
+          description
-          guideUrl
         }
       },
       files,
@@ -220,7 +219,7 @@ class ShowClassic extends PureComponent {
             <SidePanel
               className='full-height'
               description={description}
-              guideUrl={guideUrl}
+              guideUrl={createGuideUrl(slug)}
               title={blockNameTitle}
             />
           </ReflexElement>
@@ -228,8 +227,9 @@ class ShowClassic extends PureComponent {
           <ReflexElement flex={1} {...this.resizeProps}>
             {editors}
           </ReflexElement>
-          {showPreview &&
+          {showPreview && (
-            <ReflexSplitter propagate={true} {...this.resizeProps} />}
+            <ReflexSplitter propagate={true} {...this.resizeProps} />
+          )}
           {showPreview ? (
             <ReflexElement flex={0.7} {...this.resizeProps}>
               <Preview
@@ -257,10 +257,10 @@ export const query = graphql`
   query ClassicChallenge($slug: String!) {
     challengeNode(fields: { slug: { eq: $slug } }) {
       title
-      guideUrl
       description
       challengeType
       fields {
+        slug
         blockName
         tests {
           text

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

@@ -21,7 +21,7 @@ const options = {
     horizontal: 'hidden',
     vertical: 'visible',
     verticalHasArrows: true
-  },
+  }
 };
 
 class Output extends PureComponent {

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

@@ -63,30 +63,34 @@ export class ProjectForm extends PureComponent {
   handleKeyDown(e) {
     if (e.key === 'Control') {
       this.setState(state => ({
-        ...state, keysDown: { ...state.keysDown, Control: true }
+        ...state,
+        keysDown: { ...state.keysDown, Control: true }
       }));
     }
     if (e.key === 'Enter') {
       this.setState(state => ({
-        ...state, keysDown: { ...state.keysDown, Enter: true }
+        ...state,
+        keysDown: { ...state.keysDown, Enter: true }
       }));
     }
   }
   handleKeyUp(e) {
     if (e.key === 'Control') {
       this.setState(state => ({
-        ...state, keysDown: { ...state.keysDown, Control: false }
+        ...state,
+        keysDown: { ...state.keysDown, Control: false }
       }));
     }
     if (e.key === 'Enter') {
       this.setState(state => ({
-        ...state, keysDown: { ...state.keysDown, Enter: false }
+        ...state,
+        keysDown: { ...state.keysDown, Enter: false }
       }));
     }
   }
   handleSubmit(values) {
     const { keysDown: { Control, Enter } } = this.state;
-    if (Control && Enter || !Enter) {
+    if ((Control && Enter) || !Enter) {
       this.props.openModal('completion');
       this.props.updateProjectForm(values);
     }

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

@@ -25,6 +25,7 @@ import { frontEndProject } from '../../../../utils/challengeTypes';
 
 import './project.css';
 import Spacer from '../../../components/util/Spacer';
+import { createGuideUrl } from '../utils';
 
 const mapStateToProps = () => ({});
 const mapDispatchToProps = dispatch =>
@@ -92,7 +93,7 @@ export class Project extends PureComponent {
       data: {
         challengeNode: {
           challengeType,
-          fields: { blockName },
+          fields: { blockName, slug },
           title,
           description,
           guideUrl
@@ -119,7 +120,7 @@ export class Project extends PureComponent {
             openModal={openCompletionModal}
             updateProjectForm={updateProjectFormValues}
           />
-          <ToolPanel />
+          <ToolPanel guideUrl={createGuideUrl(slug)} />
           <Spacer />
         </div>
         <CompletionModal />
@@ -138,11 +139,11 @@ export const query = graphql`
   query ProjectChallenge($slug: String!) {
     challengeNode(fields: { slug: { eq: $slug } }) {
       title
-      guideUrl
       description
       challengeType
       fields {
         blockName
+        slug
       }
     }
   }

packages/learn/src/templates/Challenges/utils/index.js

@@ -0,0 +1,5 @@
+const guideBase = 'https://guide.freecodecamp.org/certifications';
+
+export function createGuideUrl(slug = '') {
+  return guideBase + slug;
+}