Add download feature

Author: peterjuma

package-lock.json

@@ -10,12 +10,14 @@
   "homepage": "https://apps.peterjuma.com/noteApp",
   "dependencies": {
     "@monaco-editor/react": "^4.1.3",
+    "file-saver": "^2.0.5",
     "gh-pages": "^3.1.0",
     "github-markdown": "^3.2.0",
     "github-markdown-css": "^4.0.0",
     "highlight.js": "^10.5.0",
     "idb": "^6.0.0",
     "jquery": "^3.5.1",
+    "jszip": "^3.6.0",
     "markdown-it": "^8.4.2",
     "markdown-it-emoji": "^2.0.0",
     "markdown-it-html5-embed": "^1.0.0",

package.json

@@ -12,6 +12,7 @@ import keyCodes from "./KeyCodes";
 import { openDB } from "idb/with-async-ittr.js";
 import { html2md, md2html } from "./useMarkDown";
 import marked from "marked";
+import { saveAs } from "file-saver";
 
 class App extends Component {
   constructor(props) {
@@ -50,6 +51,7 @@ class App extends Component {
     this.handleCopyCodeButtonClick;
     this.handleSplitScreen = this.handleSplitScreen.bind(this);
     this.handleNoteEditor = this.handleNoteEditor.bind(this);
+    this.handleNotesBackup = this.handleNotesBackup.bind(this);
   }
 
   async componentDidMount() {
@@ -645,6 +647,18 @@ class App extends Component {
     e.preventDefault();
   }
 
+  handleNotesBackup() {
+    const zip = require("jszip")();
+    this.state.allnotes.map((note) => {
+      const title = `${note.title.replace(/[^A-Z0-9]+/gi, "_") || "note"}.md`;
+      zip.file(title, note.body);
+    });
+
+    zip.generateAsync({ type: "blob" }).then((content) => {
+      saveAs(content, "notes_backup.zip");
+    });
+  }
+
   handleSplitScreen() {
     this.setState((prevState) => ({
       split: !prevState.split,
@@ -727,7 +741,10 @@ class App extends Component {
             handleSearchNotes={this.handleSearchNotes}
           />
           <ul className="note-list">{noteListItems}</ul>
-          <NoteSort handleSortNotes={this.handleSortNotes} />
+          <NoteSort
+            handleSortNotes={this.handleSortNotes}
+            handleNotesBackup={this.handleNotesBackup}
+          />
         </div>
         <div className="right">
           {RightNavbar}

src/App.js

@@ -17,6 +17,9 @@ function NoteSort(props) {
           <option value="5">Modified: Oldest</option>
         </select>
       </label>
+      <div className="backupbtn">
+        <i class="fas fa-download btn" onClick={props.handleNotesBackup}></i>
+      </div>
     </div>
   );
 }

src/NoteSort.js

@@ -209,6 +209,10 @@ ol {
   bottom: 0;
 }
 
+.backupbtn {
+  float: right;
+}
+
 .right-bottom-bar {
   height: 50px;
   line-height: 44px;