finish translations, force maximize

13 files changed, 128 insertions, 109 deletions

diff --git a/pages/_app.js b/pages/_app.js
index 0fec9f6..637b096 100644
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -1,6 +1,8 @@
 import { SWRConfig } from 'swr'
+import {SettingsProvider} from 'hooks/useSettings'
 import {PopupProvider} from 'hooks/usePopup'
-import fetchJson from 'lib/fetchJson'
+import {AppsProvider} from 'hooks/useApps'
+import fetchJson from 'helpers/fetchJson'
 import '/styles/global.scss'
 
 function MyApp({Component, pageProps}) {
@@ -13,9 +15,13 @@ function MyApp({Component, pageProps}) {
         },
       }}
     >
-      <PopupProvider>
-        <Component {...pageProps} />
-      </PopupProvider>
+      <SettingsProvider>
+        <PopupProvider>
+          <AppsProvider>
+            <Component {...pageProps} />
+          </AppsProvider>
+        </PopupProvider>
+      </SettingsProvider>
     </SWRConfig>
   )
 }
diff --git a/pages/api/login.js b/pages/api/login.js
index db39bda..038097c 100644
--- a/pages/api/login.js
+++ b/pages/api/login.js
@@ -1,5 +1,5 @@
-import withSession from 'lib/withSession'
-import dbConnect from 'lib/dbConnect'
+import withSession from 'hocs/withSession'
+import dbConnect from 'configs/dbConnect'
 import User from 'models/User'
 
 export default withSession(async (req, res) => {
diff --git a/pages/api/logout.js b/pages/api/logout.js
index 8c7a766..04e5160 100644
--- a/pages/api/logout.js
+++ b/pages/api/logout.js
@@ -1,4 +1,4 @@
-import withSession from 'lib/withSession'
+import withSession from 'hocs/withSession'
 
 export default withSession(async (req, res) => {
   req.session.destroy()
diff --git a/pages/api/note/[id].js b/pages/api/note/[id].js
index 46278c8..1781210 100644
--- a/pages/api/note/[id].js
+++ b/pages/api/note/[id].js
@@ -1,5 +1,5 @@
-import dbConnect from 'lib/dbConnect'
-import withSession from 'lib/withSession'
+import dbConnect from 'configs/dbConnect'
+import withSession from 'hocs/withSession'
 import Note from 'models/Note'
 
 export default withSession(async (req, res) => {
diff --git a/pages/api/notes.js b/pages/api/notes.js
index 79ab281..0439a7a 100644
--- a/pages/api/notes.js
+++ b/pages/api/notes.js
@@ -1,5 +1,5 @@
-import dbConnect from 'lib/dbConnect'
-import withSession from 'lib/withSession'
+import dbConnect from 'configs/dbConnect'
+import withSession from 'hocs/withSession'
 import NoteList from 'models/NoteList'
 import Note from 'models/Note'
 
diff --git a/pages/api/register.js b/pages/api/register.js
index 1407146..e14044e 100644
--- a/pages/api/register.js
+++ b/pages/api/register.js
@@ -1,6 +1,6 @@
-import dbConnect from 'lib/dbConnect'
-import withSession from 'lib/withSession'
-import sendMail from 'lib/sendMail'
+import dbConnect from 'configs/dbConnect'
+import sendMail from 'configs/sendMail'
+import withSession from 'hocs/withSession'
 import {subject, text, html} from 'helpers/email'
 import User from 'models/User'
 import NoteList from 'models/NoteList'
@@ -16,14 +16,13 @@ export default withSession(async (req, res) => {
         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))
+        sendMail(req.body.email, subject(language), text(language, key), html(language, key))
 
         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)
       } catch (error) {
-        console.log(error)
         res.status(400).json({isLoggedIn: false})
       }
       break
diff --git a/pages/api/settings.js b/pages/api/settings.js
index e70868e..0de5e73 100644
--- a/pages/api/settings.js
+++ b/pages/api/settings.js
@@ -1,6 +1,6 @@
-import withSession from 'lib/withSession'
+import dbConnect from 'configs/dbConnect'
+import withSession from 'hocs/withSession'
 import User from 'models/User'
-import dbConnect from 'lib/dbConnect'
 
 export default withSession(async (req, res) => {
   await dbConnect()
diff --git a/pages/api/user.js b/pages/api/user.js
index 59db3b6..44c7fc3 100644
--- a/pages/api/user.js
+++ b/pages/api/user.js
@@ -1,5 +1,5 @@
-import dbConnect from 'lib/dbConnect'
-import withSession from 'lib/withSession'
+import dbConnect from 'configs/dbConnect'
+import withSession from 'hocs/withSession'
 import User from 'models/User'
 
 export default withSession(async (req, res) => {
diff --git a/pages/api/verify.js b/pages/api/verify.js
index 1606dbc..bdad434 100644
--- a/pages/api/verify.js
+++ b/pages/api/verify.js
@@ -1,7 +1,7 @@
-import withSession from 'lib/withSession'
-import dbConnect from 'lib/dbConnect'
-import sendMail from 'lib/sendMail'
+import dbConnect from 'configs/dbConnect'
+import sendMail from 'configs/sendMail'
 import User from 'models/User'
+import withSession from 'hocs/withSession'
 import {subject, text, html} from 'helpers/email'
 
 export default withSession(async (req, res) => {
@@ -10,13 +10,13 @@ export default withSession(async (req, res) => {
   switch (req.method) {
     case 'GET':
       try {
-        const {email} = req.session.get('user')
+        const {email, language: l} = req.session.get('user')
         if (!email) { throw new Error('Something went wrong') }
 
         const key = await User.getVerificationKey(email)
         if (!key) { throw new Error('Something went wrong') }
 
-        const response = await sendMail(email, subject, text(key), html(key))
+        const response = await sendMail(email, subject(l), text(l, key), html(l, key))
         if (!response?.accepted?.length) { throw new Error('Something went wrong') }
 
         res.status(204).send()
@@ -33,7 +33,6 @@ export default withSession(async (req, res) => {
           res.status(200).json(user)
         }
       } catch (error) {
-        console.log(error)
         res.status(400).send()
       }
       break
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>
   )
 }
 
diff --git a/pages/login.js b/pages/login.js
index 3fb2df6..533e8e8 100644
--- a/pages/login.js
+++ b/pages/login.js
@@ -1,24 +1,33 @@
-import { useState } from 'react'
-import useUser from 'lib/useUser'
+import {useState} from 'react'
+import useUser from 'hooks/useUser'
 import submitForm from 'helpers/submitForm'
-import {Layout, Form} from 'components'
+import {Layout, Form, Splash} from 'components'
 
 const Login = () => {
+  const [errorMsg, setErrorMsg] = useState('')
+  const [loading, setLoading] = useState(false)
   const {mutateUser} = useUser({
     redirectToVerify: true,
     redirectToApps: true,
   })
 
-  const [errorMsg, setErrorMsg] = useState('')
-  const handleSubmit = e => submitForm(e, '/api/login', mutateUser, setErrorMsg)
+  const handleSubmit = async e => {
+    setLoading(true)
+    await submitForm(e, '/api/login', mutateUser, setErrorMsg)
+    setLoading(false)
+  }
 
   return (
     <Layout>
-      <Form
-        isLogin
-        errorMessage={errorMsg}
-        onSubmit={handleSubmit}
-      />
+      {loading
+        ? <Splash fixed />
+        : (
+          <Form
+            isLogin
+            errorMessage={errorMsg}
+            onSubmit={handleSubmit}
+          />
+        )}
     </Layout>
   )
 }
diff --git a/pages/register.js b/pages/register.js
index 3a00504..5405432 100644
--- a/pages/register.js
+++ b/pages/register.js
@@ -1,22 +1,31 @@
-import {useState } from 'react'
-import useUser from 'lib/useUser'
+import {useState} from 'react'
+import useUser from 'hooks/useUser'
 import submitForm from 'helpers/submitForm'
-import {Layout, Form} from 'components'
+import {Layout, Form, Splash} from 'components'
 
 const Register = () => {
-  const { mutateUser } = useUser({
+  const [errorMsg, setErrorMsg] = useState('')
+  const [loading, setLoading] = useState(false)
+  const {mutateUser} = useUser({
     redirectToVerify: true,
   })
 
-  const [errorMsg, setErrorMsg] = useState('')
-  const handleSubmit = e => submitForm(e, '/api/register', mutateUser, setErrorMsg)
+  const handleSubmit = async e => {
+    setLoading(true)
+    await submitForm(e, '/api/register', mutateUser, setErrorMsg)
+    setLoading(false)
+  }
 
   return (
     <Layout>
-      <Form
-        errorMessage={errorMsg}
-        onSubmit={handleSubmit}
-      />
+      {loading
+        ? <Splash fixed />
+        : (
+          <Form
+            errorMessage={errorMsg}
+            onSubmit={handleSubmit}
+          />
+        )}
     </Layout>
   )
 }
diff --git a/pages/verify.js b/pages/verify.js
index 5991035..2f7c863 100644
--- a/pages/verify.js
+++ b/pages/verify.js
@@ -1,18 +1,21 @@
 import styles from 'styles/Main.module.scss'
 import {useState} from 'react'
-import useUser from 'lib/useUser'
-import fetchJson from 'lib/fetchJson'
+import useUser from 'hooks/useUser'
+import useSettings from 'hooks/useSettings'
+import fetchJson from 'helpers/fetchJson'
 import {Layout} from 'components'
 import Splash from 'components/Splash'
 
 const Verify = () => {
+  const {t} = useSettings()
+  const [errorMsg, setErrorMsg] = useState('')
+  const [loading, setLoading] = useState(false)
+  const [sending, setSending] = useState(false)
+  const [resent, setResent] = useState(false)
   const {user, mutateUser} = useUser({
     redirectToLogin: true,
     redirectToApps: true,
   })
-  const [errorMsg, setErrorMsg] = useState('')
-  const [sending, setSending] = useState(false)
-  const [resent, setResent] = useState(false)
 
   const handleSendMail = async e => {
     e.preventDefault()
@@ -22,7 +25,7 @@ const Verify = () => {
       await fetch('/api/verify')
       setResent(true)
     } catch (error) {
-      setErrorMsg('Could not send verification email')
+      setErrorMsg(t('verification_mail_error'))
     } finally {
       setSending(false)
     }
@@ -30,6 +33,7 @@ const Verify = () => {
 
   const handleKey = async e => {
     e.preventDefault()
+    setLoading(true)
     const key = e.currentTarget.key.value
     try {
       mutateUser(
@@ -40,36 +44,36 @@ const Verify = () => {
         })
       )
     } catch (err) {
-      setErrorMsg('Could not verify user')
+      setErrorMsg(t('verification_error'))
+    } finally {
+      setLoading(false)
     }
   }
 
   return (
     <Layout>
-      {!user
+      {!user || loading
         ? (
-          <div className="window window--popup">
-            <Splash />
-          </div>
+          <Splash fixed />
         ) : (
           <div className={`window window--popup ${styles.verify}`}>
-            <p>One last step missing</p>
-            <p>{`To start using Notes App type the verification code we sent to your email (${user.email}):`}</p>
+            <p>{t('verification_title')}</p>
+            <p>{`${t('verification_text')} ${user.email}`}</p>
             <form onSubmit={handleKey}>
-              <input type="text" placeholder="Verification key" name="key" />
-              <button className="window__button" type="submit">Verify</button>
+              <input type="text" placeholder={t('verification_key')} name="key" />
+              <button className="window__button" type="submit">{t('verify')}</button>
             </form>
             {
               sending
                 ? (
-                  <p>Sending...</p>
+                  <p>{t('sending')}</p>
                 ) : (
                   resent
                     ? (
-                      <p>Mail was successfully sent again, check your mailbox!</p>
+                      <p>{t('verification_sent_again')}</p>
                     ) : (
-                      <p>If you didn't get verification email&nbsp;
-                        <span className={styles.email} onClick={handleSendMail}>send it again</span>.
+                      <p>{t('verification_not_received')}&nbsp;
+                        <span className={styles.email} onClick={handleSendMail}>{t('verification_send_again')}</span>.
                       </p>
                     )
                 )