diff options
Diffstat (limited to 'apps/Notes/components/List.js')
-rw-r--r-- | apps/Notes/components/List.js | 98 |
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} + /> + ) ) } |