From 6c9a09e52280875d56de42f83fee204cdc821d6a Mon Sep 17 00:00:00 2001 From: Michael Fix Date: Sat, 18 Aug 2018 19:27:19 -0700 Subject: [PATCH] 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 | 4 ++-- components/Collapse.js | 17 ++++++----------- components/Dropdown.js | 4 ++-- components/Editor.js | 6 +++--- components/ExportSizeSelect.js | 4 +++- components/ImagePicker.js | 2 +- components/Language.js | 21 --------------------- components/Meta.js | 2 +- components/RandomImage.js | 11 ++++++++--- components/Settings.js | 4 ++-- components/Slider.js | 4 +++- components/ThemeSelect.js | 11 ++++------- components/Toggle.js | 13 ++++--------- lib/util.js | 2 ++ package.json | 4 ++-- pages/about.js | 8 +++++--- pages/index.js | 4 ++-- 17 files changed, 50 insertions(+), 71 deletions(-) delete mode 100644 components/Language.js diff --git a/components/Carbon.js b/components/Carbon.js index cd31b3f..b81c1f5 100644 --- a/components/Carbon.js +++ b/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) diff --git a/components/Collapse.js b/components/Collapse.js index d925d7b..d6b38c3 100644 --- a/components/Collapse.js +++ b/components/Collapse.js @@ -1,20 +1,15 @@ import React from 'react' import Toggle from './Toggle' -class Collapse extends React.Component { - constructor(props) { - super(props) - this.state = { - open: false - } - } +import { toggle } from '../lib/util' - toggle = () => { - this.setState(state => ({ - open: !state.open - })) +class Collapse extends React.PureComponent { + state = { + open: false } + toggle = () => this.setState(toggle('open')) + render() { if (this.state.open) { return this.props.children diff --git a/components/Dropdown.js b/components/Dropdown.js index ff95533..ef31c68 100644 --- a/components/Dropdown.js +++ b/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 diff --git a/components/Editor.js b/components/Editor.js index 0c05359..5942454 100644 --- a/components/Editor.js +++ b/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 + navigator.userAgent.indexOf('Chrome') === -1 && + isPNG) ) { const encodedState = serializeState(this.state) return this.props.api.image(encodedState) diff --git a/components/ExportSizeSelect.js b/components/ExportSizeSelect.js index 4318ee9..40a7787 100644 --- a/components/ExportSizeSelect.js +++ b/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 diff --git a/components/ImagePicker.js b/components/ImagePicker.js index 9f36ed8..d740554 100644 --- a/components/ImagePicker.js +++ b/components/ImagePicker.js @@ -120,7 +120,7 @@ export default class extends React.Component { Click the button below to upload a background image: diff --git a/components/Language.js b/components/Language.js deleted file mode 100644 index 090abcc..0000000 --- a/components/Language.js +++ /dev/null @@ -1,21 +0,0 @@ -import React from 'react' - -export default ({ language }) => ( -
- {language.name} - -
-) diff --git a/components/Meta.js b/components/Meta.js index f6e5ddb..c6b57c3 100644 --- a/components/Meta.js +++ b/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 (
diff --git a/components/RandomImage.js b/components/RandomImage.js index af518de..ffcd111 100644 --- a/components/RandomImage.js +++ b/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() diff --git a/components/Settings.js b/components/Settings.js index ec18dee..b8e94f7 100644 --- a/components/Settings.js +++ b/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() { diff --git a/components/Slider.js b/components/Slider.js index 1ce0231..2f4574c 100644 --- a/components/Slider.js +++ b/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 diff --git a/components/ThemeSelect.js b/components/ThemeSelect.js index f25b05c..2019085 100644 --- a/components/ThemeSelect.js +++ b/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 { - constructor(props) { - super(props) - this.select = this.select.bind(this) - } - - select(theme) { +class ThemeSelect extends React.Component { + select = theme => { if (this.props.selected !== theme) { this.props.onChange(theme) } @@ -76,3 +71,5 @@ export default class extends React.Component { ) } } + +export default ThemeSelect diff --git a/components/Toggle.js b/components/Toggle.js index 0fac015..c6b7df0 100644 --- a/components/Toggle.js +++ b/components/Toggle.js @@ -1,15 +1,8 @@ import React from 'react' import Checkmark from './svg/Checkmark' -export default class extends React.Component { - constructor(props) { - super(props) - this.toggle = this.toggle.bind(this) - } - - toggle() { - this.props.onChange(!this.props.enabled) - } +class Toggle extends React.PureComponent { + toggle = () => this.props.onChange(!this.props.enabled) render() { return ( @@ -32,3 +25,5 @@ export default class extends React.Component { ) } } + +export default Toggle diff --git a/lib/util.js b/lib/util.js index 1f80ffe..a7082f7 100644 --- a/lib/util.js +++ b/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 => { diff --git a/package.json b/package.json index a9fa743..8344959 100644 --- a/package.json +++ b/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" ] }, diff --git a/pages/about.js b/pages/about.js index 8de9f84..39f2eb5 100644 --- a/pages/about.js +++ b/pages/about.js @@ -47,9 +47,11 @@ export default () => (

If you use the 'Tweet' button, Carbon will automatically make your image - accessible. However, if you want to manually tweet your carbon image, please check - out this page - {' '}to found out how to make your Twitter images accessible. + accessible. However, if you want to manually tweet your carbon image, please check out{' '} + + this page + {' '} + to found out how to make your Twitter images accessible.

diff --git a/pages/index.js b/pages/index.js index 82f04c1..bb63594 100644 --- a/pages/index.js +++ b/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)