aboutsummaryrefslogtreecommitdiffstats
path: root/apps/Notes/components/List.js
diff options
context:
space:
mode:
Diffstat (limited to 'apps/Notes/components/List.js')
-rw-r--r--apps/Notes/components/List.js98
1 files changed, 50 insertions, 48 deletions
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}
+ />
+ )
)
}