Style fixes

Format js files with standard
Bump lodash from 4.17.10 to 4.17.13

.eslintrc

@@ -1,3 +1,3 @@
 {
-  "extends": "react-app"
+  "extends": "standard"
 }

package.json

@@ -8,7 +8,7 @@
   "dependencies": {
     "axios": "^0.18.0",
     "gh-pages": "^1.1.0",
-    "lodash": "^4.17.10",
+    "lodash": "^4.17.13",
     "node-sass-chokidar": "^1.3.0",
     "npm-run-all": "^4.1.3",
     "react": "^16.4.0",

src/components/footer/index.js

@@ -2,10 +2,10 @@ import React, { Component } from 'react'
 import { Link } from 'react-router-dom'
 
 class Footer extends Component {
-  render() {
+  render () {
     return window === window.top ? (
-      <footer className="footer">
-        <Link className="logo" to="/">
+      <footer className='footer'>
+        <Link className='logo' to='/'>
           Wikipadia
         </Link>
       </footer>

src/components/header/index.js

@@ -5,7 +5,7 @@ import Settings from '../settings'
 import { Link } from 'react-router-dom'
 
 class Header extends Component {
-  constructor(props) {
+  constructor (props) {
     super(props)
     this.handleScroll = this.handleScroll.bind(this)
     this.state = {
@@ -14,15 +14,15 @@ class Header extends Component {
     }
   }
 
-  componentDidMount() {
+  componentDidMount () {
     document.addEventListener('scroll', this.handleScroll)
   }
 
-  componentWillUnmount() {
+  componentWillUnmount () {
     document.removeEventListener('scroll', this.handleScroll)
   }
 
-  handleScroll() {
+  handleScroll () {
     const { scrollY } = window
     const { scroll } = this.state
     const searchOpen = this.refs.header.querySelector('.search-results')
@@ -35,16 +35,16 @@ class Header extends Component {
     this.setState({ scroll: Math.max(scrollY, 20), hidden })
   }
 
-  render() {
+  render () {
     const { hidden, scroll } = this.state
 
     return window === window.top ? (
       <header
-        ref="header"
+        ref='header'
         className={['header', hidden && 'hidden', scroll > 20 && 'scrolled']
           .filter(Boolean)
           .join(' ')}>
-        <Link className="logo" to="/">
+        <Link className='logo' to='/'>
           Home
         </Link>
         <Search />

src/components/loading/index.js

@@ -1,7 +1,7 @@
 import React from 'react'
 
 export default ({ title = '' }) => (
-  <div className="loading">
-    <h1 className="page-title">{title.replace(/_/g, ' ')}</h1>
+  <div className='loading'>
+    <h1 className='page-title'>{title.replace(/_/g, ' ')}</h1>
   </div>
 )

src/components/modal/index.js

@@ -1,54 +1,53 @@
-import React, { Component } from "react";
-import { createPortal } from "react-dom";
-import withClickOutside from "react-click-outside";
+import React, { Component } from 'react'
+import { createPortal } from 'react-dom'
+import withClickOutside from 'react-click-outside'
 
 class Modal extends Component {
-  constructor() {
-    super();
-    this.el = null;
+  constructor () {
+    super()
+    this.el = null
   }
 
-  componentDidMount() {
-    this.el = document.createElement("div");
-    document.querySelector(".settings-wrapper").appendChild(this.el);
+  componentDidMount () {
+    this.el = document.createElement('div')
+    document.querySelector('.settings-wrapper').appendChild(this.el)
   }
 
-  componentWillUnmount() {
+  componentWillUnmount () {
     if (this.el) {
-      this.el.remove();
+      this.el.remove()
     }
   }
 
-  handleClickOutside(event) {
-    const { closeOnOutsideClick, handleClose } = this.props;
+  handleClickOutside (event) {
+    const { closeOnOutsideClick, handleClose } = this.props
 
     if (closeOnOutsideClick) {
-      event.preventDefault();
-      return handleClose();
+      return handleClose()
     }
   }
 
-  render() {
-    const { children, handleClose, isOpen, title } = this.props;
+  render () {
+    const { children, handleClose, isOpen, title } = this.props
 
-    if (!isOpen) return null;
+    if (!isOpen) return null
 
     return createPortal(
-      <div className="modal">
-        {title && <h3 className="modal-title">{title}</h3>}
+      <div className='modal'>
+        {title && <h3 className='modal-title'>{title}</h3>}
         {children}
-        <button className="close" onClick={handleClose}>
+        <button className='close' onClick={handleClose}>
           Close
         </button>
       </div>,
       this.el
-    );
+    )
   }
 }
 
 Modal.defaultProps = {
   closeOnOutsideClick: true,
   isOpen: false
-};
+}
 
-export default withClickOutside(Modal);
+export default withClickOutside(Modal)

src/components/page/index.js

@@ -6,9 +6,9 @@ import Loading from '../loading'
 import Sections from '../sections'
 
 class Page extends Component {
-  constructor(props) {
+  constructor (props) {
     super(props)
-
+    this.fetchPage = this.fetchPage.bind(this)
     this.state = {
       loading: false,
       title: '',
@@ -17,12 +17,12 @@ class Page extends Component {
     }
   }
 
-  componentDidMount() {
+  componentDidMount () {
     const { title } = this.props
     return this.fetchPage(title)
   }
 
-  fetchPage = title => {
+  fetchPage (title) {
     this.setState({ loading: true })
 
     return fetchPage(title)
@@ -53,24 +53,24 @@ class Page extends Component {
       )
   }
 
-  render() {
+  render () {
     const { content, error, loading, sections, title } = this.state
 
     return (
-      <div className="container">
+      <div className='container'>
         {sections.length ? <Sections sections={sections} /> : null}
         {loading && <Loading {...this.props} />}
         {content ? (
-          <div className="page">
+          <div className='page'>
             <h1
-              className="page-title"
+              className='page-title'
               dangerouslySetInnerHTML={{ __html: title }}
             />
             <div dangerouslySetInnerHTML={{ __html: content }} />
           </div>
         ) : error ? (
           <div>
-            <h1 className="page-title">Error</h1>
+            <h1 className='page-title'>Error</h1>
             <div>{error}</div>
           </div>
         ) : null}

src/components/search/index.js

@@ -4,7 +4,7 @@ import withClickOutside from 'react-click-outside'
 import { fetchPages } from '../../lib/api'
 
 class Search extends Component {
-  constructor(props) {
+  constructor (props) {
     super(props)
     this.fetchPages = this.fetchPages.bind(this)
     this.handleClose = this.handleClose.bind(this)
@@ -18,7 +18,7 @@ class Search extends Component {
     }
   }
 
-  handleSelection(event) {
+  handleSelection (event) {
     const key = event.which
     const { results, selected } = this.state
 
@@ -43,7 +43,7 @@ class Search extends Component {
     }
   }
 
-  handleClose() {
+  handleClose () {
     this.setState({
       error: null,
       open: false,
@@ -54,7 +54,7 @@ class Search extends Component {
     this.refs.input.value = ''
   }
 
-  fetchPages(key) {
+  fetchPages (key) {
     const query = this.refs.input.value
 
     if (!query) {
@@ -78,31 +78,31 @@ class Search extends Component {
       .catch(() => this.setState({ error: true, loading: false }))
   }
 
-  handleClickOutside(event) {
+  handleClickOutside (event) {
     if (this.state.open) {
       event.preventDefault()
       this.handleClose()
     }
   }
 
-  render() {
+  render () {
     const { error, loading, open, results, selected } = this.state
 
     return (
-      <div className="search">
-        <form className="search-form" onSubmit={e => e.preventDefault()}>
+      <div className='search'>
+        <form className='search-form' onSubmit={e => e.preventDefault()}>
           <input
-            ref="input"
-            type="search"
-            placeholder="Search..."
+            ref='input'
+            type='search'
+            placeholder='Search...'
             onKeyDown={this.handleSelection}
             onKeyUp={e => this.handleSearch(e.which)}
           />
         </form>
         {open && (
-          <div className="search-results">
-            {loading && <div className="spinner">Loading&hellip;</div>}
-            {error && <div className="search-error">No results found</div>}
+          <div className='search-results'>
+            {loading && <div className='spinner'>Loading&hellip;</div>}
+            {error && <div className='search-error'>No results found</div>}
             {results.map((result, index) => (
               <a
                 href={result.link}
@@ -111,12 +111,12 @@ class Search extends Component {
                   selected === index ? 'active' : undefined
                 ].join(' ')}
                 key={index}>
-                <h3 className="search-result-title">{result.title}</h3>
-                <p className="search-result-description">
+                <h3 className='search-result-title'>{result.title}</h3>
+                <p className='search-result-description'>
                   {result.description}
                 </p>
                 <div
-                  className="search-result-thumb"
+                  className='search-result-thumb'
                   style={{ backgroundImage: `url(${result.thumb})` }}
                 />
               </a>

src/components/sections/index.js

@@ -2,34 +2,34 @@ import React, { Component } from 'react'
 import withClickOutside from 'react-click-outside'
 
 class Sections extends Component {
-  constructor(props) {
+  constructor (props) {
     super(props)
 
     this.state = {
       open: false
     }
   }
 
-  handleClickOutside(event) {
+  handleClickOutside (event) {
     if (this.state.open) {
       event.preventDefault()
       this.setState({ open: false })
     }
   }
 
-  render() {
+  render () {
     const { sections } = this.props
     const { open } = this.state
 
     return (
       <div className={['page-sections', open ? 'active' : undefined].join(' ')}>
         <button
-          className="page-sections-button"
+          className='page-sections-button'
           onClick={() => this.setState({ open: !open })}>
           Table of contents
         </button>
         {open && (
-          <nav className="page-sections-nav">
+          <nav className='page-sections-nav'>
             {sections.map((section, index) => (
               <a
                 key={index}
@@ -42,7 +42,7 @@ class Sections extends Component {
                   {section.number}.
                 </span>
                 <span
-                  className="section-label"
+                  className='section-label'
                   dangerouslySetInnerHTML={{ __html: section.line }}
                 />
               </a>