From a9d3686ccc496044cfdee013ccfbece955793052 Mon Sep 17 00:00:00 2001
From: piotrruss <mail@pruss.it>
Date: Sat, 21 Aug 2021 00:24:01 +0200
Subject: icon focus, notes update timestamp, loading note

---
 apps/Notes/components/List.js | 98 ++++++++++++++++++++++---------------------
 1 file changed, 50 insertions(+), 48 deletions(-)

(limited to 'apps/Notes/components/List.js')

diff --git a/apps/Notes/components/List.js b/apps/Notes/components/List.js
index 0f6221e..54f66b5 100644
--- a/apps/Notes/components/List.js
+++ b/apps/Notes/components/List.js
@@ -1,5 +1,5 @@
 import styles from '../Notes.module.scss'
-import React, {useState} from 'react'
+import React, {useState, useEffect} from 'react'
 import useUser from 'lib/useUser'
 import useNotes from '../hooks/useNotes'
 import useSort from '../hooks/useSort'
@@ -10,65 +10,67 @@ import Splash from './Splash'
 const List = () => {
   const [fetchedNote, setFetchedNote] = useState()
   const [action, setAction] = useState('')
+  const [loading, setLoading] = useState(false)
   const {notes, error} = useNotes()
-  const [sortedBy, sortBy, sortFn] = useSort(2)
+  const [sortedBy, sortBy, sortFn] = useSort(3)
   const {user} = useUser({
     redirectToLogin: true,
     redirectToVerify: true,
   })
 
-  if (error) return <Splash type='connection' />
+  useEffect(() => {
+    setLoading(false)
+  }, [fetchedNote])
 
+  if (error) return <Splash type='connection' />
+  if (loading) return <Splash />
   if (!user || !user.isLoggedIn || !user.isVerified || !notes || !sortFn) {
     return <Splash />
   }
 
   return (
-    <>
-      {
-        action === '' ? (
-          <>
-            <div className='window__submenu'>
-              <div onClick={() => setAction('addNote')}>New note</div>
-              <div onClick={() => setAction('importNotes')}>Import</div>
-              <div onClick={() => setAction('exportNotes')}>Export</div>
-            </div>
-            <table className={styles.notesList}>
-              <thead>
-                <tr>
-                  <th onClick={() => sortBy(1)}>Title {sortedBy(1)}</th>
-                  <th onClick={() => sortBy(2)}>Created {sortedBy(2)}</th>
-                  <th 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>
-          </>
-        ) : (
-          <Actions
-            action={action}
-            setAction={setAction}
-            fetchedNote={fetchedNote}
-            setFetchedNote={setFetchedNote}
-          />
-        )
-      }
-    </>
+    action === '' ? (
+      <>
+        <div className='window__submenu'>
+          <div onClick={() => setAction('addNote')}>New note</div>
+          <div onClick={() => setAction('importNotes')}>Import</div>
+          <div onClick={() => setAction('exportNotes')}>Export</div>
+        </div>
+        <table className={styles.notesList}>
+          <thead>
+            <tr>
+              <th onClick={() => sortBy(1)}>Title {sortedBy(1)}</th>
+              <th onClick={() => sortBy(2)}>Created {sortedBy(2)}</th>
+              <th 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}
+                    setLoading={setLoading}
+                  />
+                ))) : (
+                  <tr>
+                    <td>Your notes list is empty.</td>
+                  </tr>
+                )}
+          </tbody>
+        </table>
+      </>
+    ) : (
+      <Actions
+        action={action}
+        setAction={setAction}
+        fetchedNote={fetchedNote}
+        setFetchedNote={setFetchedNote}
+      />
+    )
   )
 }
 
-- 
cgit v1.2.3