blob: 516c0ecd366d8ee558e504b4bf4b714ff76ead62 (
plain) (
blame)
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
|
import styles from '../styles/Notes.module.scss'
import React, { useState } from 'react'
import useSettings from 'hooks/useSettings'
import useNotes from '../hooks/useNotes'
import { handleSelect, handleSelectAll, handleExport } from '../helpers/export'
import { faCheck, faTimes } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
const Export = ({ setAction }) => {
const { notes } = useNotes()
const { t } = useSettings()
const [ids, setIds] = useState(notes.map(n => n.noteId))
const sortFn = (a, b) => new Date(b.updated_at) - new Date(a.updated_at)
if (!notes) return null
return (
<section>
<div className='window__submenu'>
<div>
<div onClick={() => { setAction('') }}>{t('back')}</div>
</div>
</div>
<div className={`window__scroll ${styles.export}`}>
<h3>{t('notes_click_to_export')}</h3>
<input
className='window__button'
type='submit'
value={t('export')}
onClick={e => handleExport(e, ids, notes)}
/>
<p>{t('notes_to_export')}</p>
<div className={styles.export__select}>
<label>
<input
type='checkbox'
name='selectAll'
onChange={e => handleSelectAll(e, notes, setIds)}
checked={notes.length === ids.length}
className='hidden'
/>
<span style={{ color: notes.length === ids.length ? 'green' : 'brown' }}>
<FontAwesomeIcon icon={notes.length === ids.length ? faCheck : faTimes} />
</span>
{t('select_all')}
</label>
</div>
<ul>
{notes.sort(sortFn).map(note => {
const checked = ids.includes(note.noteId)
return (
<li key={note.noteId}>
<label>
<input
type='checkbox'
name={note.noteId}
value={note.noteId}
checked={ids.includes(note.noteId)}
onChange={() => handleSelect(note.noteId, ids, setIds)}
className='hidden'
/>
<span style={{ color: checked ? 'green' : 'brown' }}>
<FontAwesomeIcon icon={checked ? faCheck : faTimes} />
</span>
{note.title}
</label>
</li>
)
})}
</ul>
</div>
</section>
)
}
export default Export
|
