From f08f6ca0a9d337efff280d4d1669a41b5d9c31c2 Mon Sep 17 00:00:00 2001
From: piotrruss <mail@pruss.it>
Date: Thu, 2 Sep 2021 22:28:11 +0200
Subject: finish translations, force maximize

---
 apps/Settings/api.js                      | 10 +++++
 apps/Settings/components/Settings.js      | 64 +++++++++++++++----------------
 apps/Settings/styles/Settings.module.scss | 18 +++++++++
 3 files changed, 60 insertions(+), 32 deletions(-)
 create mode 100644 apps/Settings/api.js

(limited to 'apps/Settings')

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;
     }
-- 
cgit v1.2.3