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
|
import styles from 'styles/Main.module.scss'
import React from 'react'
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"
>
<img src={`./${a[0].toLowerCase()}.svg`} 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
|
