aboutsummaryrefslogtreecommitdiffstats
path: root/apps/Notes/components
diff options
context:
space:
mode:
Diffstat (limited to 'apps/Notes/components')
-rw-r--r--apps/Notes/components/Actions.js1
-rw-r--r--apps/Notes/components/Export.js22
-rw-r--r--apps/Notes/components/Import.js26
-rw-r--r--apps/Notes/components/List.js96
-rw-r--r--apps/Notes/components/ListItem.js24
-rw-r--r--apps/Notes/components/NoteEdit.js14
-rw-r--r--apps/Notes/components/NoteView.js20
7 files changed, 103 insertions, 100 deletions
diff --git a/apps/Notes/components/Actions.js b/apps/Notes/components/Actions.js
index 9591cfa..c3fefed 100644
--- a/apps/Notes/components/Actions.js
+++ b/apps/Notes/components/Actions.js
@@ -43,4 +43,3 @@ const Actions = ({
}
export default Actions
-
diff --git a/apps/Notes/components/Export.js b/apps/Notes/components/Export.js
index eeeab8f..4ab1d64 100644
--- a/apps/Notes/components/Export.js
+++ b/apps/Notes/components/Export.js
@@ -1,12 +1,12 @@
import styles from '../styles/Notes.module.scss'
-import React, {useState} from 'react'
+import React, { useState } from 'react'
import useSettings from 'hooks/useSettings'
import useNotes from '../hooks/useNotes'
-import {handleSelect, handleSelectAll, handleExport} from '../helpers/export'
+import { handleSelect, handleSelectAll, handleExport } from '../helpers/export'
-const Export = ({setAction}) => {
- const {notes} = useNotes()
- const {t} = useSettings()
+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)
@@ -16,21 +16,21 @@ const Export = ({setAction}) => {
<section>
<div className='window__submenu'>
<div>
- <div onClick={() => {setAction('')}}>{t('back')}</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"
+ 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}>
<input
- type="checkbox"
+ type='checkbox'
name='selectAll'
onChange={e => handleSelectAll(e, notes, setIds)}
checked={notes.length === ids.length}
@@ -41,7 +41,7 @@ const Export = ({setAction}) => {
{notes.sort(sortFn).map(note => (
<li key={note.noteId}>
<input
- type="checkbox"
+ type='checkbox'
name={note.noteId}
value={note.noteId}
checked={ids.includes(note.noteId)}
@@ -49,7 +49,7 @@ const Export = ({setAction}) => {
/>
<label htlmfor={note.noteId}>
{note.title}
- </label><br/>
+ </label><br />
</li>
))}
</ul>
diff --git a/apps/Notes/components/Import.js b/apps/Notes/components/Import.js
index 1c90008..5827310 100644
--- a/apps/Notes/components/Import.js
+++ b/apps/Notes/components/Import.js
@@ -1,31 +1,31 @@
import styles from '../styles/Notes.module.scss'
-import React, {useState} from 'react'
+import React, { useState } from 'react'
import useSettings from 'hooks/useSettings'
import useNotes from '../hooks/useNotes'
-import {state, color, handleImport, handleChange} from '../helpers/import'
+import { state, color, handleImport, handleChange } from '../helpers/import'
-const Import = ({setAction}) => {
- const {t} = useSettings()
+const Import = ({ setAction }) => {
+ const { t } = useSettings()
const [files, setFiles] = useState()
const [done, setDone] = useState([])
- const {mutateNotes} = useNotes()
+ const { mutateNotes } = useNotes()
return (
<section className={styles.import}>
<div className='window__submenu'>
- <div onClick={() => {setAction('')}}>{t('back')}</div>
+ <div onClick={() => { setAction('') }}>{t('back')}</div>
</div>
<div className='window__scroll'>
<form onSubmit={e => handleImport(e, files, mutateNotes, setDone)}>
{t('notes_import')}
<div>
- <label className="window__button">
+ <label className='window__button'>
{t('choose_files')}
<input
- name="import"
- type="file"
- multiple="multiple"
- accept="text/plain"
+ name='import'
+ type='file'
+ multiple='multiple'
+ accept='text/plain'
onChange={e => handleChange(e, setFiles, setDone)}
/>
</label>
@@ -38,8 +38,8 @@ const Import = ({setAction}) => {
</ul>
{
done.length === 0
- ? <input type="submit" value={t('import')} className="window__button" />
- : <p>{t('import_finished')}<br/><br/>{t('notes_import_go_back')}</p>
+ ? <input type='submit' value={t('import')} className='window__button' />
+ : <p>{t('import_finished')}<br /><br />{t('notes_import_go_back')}</p>
}
</>
)}
diff --git a/apps/Notes/components/List.js b/apps/Notes/components/List.js
index 238e305..05d0711 100644
--- a/apps/Notes/components/List.js
+++ b/apps/Notes/components/List.js
@@ -1,24 +1,24 @@
import styles from '../styles/Notes.module.scss'
-import React, {useState, useEffect} from 'react'
+import React, { useState, useEffect } from 'react'
import useUser from 'hooks/useUser'
import useSettings from 'hooks/useSettings'
import useNotes from '../hooks/useNotes'
import useSort from '../hooks/useSort'
import ListItem from './ListItem'
import Actions from './Actions'
-import {Splash} from 'components'
+import { Splash } from 'components'
const List = () => {
const [fetchedNote, setFetchedNote] = useState()
const [action, setAction] = useState('')
const [loading, setLoading] = useState(false)
const [showSort, setShowSort] = useState(false)
- const {notes, error} = useNotes()
+ const { notes, error } = useNotes()
const [sortedBy, sortBy, sortFn] = useSort(3)
- const {t} = useSettings()
- const {user} = useUser({
+ const { t } = useSettings()
+ const { user } = useUser({
redirectToLogin: true,
- redirectToVerify: true,
+ redirectToVerify: true
})
useEffect(() => {
@@ -32,33 +32,34 @@ const List = () => {
}
return (
- action === '' ? (
- <>
- <div className='window__submenu'>
- <div>
- <div onClick={() => setAction('addNote')}>{t('notes_new')}</div>
- <div className='mobile-only' onClick={() => {setShowSort(s => !s)}}>{t('sort')}</div>
- <div onClick={() => setAction('importNotes')}>{t('import')}</div>
- <div onClick={() => setAction('exportNotes')}>{t('export')}</div>
+ action === ''
+ ? (
+ <>
+ <div className='window__submenu'>
+ <div>
+ <div onClick={() => setAction('addNote')}>{t('notes_new')}</div>
+ <div className='mobile-only' onClick={() => { setShowSort(s => !s) }}>{t('sort')}</div>
+ <div onClick={() => setAction('importNotes')}>{t('import')}</div>
+ <div onClick={() => setAction('exportNotes')}>{t('export')}</div>
+ </div>
</div>
- </div>
- <div className='window__scroll'>
- <table className={styles.notesList}>
- <thead className={showSort ? styles.mobileSort : 'desktop-only'}>
- <tr className="mobile-only">
- <th>{t('sort_by')}</th>
- </tr>
- <tr>
- <th onClick={() => sortBy(1)}>{t('title')} {sortedBy(1)}</th>
- <th onClick={() => sortBy(2)}>{t('created')} {sortedBy(2)}</th>
- <th onClick={() => sortBy(3)}>{t('modified')} {sortedBy(3)}</th>
- </tr>
- <tr className='mobile-only'>
- <td className='window__button' onClick={() => setShowSort(false)}>{t('close')}</td>
- </tr>
- </thead>
- <tbody>
- {
+ <div className='window__scroll'>
+ <table className={styles.notesList}>
+ <thead className={showSort ? styles.mobileSort : 'desktop-only'}>
+ <tr className='mobile-only'>
+ <th>{t('sort_by')}</th>
+ </tr>
+ <tr>
+ <th onClick={() => sortBy(1)}>{t('title')} {sortedBy(1)}</th>
+ <th onClick={() => sortBy(2)}>{t('created')} {sortedBy(2)}</th>
+ <th onClick={() => sortBy(3)}>{t('modified')} {sortedBy(3)}</th>
+ </tr>
+ <tr className='mobile-only'>
+ <td className='window__button' onClick={() => setShowSort(false)}>{t('close')}</td>
+ </tr>
+ </thead>
+ <tbody>
+ {
notes.length > 0
? (notes.sort(sortFn).map(note => (
<ListItem
@@ -68,23 +69,26 @@ const List = () => {
setFetchedNote={setFetchedNote}
setLoading={setLoading}
/>
- ))) : (
+ )))
+ : (
<tr>
<td>{t('notes_list_empty')}</td>
</tr>
- )}
- </tbody>
- </table>
- </div>
- </>
- ) : (
- <Actions
- action={action}
- setAction={setAction}
- fetchedNote={fetchedNote}
- setFetchedNote={setFetchedNote}
- />
- )
+ )
+}
+ </tbody>
+ </table>
+ </div>
+ </>
+ )
+ : (
+ <Actions
+ action={action}
+ setAction={setAction}
+ fetchedNote={fetchedNote}
+ setFetchedNote={setFetchedNote}
+ />
+ )
)
}
diff --git a/apps/Notes/components/ListItem.js b/apps/Notes/components/ListItem.js
index 2b1e832..3a22b0e 100644
--- a/apps/Notes/components/ListItem.js
+++ b/apps/Notes/components/ListItem.js
@@ -1,22 +1,22 @@
import styles from '../styles/Notes.module.scss'
import React from 'react'
-import {getNote, exportNote, removeNote} from '../helpers/noteActions.js'
+import { getNote, exportNote, removeNote } from '../helpers/noteActions.js'
import useSettings from 'hooks/useSettings'
import usePopup from 'hooks/usePopup'
import useNotes from '../hooks/useNotes'
-import {faEdit, faDownload, faTrash } from '@fortawesome/free-solid-svg-icons'
-import {FontAwesomeIcon} from '@fortawesome/react-fontawesome'
+import { faEdit, faDownload, faTrash } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
const datestring = date => {
- const d = new Date(date);
- return ("0" + d.getDate()).slice(-2) + "-" + ("0"+(d.getMonth()+1)).slice(-2) + "-" +
- d.getFullYear() + " " + ("0" + d.getHours()).slice(-2) + ":" + ("0" + d.getMinutes()).slice(-2)
-};
+ const d = new Date(date)
+ return ('0' + d.getDate()).slice(-2) + '-' + ('0' + (d.getMonth() + 1)).slice(-2) + '-' +
+ d.getFullYear() + ' ' + ('0' + d.getHours()).slice(-2) + ':' + ('0' + d.getMinutes()).slice(-2)
+}
-const ListItem = ({note, setAction, setFetchedNote, setLoading}) => {
- const {t} = useSettings()
- const {setPopup} = usePopup()
- const {mutateNotes} = useNotes()
+const ListItem = ({ note, setAction, setFetchedNote, setLoading }) => {
+ const { t } = useSettings()
+ const { setPopup } = usePopup()
+ const { mutateNotes } = useNotes()
const handleNoteAction = async (a, note, e) => {
if (e) e.stopPropagation()
@@ -35,7 +35,7 @@ const ListItem = ({note, setAction, setFetchedNote, setLoading}) => {
<span onClick={e => handleNoteAction('editNote', note, e)}>
<FontAwesomeIcon icon={faEdit} />
</span>
- <span onClick={e => {e.stopPropagation(); exportNote(note)}}>
+ <span onClick={e => { e.stopPropagation(); exportNote(note) }}>
<FontAwesomeIcon icon={faDownload} />
</span>
<span onClick={e => removeNote(e, note._id, mutateNotes, t, setPopup, setAction)}>
diff --git a/apps/Notes/components/NoteEdit.js b/apps/Notes/components/NoteEdit.js
index 45d226f..0ffe1f3 100644
--- a/apps/Notes/components/NoteEdit.js
+++ b/apps/Notes/components/NoteEdit.js
@@ -3,12 +3,12 @@ import React from 'react'
import usePopup from 'hooks/usePopup'
import useSettings from 'hooks/useSettings'
import useNotes from '../hooks/useNotes'
-import {addNote, updateNote} from '../helpers/noteActions.js'
+import { addNote, updateNote } from '../helpers/noteActions.js'
-const NoteEdit = ({setAction, fetchedNote}) => {
- const {t} = useSettings()
- const {setPopup} = usePopup()
- const {mutateNotes} = useNotes()
+const NoteEdit = ({ setAction, fetchedNote }) => {
+ const { t } = useSettings()
+ const { setPopup } = usePopup()
+ const { mutateNotes } = useNotes()
const handleSubmit = e => {
e.preventDefault()
@@ -38,13 +38,13 @@ const NoteEdit = ({setAction, fetchedNote}) => {
<div className='note__buttons'>
<span
className='window__button'
- onClick={() => {setAction(fetchedNote ? 'showNote' : '')}}
+ onClick={() => { setAction(fetchedNote ? 'showNote' : '') }}
>
{t('cancel')}
</span>
<input
className='window__button'
- type="submit"
+ type='submit'
value={fetchedNote ? t('notes_save') : t('notes_add')}
/>
</div>
diff --git a/apps/Notes/components/NoteView.js b/apps/Notes/components/NoteView.js
index b92c7c7..c6afe1f 100644
--- a/apps/Notes/components/NoteView.js
+++ b/apps/Notes/components/NoteView.js
@@ -1,16 +1,16 @@
import styles from '../styles/Notes.module.scss'
-import React from 'react';
+import React from 'react'
import useSettings from 'hooks/useSettings'
import usePopup from 'hooks/usePopup'
import useNotes from '../hooks/useNotes'
-import {removeNote, exportNote} from '../helpers/noteActions.js'
+import { removeNote, exportNote } from '../helpers/noteActions.js'
import copyToClipboard from '../helpers/copyToClipboard.js'
import Splash from 'components/Splash'
-const NoteView = ({fetchedNote, setFetchedNote, setAction}) => {
- const {t} = useSettings()
- const {setPopup} = usePopup()
- const {mutateNotes} = useNotes()
+const NoteView = ({ fetchedNote, setFetchedNote, setAction }) => {
+ const { t } = useSettings()
+ const { setPopup } = usePopup()
+ const { mutateNotes } = useNotes()
if (!fetchedNote) return <Splash />
if (fetchedNote.error) {
@@ -18,17 +18,17 @@ const NoteView = ({fetchedNote, setFetchedNote, setAction}) => {
setAction('')
}
- const {_id, content, title} = fetchedNote
+ const { _id, content, title } = fetchedNote
return (
<section className={styles.noteView}>
<div className='window__submenu'>
<div>
- <div onClick={() => {setFetchedNote(); setAction('')}}>{t('back')}</div>
+ <div onClick={() => { setFetchedNote(); setAction('') }}>{t('back')}</div>
<div onClick={() => copyToClipboard(content, t, setPopup)}>{t('copy')}</div>
- <div onClick={() => {setAction('editNote')}}>{t('edit')}</div>
+ <div onClick={() => { setAction('editNote') }}>{t('edit')}</div>
<div onClick={() => exportNote(fetchedNote)}>{t('export')}</div>
- <div onClick={e => {removeNote(e, _id, mutateNotes, t, setPopup, setAction)}}>{t('remove')}</div>
+ <div onClick={e => { removeNote(e, _id, mutateNotes, t, setPopup, setAction) }}>{t('remove')}</div>
</div>
</div>