import React from 'react' import HTML5Backend from 'react-dnd-html5-backend' import { DragDropContext } from 'react-dnd' import Axios from 'axios' import domtoimage from 'dom-to-image' import Meta from '../components/Meta' import Toolbar from '../components/Toolbar' import CodeImage from '../components/CodeImage' import api from '../lib/api' import { THEMES, LANGUAGES, DEFAULT_CODE } from '../lib/constants' class Index extends React.Component { /* pathname, asPath, err, req, res */ static async getInitialProps ({ asPath }) { try { if (asPath !== '/') { const content = await api.getGist(asPath) return { content } } } catch (e) { console.log(e) } return {} } constructor() { super() this.state = { bgColor: '#111111', theme: THEMES[0].id, language: 'javascript' // TODO LANGUAGES[0] } } save () { // domtoimage.toPng(document.getElementById('container')) domtoimage.toPng(document.getElementById('container')) .then((dataUrl) => { const link = document.createElement('a') link.download = 'snippet.png' link.href = dataUrl link.click() }) } upload () { domtoimage.toBlob(document.getElementById('container')) .then(api.uploadImage) .then(res => res.data.link) .then(console.log) } render () { return (