diff options
Diffstat (limited to 'apps/Settings')
| -rw-r--r-- | apps/Settings/api.js | 10 | ||||
| -rw-r--r-- | apps/Settings/components/Settings.js | 64 | ||||
| -rw-r--r-- | apps/Settings/styles/Settings.module.scss | 18 |
3 files changed, 60 insertions, 32 deletions
diff --git a/apps/Settings/api.js b/apps/Settings/api.js new file mode 100644 index 0000000..559486f --- /dev/null +++ b/apps/Settings/api.js @@ -0,0 +1,10 @@ +import fetchJson from 'helpers/fetchJson' + +export const saveSettings = async (data) => { + fetchJson('/api/settings', { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify(data), + }) +} + diff --git a/apps/Settings/components/Settings.js b/apps/Settings/components/Settings.js index 2d7f238..c09a1bd 100644 --- a/apps/Settings/components/Settings.js +++ b/apps/Settings/components/Settings.js @@ -1,64 +1,64 @@ 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 React from 'react' import {close} from 'helpers/windowActions' +import useUser from 'hooks/useUser' +import usePopup from 'hooks/usePopup' +import useSettings from 'hooks/useSettings' +import useApps from 'hooks/useApps' +import {saveSettings} from '../api' const Settings = () => { const {setPopup} = usePopup() - const {settings: {theme, language}, setSettings, setApps} = useContext(Context) + const {setApps} = useApps() + const {settings: {theme, language}, setSettings, t} = useSettings() 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}), - }) + saveSettings({_id: user._id, theme, language}) + .then(() => { setPopup({ - content: 'Settings saved', + content: t('settings_saved'), time: 2000, }) close('Settings', setApps) - } catch (err) { + }) + .catch(() => { setpopup({ - content: 'could not save settings', + content: t('settings_save_error'), time: 2000, error: true, }) - } + }) } return ( <div className={styles.settings}> - <div>Language:</div> + <div>{t('language')}</div> <div> - <span className={styles.settings__active}>English</span> + {['en', 'pl', 'es', 'de'].map(l => ( + <span + key={l} + className={language === l ? styles.settings__langactive : ''} + onClick={()=>{setSettings(prev => ({...prev, language: l}))}} + >{l.toUpperCase()}</span> + ))} </div> - <div>Theme: </div> + <div>{t('color_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 : ''} - /> + {['green', 'blue', 'black'].map(c => ( + <span + key={c} + onClick={()=>{setSettings(prev => ({...prev, theme: c}))}} + className={theme === c ? styles.settings__active : ''} + /> + ))} </div> <input type="button" className="window__button" - value="Save" + value={t('save')} onClick={handleSave} /> </div> diff --git a/apps/Settings/styles/Settings.module.scss b/apps/Settings/styles/Settings.module.scss index 9edef38..0944dcc 100644 --- a/apps/Settings/styles/Settings.module.scss +++ b/apps/Settings/styles/Settings.module.scss @@ -14,6 +14,24 @@ margin-top: .5em; } + &:nth-of-type(2) { + span { + padding: 0 .75em; + transition: .3s color; + display: inline-block; + color: var(--color-decor); + + &:hover { + color: #666; + } + } + + .settings__langactive { + color: var(--color-text); + font-weight: 600; + } + } + &:nth-of-type(3) { margin-top: 3em; } |