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
|
import '@fortawesome/fontawesome-free/css/all.css'
import keyBy from 'lodash/keyBy'
import { useMemo, useState } from 'react'
import './App.css';
import { DefinitionsContext } from './providers'
import { loadKeycodes } from './keycodes'
import { loadBehaviours } from './api'
import KeyboardPicker from './Pickers/KeyboardPicker';
import Spinner from './Common/Spinner';
import Keyboard from './Keyboard/Keyboard'
import GitHubLink from './GitHubLink'
import Loader from './Common/Loader'
function App() {
const [definitions, setDefinitions] = useState(null)
// const [config, setConfig] = useState(null)
const [source, setSource] = useState(null)
const [sourceOther, setSourceOther] = useState(null)
const [layout, setLayout] = useState(null)
const [keymap, setKeymap] = useState(null)
const [editingKeymap, setEditingKeymap] = useState({})
const [saving, setSaving] = useState(false)
const handleCompile = useMemo(() => {}, [])
const handleCommitChanges = useMemo(() => {}, [])
const handleKeyboardSelected = useMemo(() => function(event) {
const { source, layout, keymap, ...other } = event
setSource(source)
setSourceOther(other)
setLayout(layout)
setKeymap(keymap)
setEditingKeymap(null)
}, [
setSource,
setSourceOther,
setLayout,
setKeymap,
setEditingKeymap
])
const initialize = useMemo(() => {
return async function () {
const [keycodes, behaviours] = await Promise.all([
loadKeycodes(),
loadBehaviours()
])
keycodes.indexed = keyBy(keycodes, 'code')
behaviours.indexed = keyBy(behaviours, 'code')
setDefinitions({ keycodes, behaviours })
}
}, [setDefinitions])
const handleUpdateKeymap = useMemo(() => function(keymap) {
setEditingKeymap(keymap)
}, [setEditingKeymap])
return (
<div className="App">
<Loader load={initialize}>
<KeyboardPicker onSelect={handleKeyboardSelected} />
<div id="actions">
{source === 'local' && (
<button disabled={!editingKeymap} onClick={handleCompile}>
Save Local
</button>
)}
{source === 'github' && (
<button
title="Commit keymap changes to GitHub repository"
disabled={!editingKeymap}
onClick={handleCommitChanges}
>
{saving ? 'Saving' : 'Commit Changes'}
{saving && <Spinner />}
</button>
)}
</div>
{definitions && (
<DefinitionsContext.Provider value={definitions}>
{layout && keymap && (
<Keyboard
layout={layout}
keymap={editingKeymap || keymap}
onUpdate={handleUpdateKeymap}
/>
)}
</DefinitionsContext.Provider>
)}
</Loader>
<GitHubLink className="github-link" />
</div>
);
}
export default App;
|
