Merge pull request #47 from eleven-labs/fix-eslint

fix eslint config & issues
eleven-labs · Feb 28, 2018 · c5838b7 · c5838b7
2 parents a8d47b5 + ea36753
commit c5838b7
Show file tree

Hide file tree

Showing 17 changed files with 70 additions and 99 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -1,10 +1,6 @@
 module.exports = {
   parser: 'babel-eslint',
   extends: 'airbnb',
-  plugins: ['import', 'html'],
-  settings: {
-    'html/html-extensions': ['.html', '.jsx'],
-  },
   env: {
     jest: true,
     browser: true,

diff --git a/package.json b/package.json
@@ -9,7 +9,7 @@
     "start": "concurrently -k -p \"[{name} - {time}]\" -c \"cyan,magenta\" -n \"Client,Server\" \"yarn start-client\"",
     "test": "jest --no-cache --coverage",
     "test-update-snapshot": "jest --json --updateSnapshot",
-    "lint": "eslint --ext .js --ext .jsx src",
+    "lint": "eslint ./src --ext js,jsx",
     "serve-prod": "concurrently -k -p \"[{name} - {time}]\" -c \"cyan,magenta\" -n \"Client,Server\" \"serve ./public\""
   },
   "author": "",

diff --git a/src/components/Author.jsx b/src/components/Author.jsx
@@ -6,14 +6,13 @@ const Author = ({ author }) => (
   <a
     className="author-link"
     href={urlJoin('https://blog.eleven-labs.com/authors/', author.username)}
-    key={author.username}
   >
     {author.name}
   </a>
 );
 
-Author.PropTypes = {
-  author: PropTypes.shape(),
+Author.propTypes = {
+  author: PropTypes.shape().isRequired,
 };
 
 export default Author;
diff --git a/src/components/Console.jsx b/src/components/Console.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { parse } from 'markdown-to-ast';
+// import { parse } from 'markdown-to-ast';
 
 import componentFactory from '../services/componentFactory';
 
@@ -95,7 +95,7 @@ export default class Console extends React.Component {
     event.persist();
 
     this.setState({
-      md: await getPost(event.target.value),
+      // md: await getPost(event.target.value),
     });
   }
 

diff --git a/src/components/CourseItem.jsx b/src/components/CourseItem.jsx
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import urlJoin from 'url-join';
 
@@ -13,11 +13,6 @@ const dateOptions = {
   day: 'numeric',
 };
 
-const timeOptions = {
-  hour: '2-digit',
-  minute: '2-digit',
-};
-
 const authorRenderer = (author, index) => (
   <Author author={author} key={index} />
 );
@@ -52,10 +47,10 @@ const CourseItem = ({ course }) => {
       </div>
     </article>
   );
-}
+};
 
