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
|
import styles from 'styles/Main.module.scss'
import React, {useState} from 'react'
import useUser from 'lib/useUser'
import {Layout, App} from 'components'
import {open} from 'helpers/windowActions'
import {Notes} from 'apps'
const appList = {
Notes,
};
const Home = () => {
const [apps, setApps] = useState([])
useUser({
redirectToLogin: true,
redirectToVerify: true,
redirectToApps: true,
})
const handleClick = (e, appName) => {
switch (e.detail) {
case 1:
e.currentTarget.focus()
break;
case 2:
open(appName, apps, setApps)
e.currentTarget.blur()
break;
}
};
const handleKey = (e, appName) => {
if (e.key === 'Enter') {
open(appName, apps, setApps)
}
}
return (
<Layout apps={apps} setApps={setApps}>
<>
{
Object.keys(appList).map(appName => (
<div
key={`${appName}_icon`}
className={styles.icon}
onClick={e => handleClick(e, appName)}
onKeyDown={e => handleKey(e, appName)}
tabIndex="0"
>
<img src={`./${appName.toLowerCase()}.svg`} alt={`${appName} Icon`} />
<p>{appName}</p>
</div>
))
}
{ apps && apps.map(app => {
const AppName = appList[app.name]
return (
<App
key={`${app.name}_app`}
app={app}
apps={apps}
setApps={setApps}
>
<AppName />
</App>
);
})}
</>
</Layout>
)
}
export default Home
|
