From 422932d83aaea82b5cd776874a39e2d6505feb53 Mon Sep 17 00:00:00 2001
From: Pietro Passarelli <pietro.passarelli@wsj.com>
Date: Thu, 12 Mar 2020 12:59:52 -0400
Subject: [PATCH 1/2] commentign out local storage for troubleshooting in demo

---
 demo/local-storage.js | 50 +++++++++++++++++++++----------------------
 1 file changed, 25 insertions(+), 25 deletions(-)

diff --git a/demo/local-storage.js b/demo/local-storage.js
index ed843183..c7a9a0a1 100644
--- a/demo/local-storage.js
+++ b/demo/local-storage.js
@@ -1,41 +1,41 @@
 const localSave = (mediaUrl, fileName, data) => {
-  let mediaUrlName = mediaUrl;
-  // if using local media instead of using random blob name
-  // that makes it impossible to retrieve from on page refresh
-  // use file name
-  if (mediaUrlName.includes('blob')) {
-    mediaUrlName = fileName;
-  }
+  // let mediaUrlName = mediaUrl;
+  // // if using local media instead of using random blob name
+  // // that makes it impossible to retrieve from on page refresh
+  // // use file name
+  // if (mediaUrlName.includes('blob')) {
+  //   mediaUrlName = fileName;
+  // }
 
-  localStorage.setItem(`draftJs-${ mediaUrlName }`, JSON.stringify(data));
+  // localStorage.setItem(`draftJs-${ mediaUrlName }`, JSON.stringify(data));
 };
 
 // eslint-disable-next-line class-methods-use-this
 const isPresentInLocalStorage = (mediaUrl, fileName) => {
-  if (mediaUrl !== null) {
-    let mediaUrlName = mediaUrl;
-    if (mediaUrl.includes('blob')) {
-      mediaUrlName = fileName;
-    }
+  // if (mediaUrl !== null) {
+  //   let mediaUrlName = mediaUrl;
+  //   if (mediaUrl.includes('blob')) {
+  //     mediaUrlName = fileName;
+  //   }
 
-    const data = localStorage.getItem(`draftJs-${ mediaUrlName }`);
-    if (data !== null) {
-      return true;
-    }
+  //   const data = localStorage.getItem(`draftJs-${ mediaUrlName }`);
+  //   if (data !== null) {
+  //     return true;
+  //   }
 
-    return false;
-  }
+  //   return false;
+  // }
 
   return false;
 };
 
 const loadLocalSavedData = (mediaUrl, fileName) => {
-  let mediaUrlName = mediaUrl;
-  if (mediaUrl.includes('blob')) {
-    mediaUrlName = fileName;
-  }
-  const data = JSON.parse(localStorage.getItem(`draftJs-${ mediaUrlName }`));
-  return data;
+  // let mediaUrlName = mediaUrl;
+  // if (mediaUrl.includes('blob')) {
+  //   mediaUrlName = fileName;
+  // }
+  // const data = JSON.parse(localStorage.getItem(`draftJs-${ mediaUrlName }`));
+  // return data;
 };
 
 export { loadLocalSavedData, isPresentInLocalStorage, localSave };

From 92c841641db9aa27f2683e799f3e7e0235e54708 Mon Sep 17 00:00:00 2001
From: Pietro Passarelli <pietro.passarelli@wsj.com>
Date: Thu, 12 Mar 2020 13:06:19 -0400
Subject: [PATCH 2/2] made auto save in demo app to local storage optional

---
 demo/app.js           | 65 ++++++++++++++++++++++++++++++-------------
 demo/local-storage.js | 50 ++++++++++++++++-----------------
 2 files changed, 70 insertions(+), 45 deletions(-)

diff --git a/demo/app.js b/demo/app.js
index e1e31dd4..018e20fa 100644
--- a/demo/app.js
+++ b/demo/app.js
@@ -35,31 +35,31 @@ class App extends React.Component {
       fileName: "",
       autoSaveData: {},
       autoSaveContentType: "draftjs",
-      autoSaveExtension: "json"
+      autoSaveExtension: "json",
+      useLocalStorage: true
     };
 
     this.transcriptEditorRef = React.createRef();
   }
 
   loadDemo = () => {
-    if(isPresentInLocalStorage(DEMO_MEDIA_URL)){
-      const transcriptDataFromLocalStorage = loadLocalSavedData(DEMO_MEDIA_URL)
-      this.setState({
-        transcriptData: transcriptDataFromLocalStorage,
-        mediaUrl: DEMO_MEDIA_URL,
-        title: DEMO_TITLE,
-        sttType: 'draftjs'
-      });
-    }
-    else{
-       this.setState({
-        transcriptData: DEMO_TRANSCRIPT,
-        mediaUrl: DEMO_MEDIA_URL,
-        title: DEMO_TITLE,
-        sttType: "bbckaldi"
-      });
-    }
-   
+      if(this.state.useLocalStorage && isPresentInLocalStorage(DEMO_MEDIA_URL)){
+        const transcriptDataFromLocalStorage = loadLocalSavedData(DEMO_MEDIA_URL)
+        this.setState({
+          transcriptData: transcriptDataFromLocalStorage,
+          mediaUrl: DEMO_MEDIA_URL,
+          title: DEMO_TITLE,
+          sttType: 'draftjs'
+        });
+      }
+      else{
+        this.setState({
+          transcriptData: DEMO_TRANSCRIPT,
+          mediaUrl: DEMO_MEDIA_URL,
+          title: DEMO_TITLE,
+          sttType: "bbckaldi"
+        });
+      }
   };
 
   // https://stackoverflow.com/questions/8885701/play-local-hard-drive-video-file-with-html5-video-tag
