formatting and linting

packages/learn/gatsby-browser.js

@@ -6,11 +6,7 @@ import { createStore } from './src/redux/store';
 export const wrapRootElement = ({ element }) => {
   const store = createStore();
 
-  const ConnectedRootElement = (
+  const ConnectedRootElement = <Provider store={store}>{element}</Provider>;
-    <Provider store={store}>
-      {element}
-    </Provider>
-  );
 
   return ConnectedRootElement;
 };

packages/learn/gatsby-node.js

@@ -107,18 +107,19 @@ const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
 exports.onCreateWebpackConfig = ({ stage, rules, plugins, actions }) => {
   actions.setWebpackConfig({
     module: {
-      rules: [rules.js({
+      rules: [
-        /* eslint-disable max-len */
+        rules.js({
-        exclude: modulePath => {
+          /* eslint-disable max-len */
-          return (
+          exclude: modulePath => {
-            /node_modules/.test(modulePath) &&
+            return (
-            !(/(ansi-styles|chalk|strict-uri-encode|react-freecodecamp-search)/).test(
+              /node_modules/.test(modulePath) &&
-              modulePath
+              !(/(ansi-styles|chalk|strict-uri-encode|react-freecodecamp-search)/).test(
-            )
+                modulePath
-          );
+              )
-        }
+            );
-        /* eslint-enable max-len*/
+          }
-      })
+          /* eslint-enable max-len*/
+        })
       ]
     },
     node: {
@@ -136,9 +137,7 @@ exports.onCreateWebpackConfig = ({ stage, rules, plugins, actions }) => {
   });
   if (stage !== 'build-html') {
     actions.setWebpackConfig({
-      plugins: [
+      plugins: [new MonacoWebpackPlugin()]
-        new MonacoWebpackPlugin()
-      ]
     });
   }
   if (stage === 'build-html') {

packages/learn/gatsby-ssr.js

@@ -6,10 +6,7 @@ import headComponents from './src/head';
 
 import { createStore } from './src/redux/store';
 
-export const replaceRenderer = ({
+export const replaceRenderer = ({ bodyComponent, replaceBodyHTMLString }) => {
-  bodyComponent,
-  replaceBodyHTMLString
-}) => {
   const store = createStore();
 
   const ConnectedBody = () => (

packages/learn/src/__mocks__/monacoEditorMock.js

@@ -1,18 +1,15 @@
 /* eslint-disable */
 import React from 'react';
 
-export default (props) => {
+export default props => {
   const { width = '100%', height = '100%' } = props;
-  const fixedWidth = width.toString().indexOf('%') !== -1 ?
+  const fixedWidth =
-    width : `${width}px`;
+    width.toString().indexOf('%') !== -1 ? width : `${width}px`;
-  const fixedHeight = height.toString().indexOf('%') !== -1 ?
+  const fixedHeight =
-    height : `${height}px`;
+    height.toString().indexOf('%') !== -1 ? height : `${height}px`;
   const style = {
     width: fixedWidth,
     height: fixedHeight
-  };  return (
+  };
-    <div
+  return <div style={style} className="react-monaco-editor-container" />;
-      style={style}
+};
-      className="react-monaco-editor-container" />
-  );
-}

packages/learn/src/head/sassjs.js

@@ -1,8 +1,7 @@
 import React from 'react';
 
 const cdnAddr =
-  'https://cdnjs.cloudflare.com/ajax/libs/sass.js/' +
+  'https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.10.9/sass.sync.min.js';
-  '0.10.9/sass.sync.min.js';
 
 const sassjs = [<script key='sassjs' src={cdnAddr} type='text/javascript' />];
 

packages/learn/src/redux/store.js

@@ -1,3 +1,6 @@
+/* eslint-disable-next-line max-len */
+import { composeWithDevTools } from 'redux-devtools-extension/logOnlyInProduction';
+
 import {
   createStore as reduxCreateStore,
   combineReducers,
@@ -6,9 +9,6 @@ import {
 import { combineEpics, createEpicMiddleware } from 'redux-observable';
 
 import { reducer as formReducer } from 'redux-form';
-import {
-  composeWithDevTools
-} from 'redux-devtools-extension/logOnlyInProduction';
 
 import { reducer as app, epics as appEpics } from './app';
 import {
@@ -50,6 +50,5 @@ const composeEnhancers = composeWithDevTools({
 export const createStore = () =>
   reduxCreateStore(
     rootReducer,
-    composeEnhancers(
+    composeEnhancers(applyMiddleware(epicMiddleware))
-      applyMiddleware(epicMiddleware)
+  );
-  ));

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

@@ -76,10 +76,13 @@ export class CompletionModal extends PureComponent {
     const showDownloadButton = Object.keys(files).length;
     const filesForDownload = Object.keys(files)
       .map(key => files[key])
-      .reduce((allFiles, { path, contents }) => ({
+      .reduce(
-        ...allFiles,
+        (allFiles, { path, contents }) => ({
-        [path]: contents
+          ...allFiles,
-      }), {});
+          [path]: contents
+        }),
+        {}
+      );
     const dashedName = dasherize(title);
     return (
       <Modal
@@ -111,21 +114,20 @@ export class CompletionModal extends PureComponent {
             >
             Submit and go to next challenge (Ctrl + Enter)
           </Button>
-          {showDownloadButton
+          {showDownloadButton ? (
-            ? <Button
+            <Button
-                block={true}
+              block={true}
-                bsSize='lg'
+              bsSize='lg'
-                bsStyle='primary'
+              bsStyle='primary'
-                className='btn-primary-invert'
+              className='btn-primary-invert'
-                download={`${dashedName}.json`}
+              download={`${dashedName}.json`}
-                href={`data:text/json;charset=utf-8,${encodeURIComponent(
+              href={`data:text/json;charset=utf-8,${encodeURIComponent(
-                  JSON.stringify(filesForDownload)
+                JSON.stringify(filesForDownload)
-                )}`}
+              )}`}
-                >
+              >
-                Download my solution
+              Download my solution
-              </Button>
+            </Button>
-            : null
+          ) : null}
-          }
         </Modal.Footer>
       </Modal>
     );

packages/learn/src/templates/Challenges/components/Side-Panel.js

@@ -52,14 +52,20 @@ export class SidePanel extends PureComponent {
   }
 
   componentDidMount() {
-    MathJax.Hub.Queue(['Typeset', MathJax.Hub,
+    MathJax.Hub.Queue([
-    document.querySelector('.rosetta-code')]);
+      'Typeset',
+      MathJax.Hub,
+      document.querySelector('.rosetta-code')
+    ]);
     this.props.initConsole('');
   }
 
   componentDidUpdate(prevProps) {
-    MathJax.Hub.Queue(['Typeset', MathJax.Hub,
+    MathJax.Hub.Queue([
-    document.querySelector('.rosetta-code')]);
+      'Typeset',
+      MathJax.Hub,
+      document.querySelector('.rosetta-code')
+    ]);
     const { title, initConsole } = this.props;
     if (title !== prevProps.title) {
       initConsole('');

packages/learn/src/templates/Challenges/rechallenge/transformers.js

@@ -92,20 +92,23 @@ const htmlSassTransformCode = file => {
   let doc = document.implementation.createHTMLDocument();
   doc.body.innerHTML = file.contents;
   let styleTags = [].filter.call(
-      doc.querySelectorAll('style'),
+    doc.querySelectorAll('style'),
-      style => style.type === 'text/sass'
+    style => style.type === 'text/sass'
   );
   if (styleTags.length === 0 || typeof Sass === 'undefined') {
     return vinyl.transformContents(() => doc.body.innerHTML, file);
   }
   return styleTags.reduce((obs, style) => {
-    return obs.flatMap(file => new Promise(resolve => {
+    return obs.flatMap(
-      window.Sass.compile(style.innerHTML, function(result) {
+      file =>
-        style.type = 'text/css';
+        new Promise(resolve => {
-        style.innerHTML = result.text;
+          window.Sass.compile(style.innerHTML, function(result) {
-        resolve(vinyl.transformContents(() => doc.body.innerHTML, file));
+            style.type = 'text/css';
-      });
+            style.innerHTML = result.text;
-    }));
+            resolve(vinyl.transformContents(() => doc.body.innerHTML, file));
+          });
+        })
+    );
   }, Observable.of(file));
 };