1 files changed, 52 insertions, 43 deletions

diff --git a/pages/index.js b/pages/index.js
index 4b420fb..ee1c277 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -1,73 +1,82 @@
 import styles from 'styles/Main.module.scss'
-import React, {useState} from 'react'
+import React, {useState, useEffect} from 'react'
 import useUser from 'lib/useUser'
-import {Layout, App} from 'components'
+import {Layout, App, Splash} from 'components'
 import {open} from 'helpers/windowActions'
-import {Notes} from 'apps'
-
-const appList = {
-  Notes,
-};
+import appList from 'helpers/appList'
+import Context from '../context';
 
 const Home = () => {
+  const [settings, setSettings] = useState()
   const [apps, setApps] = useState([])
-  useUser({
+  const {user} = useUser({
     redirectToLogin: true,
     redirectToVerify: true,
     redirectToApps: true,
   })
 
-  const handleClick = (e, appName) => {
+  useEffect(() => {
+    if (user) {
+      setSettings({theme: user.theme, language: user.language})
+    }
+  }, [user])
+
+  if (!user) return (
+    <Layout><Splash fixed /></Layout>
+  )
+
+  const handleClick = (e, appProps) => {
     switch (e.detail) {
       case 1:
         e.currentTarget.focus()
         break;
       case 2:
-        open(appName, apps, setApps)
+        open(appProps, setApps)
         e.currentTarget.blur()
         break;
     }
   };
 
-  const handleKey = (e, appName) => {
+  const handleKey = (e, appProps) => {
     if (e.key === 'Enter') {
-      open(appName, apps, setApps)
+      open(appProps, setApps)
     }
   }
 
   return (
-    <Layout apps={apps} setApps={setApps}>
-      <>
-        {
-          Object.keys(appList).map(appName => (
-            <div
-              key={`${appName}_icon`}
-              className={styles.icon}
-              onClick={e => handleClick(e, appName)}
-              onKeyDown={e => handleKey(e, appName)}
-              tabIndex="0"
-            >
-              <img src={`./${appName.toLowerCase()}.svg`} alt={`${appName} Icon`} />
-              <p>{appName}</p>
-            </div>
-          ))
-        }
-        { apps && apps.map(app => {
-           const AppName = appList[app.name]
+      <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
 
-           return (
-             <App
-               key={`${app.name}_app`}
-               app={app}
-               apps={apps}
-               setApps={setApps}
-             >
-               <AppName />
-             </App>
-           );
-        })}
-      </>
-    </Layout>
+              return (
+                <App
+                  key={`${app.name}_app`}
+                  app={app}
+                  setApps={setApps}
+                >
+                  <AppComponent />
+                </App>
+              );
+            })}
+          </>
+        </Layout>
+      </Context.Provider>
   )
 }