1 files changed, 140 insertions, 0 deletions
diff --git a/apps/Notes/components/Note.js b/apps/Notes/components/Note.js
new file mode 100644
index 0000000..d23806a
--- /dev/null
+++ b/apps/Notes/components/Note.js
@@ -0,0 +1,140 @@
+import React, {useState, useContext} from 'react'
+import Context from 'context';
+import fetchJson from 'lib/fetchJson'
+import useNotes from '../hooks/useNotes'
+import {addNote, updateNote} from '../helpers/noteActions.js'
+
+const Note = ({action, setAction, fetchedNote}) => {
+  const [text, setText] = useState('')
+  const {mutateNotes} = useNotes()
+  const [errorMsg, setErrorMsg] = useState('')
+  const {setPopup} = useContext(Context)
+
+  const handleSubmit = e => {
+    e.preventDefault()
+    fetchedNote
+      ? updateNote(e, fetchedNote, mutateNotes, setAction, setPopup)
+      : addNote(e, mutateNotes, setAction, setPopup)
+  }
+
+  // if (!fetchedNote) return <p>Loading...</p>
+  // if (fetchedNote.error) {
+  //   setFetchedNote()
+  //   setAction('')
+  // }
+
+  return (
+    <div className='note'>
+      <h2>{fetchedNote ? 'Edit note:' : 'Add new note:'}</h2>
+      <form onSubmit={handleSubmit} className='note__form'>
+        <input
+          className='note__title'
+          name='title'
+          type='text'
+          placeholder='Title'
+          defaultValue={fetchedNote ? fetchedNote.title : ''}
+        />
+        <textarea
+          required
+          className='note__text'
+          placeholder='Note'
+          name='content'
+          defaultValue={fetchedNote ? fetchedNote.content : ''}
+        />
+        <div className='note__buttons'>
+          <span
+            className='window__button'
+            onClick={() => {setAction(fetchedNote ? 'showNote' : '')}}
+          >
+            Cancel
+          </span>
+          <input
+            className='window__button'
+            type="submit"
+            value={fetchedNote ? 'Save note' : 'Add note'}
+          />
+        </div>
+      </form>
+      <style jsx>{`
+        .note {
+          display: flex;
+          flex-direction: column;
+          position: absolute;
+          top: 0;
+          right: 0;
+          bottom: 0;
+          left: 0;
+          background: white;
+          padding: 1em 1em 2em;
+          animation: fade-in .3s;
+        }
+
+        @keyframes fade-in {
+          from {opacity: 0;}
+          to {opacity: 1;}
+        }
+
+        h2 {
+          font-size: 1.2em;
+          margin-bottom: .5em;
+        }
+
+        .note__form {
+          display: flex;
+          flex-direction: column;
+          width: 100%;
+          flex-grow: 1;
+        }
+
+        .note__title {
+          margin-bottom: .5rem;
+          height: 3rem;
+          border: none;
+          padding: 0.5rem;
+          font-size: 1rem;
+          // font-weight: 600;
+          border: 1px dashed #666;
+        }
+
+        .note__title:placeholder {
+          font: inherit;
+        }
+
+        .note__text {
+          font-size: 1rem;
+          flex-grow: 1;
+          resize: none;
+          height: 100%;
+          width: 100%;
+          border: none;
+          border: 1px dashed #666;
+          padding: 0.5rem;
+        }
+
+        .note__text:placeholder {
+          font: inherit;
+        }
+
+        .note__close {
+          position: absolute;
+          top: 8px;
+          right: 15px;
+          transform: rotate(45deg);
+          font-size: 26px;
+          cursor: pointer;
+          transition: .3s transform;
+        }
+
+        .note__close:hover {
+          transform: rotate(135deg);
+        }
+
+        .note__buttons {
+          text-align: right;
+        }
+      `}</style>
+    </div>
+  )
+}
+
+export default Note