copy to clipboard, icons, notes key

10 files changed, 118 insertions, 39 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
diff --git a/components/App.js b/components/App.js
index 02443f3..d79e8c6 100644
--- a/components/App.js
+++ b/components/App.js
@@ -3,10 +3,11 @@ import useUser from 'lib/useUser'
 import fetchJson from 'lib/fetchJson'
 import {close, toggleMin, toggleMax, move} from 'helpers/windowActions'
 import {Layout} from 'components'
+import {faArrowUp, faExpandAlt, faTimes, faCompressAlt} from '@fortawesome/free-solid-svg-icons'
+import {FontAwesomeIcon} from '@fortawesome/react-fontawesome'
 
 const App = ({children, app, apps, setApps}) => {
   const winRef = useRef(null);
-  const [errorMsg, setErrorMsg] = useState('')
 
   useEffect(() => {
     move(app.name, winRef, apps, setApps)
@@ -25,9 +26,15 @@ const App = ({children, app, apps, setApps}) => {
       >
         <div className='window__title'>Notes</div>
         <div className='window__title-buttons'>
-          <span onClick={() => toggleMin('Notes', apps, setApps)}>_</span>
-          <span onClick={() => toggleMax('Notes', apps, setApps)}>+</span>
-          <span onClick={() => close('Notes', apps, setApps)}>x</span>
+          <span onClick={() => toggleMin('Notes', apps, setApps)}>
+            <FontAwesomeIcon icon={faArrowUp} />
+          </span>
+          <span onClick={() => toggleMax('Notes', apps, setApps)}>
+            <FontAwesomeIcon icon={app.max ? faCompressAlt : faExpandAlt} />
+          </span>
+          <span onClick={() => close('Notes', apps, setApps)}>
+            <FontAwesomeIcon icon={faTimes} />
+          </span>
         </div>
         <div className='window__content'>{children}</div>
       </div>
diff --git a/lib/crypt.js b/lib/crypt.js
index 4037c28..5d3d79e 100644
--- a/lib/crypt.js
+++ b/lib/crypt.js
@@ -1,6 +1,6 @@
 const crypto = require('crypto')
 const algorithm = 'aes-256-ctr'
-const secretKey = 'QZmGk0WwHMIhDaIsgSqwdnrPjPM3VwN1'
+const secretKey = process.env.MYAPPS_NOTES_KEY
 
 export const encrypt = (text) => {
   const iv = crypto.randomBytes(16)
diff --git a/styles/_reset.scss b/styles/_reset.scss
index a5f98fb..c979f31 100755
--- a/styles/_reset.scss
+++ b/styles/_reset.scss
@@ -21,10 +21,10 @@ time, mark, audio, video {
   font-size: 100%;
   font: inherit;
   vertical-align: baseline;
-  moz-user-select: none;
-  webkit-user-select: none;
-  ms-user-select: none;
-  user-select: none;
+  // moz-user-select: none;
+  // webkit-user-select: none;
+  // ms-user-select: none;
+  // user-select: none;
 }
 article, aside, details, figcaption, figure, 
 footer, header, hgroup, menu, nav, section {
diff --git a/styles/_window.scss b/styles/_window.scss
index 4f4a6a5..81fb055 100644
--- a/styles/_window.scss
+++ b/styles/_window.scss
@@ -62,13 +62,15 @@
     z-index: 1;
 
     & > span {
-      margin-left: .25em;
-      padding: .25em;
-      transition: .3s background;
+      padding: .5em;
+      transition: .3s background, .3s color;
       border-radius: .5em;
+      color: #666;
+      font-size: 0.8em;
 
       &:hover {
         background-color: rgba(0,0,0,.1);
+        color: #222;
       }
     }
   }