fix: rollback react-hotkeys and remove buttons

2019-09-19 15:17:44 +02:00
parent 465f206a9d
commit cd3ef998a6
10 changed files with 100 additions and 223 deletions
--- a/client/package-lock.json
+++ b/client/package-lock.json
@ -16613,9 +16613,9 @@
      }
    },
    "react-hotkeys": {
-      "version": "2.0.0-pre9",
-      "resolved": "https://registry.npmjs.org/react-hotkeys/-/react-hotkeys-2.0.0-pre9.tgz",
-      "integrity": "sha512-YujzB+kGB5F6rq6/NkNN2t3uSwYfBsC9qWligGKyDe7roMSmzFYO2N88mwSc+9zmHhy/ZrDyB+aqbzVIaK8haw==",
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/react-hotkeys/-/react-hotkeys-2.0.0.tgz",
+      "integrity": "sha512-3n3OU8vLX/pfcJrR3xJ1zlww6KS1kEJt0Whxc4FiGV+MJrQ1mYSYI3qS/11d2MJDFm8IhOXMTFQirfu6AVOF6Q==",
      "requires": {
        "prop-types": "^15.6.1"
      },
--- a/client/package.json
+++ b/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",
--- a/client/src/templates/Challenges/classic/Show.js
+++ b/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()}
--- a/client/src/templates/Challenges/components/Challenge-Title.js
+++ b/client/src/templates/Challenges/components/Challenge-Title.js
@ -1,56 +1,24 @@
 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,
-  nextChallengePath: PropTypes.string,
-  prevChallengePath: PropTypes.string,
-  showPrevNextBtns: PropTypes.bool
+  isCompleted: PropTypes.bool
 };

