aboutsummaryrefslogtreecommitdiffstats
path: root/apps
diff options
context:
space:
mode:
Diffstat (limited to 'apps')
-rw-r--r--apps/Notes/Notes.module.scss35
-rw-r--r--apps/Notes/components/List.js2
-rw-r--r--apps/Notes/components/ListItem.js13
-rw-r--r--apps/Notes/components/NoteEdit.js6
-rw-r--r--apps/Notes/components/NoteView.js8
-rw-r--r--apps/Notes/components/Splash.js13
-rw-r--r--apps/Notes/helpers/noteActions.js2
-rw-r--r--apps/Settings/components/Settings.js68
-rw-r--r--apps/Settings/index.js3
-rw-r--r--apps/Settings/styles/Settings.module.scss51
-rw-r--r--apps/index.js1
11 files changed, 138 insertions, 64 deletions
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)}
>
- <td
- >
+ <td>
<span>{`${note.title}`}</span>
<span onClick={e => handleNoteAction('editNote', note, e)}>
<FontAwesomeIcon icon={faEdit} />
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 <Splash />
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}) => (
- <div className={type === 'connection' ? styles.connection : styles.loader}>
- <FontAwesomeIcon icon={type === 'connection' ? faBan : faSpinner} />
- <p>{type === 'connection' ? 'No connection' : 'Loading...'}</p>
- </div>
-)
-
-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 (
+ <div className={styles.settings}>
+ <div>Language:</div>
+ <div>
+ <span className={styles.settings__active}>English</span>
+ </div>
+ <div>Theme: </div>
+ <div>
+ <span
+ onClick={()=>{setSettings({language, theme:'green'})}}
+ className={theme === 'green' ? styles.settings__active : ''}
+ />
+ <span
+ onClick={()=>{setSettings({language, theme:'blue'})}}
+ className={theme === 'blue' ? styles.settings__active : ''}
+ />
+ <span
+ onClick={()=>{setSettings({language, theme:'black'})}}
+ className={theme === 'black' ? styles.settings__active : ''}
+ />
+ </div>
+ <input
+ type="button"
+ className="window__button"
+ value="Save"
+ onClick={handleSave}
+ />
+ </div>
+ )
+}
+
+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'