settings

1 files changed, 68 insertions, 0 deletions

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