From 26721219802be2ae9655943e610554a1b47eafbd Mon Sep 17 00:00:00 2001
From: piotrruss <mail@pruss.it>
Date: Sat, 14 Aug 2021 19:13:46 +0200
Subject: copy to clipboard, icons, notes key

---
 apps/Notes/components/Actions.js      |  43 +++++++++++
 apps/Notes/components/Import.js       |  25 ++++++
 apps/Notes/components/List.js         |  30 ++------
 apps/Notes/components/Note.js         | 140 ----------------------------------
 apps/Notes/components/NoteEdit.js     | 140 ++++++++++++++++++++++++++++++++++
 apps/Notes/components/NoteView.js     |   3 +-
 apps/Notes/helpers/copyToClipboard.js |  19 +++++
 7 files changed, 235 insertions(+), 165 deletions(-)
 create mode 100644 apps/Notes/components/Actions.js
 create mode 100644 apps/Notes/components/Import.js
 delete mode 100644 apps/Notes/components/Note.js
 create mode 100644 apps/Notes/components/NoteEdit.js
 create mode 100644 apps/Notes/helpers/copyToClipboard.js

(limited to 'apps/Notes')

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/Note.js
deleted file mode 100644
index d23806a..0000000
--- a/apps/Notes/components/Note.js
+++ /dev/null
@@ -1,140 +0,0 @@
-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
diff --git a/apps/Notes/components/NoteEdit.js b/apps/Notes/components/NoteEdit.js
new file mode 100644
index 0000000..b568aa9
--- /dev/null
+++ b/apps/Notes/components/NoteEdit.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 NoteEdit = ({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 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
-- 
cgit v1.2.3