diff --git a/components/Carbon.js b/components/Carbon.js index 14379c6..d452eea 100644 --- a/components/Carbon.js +++ b/components/Carbon.js @@ -1,6 +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' import ms from 'ms' @@ -29,7 +28,6 @@ class Carbon extends PureComponent { super(props) this.state = { - loading: true, language: props.config.language } @@ -40,10 +38,6 @@ class Carbon extends PureComponent { } componentDidMount() { - this.setState({ - loading: false - }) - this.setState(handleLanguageChange(this.props.children, this.props)) const ro = new ResizeObserver(entries => { @@ -93,160 +87,145 @@ class Carbon extends PureComponent { (this.props.config.backgroundImage && this.props.config.backgroundImageSelection) || this.props.config.backgroundImage - // set content to spinner if loading, else editor - let content = ( -
- + const content = ( +
+ {config.windowControls ? ( + + ) : null} + + {config.watermark && } +
+
+
+
+
) - if (this.state.loading === false) { - content = ( -
- {config.windowControls ? ( - - ) : null} - - {config.watermark && } -
-
-
-
-
- -
- ) - } return (
diff --git a/components/Editor.js b/components/Editor.js index 74fd83d..630627f 100644 --- a/components/Editor.js +++ b/components/Editor.js @@ -4,6 +4,7 @@ import HTML5Backend from 'react-dnd-html5-backend' import { DragDropContext } from 'react-dnd' import domtoimage from 'dom-to-image' import ReadFileDropContainer, { DATA_URL, TEXT } from 'dropperx' +import Spinner from 'react-spinner' // Ours import Button from './Button' @@ -43,6 +44,7 @@ class Editor extends React.Component { super(props) this.state = { ...DEFAULT_SETTINGS, + loading: true, uploading: false, code: props.content } @@ -65,7 +67,8 @@ class Editor extends React.Component { // Load from localStorage and then URL params this.setState({ ...getState(localStorage), - ...this.props.initialState + ...this.props.initialState, + loading: false }) } @@ -115,11 +118,11 @@ class Editor extends React.Component { if (type === 'blob') { if (format === 'svg') { return domtoimage - .toSvg(node, config) - .then(dataUrl => dataUrl.split(' ').join(' ')) - .then(uri => uri.slice(uri.indexOf(',') + 1)) - .then(data => new Blob([data], { type: 'image/svg+xml' })) - .then(data => window.URL.createObjectURL(data)) + .toSvg(node, config) + .then(dataUrl => dataUrl.split(' ').join(' ')) + .then(uri => uri.slice(uri.indexOf(',') + 1)) + .then(data => new Blob([data], { type: 'image/svg+xml' })) + .then(data => window.URL.createObjectURL(data)) } return domtoimage.toBlob(node, config).then(blob => window.URL.createObjectURL(blob)) @@ -191,6 +194,9 @@ class Editor extends React.Component { } render() { + if (this.state.loading) { + return + } return (
diff --git a/components/Slider.js b/components/Slider.js index d9f03b6..2d5e029 100644 --- a/components/Slider.js +++ b/components/Slider.js @@ -27,9 +27,8 @@ export default class extends React.Component {
diff --git a/handlers/twitter.js b/handlers/twitter.js index 4292931..2b1cc1b 100644 --- a/handlers/twitter.js +++ b/handlers/twitter.js @@ -14,7 +14,7 @@ try { }) } catch (e) { // eslint-disable-next-line - console.warn(e.message); + console.warn(e.message) } const extractMediaId = morph.get('data.media_id_string') const extractImageUrl = morph.get('data.entities.media.0.display_url') @@ -22,12 +22,12 @@ const extractErrorCode = morph.get('0.code') const uploadImage = data => client.post('media/upload', { media_data: data }) const uploadMetadata = (altText, twitterRes = {}) => { - if (!altText) - return twitterRes + if (!altText) return twitterRes - const formattedAltText = altText.length > MAX_ALT_TEXT_LENGTH - ? `${altText.slice(0, MAX_ALT_TEXT_LENGTH - 3)}...` - : altText + const formattedAltText = + altText.length > MAX_ALT_TEXT_LENGTH + ? `${altText.slice(0, MAX_ALT_TEXT_LENGTH - 3)}...` + : altText return client .post('media/metadata/create', { @@ -36,10 +36,11 @@ const uploadMetadata = (altText, twitterRes = {}) => { }) .then(() => twitterRes) } -const uploadTweet = (twitterRes = {}) => client.post('statuses/update', { +const uploadTweet = (twitterRes = {}) => + client.post('statuses/update', { status: `Carbon Copy #${extractMediaId(twitterRes).slice(0, 8)}`, media_ids: extractMediaId(twitterRes) -}) + }) const respondSuccess = (res, url) => res.json({ url }) const respondFail = (res, err) => { diff --git a/lib/api.js b/lib/api.js index a430ab1..3123c05 100644 --- a/lib/api.js +++ b/lib/api.js @@ -18,7 +18,7 @@ async function tweet(content, encodedImage) { const processedData = encodedImage.split(',')[1] return axios - .post(`${DOMAIN}/twitter`, { + .post(`${DOMAIN}/twitter`, { imageData: processedData, altText: content }) diff --git a/lib/util.js b/lib/util.js index 2738693..1986bae 100644 --- a/lib/util.js +++ b/lib/util.js @@ -23,7 +23,11 @@ const escapeHtml = s => { export const parseRGBA = obj => `rgba(${obj.r},${obj.g},${obj.b},${obj.a})` -export const getState = morph.compose(parse, escapeHtml, morph.get(KEY)) +export const getState = morph.compose( + parse, + escapeHtml, + morph.get(KEY) +) export const saveState = (window, v) => assign(window, JSON.stringify(v)) export const capitalizeFirstLetter = s => s.charAt(0).toUpperCase() + s.slice(1) diff --git a/yarn.lock b/yarn.lock index e960cee..0095a43 100644 --- a/yarn.lock +++ b/yarn.lock @@ -874,9 +874,9 @@ align-text@^0.1.1, align-text@^0.1.3: longest "^1.0.1" repeat-string "^1.5.2" -all-contributors-cli@^4.7.0: - version "4.11.2" - resolved "https://registry.yarnpkg.com/all-contributors-cli/-/all-contributors-cli-4.11.2.tgz#b8bf1e1d08181be76ca4ebeb7869d3fdfbcf5557" +all-contributors-cli@^5.0.0: + version "5.0.0" + resolved "https://registry.yarnpkg.com/all-contributors-cli/-/all-contributors-cli-5.0.0.tgz#d27703572996c076b758ae9a6c86391f9490e9b3" dependencies: async "^2.0.0-rc.1" chalk "^2.3.0"