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
|
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 {focus, toggleMin} from 'helpers/windowActions'
import {open} from 'helpers/windowActions'
import appList from 'helpers/appList'
const Header = ({apps, setApps}) => {
const [userMenu, setUserMenu] = useState(false);
const {user, mutateUser} = useUser()
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>
<ul>
{
apps && [...apps].sort((a,b) => a.name > b.name).map(app => (
<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'} : {}
}}
>
{app.name}
</span>
</li>
))
}
</ul>
<ul>
{!user?.isLoggedIn && (
<li>
<Link href="/register">
<a>Register</a>
</Link>
</li>
)}
{!user?.isLoggedIn && (
<li>
<Link href="/login">
<a>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}>
<li>
<span onClick={() => {
open({appName: 'Settings', ...appList.Settings}, setApps)
setUserMenu()
}}>
Settings
</span>
</li>
<li>
<a href="/api/logout" onClick={handleLogout}>
Logout
</a>
</li>
</ul>
</>
)
}
</li>
)}
</ul>
</nav>
</header>
)
}
export default Header
|
