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

---
 components/App.js    | 46 ++++++++++++++++++++++++++++++----------------
 components/Header.js | 33 ++++++++++++++++++++++++++-------
 components/Layout.js | 42 +++++++++++++++++++-----------------------
 components/Popup.js  | 38 +++++++++++++++-----------------------
 components/Splash.js | 13 +++++++++++++
 components/index.js  |  2 ++
 6 files changed, 105 insertions(+), 69 deletions(-)
 create mode 100644 components/Splash.js

(limited to 'components')

diff --git a/components/App.js b/components/App.js
index a68e593..59fd5a0 100644
--- a/components/App.js
+++ b/components/App.js
@@ -3,11 +3,11 @@ import {close, toggleMin, toggleMax, move} from 'helpers/windowActions'
 import {faArrowUp, faExpandAlt, faTimes, faCompressAlt} from '@fortawesome/free-solid-svg-icons'
 import {FontAwesomeIcon} from '@fortawesome/react-fontawesome'
 
-const App = ({children, app, apps, setApps}) => {
+const App = ({children, app, setApps}) => {
   const winRef = useRef(null);
 
   useEffect(() => {
-    move(app.name, winRef, apps, setApps)
+    move(app.name, winRef, setApps)
   }, [])
 
   return (
@@ -15,26 +15,40 @@ const App = ({children, app, apps, setApps}) => {
       <div
         ref={winRef}
         className={
-          'list window'
+          'window'
           + (app.min ? ' hidden' : '')
           + (app.max ? ' maximized' : '')
         }
-        style={app.pos.length ? {top: app.pos[1], left: app.pos[0]} : {}}
-        tabIndex={0}
+        style={{
+          maxHeight: app.height,
+          maxWidth: app.width,
+          ...app.pos.length
+            ? {top: app.pos[1], left: app.pos[0]}
+            : {
+                // top: `calc((( 100vh - ${app.height} ) / 2) + 2em)`,
+                // left: `calc(( 100vw - ${app.width} ) / 2)`,
+            }
+        }}
       >
-        <h2 className='window__title'>Notes</h2>
+        <h2 className='window__title'>{app.name}</h2>
+        <div className='window__content'>{children}</div>
         <div className='window__title-buttons'>
-          <span onClick={() => toggleMin('Notes', apps, setApps)}>
-            <FontAwesomeIcon icon={faArrowUp} />
-          </span>
-          <span onClick={() => toggleMax('Notes', apps, setApps)}>
-            <FontAwesomeIcon icon={app.max ? faCompressAlt : faExpandAlt} />
-          </span>
-          <span onClick={() => close('Notes', apps, setApps)}>
-            <FontAwesomeIcon icon={faTimes} />
-          </span>
+          { app.buttons.includes('min') && (
+            <span onClick={() => toggleMin(app.name, setApps)}>
+              <FontAwesomeIcon icon={faArrowUp} />
+            </span>
+          )}
+          { app.buttons.includes('max') && (
+            <span onClick={() => toggleMax(app.name, setApps)}>
+              <FontAwesomeIcon icon={app.max ? faCompressAlt : faExpandAlt} />
+            </span>
+          )}
+          { app.buttons.includes('close') && (
+            <span onClick={() => close(app.name, setApps)}>
+              <FontAwesomeIcon icon={faTimes} />
+            </span>
+          )}
         </div>
-        <div className='window__content'>{children}</div>
       </div>
     </>
   )
diff --git a/components/Header.js b/components/Header.js
index a208e70..5279c80 100644
--- a/components/Header.js
+++ b/components/Header.js
@@ -1,10 +1,12 @@
 import styles from 'styles/Main.module.scss'
 import React, {useState} from 'react'
+import {useRouter} from 'next/router'
 import Link from 'next/link'
 import useUser from 'lib/useUser'
 import fetchJson from 'lib/fetchJson'
-import {toggleMin} from 'helpers/windowActions'
-import {useRouter} from 'next/router'
+import {focus, toggleMin} from 'helpers/windowActions'
+import {open} from 'helpers/windowActions'
+import appList from 'helpers/appList'
 
 const Header = ({apps, setApps}) => {
   const [userMenu, setUserMenu] = useState(false);
@@ -20,18 +22,32 @@ const Header = ({apps, setApps}) => {
     router.push('/login')
   }
 
+
+  const handleClick = (app, setApps) => {
+    if (app.min) {
+      toggleMin(app.name, setApps)
+    }
+    focus(app.name, setApps)
+  }
+
   return (
     <header className={styles.header}>
       <nav>
         <ul>
           {
-            apps && apps.map(app => (
+            apps && [...apps].sort((a,b) => a.name > b.name).map(app => (
               <li
                 key={app.name}
-                style={app.min ? {fontWeight: 600} : {}}
-                onClick={() => toggleMin(app.name, apps, setApps)}
+                onClick={() => handleClick(app, setApps)}
               >
-                <span>{app.name}</span>
+                <span
+                  style={{
+                    ...apps.findIndex(a => a.name === app.name) === apps.length - 1 ? {fontWeight: 600} : {},
+                    ...app.min ? {color: '#888'} : {}
+                  }}
+                >
+                  {app.name}
+                </span>
               </li>
             ))
           }
@@ -64,7 +80,10 @@ const Header = ({apps, setApps}) => {
                   <div className={styles.headerOverlay} onClick={() => setUserMenu(false)} />
                   <ul className={styles.submenu}>
                     <li>
-                      <span onClick={() => {}}>
+                      <span onClick={() => {
+                        open({appName: 'Settings', ...appList.Settings}, setApps)
+                        setUserMenu()
+                      }}>
                         Settings
                       </span>
                     </li>
diff --git a/components/Layout.js b/components/Layout.js
index 0b8348c..e915285 100644
--- a/components/Layout.js
+++ b/components/Layout.js
@@ -1,30 +1,26 @@
 import styles from 'styles/Main.module.scss'
-import React, {useState} from 'react'
+import React from 'react'
 import Head from 'next/head'
-import Context from '../context';
-import Header from './Header'
-import Popup from './Popup'
+import {Header, Popup} from 'components'
 import PropTypes from 'prop-types'
 
-const Layout = ({ children, apps, setApps}) => {
-  const [options, setOptions] = useState({theme: 'dark'})
-  const [popup, setPopup] = useState({})
-
-  return (
-    <Context.Provider value={{ setPopup }}>
-      <section className={styles.layout+' '+options.theme}>
-        <Head>
-          <title>My Apps</title>
-        </Head>
-        <main>
-          <div className="container">{children}</div>
-        </main>
-        <Header apps={apps} setApps={setApps} />
-        <Popup popup={popup} />
-      </section>
-    </Context.Provider>
-  )
-}
+const Layout = ({
+  children,
+  apps,
+  setApps,
+  settings,
+}) => (
+  <section className={styles.layout +' '+ (settings ? settings.theme : 'green')}>
+    <Head>
+      <title>My Apps</title>
+    </Head>
+    <main>
+      <div className="container">{children}</div>
+    </main>
+    <Header apps={apps} setApps={setApps} />
+    <Popup/>
+  </section>
+)
 
 export default Layout
 
diff --git a/components/Popup.js b/components/Popup.js
index 911d2fa..3df11c5 100644
--- a/components/Popup.js
+++ b/components/Popup.js
@@ -1,32 +1,24 @@
-import React, {useState, useEffect} from 'react'
+import React from 'react'
+import usePopup from 'hooks/usePopup'
 
-const Popup = ({popup}) => {
-  const [visible, setVisible] = useState(false)
-  const {
-    content = null,
-    time = null,
-    error = null,
-    yes = null,
-    no = null,
-  } = popup
+const Popup = () => {
+  const {popupData: p} = usePopup()
 
-  useEffect(() => {
-    setVisible(true)
-    time && setTimeout(() => setVisible(false), time)
-  }, [popup])
+  if (!p || !p.content) return null
 
-  if (!content) return null
-
-  return visible ? (
-    <div className={`window window--popup${error ? ' window--error' : ''}`}>
-      <div className="window__content--popup">{ content }</div>
+  return (
+    <div className={`window window--popup${p.error ? ' window--error' : ''}`}>
+      <div className="window__content--popup">{p.content}</div>
       {
-        (yes || no) && (<div className="window__buttons--popup">
-          {[yes, no].map(a => a && <input key={a.label} className='window__button' type="button" onClick={() => { setVisible(false); a.action() }} value={a.label} />)}
-        </div>)
+        (p.yes || p.no) && (
+          <div className="window__buttons--popup">
+            {[p.no, p.yes].map(a => a && <input key={a.label} className='window__button' type="button" onClick={async () => a.action()} value={a.label} />)}
+          </div>
+        )
       }
     </div>
-  ) : null
+  )
 }
 
 export default Popup
+
diff --git a/components/Splash.js b/components/Splash.js
new file mode 100644
index 0000000..7976de4
--- /dev/null
+++ b/components/Splash.js
@@ -0,0 +1,13 @@
+import styles from 'styles/Main.module.scss'
+import React from 'react'
+import {FontAwesomeIcon} from '@fortawesome/react-fontawesome'
+import {faBan, faSpinner} from '@fortawesome/free-solid-svg-icons'
+
+const Splash = ({type, fixed = false}) => (
+  <div className={`${type === 'connection' ? styles.connection : styles.loader} ${fixed ? styles.fixed : ''}`}>
+    <FontAwesomeIcon icon={type === 'connection' ? faBan : faSpinner} />
+    <p>{type === 'connection' ? 'No connection' : 'Loading...'}</p>
+  </div>
+)
+
+export default Splash
diff --git a/components/index.js b/components/index.js
index 4875559..19d8173 100644
--- a/components/index.js
+++ b/components/index.js
@@ -2,3 +2,5 @@ export {default as Form} from './Form'
 export {default as Header} from './Header'
 export {default as Layout} from './Layout'
 export {default as App} from './App'
+export {default as Popup} from './Popup'
+export {default as Splash} from './Splash'
-- 
cgit v1.2.3