init commit

1 files changed, 63 insertions, 0 deletions

diff --git a/apps/Notes/components/NoteView.js b/apps/Notes/components/NoteView.js
new file mode 100644
index 0000000..15d4944
--- /dev/null
+++ b/apps/Notes/components/NoteView.js
@@ -0,0 +1,63 @@
+import React, {useContext} from 'react';
+import Context from 'context';
+import useNotes from '../hooks/useNotes'
+import {removeNote} from '../helpers/noteActions.js'
+
+const NoteView = ({fetchedNote, setFetchedNote, setAction}) => {
+  const {mutateNotes} = useNotes()
+  const {setPopup} = useContext(Context)
+
+  if (!fetchedNote) return <p>Loading...</p>
+  if (fetchedNote.error) {
+    setFetchedNote()
+    setAction('')
+  }
+
+  const {_id, content, title} = fetchedNote
+
+  return (
+    <section>
+      <div className='window__submenu'>
+        <div onClick={() => { setFetchedNote(); setAction('') }}>Back</div>
+        <div>Copy</div>
+        <div onClick={() => { setAction('editNote')}}>Edit</div>
+        <div onClick={e => { removeNote(e, _id, mutateNotes, setPopup, setAction) }}>Remove</div>
+      </div>
+
+      <div className='window__scroll'>
+        <h2 className='selectable'>{title}</h2>
+        <p className='selectable'>{content}</p>
+      </div>
+      <style jsx>{`
+        section {
+          background: white;
+          padding: 1rem;
+          position: absolute;
+          top: 0;
+          right: 0;
+          bottom: 0;
+          left: 0;
+          animation: fade-in .3s;
+        }
+
+        @keyframes fade-in {
+          from {opacity: 0;}
+          to {opacity: 1;}
+        }
+
+        h2 {
+          font-size: 1.25em;
+          font-weight: 600;
+          padding: 1rem;
+        }
+
+        p {
+          padding: 0 1rem 1rem;
+          white-space: pre-line;
+        }
+      `}</style>
+    </section>
+  )
+}
+
+export default NoteView