Merge pull request #40 from xsnippet/download

Download button actually downloads now

Author: lotrien

src/components/RecentSnippetItem.jsx

@@ -1,8 +1,11 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 
+import { downloadSnippet } from '../helpers';
+
 const RecentSnippetItem = ({ snippet }) => {
   const snippetTitle = snippet.get('title') || `#${snippet.get('id')}, Untitled`;
+  const download = () => downloadSnippet(snippet);
 
   return (
     <li className="recent-snippet-item">
@@ -15,7 +18,7 @@ const RecentSnippetItem = ({ snippet }) => {
       </div>
       <div>
         <button className="recent-snippet-button light">Raw</button>
-        <button className="recent-snippet-button light">Download</button>
+        <button className="recent-snippet-button light" onClick={download}>Download</button>
         <Link to={`${snippet.get('id')}`} className="recent-snippet-button">Show</Link>
       </div>
     </li>

src/components/Snippet.jsx

@@ -9,6 +9,7 @@ import Title from './common/Title';
 import Input from './common/Input';
 import Spinner from './common/Spinner';
 import * as actions from '../actions';
+import { downloadSnippet } from '../helpers';
 
 import '../styles/Snippet.styl';
 
@@ -17,6 +18,7 @@ class Snippet extends React.Component {
     super(props);
     this.state = { isShowEmbed: false };
     this.toggleEmbed = this.toggleEmbed.bind(this);
+    this.download = this.download.bind(this);
   }
 
   componentDidMount() {
@@ -26,6 +28,10 @@ class Snippet extends React.Component {
     dispatch(actions.fetchSnippet(Number(id)));
   }
 
+  download() {
+    downloadSnippet(this.props.snippet);
+  }
+
   toggleEmbed() {
     this.setState(prevState => ({ isShowEmbed: !prevState.isShowEmbed }));
   }
@@ -73,7 +79,7 @@ class Snippet extends React.Component {
             />
             <div className="snippet-code-bottom-bar">
               <button className="snippet-button light">Raw</button>
-              <button className="snippet-button light">Download</button>
+              <button className="snippet-button light" onClick={this.download}>Download</button>
             </div>
           </div>
         </div>,

src/components/Syntaxes.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { Scrollbars } from 'react-custom-scrollbars';
 import { connect } from 'react-redux';
 
-import regExpEscape from './../helpers';
+import { regExpEscape } from '../helpers';
 import * as actions from '../actions';
 
 class Syntaxes extends React.PureComponent {

src/helpers/index.js

@@ -1,3 +1,35 @@
+import codemirror from 'codemirror';
+
 const regExpEscape = string => string.replace(/[-[\]{}()*+?.,\\^$|]/g, '\\$&');
 
-export default regExpEscape;
+function download(text, name, mime) {
+  // It seems it's the only way to initiate file downloading from JavaScript
+  // as of Jan 7, 2018. If you read this and know a better way, please submit
+  // a pull request! ;)
+
+  const element = document.createElement('a');
+  element.setAttribute('href', `data:${mime};charset=utf-8,${encodeURIComponent(text)}`);
+  element.setAttribute('download', name);
+  element.style.display = 'none';
+  document.body.appendChild(element);
+
+  element.click();
+
+  document.body.removeChild(element);
+}
+
+function downloadSnippet(snippet) {
+  // Despite using CodeMirror's modes as syntaxes on XSnippet API, we might
+  // imagine other setup when more syntaxes can be used on server. Hence, we
+  // must be prepared and fallback on "Plain Text" mode if we can't figure out
+  // what's extension and/or MIME type.
+  const modeInfo = codemirror.findModeByName(snippet.get('syntax'))
+              || codemirror.findModeByName('Plain Text');
+
+  const content = snippet.get('content');
+  const name = `${snippet.get('id')}.${modeInfo.ext[0]}`;
+
+  download(content, name, modeInfo.mime);
+}
+
+export { regExpEscape, downloadSnippet };