fix(client): challenge SSR and styles

client/src/components/Header/index.js

@@ -30,12 +30,16 @@ class Header extends Component {
       <header className={this.state.isMenuOpened ? 'opened' : null}>
         <nav id='top-nav'>
           <Media query='(min-width: 735px)'>
-            <Fragment>
+            {matches =>
-              <Link className='home-link' to='/'>
+              matches && (
-                <NavLogo />
+                <Fragment>
-              </Link>
+                  <Link className='home-link' to='/'>
-              {disableSettings ? null : <FCCSearch />}
+                    <NavLogo />
-            </Fragment>
+                  </Link>
+                  {disableSettings ? null : <FCCSearch />}
+                </Fragment>
+              )
+            }
           </Media>
 
           <ul id='top-right-nav'>
@@ -58,16 +62,20 @@ class Header extends Component {
           </ul>
         </nav>
 
-        <Media query='(max-width: 734px)'>
+        <Media defaultMatches={false} query='(max-width: 734px)'>
-          <div className='mobile-menu'>
+          {matches =>
-            <Link className='home-link' to='/'>
+            matches && (
-              <NavLogo />
+              <div className='mobile-menu'>
-            </Link>
+                <Link className='home-link' to='/'>
-            {disableSettings ? null : <FCCSearch />}
+                  <NavLogo />
-            <span className='menu-button' onClick={this.toggleClass}>
+                </Link>
-              Menu
+                {disableSettings ? null : <FCCSearch />}
-            </span>
+                <span className='menu-button' onClick={this.toggleClass}>
-          </div>
+                  Menu
+                </span>
+              </div>
+            )
+          }
         </Media>
       </header>
     );

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

@@ -5,10 +5,7 @@ import { connect } from 'react-redux';
 
 import ToolPanel from '../components/Tool-Panel';
 import { createStructuredSelector } from 'reselect';
-import {
+import { currentTabSelector, moveToTab } from '../redux';
-  currentTabSelector,
-  moveToTab,
-} from '../redux';
 import { bindActionCreators } from 'redux';
 
 const mapStateToProps = createStructuredSelector({
@@ -18,24 +15,23 @@ const mapStateToProps = createStructuredSelector({
 const mapDispatchToProps = dispatch =>
   bindActionCreators(
     {
-      moveToTab,
+      moveToTab
     },
     dispatch
   );
 
 const propTypes = {
-  moveToTab: PropTypes.func,
   currentTab: PropTypes.number,
-  instructions: PropTypes.element,
   editor: PropTypes.element,
-  testOutput: PropTypes.element,
-  hasPreview: PropTypes.bool,
-  preview: PropTypes.element,
   guideUrl: PropTypes.string,
+  hasPreview: PropTypes.bool,
+  instructions: PropTypes.element,
+  moveToTab: PropTypes.func,
+  preview: PropTypes.element,
+  testOutput: PropTypes.element,
   videoUrl: PropTypes.string
 };
 
-
 class MobileLayout extends Component {
   render() {
     const {
@@ -60,21 +56,17 @@ class MobileLayout extends Component {
         <Tabs
           activeKey={currentTab}
           defaultActiveKey={1}
-          id='challege-page-tabs'
+          id='challenge-page-tabs'
-          onSelect={(key) => moveToTab(key)}
+          onSelect={moveToTab}
-        >
+          >
           <TabPane eventKey={1} title='Instructions'>
-            { instructions }
+            {instructions}
           </TabPane>
           <TabPane eventKey={2} title='Code' {...editorTabPaneProps}>
-            <div className='challege-edittor-wrapper'>
+            <div className='challenge-editor-wrapper'>{editor}</div>
-              {editor}
-            </div>
           </TabPane>
           <TabPane eventKey={3} title='Tests' {...editorTabPaneProps}>
-            <div className='challege-edittor-wrapper'>
+            <div className='challenge-editor-wrapper'>{testOutput}</div>
-              {testOutput}
-            </div>
           </TabPane>
           {hasPreview && (
             <TabPane eventKey={4} title='Preview'>
@@ -82,11 +74,7 @@ class MobileLayout extends Component {
             </TabPane>
           )}
         </Tabs>
-        <ToolPanel
+        <ToolPanel guideUrl={guideUrl} isMobile={true} videoUrl={videoUrl} />
-          guideUrl={guideUrl}
-          isMobile={true}
-          videoUrl={videoUrl}
-        />
       </Fragment>
     );
   }
@@ -95,4 +83,7 @@ class MobileLayout extends Component {
 MobileLayout.displayName = 'MobileLayout';
 MobileLayout.propTypes = propTypes;
 
-export default connect(mapStateToProps, mapDispatchToProps)(MobileLayout);
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(MobileLayout);

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

@@ -72,7 +72,7 @@ const propTypes = {
   output: PropTypes.string,
   pageContext: PropTypes.shape({
     challengeMeta: PropTypes.shape({
-      nextchallengePath: PropTypes.string
+      nextChallengePath: PropTypes.string
     })
   }),
   tests: PropTypes.arrayOf(
@@ -178,7 +178,9 @@ class ShowClassic extends Component {
   }
 
   getGuideUrl() {
-    const {fields: { slug }} = this.getChallenge();
+    const {
+      fields: { slug }
+    } = this.getChallenge();
     return createGuideUrl(slug);
   }
 
@@ -201,7 +203,7 @@ class ShowClassic extends Component {
     const {
       fields: { blockName },
       description,
-      instructions,
+      instructions
     } = this.getChallenge();
 
     return (
@@ -221,8 +223,8 @@ class ShowClassic extends Component {
   renderEditor() {
     const { files } = this.props;
     const challengeFile = first(Object.keys(files).map(key => files[key]));
-    return challengeFile && (
+    return (
-      <Editor {...challengeFile} fileKey={challengeFile.key} />
+      challengeFile && <Editor {...challengeFile} fileKey={challengeFile.key} />
     );
   }
 
@@ -230,7 +232,7 @@ class ShowClassic extends Component {
     const { output } = this.props;
     return (
       <Output
-            defaultOutput={`
+        defaultOutput={`
 /**
 * Your test output will go here.
 */
@@ -242,10 +244,7 @@ class ShowClassic extends Component {
 
   renderPreview() {
     return (
-      <Preview
+      <Preview className='full-height' disableIframe={this.state.resizing} />
-        className='full-height'
-        disableIframe={this.state.resizing}
-      />
     );
   }
 
@@ -255,31 +254,33 @@ class ShowClassic extends Component {
         <Helmet
           title={`Learn ${this.getBlockNameTitle()} | freeCodeCamp.org`}
         />
-        <Media query={{ maxWidth: MAX_MOBILE_WIDTH }}>
+        <Media defaultMatches={false} query={{ maxWidth: MAX_MOBILE_WIDTH }}>
           {matches =>
-            matches
+            matches ? (
-              ? (
+              <MobileLayout
-                <MobileLayout
+                editor={this.renderEditor()}
-                  instructions={this.renderInstructionsPanel({ showToolPanel: false })}
+                guideUrl={this.getGuideUrl()}
-                  editor={this.renderEditor()}
+                hasPreview={this.hasPreview()}
-                  testOutput={this.renderTestOutput()}
+                instructions={this.renderInstructionsPanel({
-                  hasPreview={this.hasPreview()}
+                  showToolPanel: false
-                  preview={this.renderPreview()}
+                })}
-                  guideUrl={this.getGuideUrl()}
+                preview={this.renderPreview()}
-                  videoUrl={this.getVideoUrl()}
+                testOutput={this.renderTestOutput()}
-                />
+                videoUrl={this.getVideoUrl()}
-              )
+              />
-              : (
+            ) : (
-                <DesktopLayout
+              <DesktopLayout
-                  instructions={this.renderInstructionsPanel({ showToolPanel: true })}
+                challengeFile={this.getChallengeFile()}
-                  editor={this.renderEditor()}
+                editor={this.renderEditor()}
-                  testOutput={this.renderTestOutput()}
+                hasPreview={this.hasPreview()}
-                  hasPreview={this.hasPreview()}
+                instructions={this.renderInstructionsPanel({
-                  preview={this.renderPreview()}
+                  showToolPanel: true
-                  resizeProps={this.resizeProps}
+                })}
-                  challengeFile={this.getChallengeFile()}
+                preview={this.renderPreview()}
-                />
+                resizeProps={this.resizeProps}
-              )
+                testOutput={this.renderTestOutput()}
+              />
+            )
           }
         </Media>
         <CompletionModal />

client/src/templates/Challenges/classic/classic.css

@@ -31,21 +31,21 @@
   letter-spacing: 0.02em;
 }
 
-#challege-page-tabs .nav-tabs {
+#challenge-page-tabs .nav-tabs {
   margin-left: 2px;
   display: flex;
 }
 
-#challege-page-tabs .nav-tabs > li {
+#challenge-page-tabs .nav-tabs > li {
   flex: 1;
   text-align: center;
 }
 
-#challege-page-tabs .nav-tabs > li > a {
+#challenge-page-tabs .nav-tabs > li > a {
   padding: 5px 10px;
 }
 
-.challege-edittor-wrapper {
+.challenge-editor-wrapper {
   height: calc(100vh - 112px);
   overflow: hidden;
 }

client/src/templates/Challenges/components/completion-modal.css

@@ -10,7 +10,7 @@
   width: 30vh;
 }
 
-@media screen, (max-width: 767px) {
+@media screen and (max-width: 767px) {
   .challenge-success-modal .btn-lg {
     font-size: 16px;
   }

client/src/templates/Challenges/components/help-modal.css

@@ -1,4 +1,4 @@
-@media screen, (max-width: 767px) {
+@media screen and (max-width: 767px) {
   .help-modal .btn-lg {
     font-size: 16px;
   }

client/src/templates/Challenges/components/reset-modal.css

@@ -10,7 +10,7 @@
   text-shadow: none;
 }
 
-@media screen, (max-width: 767px) {
+@media screen and (max-width: 767px) {
   .reset-modal .btn-lg {
     font-size: 16px;
   }

client/src/templates/Introduction/intro.css

@@ -1,4 +1,4 @@
-@media screen, (max-width: 767px) {
+@media screen and (max-width: 767px) {
   .intro-layout-container {
     padding: 0 10px;
   }