splash screens, export note

5 files changed, 31 insertions, 11 deletions

diff --git a/apps/Notes/components/Actions.js b/apps/Notes/components/Actions.js
index 7f60ffa..8f08103 100644
--- a/apps/Notes/components/Actions.js
+++ b/apps/Notes/components/Actions.js
@@ -26,7 +26,7 @@ const Actions = ({
         fetchedNote={fetchedNote}
       />
     )
-    case 'import': return (
+    case 'importNote': return (
       <Import
         action={action}
         setAction={setAction}
diff --git a/apps/Notes/components/List.js b/apps/Notes/components/List.js
index b9fde02..e4060d5 100644
--- a/apps/Notes/components/List.js
+++ b/apps/Notes/components/List.js
@@ -6,6 +6,7 @@ import useSort from '../hooks/useSort'
 import {Layout} from 'components'
 import ListItem from './ListItem'
 import Actions from './Actions'
+import Splash from './Splash'
 
 const List = () => {
   const [fetchedNote, setFetchedNote] = useState()
@@ -17,10 +18,10 @@ const List = () => {
     redirectToVerify: true,
   })
 
-  if (error) return <p>Failed to fetch notes</p>
+  if (error) return <Splash type='connection' />
 
   if (!user || !user.isLoggedIn || !user.isVerified || !notes || !sortFn) {
-    return <p>Loading...</p>
+    return <Splash />
   }
 
   return (
@@ -30,7 +31,7 @@ const List = () => {
           <>
             <div className='window__submenu'>
               <div onClick={() => setAction('addNote')}>New note</div>
-              <div onClick={() => setAction('import')}>Import</div>
+              <div onClick={() => setAction('importNote')}>Import</div>
               <div onClick={() => {}}>Export</div>
             </div>
             <table className={styles.notesList}>
diff --git a/apps/Notes/components/ListItem.js b/apps/Notes/components/ListItem.js
index 5d3b91f..47dea3b 100644
--- a/apps/Notes/components/ListItem.js
+++ b/apps/Notes/components/ListItem.js
@@ -1,10 +1,10 @@
 import styles from '../Notes.module.scss'
 import React, { useContext } from 'react'
 import fetchJson from 'lib/fetchJson'
-import {getNote, removeNote} from '../helpers/noteActions.js'
+import {getNote, exportNote, removeNote} from '../helpers/noteActions.js'
 import useNotes from '../hooks/useNotes'
 import Context from 'context';
-import { faEdit, faTrash } from '@fortawesome/free-solid-svg-icons'
+import { faEdit, faDownload, faTrash } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 
 const datestring = date => {
@@ -34,7 +34,12 @@ const ListItem = ({note, setAction, setFetchedNote}) => {
           <FontAwesomeIcon icon={faEdit} />
         </span>
         <span
-          onClick={(e) => removeNote(e, note._id, mutateNotes, setPopup, setAction)}
+          onClick={e => {e.stopPropagation(); exportNote(note)}}
+        >
+          <FontAwesomeIcon icon={faDownload} />
+        </span>
+        <span
+          onClick={e => removeNote(e, note._id, mutateNotes, setPopup, setAction)}
         >
           <FontAwesomeIcon icon={faTrash} />
         </span>
diff --git a/apps/Notes/components/NoteView.js b/apps/Notes/components/NoteView.js
index 7d93b16..14ec045 100644
--- a/apps/Notes/components/NoteView.js
+++ b/apps/Notes/components/NoteView.js
@@ -2,7 +2,7 @@ import styles from '../Notes.module.scss'
 import React, {useContext} from 'react';
 import Context from 'context';
 import useNotes from '../hooks/useNotes'
-import {removeNote} from '../helpers/noteActions.js'
+import {removeNote, exportNote} from '../helpers/noteActions.js'
 import copyToClipboard from '../helpers/copyToClipboard.js'
 
 const NoteView = ({fetchedNote, setFetchedNote, setAction}) => {
@@ -20,10 +20,11 @@ const NoteView = ({fetchedNote, setFetchedNote, setAction}) => {
   return (
     <section className={styles.noteView}>
       <div className='window__submenu'>
-        <div onClick={() => { setFetchedNote(); setAction('') }}>Back</div>
+        <div onClick={() => {setFetchedNote(); setAction('')}}>Back</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 onClick={() => {setAction('editNote')}}>Edit</div>
+        <div onClick={() => exportNote(fetchedNote)}>Export</div>
+        <div onClick={e => {removeNote(e, _id, mutateNotes, setPopup, setAction)}}>Remove</div>
       </div>
 
       <div className='window__scroll'>
diff --git a/apps/Notes/components/Splash.js b/apps/Notes/components/Splash.js
new file mode 100644
index 0000000..bc52e1b
--- /dev/null
+++ b/apps/Notes/components/Splash.js
@@ -0,0 +1,13 @@
+import styles from '../Notes.module.scss'
+import React from 'react'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faBan, faSpinner } from '@fortawesome/free-solid-svg-icons'
+
+const Splash = ({type}) => (
+  <div className={type === 'connection' ? styles.connection : styles.loader}>
+    <FontAwesomeIcon icon={type === 'connection' ? faBan : faSpinner} />
+    <p>{type === 'connection' ? 'No connection' : 'Loading...'}</p>
+  </div>
+)
+
+export default Splash