From 5691236934400809ace5aed13d8e2f7cad7c91df Mon Sep 17 00:00:00 2001 From: Michael Fix Date: Tue, 3 Apr 2018 21:10:22 -0500 Subject: [PATCH] Refactor index.js (#310) * Move Editor to components * Separate index and editor a little * Revert dynamic import of hljs b/c it's critical * Move query param update to index.js * Clean up editor further --- components/Carbon.js | 12 ++--- pages/editor.js => components/Editor.js | 63 +++++++------------------ pages/index.js | 55 ++++++++++++++++++++- 3 files changed, 74 insertions(+), 56 deletions(-) rename pages/editor.js => components/Editor.js (82%) diff --git a/components/Carbon.js b/components/Carbon.js index 2c5f6e7..880250d 100644 --- a/components/Carbon.js +++ b/components/Carbon.js @@ -1,4 +1,5 @@ import React, { PureComponent } from 'react' +import * as hljs from 'highlight.js' import Spinner from 'react-spinner' import ResizeObserver from 'resize-observer-polyfill' import debounce from 'lodash.debounce' @@ -50,20 +51,13 @@ class Carbon extends PureComponent { this.props.updateTitleBar(newTitle) } - async getHighlightLang(code = '') { - if (!this.hljs) { - this.hljs = await import('highlight.js') - } - return this.hljs.highlightAuto(code).language - } - handleLanguageChange = debounce( - async (newCode, config) => { + (newCode, config) => { const props = (config && config.customProps) || this.props if (props.config.language === 'auto') { // try to set the language - const detectedLanguage = await this.getHighlightLang(newCode) + const detectedLanguage = hljs.highlightAuto(newCode).language const languageMode = LANGUAGE_MODE_HASH[detectedLanguage] || LANGUAGE_NAME_HASH[detectedLanguage] diff --git a/pages/editor.js b/components/Editor.js similarity index 82% rename from pages/editor.js rename to components/Editor.js index f4326b8..982affc 100644 --- a/pages/editor.js +++ b/components/Editor.js @@ -6,14 +6,13 @@ import domtoimage from 'dom-to-image' import ReadFileDropContainer, { DATA_URL, TEXT } from 'dropperx' // Ours -import Page from '../components/Page' -import Button from '../components/Button' -import Dropdown from '../components/Dropdown' -import BackgroundSelect from '../components/BackgroundSelect' -import Settings from '../components/Settings' -import Toolbar from '../components/Toolbar' -import Overlay from '../components/Overlay' -import Carbon from '../components/Carbon' +import Button from './Button' +import Dropdown from './Dropdown' +import BackgroundSelect from './BackgroundSelect' +import Settings from './Settings' +import Toolbar from './Toolbar' +import Overlay from './Overlay' +import Carbon from './Carbon' import api from '../lib/api' import { THEMES, @@ -29,8 +28,8 @@ import { DEFAULT_CODE, DEFAULT_SETTINGS } from '../lib/constants' -import { getQueryStringState, updateQueryString, serializeState } from '../lib/routing' -import { getState, saveState } from '../lib/util' +import { serializeState } from '../lib/routing' +import { getState } from '../lib/util' const saveButtonOptions = { button: true, @@ -40,30 +39,13 @@ const saveButtonOptions = { } class Editor extends React.Component { - static async getInitialProps({ asPath, query }) { - const path = removeQueryString(asPath.split('/').pop()) - const queryParams = getQueryStringState(query) - const initialState = Object.keys(queryParams).length ? queryParams : null - try { - // TODO fix this hack - if (path.length >= 19 && path.indexOf('.') === -1) { - const content = await api.getGist(path) - return { content, initialState } - } - } catch (e) { - console.log(e) - } - return { initialState } - } - constructor(props) { super(props) this.state = Object.assign( { ...DEFAULT_SETTINGS, uploading: false, - code: props.content, - _initialState: this.props.initialState + code: props.content }, this.props.initialState ) @@ -84,7 +66,7 @@ class Editor extends React.Component { componentDidMount() { // Load from localStorage instead of query params - if (!this.state._initialState) { + if (!this.props.initialState) { const state = getState(localStorage) if (state) { this.setState(state) @@ -93,12 +75,7 @@ class Editor extends React.Component { } componentDidUpdate() { - updateQueryString(this.state) - const s = { ...this.state } - delete s.code - delete s.backgroundImage - delete s.backgroundImageSelection - saveState(localStorage, s) + this.props.onUpdate(this.state) } getCarbonImage({ format, type } = { format: 'png' }) { @@ -204,7 +181,7 @@ class Editor extends React.Component { render() { return ( - +
- + ) } } -function removeQueryString(str) { - const qI = str.indexOf('?') - return (qI >= 0 ? str.substr(0, qI) : str) - .replace(//g, '>') - .replace(/\//g, '/') -} - function isImage(file) { return file.type.split('/')[0] === 'image' } @@ -303,4 +272,8 @@ function readAs(file) { return TEXT } +Editor.defaultProps = { + onUpdate: () => {} +} + export default DragDropContext(HTML5Backend)(Editor) diff --git a/pages/index.js b/pages/index.js index 2916278..d0ff70c 100644 --- a/pages/index.js +++ b/pages/index.js @@ -1,3 +1,54 @@ -import Editor from './editor' +// Theirs +import React from 'react' -export default Editor +// Ours +import Editor from '../components/Editor' +import Page from '../components/Page' +import api from '../lib/api' +import { getQueryStringState, updateQueryString } from '../lib/routing' +import { saveState } from '../lib/util' + +class Index extends React.Component { + static async getInitialProps({ asPath, query }) { + const path = removeQueryString(asPath.split('/').pop()) + const queryParams = getQueryStringState(query) + const initialState = Object.keys(queryParams).length ? queryParams : null + try { + // TODO fix this hack + if (path.length >= 19 && path.indexOf('.') === -1) { + const content = await api.getGist(path) + return { content, initialState } + } + } catch (e) { + console.log(e) + } + return { initialState } + } + + render() { + return ( + + + + ) + } +} + +function onEditorUpdate(state) { + updateQueryString(state) + const s = { ...state } + delete s.code + delete s.backgroundImage + delete s.backgroundImageSelection + saveState(localStorage, s) +} + +function removeQueryString(str) { + const qI = str.indexOf('?') + return (qI >= 0 ? str.substr(0, qI) : str) + .replace(//g, '>') + .replace(/\//g, '/') +} + +export default Index