From 9f74c550927671f4ded301d0cf3e9d592716375c Mon Sep 17 00:00:00 2001 From: piotrruss Date: Sun, 22 Aug 2021 14:33:54 +0200 Subject: settings --- apps/Notes/Notes.module.scss | 35 ---------------- apps/Notes/components/List.js | 2 +- apps/Notes/components/ListItem.js | 13 +++--- apps/Notes/components/NoteEdit.js | 6 +-- apps/Notes/components/NoteView.js | 8 ++-- apps/Notes/components/Splash.js | 13 ------ apps/Notes/helpers/noteActions.js | 2 +- apps/Settings/components/Settings.js | 68 +++++++++++++++++++++++++++++++ apps/Settings/index.js | 3 ++ apps/Settings/styles/Settings.module.scss | 51 +++++++++++++++++++++++ apps/index.js | 1 + 11 files changed, 138 insertions(+), 64 deletions(-) delete mode 100644 apps/Notes/components/Splash.js create mode 100644 apps/Settings/components/Settings.js create mode 100644 apps/Settings/index.js create mode 100644 apps/Settings/styles/Settings.module.scss (limited to 'apps') diff --git a/apps/Notes/Notes.module.scss b/apps/Notes/Notes.module.scss index e2dbe06..a87adac 100644 --- a/apps/Notes/Notes.module.scss +++ b/apps/Notes/Notes.module.scss @@ -242,38 +242,3 @@ margin: .5em .5em 0 0; } } - -.loader, -.connection { - display: flex; - justify-content: center; - align-items: center; - height: 100%; - flex-direction: column; - - @keyframes rotating { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } - } - - svg { - font-size: 600%; - color: #ccc; - } - - p { - padding-top: 1em; - color: #ccc; - font-weight: 600; - } -} - -.loader { - svg { - animation: rotating 1s linear infinite; - } -} diff --git a/apps/Notes/components/List.js b/apps/Notes/components/List.js index 54f66b5..1fd03af 100644 --- a/apps/Notes/components/List.js +++ b/apps/Notes/components/List.js @@ -5,7 +5,7 @@ import useNotes from '../hooks/useNotes' import useSort from '../hooks/useSort' import ListItem from './ListItem' import Actions from './Actions' -import Splash from './Splash' +import {Splash} from 'components' const List = () => { const [fetchedNote, setFetchedNote] = useState() diff --git a/apps/Notes/components/ListItem.js b/apps/Notes/components/ListItem.js index 0e34ffc..4a404db 100644 --- a/apps/Notes/components/ListItem.js +++ b/apps/Notes/components/ListItem.js @@ -1,10 +1,10 @@ import styles from '../Notes.module.scss' -import React, { useContext } from 'react' +import React from 'react' import {getNote, exportNote, removeNote} from '../helpers/noteActions.js' import useNotes from '../hooks/useNotes' -import Context from 'context'; -import { faEdit, faDownload, faTrash } from '@fortawesome/free-solid-svg-icons' -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' +import usePopup from 'hooks/usePopup' +import {faEdit, faDownload, faTrash } from '@fortawesome/free-solid-svg-icons' +import {FontAwesomeIcon} from '@fortawesome/react-fontawesome' const datestring = date => { const d = new Date(date); @@ -13,8 +13,8 @@ const datestring = date => { }; const ListItem = ({note, setAction, setFetchedNote, setLoading}) => { + const {setPopup} = usePopup() const {mutateNotes} = useNotes() - const {setPopup} = useContext(Context) const handleNoteAction = async (a, note, e) => { if (e) e.stopPropagation() @@ -28,8 +28,7 @@ const ListItem = ({note, setAction, setFetchedNote, setLoading}) => { key={note._id} onClick={() => handleNoteAction('showNote', note)} > - + {`${note.title}`} handleNoteAction('editNote', note, e)}> diff --git a/apps/Notes/components/NoteEdit.js b/apps/Notes/components/NoteEdit.js index ad936a4..40a33c0 100644 --- a/apps/Notes/components/NoteEdit.js +++ b/apps/Notes/components/NoteEdit.js @@ -1,12 +1,12 @@ import styles from '../Notes.module.scss' -import React, {useContext} from 'react' -import Context from 'context'; +import React from 'react' import useNotes from '../hooks/useNotes' +import usePopup from 'hooks/usePopup' import {addNote, updateNote} from '../helpers/noteActions.js' const NoteEdit = ({setAction, fetchedNote}) => { const {mutateNotes} = useNotes() - const {setPopup} = useContext(Context) + const {setPopup} = usePopup() const handleSubmit = e => { e.preventDefault() diff --git a/apps/Notes/components/NoteView.js b/apps/Notes/components/NoteView.js index 29aba34..6926b09 100644 --- a/apps/Notes/components/NoteView.js +++ b/apps/Notes/components/NoteView.js @@ -1,14 +1,14 @@ import styles from '../Notes.module.scss' -import React, {useContext} from 'react'; -import Context from 'context'; +import React from 'react'; import useNotes from '../hooks/useNotes' +import usePopup from 'hooks/usePopup' import {removeNote, exportNote} from '../helpers/noteActions.js' import copyToClipboard from '../helpers/copyToClipboard.js' -import Splash from './Splash' +import Splash from 'components/Splash' const NoteView = ({fetchedNote, setFetchedNote, setAction}) => { + const {setPopup} = usePopup() const {mutateNotes} = useNotes() - const {setPopup} = useContext(Context) if (!fetchedNote) return if (fetchedNote.error) { diff --git a/apps/Notes/components/Splash.js b/apps/Notes/components/Splash.js deleted file mode 100644 index b17fa6b..0000000 --- a/apps/Notes/components/Splash.js +++ /dev/null @@ -1,13 +0,0 @@ -import styles from '../Notes.module.scss' -import React from 'react' -import {FontAwesomeIcon} from '@fortawesome/react-fontawesome' -import {faBan, faSpinner} from '@fortawesome/free-solid-svg-icons' - -const Splash = ({type}) => ( -
- -

{type === 'connection' ? 'No connection' : 'Loading...'}

-
-) - -export default Splash diff --git a/apps/Notes/helpers/noteActions.js b/apps/Notes/helpers/noteActions.js index 7b51e20..4b47011 100644 --- a/apps/Notes/helpers/noteActions.js +++ b/apps/Notes/helpers/noteActions.js @@ -99,7 +99,7 @@ export const removeNote = (e, _id, mutateNotes, setPopup, setAction) => { setPopup({ content: 'Do you want to remove note?', yes: { label: 'Remove', action: remove }, - no: { label: 'Cancel', action: () => {} }, + no: { label: 'Cancel', action: async () => {} }, error: true, }) } diff --git a/apps/Settings/components/Settings.js b/apps/Settings/components/Settings.js new file mode 100644 index 0000000..2d7f238 --- /dev/null +++ b/apps/Settings/components/Settings.js @@ -0,0 +1,68 @@ +import styles from '../styles/Settings.module.scss' +import React, {useContext} from 'react' +import fetchJson from 'lib/fetchJson' +import useUser from 'lib/useUser' +import usePopup from 'hooks/usePopup' +import Context from 'context'; +import {close} from 'helpers/windowActions' + +const Settings = () => { + const {setPopup} = usePopup() + const {settings: {theme, language}, setSettings, setApps} = useContext(Context) + const {user} = useUser() + + const handleSave = e => { + e.preventDefault; + + try { + fetchJson('/api/settings', { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({_id: user._id, theme, language}), + }) + setPopup({ + content: 'Settings saved', + time: 2000, + }) + close('Settings', setApps) + } catch (err) { + setpopup({ + content: 'could not save settings', + time: 2000, + error: true, + }) + } + } + + return ( +
+
Language:
+
+ English +
+
Theme:
+
+ {setSettings({language, theme:'green'})}} + className={theme === 'green' ? styles.settings__active : ''} + /> + {setSettings({language, theme:'blue'})}} + className={theme === 'blue' ? styles.settings__active : ''} + /> + {setSettings({language, theme:'black'})}} + className={theme === 'black' ? styles.settings__active : ''} + /> +
+ +
+ ) +} + +export default Settings diff --git a/apps/Settings/index.js b/apps/Settings/index.js new file mode 100644 index 0000000..0a09ad4 --- /dev/null +++ b/apps/Settings/index.js @@ -0,0 +1,3 @@ +import Settings from './components/Settings' + +export default Settings diff --git a/apps/Settings/styles/Settings.module.scss b/apps/Settings/styles/Settings.module.scss new file mode 100644 index 0000000..9edef38 --- /dev/null +++ b/apps/Settings/styles/Settings.module.scss @@ -0,0 +1,51 @@ +.settings { + text-align: center; + padding: 1em; + + span { + padding: .5em; + } + + div { + text-align: left; + margin: 1.5em 0; + + &:nth-of-type(1) { + margin-top: .5em; + } + + &:nth-of-type(3) { + margin-top: 3em; + } + + &:nth-of-type(4) > span { + width: 2em; + height: 2em; + display: inline-block; + margin: 0 1em; + outline-offset: 4px; + + &:nth-of-type(1) { + background-color: #53e3a6; + } + + &:nth-of-type(2) { + background-color: #2986b3; + } + + &:nth-of-type(3) { + background-color: #000; + } + } + } + + input { + margin: 1em auto; + } + + &__active { + outline: 3px solid var(--color-window-buttons); + } +} + + diff --git a/apps/index.js b/apps/index.js index fa08e0e..08b454a 100644 --- a/apps/index.js +++ b/apps/index.js @@ -1 +1,2 @@ export {default as Notes} from './Notes' +export {default as Settings} from './Settings' -- cgit v1.2.3