init commit

1 files changed, 129 insertions, 0 deletions

diff --git a/apps/Notes/components/List.js b/apps/Notes/components/List.js
new file mode 100644
index 0000000..8561d4f
--- /dev/null
+++ b/apps/Notes/components/List.js
@@ -0,0 +1,129 @@
+import React, {useState, useEffect, useRef} from 'react'
+import useUser from 'lib/useUser'
+import useNotes from '../hooks/useNotes'
+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'
+
+const List = () => {
+  const [fetchedNote, setFetchedNote] = useState()
+  const [action, setAction] = useState('')
+  const {notes, error} = useNotes()
+  const [sortedBy, sortBy, sortFn] = useSort(2)
+  const {user, mutateUser} = useUser({
+    redirectToLogin: true,
+    redirectToVerify: true,
+  })
+
+  if (error) return <p>Failed to fetch notes</p>
+
+  if (!user || !user.isLoggedIn || !user.isVerified || !notes || !sortFn) {
+    return <p>Loading...</p>
+  }
+
+
+  return (
+    <>
+      {
+        action === '' && (
+          <>
+            <div className='window__submenu'>
+              <div onClick={() => setAction('addNote')}>New note</div>
+            </div>
+            <table className="list">
+              <thead>
+                <tr>
+                  <th className='list__title' onClick={() => sortBy(1)}>Title {sortedBy(1)}</th>
+                  <th className='list__date' onClick={() => sortBy(2)}>Created {sortedBy(2)}</th>
+                  <th className='list__date' onClick={() => sortBy(3)}>Modified {sortedBy(3)}</th>
+                </tr>
+              </thead>
+              <tbody>
+                {
+                  notes.length > 0
+                    ? (notes.sort(sortFn).map(note => (
+                      <ListItem
+                        key={note._id}
+                        note={note}
+                        setAction={setAction}
+                        setFetchedNote={setFetchedNote}
+                      />
+                    ))) : (
+                      <tr>
+                        <td>Your notes list is empty.</td>
+                      </tr>
+                    )}
+              </tbody>
+            </table>
+          </>
+        )
+      }
+      {
+        action === 'addNote' && (
+          <Note
+            action={action}
+            setAction={setAction}
+          />
+        )
+      }
+      {
+        action === 'showNote' && (
+          <NoteView
+            fetchedNote={fetchedNote}
+            setFetchedNote={setFetchedNote}
+            setAction={setAction}
+          />
+        )
+      }
+      {
+        action === 'editNote' && (
+          <Note
+            action={action}
+            setAction={setAction}
+            fetchedNote={fetchedNote}
+          />
+        )
+      }
+      <style jsx>{`
+        table {
+          display: block;
+          overflow: auto;
+          width: 100%;
+          table-layout: fixed;
+          word-wrap: break-word;
+          height: 100%;
+          margin-top: -1em;
+          padding-top: 1em;
+        }
+
+        tbody, thead {
+          display: block;
+        }
+
+        tr {
+          display: flex;
+          padding: 0 .5em;
+        }
+
+        th {
+          font-weight: 600;
+          text-align: left;
+          min-width: 10em;
+          white-space: nowrap;
+          padding-bottom: .5em;
+          cursor: pointer;
+          line-height: 1.1em;
+        }
+
+        th:first-of-type {
+          width: 99%;
+        }
+      `}</style>
+    </>
+  )
+}
+
+export default List