1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
|
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 Actions from './Actions'
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 onClick={() => setAction('import')}>Import</div>
<div onClick={() => {}}>Export</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>
</>
) : (
<Actions
action={action}
setAction={setAction}
fetchedNote={fetchedNote}
setFetchedNote={setFetchedNote}
/>
)
}
<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
|
