From 9f74c550927671f4ded301d0cf3e9d592716375c Mon Sep 17 00:00:00 2001
From: piotrruss <mail@pruss.it>
Date: Sun, 22 Aug 2021 14:33:54 +0200
Subject: settings

---
 pages/_app.js         |  5 ++-
 pages/api/login.js    |  4 +--
 pages/api/register.js |  4 +--
 pages/api/settings.js | 27 +++++++++++++++
 pages/index.js        | 95 ++++++++++++++++++++++++++++-----------------------
 pages/verify.js       |  3 +-
 6 files changed, 89 insertions(+), 49 deletions(-)
 create mode 100644 pages/api/settings.js

(limited to 'pages')

diff --git a/pages/_app.js b/pages/_app.js
index 4625291..0fec9f6 100644
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -1,4 +1,5 @@
 import { SWRConfig } from 'swr'
+import {PopupProvider} from 'hooks/usePopup'
 import fetchJson from 'lib/fetchJson'
 import '/styles/global.scss'
 
@@ -12,7 +13,9 @@ function MyApp({Component, pageProps}) {
         },
       }}
     >
-      <Component {...pageProps} />
+      <PopupProvider>
+        <Component {...pageProps} />
+      </PopupProvider>
     </SWRConfig>
   )
 }
diff --git a/pages/api/login.js b/pages/api/login.js
index 30edda1..db39bda 100644
--- a/pages/api/login.js
+++ b/pages/api/login.js
@@ -10,10 +10,10 @@ export default withSession(async (req, res) => {
   switch (method) {
     case 'POST':
       try {
-        const {_id, email, isVerified, noteList} = await User.findByCredentials(req.body.email, req.body.password);
+        const {_id, email, isVerified, noteList, theme, language} = await User.findByCredentials(req.body.email, req.body.password);
         if (!email) { throw new Error('Something went wrong') }
 
-        const user = {_id, email, isVerified, isLoggedIn: true, noteList}
+        const user = {_id, email, isVerified, isLoggedIn: true, noteList, theme, language}
         req.session.set('user', user)
         await req.session.save()
         res.status(201).json(user)
diff --git a/pages/api/register.js b/pages/api/register.js
index f89e347..1407146 100644
--- a/pages/api/register.js
+++ b/pages/api/register.js
@@ -13,12 +13,12 @@ export default withSession(async (req, res) => {
       try {
         const noteList = await NoteList.create({})
 
-        const {_id, email, verificationKey: key} = await User.create({...req.body, noteList})
+        const {_id, email, verificationKey: key, theme, language} = await User.create({...req.body, noteList})
         if (!email) { throw new Error('Something went wrong') }
 
         sendMail(req.body.email, subject, text(key), html(key))
 
-        const user = {_id, email, noteList, isVerified: false, isLoggedIn: true}
+        const user = {_id, email, noteList, theme, language, isVerified: false, isLoggedIn: true}
         req.session.set('user', user)
         await req.session.save()
         res.status(201).json(user)
diff --git a/pages/api/settings.js b/pages/api/settings.js
new file mode 100644
index 0000000..e70868e
--- /dev/null
+++ b/pages/api/settings.js
@@ -0,0 +1,27 @@
+import withSession from 'lib/withSession'
+import User from 'models/User'
+import dbConnect from 'lib/dbConnect'
+
+export default withSession(async (req, res) => {
+  await dbConnect()
+
+  switch (req.method) {
+    case 'POST':
+      try {
+        if (req.body.theme && req.body.language) {
+          const user = await User.saveSettings(req.body)
+          req.session.set('user', user)
+          await req.session.save()
+          res.status(200).json(user)
+        }
+      } catch (error) {
+        console.log(error)
+        res.status(400).send()
+      }
+      break
+    default:
+      res.status(400).send()
+      break
+  }
+})
+
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>
   )
 }
 
diff --git a/pages/verify.js b/pages/verify.js
index 7161d67..5991035 100644
--- a/pages/verify.js
+++ b/pages/verify.js
@@ -3,6 +3,7 @@ import {useState} from 'react'
 import useUser from 'lib/useUser'
 import fetchJson from 'lib/fetchJson'
 import {Layout} from 'components'
+import Splash from 'components/Splash'
 
 const Verify = () => {
   const {user, mutateUser} = useUser({
@@ -48,7 +49,7 @@ const Verify = () => {
       {!user
         ? (
           <div className="window window--popup">
-            <p>Loading...</p>
+            <Splash />
           </div>
         ) : (
           <div className={`window window--popup ${styles.verify}`}>
-- 
cgit v1.2.3