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
|
import styles from 'styles/Main.module.scss'
import Image from 'next/image'
import useUser from 'hooks/useUser'
import useSettings from 'hooks/useSettings'
import useApps from 'hooks/useApps'
import useMediaQuery from 'hooks/useMediaQuery'
import { Layout, App, Splash } from 'components'
import { open } from 'helpers/windowActions'
import appList from 'configs/appList'
const Home = () => {
const { t } = useSettings()
const { apps, setApps } = useApps()
const touchDevice = useMediaQuery('(pointer: coarse)')
const { user } = useUser({
redirectToLogin: true,
redirectToVerify: true,
redirectToApps: true
})
if (!user) {
return (
<Layout><Splash fixed /></Layout>
)
}
const handleClick = (e, appProps) => {
switch (e.detail) {
case 1:
touchDevice ? open(appProps, setApps) : e.currentTarget.focus()
break
case 2:
open(appProps, setApps)
e.currentTarget.blur()
break
}
}
const handleKey = (e, appProps) => {
if (e.key === 'Enter') {
open(appProps, setApps)
}
}
return (
<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'
>
<Image src={`/icons/${a[0].toLowerCase()}.svg`} width={48} height={48} alt={`${a[0]} Icon`} />
<p>{t(a[0])}</p>
</div>
))
}
{apps && apps.length > 0 && apps.map(app => {
if (!app) return null
const AppComponent = appList[app.name].component
return (
<App
key={`${app.name}_app`}
app={app}
setApps={setApps}
>
<AppComponent />
</App>
)
})}
</>
</Layout>
)
}
export default Home
|
