1 files changed, 37 insertions, 44 deletions
diff --git a/pages/index.js b/pages/index.js
index ee1c277..b441362 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -1,26 +1,21 @@
 import styles from 'styles/Main.module.scss'
-import React, {useState, useEffect} from 'react'
-import useUser from 'lib/useUser'
+import React from 'react'
+import useUser from 'hooks/useUser'
+import useSettings from 'hooks/useSettings'
+import useApps from 'hooks/useApps'
 import {Layout, App, Splash} from 'components'
 import {open} from 'helpers/windowActions'
-import appList from 'helpers/appList'
-import Context from '../context';
+import appList from 'configs/appList'
 
 const Home = () => {
-  const [settings, setSettings] = useState()
-  const [apps, setApps] = useState([])
+  const {t} = useSettings()
+  const {apps, setApps} = useApps()
   const {user} = useUser({
     redirectToLogin: true,
     redirectToVerify: true,
     redirectToApps: true,
   })
 
-  useEffect(() => {
-    if (user) {
-      setSettings({theme: user.theme, language: user.language})
-    }
-  }, [user])
-
   if (!user) return (
     <Layout><Splash fixed /></Layout>
   )
@@ -44,39 +39,37 @@ const Home = () => {
   }
 
   return (
-      <Context.Provider value={{settings, setSettings, setApps}}>
-        <Layout apps={apps} setApps={setApps} settings={settings}>
-          <>
-            {
-              Object.entries(appList).filter(a => a[1].icon).map(a => (
-                <div
-                  key={`${a[0]}_icon`}
-                  className={styles.icon}
-                  onClick={e => handleClick(e, {appName: a[0], ...a[1]})}
-                  onKeyDown={e => handleKey(e, {appName: a[0], ...a[1]})}
-                  tabIndex="0"
-                >
-                  <img src={`./${a[0].toLowerCase()}.svg`} alt={`${a[0]} Icon`} />
-                  <p>{a[0]}</p>
-                </div>
-              ))
-            }
-            {apps && apps.map(app => {
-              const AppComponent = appList[app.name].component
+    <Layout apps={apps} setApps={setApps}>
+      <>
+        {
+          Object.entries(appList).filter(a => a[1].icon).map(a => (
+            <div
+              key={`${a[0]}_icon`}
+              className={styles.icon}
+              onClick={e => handleClick(e, {appName: a[0], ...a[1]})}
+              onKeyDown={e => handleKey(e, {appName: a[0], ...a[1]})}
+              tabIndex="0"
+            >
+              <img src={`./${a[0].toLowerCase()}.svg`} alt={`${a[0]} Icon`} />
+              <p>{t(a[0])}</p>
+            </div>
+          ))
+        }
+        {apps && apps.map(app => {
+          const AppComponent = appList[app.name].component
 
-              return (
-                <App
-                  key={`${app.name}_app`}
-                  app={app}
-                  setApps={setApps}
-                >
-                  <AppComponent />
-                </App>
-              );
-            })}
-          </>
-        </Layout>
-      </Context.Provider>
+          return (
+            <App
+              key={`${app.name}_app`}
+              app={app}
+              setApps={setApps}
+            >
+              <AppComponent />
+            </App>
+          );
+        })}
+      </>
+    </Layout>
   )
 }