6 files changed, 97 insertions, 27 deletions

diff --git a/apps/Notes/components/Actions.js b/apps/Notes/components/Actions.js
new file mode 100644
index 0000000..7f60ffa
--- /dev/null
+++ b/apps/Notes/components/Actions.js
@@ -0,0 +1,43 @@
+import NoteView from './NoteView'
+import NoteEdit from './NoteEdit'
+import Import from './Import'
+
+const Actions = ({
+  action, setAction, fetchedNote, setFetchedNote
+}) => {
+  switch (action) {
+    case 'showNote': return (
+      <NoteView
+        fetchedNote={fetchedNote}
+        setFetchedNote={setFetchedNote}
+        setAction={setAction}
+      />
+    )
+    case 'addNote': return (
+      <NoteEdit
+        action={action}
+        setAction={setAction}
+      />
+    )
+    case 'editNote': return (
+      <NoteEdit
+        action={action}
+        setAction={setAction}
+        fetchedNote={fetchedNote}
+      />
+    )
+    case 'import': return (
+      <Import
+        action={action}
+        setAction={setAction}
+      />
+    )
+    default: {
+      setAction('')
+      return null
+    }
+  }
+}
+
+export default Actions
+
diff --git a/apps/Notes/components/Import.js b/apps/Notes/components/Import.js
new file mode 100644
index 0000000..6182ca6
--- /dev/null
+++ b/apps/Notes/components/Import.js
@@ -0,0 +1,25 @@
+const Import = ({action, setAction}) => {
+  return (
+    <section>
+      <div className='window__submenu'>
+        <div onClick={() => { setAction('') }}>Back</div>
+        <div>From txt</div>
+        <div>From JSON</div>
+      </div>
+      <style jsx>{`
+        section {
+          background: white;
+          padding: 1rem;
+          position: absolute;
+          top: 0;
+          right: 0;
+          bottom: 0;
+          left: 0;
+          animation: fade-in .3s;
+        }
+      `}</style>
+    </section>
+  )
+}
+
+export default Import
diff --git a/apps/Notes/components/List.js b/apps/Notes/components/List.js
index 19a5643..a4e0e8f 100644
--- a/apps/Notes/components/List.js
+++ b/apps/Notes/components/List.js
@@ -5,8 +5,7 @@ import useSort from '../hooks/useSort'
 import fetchJson from 'lib/fetchJson'
 import {Layout} from 'components'
 import ListItem from './ListItem'
-import NoteView from './NoteView'
-import Note from './Note'
+import Actions from './Actions'
 
 const List = () => {
   const [fetchedNote, setFetchedNote] = useState()
@@ -27,10 +26,12 @@ const List = () => {
   return (
     <>
       {
-        action === '' && (
+        action === '' ? (
           <>
             <div className='window__submenu'>
               <div onClick={() => setAction('addNote')}>New note</div>
+              {/*<div onClick={() => setAction('import')}>Import</div>
+              <div onClick={() => {}}>Export</div>*/}
             </div>
             <table className="list">
               <thead>
@@ -58,31 +59,12 @@ const List = () => {
               </tbody>
             </table>
           </>
-        )
-      }
-      {
-        action === 'addNote' && (
-          <Note
+        ) : (
+          <Actions
             action={action}
             setAction={setAction}
-          />
-        )
-      }
-      {
-        action === 'showNote' && (
-          <NoteView
             fetchedNote={fetchedNote}
             setFetchedNote={setFetchedNote}
-            setAction={setAction}
-          />
-        )
-      }
-      {
-        action === 'editNote' && (
-          <Note
-            action={action}
-            setAction={setAction}
-            fetchedNote={fetchedNote}
           />
         )
       }
diff --git a/apps/Notes/components/Note.js b/apps/Notes/components/NoteEdit.js
index d23806a..b568aa9 100644
--- a/apps/Notes/components/Note.js
+++ b/apps/Notes/components/NoteEdit.js
@@ -4,7 +4,7 @@ import fetchJson from 'lib/fetchJson'
 import useNotes from '../hooks/useNotes'
 import {addNote, updateNote} from '../helpers/noteActions.js'
 
-const Note = ({action, setAction, fetchedNote}) => {
+const NoteEdit = ({action, setAction, fetchedNote}) => {
   const [text, setText] = useState('')
   const {mutateNotes} = useNotes()
   const [errorMsg, setErrorMsg] = useState('')
@@ -137,4 +137,4 @@ const Note = ({action, setAction, fetchedNote}) => {
   )
 }
 
-export default Note
+export default NoteEdit
diff --git a/apps/Notes/components/NoteView.js b/apps/Notes/components/NoteView.js
index 15d4944..83b1a2a 100644
--- a/apps/Notes/components/NoteView.js
+++ b/apps/Notes/components/NoteView.js
@@ -2,6 +2,7 @@ import React, {useContext} from 'react';
 import Context from 'context';
 import useNotes from '../hooks/useNotes'
 import {removeNote} from '../helpers/noteActions.js'
+import copyToClipboard from '../helpers/copyToClipboard.js'
 
 const NoteView = ({fetchedNote, setFetchedNote, setAction}) => {
   const {mutateNotes} = useNotes()
@@ -19,7 +20,7 @@ const NoteView = ({fetchedNote, setFetchedNote, setAction}) => {
     <section>
       <div className='window__submenu'>
         <div onClick={() => { setFetchedNote(); setAction('') }}>Back</div>
-        <div>Copy</div>
+        <div onClick={() => copyToClipboard(content, setPopup)}>Copy</div>
         <div onClick={() => { setAction('editNote')}}>Edit</div>
         <div onClick={e => { removeNote(e, _id, mutateNotes, setPopup, setAction) }}>Remove</div>
       </div>
diff --git a/apps/Notes/helpers/copyToClipboard.js b/apps/Notes/helpers/copyToClipboard.js
new file mode 100644
index 0000000..608d299
--- /dev/null
+++ b/apps/Notes/helpers/copyToClipboard.js
@@ -0,0 +1,19 @@
+const copyToClipboard = (text, setPopup) => {
+  navigator
+    .clipboard.writeText(text)
+    .then(() => {
+      setPopup({
+        content: 'Note content was copied to clipboard',
+        time: 2000,
+      })
+    })
+    .catch(() => {
+      setPopup({
+        content: 'Could not copy to clipboard',
+        time: 2000,
+        error: true
+      })
+    })
+}
+
+export default copyToClipboard