diff options
Diffstat (limited to 'components')
| -rw-r--r-- | components/App.js | 40 | ||||
| -rw-r--r-- | components/Form.js | 74 | ||||
| -rw-r--r-- | components/Header.js | 73 | ||||
| -rw-r--r-- | components/Layout.js | 20 | ||||
| -rw-r--r-- | components/Popup.js | 9 | ||||
| -rw-r--r-- | components/Splash.js | 8 | ||||
| -rw-r--r-- | components/index.js | 12 |
7 files changed, 115 insertions, 121 deletions
diff --git a/components/App.js b/components/App.js index c539e72..84268cb 100644 --- a/components/App.js +++ b/components/App.js @@ -1,53 +1,53 @@ -import React, {useEffect, useRef} from 'react' +import { useEffect, useRef } from 'react' import useSettings from 'hooks/useSettings' import useMediaQuery from 'hooks/useMediaQuery' -import {close, toggleMin, toggleMax, move, focus} from 'helpers/windowActions' -import {faArrowUp, faExpandAlt, faTimes, faCompressAlt} from '@fortawesome/free-solid-svg-icons' -import {FontAwesomeIcon} from '@fortawesome/react-fontawesome' +import { close, toggleMin, toggleMax, move, focus } from 'helpers/windowActions' +import { faArrowUp, faExpandAlt, faTimes, faCompressAlt } from '@fortawesome/free-solid-svg-icons' +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' -const App = ({children, app, setApps}) => { - const {t} = useSettings() - const winRef = useRef(null); - const forceMax = useMediaQuery(`(max-width: ${app.width}), (max-height: ${app.height})`); +const App = ({ children, app, setApps }) => { + const { t } = useSettings() + const winRef = useRef(null) + const forceMax = useMediaQuery(`(max-width: ${app.width}), (max-height: ${app.height})`) useEffect(() => { move(app, winRef, setApps) - }, []) + }, [app, setApps]) return ( <div ref={winRef} - onClick={() => {focus(app.name, setApps)}} + onClick={() => { focus(app.name, setApps) }} className={ - 'window' - + (app.min ? ' hidden' : '') - + (app.max || forceMax ? ' maximized' : '') + 'window' + + (app.min ? ' hidden' : '') + + (app.max || forceMax ? ' maximized' : '') } style={{ height: app.height, width: app.width, ...app.pos.length - ? {top: app.pos[1], left: app.pos[0]} + ? { top: app.pos[1], left: app.pos[0] } : { top: `calc((( 100vh - ${app.height} ) / 2) + 2em)`, - left: `calc(( 100vw - ${app.width} ) / 2)`, - } + left: `calc(( 100vw - ${app.width} ) / 2)` + } }} > <h2 className='window__title'>{t(app.name)}</h2> <div className='window__content'>{children}</div> <div className='window__title-buttons'> - { app.buttons.includes('min') && ( + {app.buttons.includes('min') && ( <span onClick={() => toggleMin(app.name, setApps)}> <FontAwesomeIcon icon={faArrowUp} /> </span> )} - { app.buttons.includes('max') && !forceMax && ( + {app.buttons.includes('max') && !forceMax && ( <span onClick={() => toggleMax(app.name, setApps)}> <FontAwesomeIcon icon={app.max ? faCompressAlt : faExpandAlt} /> </span> )} - { app.buttons.includes('close') && ( + {app.buttons.includes('close') && ( <span onClick={() => close(app.name, setApps)}> <FontAwesomeIcon icon={faTimes} /> </span> @@ -57,4 +57,4 @@ const App = ({children, app, setApps}) => { ) } -export default App; +export default App diff --git a/components/Form.js b/components/Form.js index 9a17660..681f13a 100644 --- a/components/Form.js +++ b/components/Form.js @@ -3,65 +3,65 @@ import React from 'react' import PropTypes from 'prop-types' import useSettings from 'hooks/useSettings' -const Form = ({errorMessage, onSubmit, isLogin}) => { - const {settings, setSettings, t} = useSettings() +const Form = ({ errorMessage, onSubmit, isLogin }) => { + const { settings, setSettings, t } = useSettings() const themeChange = c => { - setSettings(prev => ({...prev, theme: c})) + setSettings(prev => ({ ...prev, theme: c })) } const languageChange = l => { - setSettings(prev => ({...prev, language: l})) + setSettings(prev => ({ ...prev, language: l })) } return ( <form className={`window window--popup ${styles.userForm}`} onSubmit={onSubmit}> - <div className="window__content--popup"> + <div className='window__content--popup'> {isLogin ? t('log_in') : t('register_user')} </div> - <input type="email" name="email" placeholder="email" required /> - <input type="password" name="password" minLength="6" placeholder={t('password')} required /> + <input type='email' name='email' placeholder='email' required /> + <input type='password' name='password' minLength='6' placeholder={t('password')} required /> {!isLogin && ( <> - <input type="password" name="password_confirm" placeholder={t('confirm_password')} required /> + <input type='password' name='password_confirm' placeholder={t('confirm_password')} required /> <legend>{t('language')}</legend> <fieldset> - {['en', 'pl', 'es', 'de'].map(l => ( - <fieldset key={l}> - <input - id={`language_${l}`} - type="radio" - name="language" - value={l} - defaultChecked={settings.language === l} - onChange={() => languageChange(l)} - /> - <label htmlFor={`language_${l}`}>{l.toUpperCase()}</label> - </fieldset> - ))} + {['en', 'pl', 'es', 'de'].map(l => ( + <fieldset key={l}> + <input + id={`language_${l}`} + type='radio' + name='language' + value={l} + defaultChecked={settings.language === l} + onChange={() => languageChange(l)} + /> + <label htmlFor={`language_${l}`}>{l.toUpperCase()}</label> + </fieldset> + ))} </fieldset> <legend>{t('color_theme')}</legend> <fieldset> - {['green', 'blue', 'black'].map(c => ( - <fieldset key={c}> - <input - id={`theme_${c}`} - type="radio" - name="theme" - value={c} - defaultChecked={settings.theme === c} - onChange={() => themeChange(c)} - /> - <label htmlFor={`theme_${c}`} /> - </fieldset> - ))} + {['green', 'blue', 'black'].map(c => ( + <fieldset key={c}> + <input + id={`theme_${c}`} + type='radio' + name='theme' + value={c} + defaultChecked={settings.theme === c} + onChange={() => themeChange(c)} + /> + <label htmlFor={`theme_${c}`} /> + </fieldset> + ))} </fieldset> </> )} - <input className='window__button' type="submit" value={isLogin ? t('login') : t('register')} /> + <input className='window__button' type='submit' value={isLogin ? t('login') : t('register')} /> - {errorMessage && <p className="error">{t(errorMessage)}</p>} + {errorMessage && <p className='error'>{t(errorMessage)}</p>} </form> ) } @@ -70,5 +70,5 @@ export default Form Form.propTypes = { errorMessage: PropTypes.string, - onSubmit: PropTypes.func, + onSubmit: PropTypes.func } diff --git a/components/Header.js b/components/Header.js index 83f0ff9..32ec977 100644 --- a/components/Header.js +++ b/components/Header.js @@ -1,27 +1,26 @@ import styles from 'styles/Main.module.scss' -import React, {useState} from 'react' -import {useRouter} from 'next/router' +import React, { useState } from 'react' +import { useRouter } from 'next/router' import Link from 'next/link' import useUser from 'hooks/useUser' import fetchJson from 'helpers/fetchJson' -import {focus, toggleMin} from 'helpers/windowActions' -import {open, close} from 'helpers/windowActions' +import { focus, toggleMin, open, close } from 'helpers/windowActions' import appList from 'configs/appList' import useSettings from 'hooks/useSettings' -import {faTimes} from '@fortawesome/free-solid-svg-icons' -import {FontAwesomeIcon} from '@fortawesome/react-fontawesome' +import { faTimes } from '@fortawesome/free-solid-svg-icons' +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' -const Header = ({apps, setApps}) => { +const Header = ({ apps, setApps }) => { const [userMenu, setUserMenu] = useState(false) const [showApps, setShowApps] = useState(false) - const {user, mutateUser} = useUser() - const {t} = useSettings() + const { user, mutateUser } = useUser() + const { t } = useSettings() const router = useRouter() const handleLogout = async (e) => { e.preventDefault() mutateUser( - await fetchJson('/api/logout', {method: 'POST'}), + await fetchJson('/api/logout', { method: 'POST' }), false ) router.push('/login') @@ -39,13 +38,13 @@ const Header = ({apps, setApps}) => { <nav> <div> <span onClick={() => setShowApps(s => !s)} className='mobile-only'> - {apps && apps.length > 0 && apps[apps.length-1]?.name} + {apps && apps.length > 0 && apps[apps.length - 1]?.name} {apps && apps.length > 1 ? (' (' + (apps.length) + ')') : ''} </span> <ul className={showApps ? styles.showMobileAppList : 'desktop-only'}> - <li className="mobile-only">{t('open_apps')}</li> + <li className='mobile-only'>{t('open_apps')}</li> { - apps && [...apps].sort((a,b) => a.name > b.name ? 1 : -1).map(app => { + apps && [...apps].sort((a, b) => a.name > b.name ? 1 : -1).map(app => { if (!app) return null return ( <li @@ -54,8 +53,8 @@ const Header = ({apps, setApps}) => { > <span style={{ - ...apps.findIndex(a => a.name === app.name) === apps.length - 1 ? {fontWeight: 600} : {}, - ...app.min ? {color: '#888'} : {} + ...apps.findIndex(a => a.name === app.name) === apps.length - 1 ? { fontWeight: 600 } : {}, + ...app.min ? { color: '#888' } : {} }} > {t(app.name)} @@ -67,7 +66,7 @@ const Header = ({apps, setApps}) => { ) }) } - <li className="mobile-only"> + <li className='mobile-only'> <span onClick={() => setShowApps(false)} className='window__button'>{t('close')}</span> </li> </ul> @@ -75,14 +74,14 @@ const Header = ({apps, setApps}) => { <ul> {!user?.isLoggedIn && ( <li> - <Link href="/register"> + <Link href='/register'> <a>{t('register')}</a> </Link> </li> )} {!user?.isLoggedIn && ( <li> - <Link href="/login"> + <Link href='/login'> <a>{t('login')}</a> </Link> </li> @@ -92,30 +91,32 @@ const Header = ({apps, setApps}) => { <p className={styles.user} onClick={() => setUserMenu(!userMenu)} - >{user?.email}</p> + >{user?.email} + </p> { userMenu && ( - <> - <div className={styles.headerOverlay} onClick={() => setUserMenu(false)} /> - <ul className={styles.submenu}> - {user.isVerified && ( + <> + <div className={styles.headerOverlay} onClick={() => setUserMenu(false)} /> + <ul className={styles.submenu}> + {user.isVerified && ( + <li> + <span onClick={() => { + open({ appName: 'Settings', ...appList.Settings }, setApps) + setUserMenu() + }} + > + {t('Settings')} + </span> + </li> + )} <li> - <span onClick={() => { - open({appName: 'Settings', ...appList.Settings}, setApps) - setUserMenu() - }}> - {t('Settings')} + <span onClick={handleLogout}> + {t('logout')} </span> </li> - )} - <li> - <a href="/api/logout" onClick={handleLogout}> - {t('logout')} - </a> - </li> - </ul> - </> + </ul> + </> ) } </li> diff --git a/components/Layout.js b/components/Layout.js index ac9534f..c4cc553 100644 --- a/components/Layout.js +++ b/components/Layout.js @@ -1,31 +1,25 @@ import styles from 'styles/Main.module.scss' import React from 'react' -import Head from 'next/head' -import {Header, Popup, Splash} from 'components' +import { Header, Popup, Splash } from 'components' import useSettings from 'hooks/useSettings' import PropTypes from 'prop-types' const Layout = ({ children, apps, - setApps, + setApps }) => { - const {settings} = useSettings() + const { settings } = useSettings() if (!settings || !settings.theme || !settings.language) return <Splash fixed /> return ( - <section className={styles.layout +' '+ settings.theme}> - <Head> - <title>My Apps</title> - <meta name="viewport" - content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" /> - </Head> + <section className={styles.layout + ' ' + settings.theme}> <main> - <div className="container">{children}</div> + <div className='container'>{children}</div> </main> <Header apps={apps} setApps={setApps} /> - <Popup/> + <Popup /> </section> ) } @@ -33,5 +27,5 @@ const Layout = ({ export default Layout Layout.propTypes = { - children: PropTypes.node, + children: PropTypes.node } diff --git a/components/Popup.js b/components/Popup.js index 3df11c5..3e5ab1f 100644 --- a/components/Popup.js +++ b/components/Popup.js @@ -2,17 +2,17 @@ import React from 'react' import usePopup from 'hooks/usePopup' const Popup = () => { - const {popupData: p} = usePopup() + const { popupData: p } = usePopup() if (!p || !p.content) return null return ( <div className={`window window--popup${p.error ? ' window--error' : ''}`}> - <div className="window__content--popup">{p.content}</div> + <div className='window__content--popup'>{p.content}</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 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> ) } @@ -21,4 +21,3 @@ const Popup = () => { } export default Popup - diff --git a/components/Splash.js b/components/Splash.js index f807202..93ef3ee 100644 --- a/components/Splash.js +++ b/components/Splash.js @@ -1,11 +1,11 @@ import styles from 'styles/Main.module.scss' import React from 'react' import useSettings from 'hooks/useSettings' -import {FontAwesomeIcon} from '@fortawesome/react-fontawesome' -import {faBan, faSpinner} from '@fortawesome/free-solid-svg-icons' +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' +import { faBan, faSpinner } from '@fortawesome/free-solid-svg-icons' -const Splash = ({type, fixed = false}) => { - const {t} = useSettings() +const Splash = ({ type, fixed = false }) => { + const { t } = useSettings() return ( <div className={`${type === 'connection' ? styles.connection : styles.loader} ${fixed ? styles.fixed : ''}`}> diff --git a/components/index.js b/components/index.js index 19d8173..2e65f87 100644 --- a/components/index.js +++ b/components/index.js @@ -1,6 +1,6 @@ -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' +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' |