1 files changed, 7 insertions, 81 deletions
diff --git a/apps/Notes/components/Import.js b/apps/Notes/components/Import.js
index 71c08d6..2e2e5c7 100644
--- a/apps/Notes/components/Import.js
+++ b/apps/Notes/components/Import.js
@@ -1,58 +1,21 @@
+import styles from '../Notes.module.scss'
 import React, {useState} from 'react'
 import fetchJson from 'lib/fetchJson'
 import useNotes from '../hooks/useNotes'
-import {faCheck, faTimes} from '@fortawesome/free-solid-svg-icons'
-import {FontAwesomeIcon} from '@fortawesome/react-fontawesome'
+import {state, color, handleImport, handleChange} from '../helpers/import'
 
 const Import = ({action, setAction}) => {
   const [files, setFiles] = useState()
   const [done, setDone] = useState([])
   const {mutateNotes} = useNotes()
 
-  const state = i => done[i] && <span><FontAwesomeIcon icon={done[i] === 1 ? faCheck : faTimes} /></span>
-
-  const readFileAsText = (file) => new Promise((resolve,reject) => {
-    let fr = new FileReader()
-
-    fr.onload = () => resolve(fr.result)
-    fr.onerror = () => reject(fr)
-
-    fr.readAsText(file)
-  })
-
-  const handleImport = async e => {
-    e.preventDefault();
-
-    Array.from(files).forEach(async (file, i) => {
-      const title = file.name.replace(/\.[^/.]+$/, "")
-      const content = await readFileAsText(file);
-
-      try {
-        const notes = await fetchJson('/api/notes', {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({title, content}),
-        })
-        if (i === files.length - 1) await mutateNotes(notes)
-        setDone((prev) => ({...prev, [i]: 1}))
-      } catch (e) {
-        setDone((prev) => ({...prev, [i]: 0}))
-      }
-    })
-  }
-
-  const handleChange = e => {
-    setFiles(e.currentTarget.files)
-    setDone([])
-  }
-
   return (
-    <section>
+    <section className={styles.import}>
       <div className='window__submenu'>
-        <div onClick={() => { setAction('') }}>Back</div>
+        <div onClick={() => {setAction('')}}>Back</div>
       </div>
       <div className='window__scroll'>
-        <form onSubmit={handleImport}>
+        <form onSubmit={e => handleImport(e, files, mutateNotes, setDone)}>
           Import new notes:
           <div>
             <label className="window__button">
@@ -62,7 +25,7 @@ const Import = ({action, setAction}) => {
                 type="file"
                 multiple="multiple"
                 accept="text/plain"
-                onChange={handleChange}
+                onChange={e => handleChange(e, setFiles, setDone)}
               />
             </label>
           </div>
@@ -70,7 +33,7 @@ const Import = ({action, setAction}) => {
             <>
               <p>Notes to import:</p>
               <ul>
-                {[...files].map((f, i) => <li key={f.name}>{f.name} {state(i)}</li>)}
+                {[...files].map((f, i) => <li style={color(done[i])} key={f.name}>{f.name} {state(done[i])}</li>)}
               </ul>
               {
                 done.length === 0
@@ -81,43 +44,6 @@ const Import = ({action, setAction}) => {
           )}
         </form>
       </div>
-      <style jsx>{`
-        section {
-          background: white;
-          padding: 1rem;
-          position: absolute;
-          top: 0;
-          right: 0;
-          bottom: 0;
-          left: 0;
-          animation: fade-in .3s;
-        }
-
-        form {
-          padding: 1em;
-        }
-
-        input[type=file] {
-          display: none;
-        }
-
-        label {
-          display: inline-block;
-          cursor: pointer;
-        }
-
-        ul {
-           list-style: disc inside none;
-        }
-
-        li {
-          padding: .25em;
-        }
-
-        p {
-          padding: 1em 0;
-        }
-      `}</style>
     </section>
   )
 }