From af1008f4e553f5048298597ba91683901e381563 Mon Sep 17 00:00:00 2001
From: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>
Date: Wed, 18 Sep 2019 19:02:40 +0200
Subject: [PATCH] fix: wrap backend and project in Hotkeys

Co-authored-by: moT01 <tmondloch01@gmail.com>
---
 .../Challenges/projects/backend/Show.js       | 109 +++++++++---------
 .../Challenges/projects/frontend/Show.js      |  66 +++++------
 2 files changed, 85 insertions(+), 90 deletions(-)

diff --git a/client/src/templates/Challenges/projects/backend/Show.js b/client/src/templates/Challenges/projects/backend/Show.js
index a060a763932..3f08c18cf0d 100644
--- a/client/src/templates/Challenges/projects/backend/Show.js
+++ b/client/src/templates/Challenges/projects/backend/Show.js
@@ -185,67 +185,68 @@ export class BackEnd extends Component {
     const blockNameTitle = `${blockName} - ${title}`;
 
     return (
-      <LearnLayout>
-        <Helmet title={`${blockNameTitle} | Learn | freeCodeCamp.org`} />
-        <Hotkeys
-          introPath={introPath}
-          nextChallengePath={nextChallengePath}
-          prevChallengePath={prevChallengePath}
-        />
-        <Grid>
-          <Row>
-            <Col md={8} mdOffset={2} sm={10} smOffset={1} xs={12}>
-              <Spacer />
-              <ChallengeTitle
-                introPath={introPath}
-                nextChallengePath={nextChallengePath}
-                prevChallengePath={prevChallengePath}
-                showPrevNextBtns={true}
-              >
-                {blockNameTitle}
-              </ChallengeTitle>
-              <ChallengeDescription
-                description={description}
-                instructions={instructions}
-              />
-              {challengeType === backend ? (
-                <Form
-                  buttonText={`${buttonCopy}`}
-                  formFields={formFields}
-                  id={backendNS}
-                  options={options}
-                  submit={this.handleSubmit}
+      <Hotkeys
+        introPath={introPath}
+        nextChallengePath={nextChallengePath}
+        prevChallengePath={prevChallengePath}
+      >
+        <LearnLayout>
+          <Helmet title={`${blockNameTitle} | Learn | freeCodeCamp.org`} />
+          <Grid>
+            <Row>
+              <Col md={8} mdOffset={2} sm={10} smOffset={1} xs={12}>
+                <Spacer />
+                <ChallengeTitle
+                  introPath={introPath}
+                  nextChallengePath={nextChallengePath}
+                  prevChallengePath={prevChallengePath}
+                  showPrevNextBtns={true}
+                >
+                  {blockNameTitle}
+                </ChallengeTitle>
+                <ChallengeDescription
+                  description={description}
+                  instructions={instructions}
                 />
-              ) : (
-                <ProjectForm
-                  isFrontEnd={false}
-                  onSubmit={executeChallenge}
-                  updateProjectForm={updateProjectFormValues}
+                {challengeType === backend ? (
+                  <Form
+                    buttonText={`${buttonCopy}`}
+                    formFields={formFields}
+                    id={backendNS}
+                    options={options}
+                    submit={this.handleSubmit}
+                  />
+                ) : (
+                  <ProjectForm
+                    isFrontEnd={false}
+                    onSubmit={executeChallenge}
+                    updateProjectForm={updateProjectFormValues}
+                  />
+                )}
+                <ProjectToolPanel
+                  guideUrl={getGuideUrl({ forumTopicId, title })}
                 />
-              )}
-              <ProjectToolPanel
-                guideUrl={getGuideUrl({ forumTopicId, title })}
-              />
-              <br />
-              <Output
-                defaultOutput={`/**
+                <br />
+                <Output
+                  defaultOutput={`/**
 *
 * Test output will go here
 *
 *
 */`}
-                dimensions={this.state}
-                height={150}
-                output={output}
-              />
-              <TestSuite tests={tests} />
-              <Spacer />
-            </Col>
-            <CompletionModal />
-            <HelpModal />
-          </Row>
-        </Grid>
-      </LearnLayout>
+                  dimensions={this.state}
+                  height={150}
+                  output={output}
+                />
+                <TestSuite tests={tests} />
+                <Spacer />
+              </Col>
+              <CompletionModal />
+              <HelpModal />
+            </Row>
+          </Grid>
+        </LearnLayout>
+      </Hotkeys>
     );
   }
 }
diff --git a/client/src/templates/Challenges/projects/frontend/Show.js b/client/src/templates/Challenges/projects/frontend/Show.js
index f61eaa9f539..aa145355b3d 100644
--- a/client/src/templates/Challenges/projects/frontend/Show.js
+++ b/client/src/templates/Challenges/projects/frontend/Show.js
@@ -110,42 +110,36 @@ export class Project extends Component {
 
     const blockNameTitle = `${blockName} - ${title}`;
     return (
-      <LearnLayout>
-        <Hotkeys
-          introPath={introPath}
-          nextChallengePath={nextChallengePath}
-          prevChallengePath={prevChallengePath}
-        />
-        <Helmet title={`${blockNameTitle} | Learn | freeCodeCamp.org`} />
-        <Grid>
-          <Row>
-            <Col md={8} mdOffset={2} sm={10} smOffset={1} xs={12}>
-              <Spacer />
-              <ChallengeTitle
-                introPath={introPath}
-                nextChallengePath={nextChallengePath}
-                prevChallengePath={prevChallengePath}
-                showPrevNextBtns={true}
-              >
-                {blockNameTitle}
-              </ChallengeTitle>
-              <ChallengeDescription description={description} />
-              <ProjectForm
-                isFrontEnd={isFrontEnd}
-                onSubmit={openCompletionModal}
-                updateProjectForm={updateProjectFormValues}
-              />
-              <ProjectToolPanel
-                guideUrl={getGuideUrl({ forumTopicId, title })}
-              />
-              <br />
-              <Spacer />
-            </Col>
-            <CompletionModal />
-            <HelpModal />
-          </Row>
-        </Grid>
-      </LearnLayout>
+      <Hotkeys
+        introPath={introPath}
+        nextChallengePath={nextChallengePath}
+        prevChallengePath={prevChallengePath}
+      >
+        <LearnLayout>
+          <Helmet title={`${blockNameTitle} | Learn | freeCodeCamp.org`} />
+          <Grid>
+            <Row>
+              <Col md={8} mdOffset={2} sm={10} smOffset={1} xs={12}>
+                <Spacer />
+                <ChallengeTitle>{blockNameTitle}</ChallengeTitle>
+                <ChallengeDescription description={description} />
+                <ProjectForm
+                  isFrontEnd={isFrontEnd}
+                  onSubmit={openCompletionModal}
+                  updateProjectForm={updateProjectFormValues}
+                />
+                <ProjectToolPanel
+                  guideUrl={getGuideUrl({ forumTopicId, title })}
+                />
+                <br />
+                <Spacer />
+              </Col>
+              <CompletionModal />
+              <HelpModal />
+            </Row>
+          </Grid>
+        </LearnLayout>
+      </Hotkeys>
     );
   }
 }