@@ -184,8 +184,18 @@ class App extends React.Component {
     const { data, ext } = newAutoSaveData;
     this.setState({ autoSaveData: data, autoSaveExtension: ext });
     // Saving to local storage 
-    localSave(this.state.mediaUrl, this.state.fileName, data);
+    if(this.state.useLocalStorage){
+      localSave(this.state.mediaUrl, this.state.fileName, data);
+    }
   };
+
+  handleUseLocalStorage = ()=>{
+    this.setState((prevState)=>{
+      return {useLocalStorage: !prevState.useLocalStorage}
+    }, ()=>{
+      console.log('this.state.useLocalStorage',this.state.useLocalStorage)
+    })
+  }
   render() {
     return (
       <div className={style.container}>
@@ -300,6 +310,21 @@ class App extends React.Component {
               />
             </div>
 
+            <div className={style.checkbox}>
+              <label
+                className={style.editableLabel}
+                htmlFor={"spellCheckCheckbox"}
+              >
+                Use local storage
+              </label>
+              <input
+                id={"useLocalStorage"}
+                type="checkbox"
+                checked={this.state.useLocalStorage}
+                onChange={this.handleUseLocalStorage}
+              />
+            </div>
+
             <button
               className={style.warningButton}
               onClick={() => this.clearLocalStorage()}
diff --git a/demo/local-storage.js b/demo/local-storage.js
index c7a9a0a1..ed843183 100644
--- a/demo/local-storage.js
+++ b/demo/local-storage.js
@@ -1,41 +1,41 @@
 const localSave = (mediaUrl, fileName, data) => {
-  // let mediaUrlName = mediaUrl;
-  // // if using local media instead of using random blob name
-  // // that makes it impossible to retrieve from on page refresh
-  // // use file name
-  // if (mediaUrlName.includes('blob')) {
-  //   mediaUrlName = fileName;
-  // }
+  let mediaUrlName = mediaUrl;
+  // if using local media instead of using random blob name
+  // that makes it impossible to retrieve from on page refresh
+  // use file name
+  if (mediaUrlName.includes('blob')) {
+    mediaUrlName = fileName;
+  }
 
-  // localStorage.setItem(`draftJs-${ mediaUrlName }`, JSON.stringify(data));
+  localStorage.setItem(`draftJs-${ mediaUrlName }`, JSON.stringify(data));
 };
 
 // eslint-disable-next-line class-methods-use-this
 const isPresentInLocalStorage = (mediaUrl, fileName) => {
-  // if (mediaUrl !== null) {
-  //   let mediaUrlName = mediaUrl;
-  //   if (mediaUrl.includes('blob')) {
-  //     mediaUrlName = fileName;
-  //   }
+  if (mediaUrl !== null) {
+    let mediaUrlName = mediaUrl;
+    if (mediaUrl.includes('blob')) {
+      mediaUrlName = fileName;
+    }
 
-  //   const data = localStorage.getItem(`draftJs-${ mediaUrlName }`);
-  //   if (data !== null) {
-  //     return true;
-  //   }
+    const data = localStorage.getItem(`draftJs-${ mediaUrlName }`);
+    if (data !== null) {
+      return true;
+    }
 
-  //   return false;
-  // }
+    return false;
+  }
 
   return false;
 };
 
 const loadLocalSavedData = (mediaUrl, fileName) => {
-  // let mediaUrlName = mediaUrl;
-  // if (mediaUrl.includes('blob')) {
-  //   mediaUrlName = fileName;
-  // }
-  // const data = JSON.parse(localStorage.getItem(`draftJs-${ mediaUrlName }`));
-  // return data;
+  let mediaUrlName = mediaUrl;
+  if (mediaUrl.includes('blob')) {
+    mediaUrlName = fileName;
+  }
+  const data = JSON.parse(localStorage.getItem(`draftJs-${ mediaUrlName }`));
+  return data;
 };
 
 export { loadLocalSavedData, isPresentInLocalStorage, localSave };