fix: rollback react-hotkeys and remove buttons

client/package-lock.json

@@ -16613,9 +16613,9 @@
       }
     },
     "react-hotkeys": {
-      "version": "2.0.0-pre9",
+      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/react-hotkeys/-/react-hotkeys-2.0.0-pre9.tgz",
+      "resolved": "https://registry.npmjs.org/react-hotkeys/-/react-hotkeys-2.0.0.tgz",
-      "integrity": "sha512-YujzB+kGB5F6rq6/NkNN2t3uSwYfBsC9qWligGKyDe7roMSmzFYO2N88mwSc+9zmHhy/ZrDyB+aqbzVIaK8haw==",
+      "integrity": "sha512-3n3OU8vLX/pfcJrR3xJ1zlww6KS1kEJt0Whxc4FiGV+MJrQ1mYSYI3qS/11d2MJDFm8IhOXMTFQirfu6AVOF6Q==",
       "requires": {
         "prop-types": "^15.6.1"
       },

client/package.json

@@ -53,7 +53,7 @@
     "react-final-form": "^6.3.0",
     "react-ga": "^2.6.0",
     "react-helmet": "^5.2.1",
-    "react-hotkeys": "^2.0.0-pre9",
+    "react-hotkeys": "^2.0.0",
     "react-identicons": "^1.1.7",
     "react-instantsearch-dom": "^5.7.0",
     "react-monaco-editor": "^0.30.1",

client/src/templates/Challenges/classic/Show.js

@@ -199,12 +199,6 @@ class ShowClassic extends Component {
       instructions
     } = this.getChallenge();
 
-    const {
-      introPath,
-      nextChallengePath,
-      prevChallengePath
-    } = this.props.pageContext.challengeMeta;
-
     const { forumTopicId, title } = this.getChallenge();
     return (
       <SidePanel
@@ -212,11 +206,7 @@ class ShowClassic extends Component {
         description={description}
         guideUrl={getGuideUrl({ forumTopicId, title })}
         instructions={instructions}
-        introPath={introPath}
-        nextChallengePath={nextChallengePath}
-        prevChallengePath={prevChallengePath}
         section={dasherize(blockName)}
-        showPrevNextBtns={true}
         showToolPanel={showToolPanel}
         title={this.getBlockNameTitle()}
         videoUrl={this.getVideoUrl()}

client/src/templates/Challenges/components/Challenge-Title.js

@@ -1,38 +1,16 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import Link from '../../../components/helpers/Link';
 
 import './challenge-title.css';
 import GreenPass from '../../../assets/icons/GreenPass';
 
 const propTypes = {
   children: PropTypes.string,
-  introPath: PropTypes.string,
+  isCompleted: PropTypes.bool
-  isCompleted: PropTypes.bool,
-  nextChallengePath: PropTypes.string,
-  prevChallengePath: PropTypes.string,
-  showPrevNextBtns: PropTypes.bool
 };
 
-function ChallengeTitle({
+function ChallengeTitle({ children, isCompleted }) {
-  children,
-  introPath,
-  isCompleted,
-  nextChallengePath,
-  prevChallengePath,
-  showPrevNextBtns
-}) {
   return (
-    <div className='challenge-title-wrap'>
-      {showPrevNextBtns ? (
-        <Link
-          aria-label='Previous lesson'
-          className='btn-invert btn btn-primary'
-          to={prevChallengePath}
-        >
-          &lt;
-        </Link>
-      ) : null}
     <h2 className='text-center challenge-title'>
       {children || 'Happy Coding!'}
       {isCompleted ? (
@@ -41,16 +19,6 @@ function ChallengeTitle({
         />
       ) : null}
     </h2>
-      {showPrevNextBtns ? (
-        <Link
-          aria-label='Next lesson'
-          className='btn-invert btn btn-primary'
-          to={introPath ? introPath : nextChallengePath}
-        >
-          &gt;
-        </Link>
-      ) : null}
-    </div>
   );
 }
 

client/src/templates/Challenges/components/ChallengeTitle.test.js

@@ -1,71 +1,16 @@
 /* global expect */
 
 import React from 'react';
-import Enzyme, { shallow } from 'enzyme';
-import Adapter from 'enzyme-adapter-react-16';
-import Link from '../../../components/helpers/Link';
 import renderer from 'react-test-renderer';
 
 import ChallengeTitle from './Challenge-Title';
 
-Enzyme.configure({ adapter: new Adapter() });
-
 const baseProps = {
   children: 'title text',
-  introPath: '/intro/path',
+  isCompleted: true
-  isCompleted: true,
-  nextChallengePath: '/next',
-  prevChallengePath: '/prev',
-  showPrevNextBtns: true
 };
 
 describe('<ChallengeTitle/>', () => {
-  it('renders 0 <Link/>s by default', () => {
-    const titleToRender = <ChallengeTitle />;
-    const title = shallow(titleToRender);
-    expect(title.find(Link).length).toBe(0);
-  });
-
-  it('renders a previous and a next <Link/>', () => {
-    const titleToRender = <ChallengeTitle {...baseProps} />;
-    const title = shallow(titleToRender);
-    expect(title.find(Link).length).toBe(2);
-  });
-
-  it('has a link to the previous challenge', () => {
-    const titleToRender = <ChallengeTitle {...baseProps} />;
-    const title = shallow(titleToRender);
-    expect(
-      title
-        .find(Link)
-        .first()
-        .prop('to')
-    ).toBe('/prev');
-  });
-
-  it('has a link to the next introduction if there is one', () => {
-    const titleToRender = <ChallengeTitle {...baseProps} />;
-    const title = shallow(titleToRender);
-    expect(
-      title
-        .find(Link)
-        .last()
-        .prop('to')
-    ).toBe('/intro/path');
-  });
-
-  it('has a link to the next challenge otherwise', () => {
-    const props = { ...baseProps, introPath: null };
-    const titleToRender = <ChallengeTitle {...props} />;
-    const title = shallow(titleToRender);
-    expect(
-      title
-        .find(Link)
-        .last()
-        .prop('to')
-    ).toBe('/next');
-  });
-
   it('renders correctly', () => {
     const tree = renderer.create(<ChallengeTitle {...baseProps} />).toJSON();
     expect(tree).toMatchSnapshot();

client/src/templates/Challenges/components/Side-Panel.js

@@ -26,12 +26,8 @@ const propTypes = {
   description: PropTypes.string,
   guideUrl: PropTypes.string,
   instructions: PropTypes.string,
-  introPath: PropTypes.string,
   isChallengeCompleted: PropTypes.bool,
-  nextChallengePath: PropTypes.string,
-  prevChallengePath: PropTypes.string,
   section: PropTypes.string,
-  showPrevNextBtns: PropTypes.bool,
   showToolPanel: PropTypes.bool,
   tests: PropTypes.arrayOf(PropTypes.object),
   title: PropTypes.string,
@@ -61,27 +57,17 @@ export class SidePanel extends Component {
       title,
       description,
       instructions,
-      introPath,
       isChallengeCompleted,
       guideUrl,
-      nextChallengePath,
-      prevChallengePath,
       tests,
       section,
-      showPrevNextBtns,
       showToolPanel,
       videoUrl
     } = this.props;
     return (
       <div className='instructions-panel' role='complementary'>
         <div>
-          <ChallengeTitle
+          <ChallengeTitle isCompleted={isChallengeCompleted}>
-            introPath={introPath}
-            isCompleted={isChallengeCompleted}
-            nextChallengePath={nextChallengePath}
-            prevChallengePath={prevChallengePath}
-            showPrevNextBtns={showPrevNextBtns}
-          >
             {title}
           </ChallengeTitle>
           <ChallengeDescription

client/src/templates/Challenges/components/__snapshots__/ChallengeTitle.test.js.snap

@@ -1,19 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<ChallengeTitle/> renders correctly 1`] = `
-<div
+<h2
-  className="challenge-title-wrap"
->
-  <a
-    aria-label="Previous lesson"
-    className="btn-invert btn btn-primary"
-    href="/prev"
-  >
-    &lt;
-  </a>
-  <h2
   className="text-center challenge-title"
-  >
+>
   title text
   <span
     className="sr-only"
@@ -73,13 +63,5 @@ exports[`<ChallengeTitle/> renders correctly 1`] = `
       />
     </g>
   </svg>
-  </h2>
+</h2>
-  <a
-    aria-label="Next lesson"
-    className="btn-invert btn btn-primary"
-    href="/intro/path"
-  >
-    &gt;
-  </a>
-</div>
 `;

client/src/templates/Challenges/components/challenge-title.css

@@ -1,15 +1,3 @@
-.challenge-title-wrap {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 1.45rem;
-}
-
 .challenge-title {
   padding: 0 15px;
 }
-
-.challenge-title-wrap > a {
-  margin-top: 10px;
-  align-self: flex-start;
-}

client/src/templates/Challenges/project/Side-Panel.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import ChallengeTitle from '../components/Challenge-Title';
+import Spacer from '../../../components/helpers/Spacer';
+
+const propTypes = {
+  description: PropTypes.string,
+  introPath: PropTypes.string,
+  isCompleted: PropTypes.bool,
+  isSignedIn: PropTypes.bool,
+  title: PropTypes.string
+};
+
+export default function SidePanel({ title, description, isCompleted }) {
+  return (
+    <div>
+      <Spacer />
+      <ChallengeTitle isCompleted={isCompleted}>{title}</ChallengeTitle>
+      <div dangerouslySetInnerHTML={{ __html: description }} />
+    </div>
+  );
+}
+
+SidePanel.displayName = 'ProjectSidePanel';
+SidePanel.propTypes = propTypes;

client/src/templates/Challenges/projects/backend/Show.js

@@ -198,14 +198,7 @@ export class BackEnd extends Component {
             <Row>
               <Col md={8} mdOffset={2} sm={10} smOffset={1} xs={12}>
                 <Spacer />
-                <ChallengeTitle
+                <ChallengeTitle>{blockNameTitle}</ChallengeTitle>
-                  introPath={introPath}
-                  nextChallengePath={nextChallengePath}
-                  prevChallengePath={prevChallengePath}
-                  showPrevNextBtns={true}
-                >
-                  {blockNameTitle}
-                </ChallengeTitle>
                 <ChallengeDescription
                   description={description}
                   instructions={instructions}