1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
|
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 'hooks/useUser'
import fetchJson from 'helpers/fetchJson'
import {focus, toggleMin} from 'helpers/windowActions'
import {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'
const Header = ({apps, setApps}) => {
const [userMenu, setUserMenu] = useState(false)
const [showApps, setShowApps] = useState(false)
const {user, mutateUser} = useUser()
const {t} = useSettings()
const router = useRouter()
const handleLogout = async (e) => {
e.preventDefault()
mutateUser(
await fetchJson('/api/logout', {method: 'POST'}),
false
)
router.push('/login')
}
const handleClick = (app, setApps) => {
if (app.min) {
toggleMin(app.name, setApps)
}
focus(app.name, setApps)
}
return (
<header className={styles.header}>
<nav>
<div>
<span onClick={() => setShowApps(s => !s)} className='mobile-only'>
{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>
{
apps && [...apps].sort((a,b) => a.name > b.name ? 1 : -1).map(app => {
if (!app) return null
return (
<li
key={app.name}
onClick={() => handleClick(app, setApps)}
>
<span
style={{
...apps.findIndex(a => a.name === app.name) === apps.length - 1 ? {fontWeight: 600} : {},
...app.min ? {color: '#888'} : {}
}}
>
{t(app.name)}
<span className='mobile-only' onClick={() => close(app.name, setApps)}>
<FontAwesomeIcon icon={faTimes} />
</span>
</span>
</li>
)
})
}
<li className="mobile-only">
<span onClick={() => setShowApps(false)} className='window__button'>{t('close')}</span>
</li>
</ul>
</div>
<ul>
{!user?.isLoggedIn && (
<li>
<Link href="/register">
<a>{t('register')}</a>
</Link>
</li>
)}
{!user?.isLoggedIn && (
<li>
<Link href="/login">
<a>{t('login')}</a>
</Link>
</li>
)}
{user?.isLoggedIn && (
<li>
<p
className={styles.user}
onClick={() => setUserMenu(!userMenu)}
>{user?.email}</p>
{
userMenu && (
<>
<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>
<a href="/api/logout" onClick={handleLogout}>
{t('logout')}
</a>
</li>
</ul>
</>
)
}
</li>
)}
</ul>
</nav>
</header>
)
}
export default Header
|