-CourseItem.PropTypes = {
-  course: PropTypes.shape(),
+CourseItem.propTypes = {
+  course: PropTypes.shape().isRequired,
 };
 
 export default CourseItem;
diff --git a/src/components/CourseList.jsx b/src/components/CourseList.jsx
@@ -1,11 +1,11 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import urlJoin from 'url-join';
+// import urlJoin from 'url-join';
 
 import CourseItem from './CourseItem';
 
-import play from '../assets/images/icons/icon_play.svg';
-import clock from '../assets/images/icons/icon_clock.svg';
+// import play from '../assets/images/icons/icon_play.svg';
+// import clock from '../assets/images/icons/icon_clock.svg';
 
 const courseRenderer = (course, index) => (
   <CourseItem course={course} key={index} />

diff --git a/src/components/Highlight.jsx b/src/components/Highlight.jsx
@@ -1,20 +1,20 @@
-import highlight from 'highlight.js'
+import highlight from 'highlight.js';
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 
 class Highlight extends Component {
   static propTypes = {
-    children: PropTypes.node,
-    language: PropTypes.string,
+    children: PropTypes.node.isRequired,
+    language: PropTypes.string.isRequired,
   };
 
   componentDidMount() {
     if (this.element) {
       highlight.highlightBlock(this.element);
     }
   }
-  
-  componentDidUpdate () {
+
+  componentDidUpdate() {
     if (this.element) {
       highlight.initHighlighting.called = false;
       highlight.highlightBlock(this.element);

diff --git a/src/components/Search.jsx b/src/components/Search.jsx
@@ -1,5 +1,4 @@
 import React, { Component } from 'react';
-import PropTypes from 'prop-types';
 
 class Search extends Component {
   constructor(props) {

diff --git a/src/components/Session.jsx b/src/components/Session.jsx
diff --git a/src/components/Splash.jsx b/src/components/Splash.jsx
@@ -1,5 +1,4 @@
 import React, { Component } from 'react';
-import PropTypes from 'prop-types';
 
 import flask from '../assets/images/icons/icon_flask.svg';
 
@@ -12,13 +11,17 @@ class Splash extends Component {
     return (
       <div className="splash">
         <div className="splash__container container">
-          <img className="splash__icon" src={flask} alt="" />
+          <img className="splash__icon" src={flask} alt="Code Labs" />
           <div className="splash__text">
             <h2 className="splash__title">
               Bienvenue sur Eleven Code Labs
             </h2>
             <p className="splash__description">
-              Cette plateforme est votre nouvelle ressource de tutoriels orientés développement web et mobile. Suivez à votre rythme des exercices complets, qui couvrent des sujets allant du développement de petites applications, à des cas pratiques vous faisant découvrir un nouvel outil...
+              Cette plateforme est votre nouvelle ressource de tutoriels
+              orientés développement web et mobile. Suivez à votre rythme
+              des exercices complets, qui couvrent des sujets allant du
+              développement de petites applications, à des cas pratiques
+              vous faisant découvrir un nouvel outil...
             </p>
           </div>
         </div>

diff --git a/src/components/Summary.jsx b/src/components/Summary.jsx
@@ -1,35 +1,33 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { NOOP } from '../constants';
 import SummaryItem from './SummaryItem';
 
-const Summary = ({ stepTitles = [], currentStep, gotoStep }) => {
-  return (
-    <nav className="summary">
-      <h3 class="visually-hidden">Étapes</h3>
-      <ul class="summary__steps">
-        {stepTitles.map((title, index) => (
-          <SummaryItem
-            key={title}
-            title={title}
-            index={index}
-            isCurrentStep={currentStep === index}
-            onClick={() => gotoStep(index)}
-          />
-        ))}
-      </ul>
-    </nav>
-  );
-};
+const Summary = ({ stepTitles = [], currentStep, gotoStep }) => (
+  <nav className="summary">
+    <h3 className="visually-hidden">Étapes</h3>
+    <ul className="summary__steps">
+      {stepTitles.map((title, index) => (
+        <SummaryItem
+          key={title}
+          title={title}
+          index={index}
+          isCurrentStep={currentStep === index}
+          onClick={() => gotoStep(index)}
+        />
+      ))}
+    </ul>
+  </nav>
+);
 
-Summary.PropTypes = {
+Summary.propTypes = {
   stepTitles: PropTypes.arrayOf(PropTypes.string),
   currentStep: PropTypes.number,
+  gotoStep: PropTypes.func.isRequired,
 };
 
 Summary.defaultProps = {
-  stepTitles: {},
+  stepTitles: [],
   currentStep: 0,
 };
 

diff --git a/src/components/SummaryItem.jsx b/src/components/SummaryItem.jsx
@@ -1,3 +1,4 @@
+/* eslint jsx-a11y/no-noninteractive-element-interactions: off */
 import React from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
@@ -9,11 +10,12 @@ const SummaryItem = ({ title, onClick, isCurrentStep, index }) => (
     className={cx('summary__step', { '-current': isCurrentStep })}
     onClick={onClick}
   >
-    <span class="summary__step-number">{index + 1}</span><span class="summary__step-title">{title}</span>
+    <span className="summary__step-number">{index + 1}</span>
+    <span className="summary__step-title">{title}</span>
   </li>
 );
 
-SummaryItem.PropTypes = {
+SummaryItem.propTypes = {
   title: PropTypes.string.isRequired,
   index: PropTypes.number.isRequired,
   isCurrentStep: PropTypes.bool.isRequired,

diff --git a/src/containers/App.jsx b/src/containers/App.jsx
@@ -1,9 +1,18 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import { renderRoutes } from 'react-router-config';
 
-import Header from './Header';
+import ConnectedHeader from './Header';
 
 export default class App extends React.Component {
+  static propTypes = {
+    route: PropTypes.shape(),
+  };
+
+  static defaultProps = {
+    route: undefined,
+  };
+
   shouldComponentUpdate() {
     return false;
   }
@@ -13,7 +22,7 @@ export default class App extends React.Component {
 
     return (
       <div>
-        <Header />
+        <ConnectedHeader />
         {route && renderRoutes(route.routes)}
       </div>
     );

diff --git a/src/containers/Course.jsx b/src/containers/Course.jsx
@@ -1,9 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import urlJoin from 'url-join';
 
-import Splash from '../components/Splash';
 import Summary from '../components/Summary';
 
 import clock from '../assets/images/icons/icon_clock.svg';
@@ -22,11 +20,9 @@ const mapStateToProps = ({
   courses,
   currentStepMD,
   currentCourse,
-  currentStepIndex,
 }) => ({
   courses,
   currentStepMD,
-  currentStepIndex,
   course: currentCourse,
 });
 
@@ -40,30 +36,26 @@ export class Course extends React.Component {
   static propTypes = {
     courses: PropTypes.arrayOf(PropTypes.shape()),
     currentStepMD: PropTypes.string,
-    currentStepIndex: PropTypes.number,
 
     course: PropTypes.shape(),
     loadCourses: PropTypes.func,
     loadStep: PropTypes.func,
     setCurrentCourse: PropTypes.func,
+
+    match: PropTypes.shape(),
   };
 
   static defaultProps = {
     courses: null,
     currentStepMD: '',
-    currentStepIndex: null,
 
     course: null,
-    loadCourses: PropTypes.func,
-    loadStep: PropTypes.func,
-    setCurrentCourse: PropTypes.func,
+    loadCourses: NOOP,
+    loadStep: NOOP,
+    setCurrentCourse: NOOP,
+    match: { params: {} },
   };
 
-  state = {
-    steps: [],
-    currentStep: 0,
-  }
-
   constructor(props) {
     super(props);
 
@@ -74,6 +66,11 @@ export class Course extends React.Component {
     this.gotoStep = this.gotoStep.bind(this);
   }
 
+  state = {
+    steps: [],
+    currentStep: 0,
+  };
+
   componentDidMount() {
     this.props.loadCourses();
   }
@@ -85,7 +82,7 @@ export class Course extends React.Component {
       },
     } = this.props;
 
-    const { course, courses, currentStepMD, currentStepIndex } = nextProps;
+    const { course, courses, currentStepMD } = nextProps;
     const { steps = {}, currentStep } = this.state;
 
     // Set the course in redux's store.

diff --git a/src/containers/Header.jsx b/src/containers/Header.jsx
@@ -2,12 +2,10 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 
-import Search from '../components/Search';
-
 const mapStateToProps = ({
   currentCourse,
   currentStepIndex,
-}) => ({
+}) => ({
   currentCourse,
   currentStepIndex,
 });
@@ -44,8 +42,6 @@ export class Header extends React.Component {
             <h3>{currentStepIndex + 1} - {stepTitles[currentStepIndex]}</h3>
           )}
         </div>
-
-        <Search />
       </nav>
     );
   }

diff --git a/src/index.dev.jsx b/src/index.dev.jsx
@@ -4,7 +4,6 @@ import BrowserRouter from 'react-router-dom/BrowserRouter';
 import { renderRoutes } from 'react-router-config';
 import { Provider } from 'react-redux';
 
-import App from './containers/App';
 import createStore from './store/dev';
 import routes from './routes';