1 files changed, 119 insertions, 0 deletions
diff --git a/apps/Notes/components/ListItem.js b/apps/Notes/components/ListItem.js
new file mode 100644
index 0000000..42d67c0
--- /dev/null
+++ b/apps/Notes/components/ListItem.js
@@ -0,0 +1,119 @@
+import React, { useContext } from 'react'
+import fetchJson from 'lib/fetchJson'
+import {getNote, removeNote} from '../helpers/noteActions.js'
+import useNotes from '../hooks/useNotes'
+import Context from 'context';
+import { faEdit, faTrash } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+
+const datestring = date => {
+  const d = new Date(date);
+  return ("0" + d.getDate()).slice(-2) + "-" + ("0"+(d.getMonth()+1)).slice(-2) + "-" +
+    d.getFullYear() + " " + ("0" + d.getHours()).slice(-2) + ":" + ("0" + d.getMinutes()).slice(-2)
+};
+
+const ListItem = ({note, setAction, setFetchedNote}) => {
+  const {mutateNotes} = useNotes()
+  const {setPopup} = useContext(Context)
+
+  const handleNoteAction = async (a, note, e) => {
+    if (e) e.stopPropagation()
+    await getNote(note, setFetchedNote, setPopup, () => setAction(a))
+  }
+
+  return (
+    <>
+      <tr key={note._id}>
+        <td
+          onClick={() => handleNoteAction('showNote', note)}
+        >
+          <span>{`${note.title}`}</span>
+          <span
+          onClick={e => handleNoteAction('editNote', note, e)}
+          >
+            <FontAwesomeIcon icon={faEdit} />
+          </span>
+          <span
+            onClick={(e) => removeNote(e, note._id, mutateNotes, setPopup, setAction)}
+          >
+            <FontAwesomeIcon icon={faTrash} />
+          </span>
+        </td>
+        <td
+          onClick={() => handleNoteAction('showNote', note)}
+        >
+          {datestring(note.created_at)}
+        </td>
+        <td
+          onClick={() => handleNoteAction('showNote', note)}
+        >
+          {datestring(note.updated_at)}
+        </td>
+      </tr>
+      <style jsx>{`
+        tr {
+          display: flex;
+          padding: .5em;
+        }
+
+        td {
+          min-width: 10em;
+          white-space: nowrap;
+        }
+
+        td:first-of-type {
+          width: 99%;
+          display: flex;
+          padding-right: 1em;
+        }
+
+        td:first-of-type > span:nth-child(2),
+        td:first-of-type > span:nth-child(3) {
+          margin-left: .5em;
+          padding: .15em .5em;
+          line-height: 1em;
+          border-radius: 50%;
+          visibility: hidden;
+          opacity: 0;
+          font-size: 80%;
+          transition: .3s opacity linear .3s;
+        }
+
+        td:first-of-type > span:nth-child(1) {
+          text-overflow: ellipsis;
+          flex-grow: 1;
+        }
+
+        // td:first-of-type > span:nth-child(2) {
+          // margin-left: 1.25em;
+        // }
+
+        tr:hover {
+          background: #eee;
+          border-radius: .5em;
+          cursor: pointer;
+        }
+
+        tr:hover > td:first-of-type > span:nth-child(2),
+        tr:hover > td:first-of-type > span:nth-child(3) {
+          color: #666;
+          visibility: visible;
+          opacity: 1;
+        }
+
+        tr > td:first-of-type > span:nth-child(2):hover {
+          color: #333;
+          background-color: #deffde;
+        }
+
+        tr > td:first-of-type > span:nth-child(3):hover {
+          background-color: #ffdede;
+          color: #333;
+        }
+
+      `}</style>
+    </>
+  )
+}
+
+export default ListItem