export multiple as zip

5 files changed, 95 insertions, 9 deletions

diff --git a/apps/Notes/components/Actions.js b/apps/Notes/components/Actions.js
index 8f08103..1f5d680 100644
--- a/apps/Notes/components/Actions.js
+++ b/apps/Notes/components/Actions.js
@@ -1,6 +1,7 @@
 import NoteView from './NoteView'
 import NoteEdit from './NoteEdit'
 import Import from './Import'
+import Export from './Export'
 
 const Actions = ({
   action, setAction, fetchedNote, setFetchedNote
@@ -26,9 +27,13 @@ const Actions = ({
         fetchedNote={fetchedNote}
       />
     )
-    case 'importNote': return (
+    case 'importNotes': return (
       <Import
-        action={action}
+        setAction={setAction}
+      />
+    )
+    case 'exportNotes': return (
+      <Export
         setAction={setAction}
       />
     )
diff --git a/apps/Notes/components/Export.js b/apps/Notes/components/Export.js
new file mode 100644
index 0000000..f281d1a
--- /dev/null
+++ b/apps/Notes/components/Export.js
@@ -0,0 +1,83 @@
+import styles from '../Notes.module.scss'
+import React, {useState} from 'react'
+import useNotes from '../hooks/useNotes'
+import fetchJson from 'lib/fetchJson'
+import JSZip from 'jszip'
+import saveFile from 'helpers/saveFile'
+import filename from '../helpers/fileName'
+// import {state, color, handleImport, handleChange} from '../helpers/import'
+
+const Export = ({setAction}) => {
+  const {notes} = useNotes()
+  const [ids, setIds] = useState(notes.map(n => n.noteId))
+  // const [files, setFiles] = useState()
+  // const [done, setDone] = useState([])
+
+  const handleSelect = id => {
+    ids.includes(id)
+      ? setIds(ids.filter(i => i !== id))
+      : setIds([...ids, id])
+  }
+
+  const handleSelectAll = e => {
+    if (e.target.checked) {
+      setIds(notes.map(n => n.noteId))
+    } else {
+      setIds([])
+    }
+  }
+
+  const handleExport = e => {
+    e.preventDefault()
+    const zip = new JSZip()
+
+    Promise.all(ids.map(async id => {
+      const title = notes.find(n => n.noteId === id).title
+      const {content} = await fetchJson(`/api/note/${id}`)
+      zip.folder('notes').file(filename(title), content, {binary: true})
+    })).then(() => {
+      zip.generateAsync({type:"blob"})
+        .then(c => saveFile(c, 'notes.zip', 'application/zip'))
+    })
+  }
+
+  if (!notes) return null
+
+  return (
+    <section>
+      <div className='window__submenu'>
+        <div onClick={() => {setAction('')}}>Back</div>
+      </div>
+      <div className={`window__scroll ${styles.export}`}>
+        <h3>Click to export your notes:</h3>
+        <input
+          className="window__button"
+          type="submit"
+          value="Export"
+          onClick={handleExport}
+        />
+        <p>Notes to export:</p>
+        <div className={`${styles.export__select}`}>
+          <input type="checkbox" name='selectAll' onChange={handleSelectAll} checked={notes.length === ids.length} />
+          <label htmlFor='selectAll'>Select all</label>
+        </div>
+        {notes.map(note => (
+          <div key={note.noteId}>
+            <input
+              type="checkbox"
+              name={note.noteId}
+              value={note.noteId}
+              checked={ids.includes(note.noteId)}
+              onChange={() => handleSelect(note.noteId)}
+            />
+            <label htlmfor={note.noteId}>
+              {note.title}
+            </label><br/>
+          </div>
+        ))}
+      </div>
+    </section>
+  )
+}
+
+export default Export
diff --git a/apps/Notes/components/Import.js b/apps/Notes/components/Import.js
index 2e2e5c7..700acb4 100644
--- a/apps/Notes/components/Import.js
+++ b/apps/Notes/components/Import.js
@@ -4,7 +4,7 @@ import fetchJson from 'lib/fetchJson'
 import useNotes from '../hooks/useNotes'
 import {state, color, handleImport, handleChange} from '../helpers/import'
 
-const Import = ({action, setAction}) => {
+const Import = ({setAction}) => {
   const [files, setFiles] = useState()
   const [done, setDone] = useState([])
   const {mutateNotes} = useNotes()
diff --git a/apps/Notes/components/List.js b/apps/Notes/components/List.js
index e4060d5..0f6221e 100644
--- a/apps/Notes/components/List.js
+++ b/apps/Notes/components/List.js
@@ -1,9 +1,8 @@
 import styles from '../Notes.module.scss'
-import React, {useState, useEffect, useRef} from 'react'
+import React, {useState} from 'react'
 import useUser from 'lib/useUser'
 import useNotes from '../hooks/useNotes'
 import useSort from '../hooks/useSort'
-import {Layout} from 'components'
 import ListItem from './ListItem'
 import Actions from './Actions'
 import Splash from './Splash'
@@ -13,7 +12,7 @@ const List = () => {
   const [action, setAction] = useState('')
   const {notes, error} = useNotes()
   const [sortedBy, sortBy, sortFn] = useSort(2)
-  const {user, mutateUser} = useUser({
+  const {user} = useUser({
     redirectToLogin: true,
     redirectToVerify: true,
   })
@@ -31,8 +30,8 @@ const List = () => {
           <>
             <div className='window__submenu'>
               <div onClick={() => setAction('addNote')}>New note</div>
-              <div onClick={() => setAction('importNote')}>Import</div>
-              <div onClick={() => {}}>Export</div>
+              <div onClick={() => setAction('importNotes')}>Import</div>
+              <div onClick={() => setAction('exportNotes')}>Export</div>
             </div>
             <table className={styles.notesList}>
               <thead>
diff --git a/apps/Notes/components/ListItem.js b/apps/Notes/components/ListItem.js
index 47dea3b..caa22e9 100644
--- a/apps/Notes/components/ListItem.js
+++ b/apps/Notes/components/ListItem.js
@@ -1,6 +1,5 @@
 import styles from '../Notes.module.scss'
 import React, { useContext } from 'react'
-import fetchJson from 'lib/fetchJson'
 import {getNote, exportNote, removeNote} from '../helpers/noteActions.js'
 import useNotes from '../hooks/useNotes'
 import Context from 'context';