diff options
Diffstat (limited to 'apps/Notes/components')
-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 |
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> |