From 43ae45d7ecd092cf31160d6f0fa3332d0cae22c5 Mon Sep 17 00:00:00 2001
From: "Shaun A. Noordin" <shaun.a.noordin@gmail.com>
Date: Wed, 23 Mar 2016 15:31:26 +0000
Subject: [PATCH] Fixes #122 and #119 Public CSV references are now renamed to
 "Data Files". Download instructions added for users less familiar with CSVs
 Download link now features a <a> DataURI IN ADDITION TO the SaveAs() feature,
 so users can either click to instantly download or Right-Click to "Save As".

---
 src/containers/MapExplorer-SelectorPanel.jsx |  4 +--
 src/presentational/DialogScreen-Download.jsx | 38 +++++++++++++++-----
 src/styles/components/dialog-screen.styl     |  5 +++
 3 files changed, 37 insertions(+), 10 deletions(-)

diff --git a/src/containers/MapExplorer-SelectorPanel.jsx b/src/containers/MapExplorer-SelectorPanel.jsx
index 82a0e48..a3d766c 100644
--- a/src/containers/MapExplorer-SelectorPanel.jsx
+++ b/src/containers/MapExplorer-SelectorPanel.jsx
@@ -285,7 +285,7 @@ export default class SelectorPanel extends React.Component {
     this.setState({
       downloadDialog: {
         status: DialogScreen.DIALOG_ACTOVE,
-        message: 'Preparing CSV file...',
+        message: 'Preparing data file...',
         data: null
     }});
     
@@ -323,7 +323,7 @@ export default class SelectorPanel extends React.Component {
         this.setState({
           downloadDialog: {
             status: DialogScreen.DIALOG_ACTIVE,
-            message: 'CSV ready!',
+            message: 'Data file ready!',
             data: data
         }});
       })
diff --git a/src/presentational/DialogScreen-Download.jsx b/src/presentational/DialogScreen-Download.jsx
index 8227e3f..7f41d9a 100644
--- a/src/presentational/DialogScreen-Download.jsx
+++ b/src/presentational/DialogScreen-Download.jsx
@@ -6,6 +6,8 @@ export default class DialogScreen_DownloadCSV extends DialogScreen {
   constructor(props) {
     super(props);
     this.downloadCsv = this.downloadCsv.bind(this);
+    this.blobbifyCsvData = this.blobbifyCsvData.bind(this);
+    this.generateFilename = this.generateFilename.bind(this);
   }
 
   render() {
@@ -19,7 +21,11 @@ export default class DialogScreen_DownloadCSV extends DialogScreen {
           : null}
           
           {(this.props.data)
-          ? <div><a className="btn" onClick={this.downloadCsv}>Download</a></div>
+          ? <div><a className="btn" href={window.URL.createObjectURL(this.blobbifyCsvData())} download={this.generateFilename()} onClick={this.downloadCsv}>Download</a></div>
+          : null}
+          
+          {(this.props.data)
+          ? <div className="note">(Depending on your computer setup, you may need to right-click on the link above and choose "Save As", then open the downloaded file in Excel.)</div>
           : null}
           
         </div>
@@ -28,18 +34,34 @@ export default class DialogScreen_DownloadCSV extends DialogScreen {
     );
   }
 
+  //NOTE: The onClick=downloadCsv() feature is required because, by default,
+  //React 'eats' the click event of <a download>s which would otherwise trigger
+  //a native browser download event.
   downloadCsv(e) {
     if (this.props.data) {
-      let dataBlob = new Blob([this.props.data], {type: 'text/csv'});
-      let timeString = new Date();
-      timeString =
-        timeString.getDate() +
-        ['jan', 'feb', 'mar', 'apr', 'may', 'jun', 'jul', 'aug', 'sep', 'oct', 'nov', 'dec'][timeString.getMonth()] +
-        timeString.getFullYear();
-      saveAs(dataBlob, 'wildcam-'+timeString+'.csv');
+      let dataBlob = this.blobbifyCsvData();
+      let filename = this.generateFilename();
+      saveAs(dataBlob, filename);
       this.closeMe();
     } else {
       console.error('Download CSV Error: no CSV');
     }
   }
+  
+  blobbifyCsvData() {
+    if (this.props.data) {
+      let dataBlob = new Blob([this.props.data], {type: 'text/csv'});
+      return dataBlob;
+    }
+    return null;
+  }
+  
+  generateFilename(extension = '.csv') {
+    let timeString = new Date();
+    timeString =
+      timeString.getDate() +
+      ['jan', 'feb', 'mar', 'apr', 'may', 'jun', 'jul', 'aug', 'sep', 'oct', 'nov', 'dec'][timeString.getMonth()] +
+      timeString.getFullYear();
+    return 'wildcam-' + timeString + extension;
+  }
 }
diff --git a/src/styles/components/dialog-screen.styl b/src/styles/components/dialog-screen.styl
index 87bff6d..2e52b24 100644
--- a/src/styles/components/dialog-screen.styl
+++ b/src/styles/components/dialog-screen.styl
@@ -25,3 +25,8 @@
 
     > div
       text-align: center
+    
+    .note
+      color: #999
+      font-size: 0.8em
+      max-width: 20em