make settings app closeable

2 files changed, 9 insertions, 4 deletions

diff --git a/apps/Settings/components/Settings.js b/apps/Settings/components/Settings.js
index b4a5619..de3217c 100644
--- a/apps/Settings/components/Settings.js
+++ b/apps/Settings/components/Settings.js
@@ -1,5 +1,5 @@
 import styles from '../styles/Settings.module.scss'
-import React from 'react'
+import React, { useEffect } from 'react'
 import { close } from 'helpers/windowActions'
 import useUser from 'hooks/useUser'
 import usePopup from 'hooks/usePopup'
@@ -11,18 +11,23 @@ const Settings = () => {
   const { setPopup } = usePopup()
   const { setApps } = useApps()
   const { settings: { theme, language }, setSettings, t } = useSettings()
-  const { user } = useUser()
+  const { user, mutateUser } = useUser()
+
+  useEffect(() => () => {
+    setSettings(prev => ({ ...prev, theme: user.theme, language: user.language }))
+    close('Settings', setApps)
+  }, [user])
 
   const handleSave = e => {
     e.preventDefault()
 
     saveSettings({ _id: user._id, theme, language })
       .then(() => {
+        mutateUser({ ...user, theme, language }, false)
         setPopup({
           content: t('settings_saved'),
           time: 2000
         })
-        close('Settings', setApps)
       })
       .catch(() => {
         setPopup({
diff --git a/configs/appList.js b/configs/appList.js
index 7bfec3e..13ca6d6 100644
--- a/configs/appList.js
+++ b/configs/appList.js
@@ -4,7 +4,7 @@ const appList = {
   Calculator: { component: Calculator, icon: true, buttons: ['min', 'close'], height: '30em', width: '20em' },
   Notes: { component: Notes, icon: true, buttons: ['min', 'max', 'close'], height: '48em', width: '64em' },
   Player: { component: Player, icon: true, buttons: ['min', 'max', 'close'], height: '48em', width: '64em' },
-  Settings: { component: Settings, icon: false, buttons: ['min'], height: '23em', width: '16em' },
+  Settings: { component: Settings, icon: false, buttons: ['min', 'close'], height: '23em', width: '16em' },
   Youtube: { component: Youtube, icon: true, buttons: ['min', 'max', 'close'], height: '48em', width: '64em' }
 }