1 files changed, 32 insertions, 32 deletions
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>