-function ChallengeTitle({
-  children,
-  introPath,
-  isCompleted,
-  nextChallengePath,
-  prevChallengePath,
-  showPrevNextBtns
-}) {
+function ChallengeTitle({ children, isCompleted }) {
  return (
-    <div className='challenge-title-wrap'>
-      {showPrevNextBtns ? (
-        <Link
-          aria-label='Previous lesson'
-          className='btn-invert btn btn-primary'
-          to={prevChallengePath}
-        >
-          &lt;
-        </Link>
+    <h2 className='text-center challenge-title'>
+      {children || 'Happy Coding!'}
+      {isCompleted ? (
+        <GreenPass
+          style={{ height: '15px', width: '15px', marginLeft: '5px' }}
+        />
      ) : null}
-      <h2 className='text-center challenge-title'>
-        {children || 'Happy Coding!'}
-        {isCompleted ? (
-          <GreenPass
-            style={{ height: '15px', width: '15px', marginLeft: '5px' }}
-          />
-        ) : null}
-      </h2>
-      {showPrevNextBtns ? (
-        <Link
-          aria-label='Next lesson'
-          className='btn-invert btn btn-primary'
-          to={introPath ? introPath : nextChallengePath}
-        >
-          &gt;
-        </Link>
-      ) : null}
-    </div>
+    </h2>
  );
 }

--- a/client/src/templates/Challenges/components/ChallengeTitle.test.js
+++ b/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,
-  nextChallengePath: '/next',
-  prevChallengePath: '/prev',
-  showPrevNextBtns: true
+  isCompleted: 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();
--- a/client/src/templates/Challenges/components/Side-Panel.js
+++ b/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
-            introPath={introPath}
-            isCompleted={isChallengeCompleted}
-            nextChallengePath={nextChallengePath}
-            prevChallengePath={prevChallengePath}
-            showPrevNextBtns={showPrevNextBtns}
-          >
+          <ChallengeTitle isCompleted={isChallengeCompleted}>
            {title}
          </ChallengeTitle>
          <ChallengeDescription
--- a/client/src/templates/Challenges/components/snapshots/ChallengeTitle.test.js.snap
+++ b/client/src/templates/Challenges/components/snapshots/ChallengeTitle.test.js.snap
@ -1,85 +1,67 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

 exports[`<ChallengeTitle/> renders correctly 1`] = `
-<div
-  className="challenge-title-wrap"
+<h2
+  className="text-center challenge-title"
 >
-  <a
-    aria-label="Previous lesson"
-    className="btn-invert btn btn-primary"
-    href="/prev"
+  title text
+  <span
+    className="sr-only"
  >
-    &lt;
-  </a>
-  <h2
-    className="text-center challenge-title"
-  >
-    title text
-    <span
-      className="sr-only"
-    >
-      Passed
-    </span>
-    <svg
-      height="50"
-      style={
-        Object {
-          "height": "15px",
-          "marginLeft": "5px",
-          "width": "15px",
-        }
+    Passed
+  </span>
+  <svg
+    height="50"
+    style={
+      Object {
+        "height": "15px",
+        "marginLeft": "5px",
+        "width": "15px",
      }
-      viewBox="0 0 200 200"
-      width="50"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <g>
-        <title>
-          Passed
-        </title>
-        <circle
-          cx="100"
-          cy="99"
-          fill="var(--primary-color)"
-          r="95"
-          stroke="var(--primary-color)"
-          strokeDasharray="null"
-          strokeLinecap="null"
-          strokeLinejoin="null"
-        />
-        <rect
-          fill="var(--primary-background)"
-          height="30"
-          stroke="var(--primary-background)"
-          strokeDasharray="null"
-          strokeLinecap="null"
-          strokeLinejoin="null"
-          transform="rotate(-45, 120, 106.321)"
-          width="128.85878"
-          x="55.57059"
-          y="91.32089"
-        />
-        <rect
-          fill="var(--primary-background)"
-          height="30"
-          stroke="var(--primary-background)"
-          strokeDasharray="null"
-          strokeLinecap="null"
-          strokeLinejoin="null"
-          transform="rotate(45, 66.75, 123.75)"
-          width="80.66548"
-          x="26.41726"
-          y="108.75"
-        />
-      </g>
-    </svg>
-  </h2>
-  <a
-    aria-label="Next lesson"
-    className="btn-invert btn btn-primary"
-    href="/intro/path"
+    }
+    viewBox="0 0 200 200"
+    width="50"
+    xmlns="http://www.w3.org/2000/svg"
  >
-    &gt;
-  </a>
-</div>
+    <g>
+      <title>
+        Passed
+      </title>
+      <circle
+        cx="100"
+        cy="99"
+        fill="var(--primary-color)"
+        r="95"
+        stroke="var(--primary-color)"
+        strokeDasharray="null"
+        strokeLinecap="null"
+        strokeLinejoin="null"
+      />
+      <rect
+        fill="var(--primary-background)"
+        height="30"
+        stroke="var(--primary-background)"
+        strokeDasharray="null"
+        strokeLinecap="null"
+        strokeLinejoin="null"
+        transform="rotate(-45, 120, 106.321)"
+        width="128.85878"
+        x="55.57059"
+        y="91.32089"
+      />
+      <rect
+        fill="var(--primary-background)"
+        height="30"
+        stroke="var(--primary-background)"
+        strokeDasharray="null"
+        strokeLinecap="null"
+        strokeLinejoin="null"
+        transform="rotate(45, 66.75, 123.75)"
+        width="80.66548"
+        x="26.41726"
+        y="108.75"
+      />
+    </g>
+  </svg>
+</h2>
 `;
--- a/client/src/templates/Challenges/components/challenge-title.css
+++ b/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;
-}
--- a/client/src/templates/Challenges/project/Side-Panel.js
+++ b/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;
--- a/client/src/templates/Challenges/projects/backend/Show.js
+++ b/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
-                  introPath={introPath}
-                  nextChallengePath={nextChallengePath}
-                  prevChallengePath={prevChallengePath}
-                  showPrevNextBtns={true}
-                >
-                  {blockNameTitle}
-                </ChallengeTitle>
+                <ChallengeTitle>{blockNameTitle}</ChallengeTitle>
                <ChallengeDescription
                  description={description}
                  instructions={instructions}