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
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
|
import '@fortawesome/fontawesome-free/css/all.css'
import keyBy from 'lodash/keyBy'
import { useMemo, useState } from 'react'
import * as config from './config'
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'
import github from './Pickers/Github/api'
function App() {
const [definitions, setDefinitions] = 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(null)
const [saving, setSaving] = useState(false)
function handleCompile() {
fetch(`${config.apiBaseUrl}/keymap`, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(editingKeymap || keymap)
})
}
const handleCommitChanges = useMemo(() => function() {
const { repository, branch } = sourceOther.github
;(async function () {
setSaving(true)
await github.commitChanges(repository, branch, layout, editingKeymap)
setSaving(false)
setKeymap(editingKeymap)
setEditingKeymap(null)
})()
}, [
layout,
editingKeymap,
sourceOther,
setSaving,
setKeymap,
setEditingKeymap
])
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 (
<>
<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>
<DefinitionsContext.Provider value={definitions}>
{layout && keymap && (
<Keyboard
layout={layout}
keymap={editingKeymap || keymap}
onUpdate={handleUpdateKeymap}
/>
)}
</DefinitionsContext.Provider>
</Loader>
<GitHubLink className="github-link" />
</>
);
}
export default App;
|
