add support for localstorage with try catch statements like it's 2008…

…. Thanks safari private mode!
Burtchen · May 29, 2017 · 0488e68 · 0488e68
1 parent 4cd03c8
commit 0488e68
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 18 deletions.
diff --git a/js/ClosestColorContainer.js b/js/ClosestColorContainer.js
@@ -19,8 +19,17 @@ export class ClosestColorContainer extends React.Component {
         this.handleGroupChange = this.handleGroupChange.bind(this);
         this.storeCssFile = this.storeCssFile.bind(this);
         this.processCss = this.processCss.bind(this);
+
+        let cachedColorPalette = [];
+
+        try {
+            cachedColorPalette = JSON.parse(localStorage.getItem('colorPalette')) || [];
+        } catch (error) {
+            cachedColorPalette = [];
+        }
+
         this.state = {
-            colorPalette: [],
+            colorPalette: cachedColorPalette || [],
             colorGrouping: false,
             colorDisplayValue: "original",
             referenceColor: null,
@@ -60,8 +69,12 @@ export class ClosestColorContainer extends React.Component {
             // cf. http://stackoverflow.com/a/26306963
             return [detectedColor.red, detectedColor.green, detectedColor.blue].join(" ");
         });
-
         this.setState({colorPalette: detectedColors});
+        try {
+            localStorage.setItem('colorPalette', JSON.stringify(detectedColors));
+        } catch (error) {
+            return;
+        }
     }
 
     setPaletteAsReferenceColor(color) {
@@ -94,7 +107,15 @@ export class ClosestColorContainer extends React.Component {
             </section>);
         }
 
-        const fileUploaderCanClear = this.state.cssFileContent && this.state.cssFileContent.length;
+        let hasCachedPalette;
+        try {
+            hasCachedPalette = localStorage.getItem('colorPalette')
+                && JSON.parse(localStorage.getItem('colorPalette')).length;
+        } catch (error) {
+            hasCachedPalette = false;
+        }
+        const fileUploaderCanClear =
+            hasCachedPalette || this.state.cssFileContent && this.state.cssFileContent.length;
 
         return (
             <div>

diff --git a/js/FileUploader.js b/js/FileUploader.js
@@ -1,29 +1,22 @@
 var React = require('react');
-var ReactDOM = require('react-dom');
 
 export class FileUploader extends React.Component {
 
     constructor(props) {
         super(props);
         this.handleFileUpload = this.handleFileUpload.bind(this);
         this.reset = this.reset.bind(this);
-        this.state = {
-            show: false
-        }
-    }
-
-    componentDidMount() {
-        if (window.File && window.FileReader && window.FileList && window.Blob) {
-            this.setState({
-                'show': true
-            });
-        }
     }
 
     reset() {
         // http://stackoverflow.com/a/829740
         this.refs.form.reset();
         this.props.storeCssFile('', null);
+        try {
+            localStorage.removeItem('colorPalette');
+        } catch (error) {
+            return;
+        }
     }
 
     handleFileUpload(e) {
@@ -48,13 +41,13 @@ export class FileUploader extends React.Component {
     }
 
     render() {
-        if (!this.state.show) {
+        if (!(window.File && window.FileReader && window.FileList && window.Blob)) {
             return null;
         }
 
         const byLine = this.props.canClear ?
-            <span ref="byline" className="closest-color-file-uploader-byline closest-color-file-uploader-reset" onClick={this.reset}>Clear imported styles</span> :
-            <span ref="byline" className="closest-color-file-uploader-byline">Your data is not uploaded to a server or stored in any form.</span>;
+            <span ref="byline" className="closest-color-file-uploader-byline closest-color-file-uploader-reset" onClick={this.reset}>Clear imported/cached styles</span> :
+            <span ref="byline" className="closest-color-file-uploader-byline">Your data is not transferred or uploaded anywhere.</span>;
 
         return (
             <div className="sub-section">