Clean up (#481) (patch)

* clean up things

* introduce toggle fn

* remove constructor from Collapse (ignore)

* prettier (ignore)

* make Collapse a PureComponent (ignore)

* give ExportSizeSelect a display name (ignore)

* give ThemeSelect a display name (ignore)

* Toggle: displayName, PureComponent, remove constructor (ignore)

* Meta and Slider display names (ignore)

* remove ThemeSelect constructor (ignore)

* fix lint-staged, prettier

components/Carbon.js

@@ -1,4 +1,4 @@
-import React, { PureComponent } from 'react'
+import React from 'react'
 import * as hljs from 'highlight.js'
 import ResizeObserver from 'resize-observer-polyfill'
 import debounce from 'lodash.debounce'
@@ -23,7 +23,7 @@ const handleLanguageChange = (newCode, props) => {
   return { language: props.config.language }
 }
 
-class Carbon extends PureComponent {
+class Carbon extends React.PureComponent {
   constructor(props) {
     super(props)
 

components/Collapse.js

@@ -1,19 +1,14 @@
 import React from 'react'
 import Toggle from './Toggle'
 
-class Collapse extends React.Component {
+import { toggle } from '../lib/util'
-  constructor(props) {
+
-    super(props)
+class Collapse extends React.PureComponent {
-    this.state = {
+  state = {
     open: false
   }
-  }
 
-  toggle = () => {
+  toggle = () => this.setState(toggle('open'))
-    this.setState(state => ({
-      open: !state.open
-    }))
-  }
 
   render() {
     if (this.state.open) {

components/Dropdown.js

@@ -1,11 +1,11 @@
-import React, { PureComponent } from 'react'
+import React from 'react'
 import Downshift from 'downshift'
 import matchSorter from 'match-sorter'
 import ArrowDown from './svg/Arrowdown'
 import CheckMark from './svg/Checkmark'
 import { COLORS } from '../lib/constants'
 
-class Dropdown extends PureComponent {
+class Dropdown extends React.PureComponent {
   state = {
     inputValue: this.props.selected.name,
     itemsToShow: this.props.list

components/Editor.js

@@ -121,10 +121,10 @@ class Editor extends React.Component {
     // if safari, get image from api
     const isPNG = format !== 'svg'
     if (
-      this.props.api.image,
+      (this.props.api.image,
       navigator.userAgent.indexOf('Safari') !== -1 &&
         navigator.userAgent.indexOf('Chrome') === -1 &&
-      isPNG
+        isPNG)
     ) {
       const encodedState = serializeState(this.state)
       return this.props.api.image(encodedState)

components/ExportSizeSelect.js

@@ -2,7 +2,7 @@ import React from 'react'
 import Checkmark from './svg/Checkmark'
 import { EXPORT_SIZES, COLORS } from '../lib/constants'
 
-export default class extends React.Component {
+class ExportSizeSelect extends React.Component {
   constructor(props) {
     super(props)
     this.state = { isVisible: false }
@@ -91,3 +91,5 @@ export default class extends React.Component {
     )
   }
 }
+
+export default ExportSizeSelect

components/ImagePicker.js

@@ -120,7 +120,7 @@ export default class extends React.Component {
           <span>Click the button below to upload a background image:</span>
           <input
             type="file"
-            accept="image/x-png,image/jpeg,image/jpg"
+            accept="image/png,image/x-png,image/jpeg,image/jpg"
             onChange={this.selectImage}
           />
         </div>

components/Language.js

@@ -1,21 +0,0 @@
-import React from 'react'
-
-export default ({ language }) => (
-  <div className="language">
-    {language.name}
-    <style jsx>
-      {`
-        .language {
-          position: absolute;
-          top: 7px;
-          right: 7px;
-          background: rgba(0, 0, 0, 0.3);
-          font-size: 12px;
-          padding: 5px;
-          border-radius: 3px;
-          z-index: 1;
-        }
-      `}
-    </style>
-  </div>
-)

components/Meta.js

@@ -10,7 +10,7 @@ const CDN_STYLESHEETS = THEMES.filter(
   t => t.hasStylesheet !== false && LOCAL_STYLESHEETS.indexOf(t.id) < 0
 )
 
-export default () => {
+export default function Meta() {
   const onBrowser = typeof window !== 'undefined'
   return (
     <div className="meta">

components/RandomImage.js

@@ -28,7 +28,6 @@ class RandomImage extends React.Component {
   }
 
   cache = []
-  imageUrls = {}
 
   // fetch images in browser (we require window.FileReader)
   componentDidMount() {
@@ -43,6 +42,10 @@ class RandomImage extends React.Component {
   }
 
   selectImage() {
+    if (this.state.loading) {
+      return
+    }
+
     const image = this.cache[this.state.cacheIndex]
 
     this.setState({ loading: true })
@@ -61,9 +64,11 @@ class RandomImage extends React.Component {
   }
 
   nextImage() {
-    if (this.state.loading) return
+    if (this.state.loading) {
+      return
+    }
 
-    this.setState({ cacheIndex: this.state.cacheIndex + 1 })
+    this.setState(state => ({ cacheIndex: state.cacheIndex + 1 }))
 
     if (this.state.cacheIndex > this.cache.length - 2) {
       this.updateCache()

components/Settings.js

@@ -10,7 +10,7 @@ import WindowPointer from './WindowPointer'
 import Collapse from './Collapse'
 
 import { COLORS } from '../lib/constants'
-import { formatCode } from '../lib/util'
+import { toggle, formatCode } from '../lib/util'
 
 class Settings extends React.Component {
   constructor(props) {
@@ -23,7 +23,7 @@ class Settings extends React.Component {
   }
 
   toggle() {
-    this.setState({ isVisible: !this.state.isVisible })
+    this.setState(toggle('isVisible'))
   }
 
   handleClickOutside() {

components/Slider.js

@@ -1,6 +1,6 @@
 import React from 'react'
 
-export default class extends React.Component {
+class Slider extends React.Component {
   constructor(props) {
     super(props)
     this.handleChange = this.handleChange.bind(this)
@@ -77,3 +77,5 @@ export default class extends React.Component {
     )
   }
 }
+
+export default Slider

components/ThemeSelect.js

@@ -5,13 +5,8 @@ import { COLORS } from '../lib/constants'
 const WINDOW_THEMES_MAP = { none: None, sharp: Sharp, bw: BW }
 export const WINDOW_THEMES = Object.keys(WINDOW_THEMES_MAP)
 
-export default class extends React.Component {
+class ThemeSelect extends React.Component {
-  constructor(props) {
+  select = theme => {
-    super(props)
-    this.select = this.select.bind(this)
-  }
-
-  select(theme) {
     if (this.props.selected !== theme) {
       this.props.onChange(theme)
     }
@@ -76,3 +71,5 @@ export default class extends React.Component {
     )
   }
 }
+
+export default ThemeSelect

components/Toggle.js

@@ -1,15 +1,8 @@
 import React from 'react'
 import Checkmark from './svg/Checkmark'
 
-export default class extends React.Component {
+class Toggle extends React.PureComponent {
-  constructor(props) {
+  toggle = () => this.props.onChange(!this.props.enabled)
-    super(props)
-    this.toggle = this.toggle.bind(this)
-  }
-
-  toggle() {
-    this.props.onChange(!this.props.enabled)
-  }
 
   render() {
     return (
@@ -32,3 +25,5 @@ export default class extends React.Component {
     )
   }
 }
+
+export default Toggle

lib/util.js

@@ -12,6 +12,8 @@ const parse = v => {
   }
 }
 
+export const toggle = stateField => state => ({ [stateField]: !state[stateField] })
+
 // https://gist.github.com/alexgibson/1704515
 // TODO use https://github.com/sindresorhus/escape-goat/
 export const escapeHtml = s => {

package.json

@@ -10,7 +10,7 @@
     "export": "next export",
     "test": "npm run cy:run --",
     "deploy": "now",
-    "prettier": "prettier --config .prettierrc --write *.js {components,api,lib,pages}/**/*.js",
+    "prettier": "prettier --config .prettierrc --write {.,components,api,lib,pages}/*.js {components,api,lib,pages}/**/*.js",
     "lint": "eslint components/*.js lib/*.js pages/*.js api/handlers/*.js api/*.js",
     "precommit": "npm run contrib:build && git add README.md && lint-staged",
     "contrib:add": "all-contributors add",
@@ -65,7 +65,7 @@
   },
   "lint-staged": {
     "*.js": [
-      "prettier",
+      "prettier --write",
       "git add"
     ]
   },

pages/about.js

@@ -47,9 +47,11 @@ export default () => (
         </p>
         <p className="mt2 mb3">
           If you use the &apos;Tweet&apos; button, Carbon will automatically make your image
-          accessible. However, if you want to manually tweet your carbon image, please check
+          accessible. However, if you want to manually tweet your carbon image, please check out{' '}
-          out <a className="link" href="https://help.twitter.com/en/using-twitter/picture-descriptions">this page</a>
+          <a className="link" href="https://help.twitter.com/en/using-twitter/picture-descriptions">
-          {' '}to found out how to make your Twitter images accessible.
+            this page
+          </a>{' '}
+          to found out how to make your Twitter images accessible.
         </p>
       </div>
       <div>

pages/index.js

@@ -1,6 +1,6 @@
 // Theirs
 import React from 'react'
-import { withRouter } from "next/router";
+import { withRouter } from 'next/router'
 
 // Ours
 import Editor from '../components/Editor'
@@ -28,4 +28,4 @@ function onEditorUpdate(state) {
   saveState(localStorage, s)
 }
 
-export default withRouter(Index);
+export default withRouter(Index)