diff options
Diffstat (limited to 'pages')
| -rw-r--r-- | pages/_app.js | 5 | ||||
| -rw-r--r-- | pages/api/login.js | 4 | ||||
| -rw-r--r-- | pages/api/register.js | 4 | ||||
| -rw-r--r-- | pages/api/settings.js | 27 | ||||
| -rw-r--r-- | pages/index.js | 95 | ||||
| -rw-r--r-- | pages/verify.js | 3 |
6 files changed, 89 insertions, 49 deletions
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}`}> |