diff options
Diffstat (limited to 'apps/Notes')
-rw-r--r-- | apps/Notes/components/Actions.js | 1 | ||||
-rw-r--r-- | apps/Notes/components/Export.js | 22 | ||||
-rw-r--r-- | apps/Notes/components/Import.js | 26 | ||||
-rw-r--r-- | apps/Notes/components/List.js | 96 | ||||
-rw-r--r-- | apps/Notes/components/ListItem.js | 24 | ||||
-rw-r--r-- | apps/Notes/components/NoteEdit.js | 14 | ||||
-rw-r--r-- | apps/Notes/components/NoteView.js | 20 | ||||
-rw-r--r-- | apps/Notes/helpers/copyToClipboard.js | 2 | ||||
-rw-r--r-- | apps/Notes/helpers/export.js | 6 | ||||
-rw-r--r-- | apps/Notes/helpers/fileName.js | 2 | ||||
-rw-r--r-- | apps/Notes/helpers/import.js | 22 | ||||
-rw-r--r-- | apps/Notes/helpers/noteActions.js | 38 | ||||
-rw-r--r-- | apps/Notes/hooks/useNotes.js | 4 | ||||
-rw-r--r-- | apps/Notes/hooks/useSort.js | 10 |
14 files changed, 145 insertions, 142 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> diff --git a/apps/Notes/helpers/copyToClipboard.js b/apps/Notes/helpers/copyToClipboard.js index afaf7f6..4ec1b39 100644 --- a/apps/Notes/helpers/copyToClipboard.js +++ b/apps/Notes/helpers/copyToClipboard.js @@ -4,7 +4,7 @@ const copyToClipboard = (text, t, setPopup) => { .then(() => { setPopup({ content: t('notes_copy_success'), - time: 2000, + time: 2000 }) }) .catch(() => { diff --git a/apps/Notes/helpers/export.js b/apps/Notes/helpers/export.js index 4a0db9c..cdb6ae3 100644 --- a/apps/Notes/helpers/export.js +++ b/apps/Notes/helpers/export.js @@ -23,10 +23,10 @@ export const handleExport = (e, ids, notes) => { Promise.all(ids.map(async id => { const title = notes.find(n => n.noteId === id).title - const {content} = await fetchJson(`/api/notes/${id}`) - zip.folder('notes').file(filename(title), content, {binary: true}) + const { content } = await fetchJson(`/api/notes/${id}`) + zip.folder('notes').file(filename(title), content, { binary: true }) })).then(() => { - zip.generateAsync({type:"blob"}) + zip.generateAsync({ type: 'blob' }) .then(c => saveFile(c, 'notes.zip', 'application/zip')) }) } diff --git a/apps/Notes/helpers/fileName.js b/apps/Notes/helpers/fileName.js index f5d4a8e..f8bd1ed 100644 --- a/apps/Notes/helpers/fileName.js +++ b/apps/Notes/helpers/fileName.js @@ -1,3 +1,3 @@ -const filename = (t) => t.toLowerCase().replaceAll(' ', '-')+'.txt' +const filename = (t) => t.toLowerCase().replaceAll(' ', '-') + '.txt' export default filename diff --git a/apps/Notes/helpers/import.js b/apps/Notes/helpers/import.js index c0c3714..bbdceaa 100644 --- a/apps/Notes/helpers/import.js +++ b/apps/Notes/helpers/import.js @@ -1,12 +1,12 @@ import fetchJson from 'helpers/fetchJson' -import {faCheck, faTimes} from '@fortawesome/free-solid-svg-icons' -import {FontAwesomeIcon} from '@fortawesome/react-fontawesome' +import { faCheck, faTimes } from '@fortawesome/free-solid-svg-icons' +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' export const state = s => s && <span><FontAwesomeIcon icon={s === 1 ? faCheck : faTimes} /></span> -export const color = s => s && {color: s === 1 ? 'green' : 'brown'} +export const color = s => s && { color: s === 1 ? 'green' : 'brown' } -const readFileAsText = (file) => new Promise((resolve,reject) => { - let fr = new FileReader() +const readFileAsText = (file) => new Promise((resolve, reject) => { + const fr = new FileReader() fr.onload = () => resolve(fr.result) fr.onerror = () => reject(fr) @@ -15,22 +15,22 @@ const readFileAsText = (file) => new Promise((resolve,reject) => { }) export const handleImport = async (e, files, mutateNotes, setDone) => { - e.preventDefault(); + e.preventDefault() Array.from(files).forEach(async (file, i) => { - const title = file.name.replace(/\.[^/.]+$/, "") - const content = await readFileAsText(file); + const title = file.name.replace(/\.[^/.]+$/, '') + const content = await readFileAsText(file) try { const notes = await fetchJson('/api/notes', { method: 'POST', headers: { 'Content-Type': 'application/json' }, - body: JSON.stringify({title, content}), + body: JSON.stringify({ title, content }) }) if (i === files.length - 1) await mutateNotes(notes) - setDone((prev) => ({...prev, [i]: 1})) + setDone((prev) => ({ ...prev, [i]: 1 })) } catch (e) { - setDone((prev) => ({...prev, [i]: 0})) + setDone((prev) => ({ ...prev, [i]: 0 })) } }) } diff --git a/apps/Notes/helpers/noteActions.js b/apps/Notes/helpers/noteActions.js index f864e58..d934229 100644 --- a/apps/Notes/helpers/noteActions.js +++ b/apps/Notes/helpers/noteActions.js @@ -4,15 +4,15 @@ import filename from '../helpers/fileName' export const getNote = async (note, setFetchedNote, t, setPopup, callback) => { try { - const {content} = await fetchJson(`/api/notes/${note.noteId}`) - setFetchedNote({ ...note, content}) + const { content } = await fetchJson(`/api/notes/${note.noteId}`) + setFetchedNote({ ...note, content }) callback() } catch (err) { setFetchedNote() setPopup({ content: t('notes_open_error'), time: 2000, - error: true, + error: true }) } } @@ -26,19 +26,19 @@ export const addNote = async (e, mutateNotes, setAction, t, setPopup) => { await fetchJson('/api/notes', { method: 'POST', headers: { 'Content-Type': 'application/json' }, - body: JSON.stringify({title, content}), + body: JSON.stringify({ title, content }) }) ) setPopup({ content: t('notes_added'), - time: 2000, + time: 2000 }) setAction('') } catch (e) { setPopup({ - content: t(notes_added_error), + content: t('notes_added_error'), time: 2000, - error: true, + error: true }) } } @@ -46,26 +46,26 @@ export const addNote = async (e, mutateNotes, setAction, t, setPopup) => { export const updateNote = async (e, note, mutateNotes, setAction, t, setPopup) => { const content = e.currentTarget.content.value const title = e.currentTarget.title.value - const {_id, noteId} = note + const { _id, noteId } = note try { mutateNotes( await fetchJson(`/api/notes/${_id}`, { method: 'PUT', headers: { 'Content-Type': 'application/json' }, - body: JSON.stringify({title, noteId, content}), + body: JSON.stringify({ title, noteId, content }) }) ) setPopup({ content: t('notes_updated'), - time: 2000, + time: 2000 }) setAction('') } catch (e) { setPopup({ content: t('notes_updated_error'), time: 2000, - error: true, + error: true }) } } @@ -77,34 +77,34 @@ export const removeNote = (e, _id, mutateNotes, t, setPopup, setAction) => { try { await mutateNotes( await fetchJson(`/api/notes/${_id}`, { - method: 'DELETE', + method: 'DELETE' }) ) setPopup({ content: t('notes_removed'), - time: 2000, + time: 2000 }) setAction('') } catch (err) { setPopup({ content: t('notes_removed_error'), time: 2000, - error: true, + error: true }) } } setPopup({ content: t('notes_remove_confirm'), - yes: {label: t('remove'), action: remove}, - no: {label: t('cancel'), action: async () => {}}, - error: true, + yes: { label: t('remove'), action: remove }, + no: { label: t('cancel'), action: async () => {} }, + error: true }) } export const exportNote = async note => { - const {title} = note - const {content} = note.content + const { title } = note + const { content } = note.content ? note : await fetchJson(`/api/notes/${note.noteId}`) diff --git a/apps/Notes/hooks/useNotes.js b/apps/Notes/hooks/useNotes.js index 586ceeb..d02be10 100644 --- a/apps/Notes/hooks/useNotes.js +++ b/apps/Notes/hooks/useNotes.js @@ -1,7 +1,7 @@ import useSWR from 'swr' -export default function useNotes(){ +export default function useNotes () { const { data: notes, error, mutate: mutateNotes } = useSWR('/api/notes') - return {notes, mutateNotes, error} + return { notes, mutateNotes, error } } diff --git a/apps/Notes/hooks/useSort.js b/apps/Notes/hooks/useSort.js index 78c01b4..e3cf230 100644 --- a/apps/Notes/hooks/useSort.js +++ b/apps/Notes/hooks/useSort.js @@ -1,12 +1,12 @@ -import {useState} from 'react' -import {faSortAmountDown, faSortAmountUp} from '@fortawesome/free-solid-svg-icons' -import {FontAwesomeIcon} from '@fortawesome/react-fontawesome' +import { useState } from 'react' +import { faSortAmountDown, faSortAmountUp } from '@fortawesome/free-solid-svg-icons' +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' const useSort = (d) => { const [sort, setSort] = useState(d) - const sortedBy = s => Math.abs(sort) === s && <FontAwesomeIcon icon={sort>0 ? faSortAmountDown : faSortAmountUp} /> - const sortBy = s => sort === s ? setSort(-1*s) : setSort(s) + const sortedBy = s => Math.abs(sort) === s && <FontAwesomeIcon icon={sort > 0 ? faSortAmountDown : faSortAmountUp} /> + const sortBy = s => sort === s ? setSort(-1 * s) : setSort(s) const sortFn = (a, b) => { const d = sort > 0 ? 1 : -1 switch (Math.abs(sort)) { |