-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathapp.js
76 lines (67 loc) · 1.8 KB
/
app.js
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
// Rendering a simple centered box
const React = require('react');
const T = require('prop-types');
const importJsx = require('import-jsx');
const api = require('./api');
const TableDetails = importJsx('./compos/TableDetails');
const { useRef, useEffect, useState } = React;
const { useDynamo } = api;
const App = ({ filter: filterBy = '' }) => {
const listRef = useRef();
const { loading, error, data } = useDynamo('list-tables');
const [table, setTable] = useState();
useEffect(() => {
if (data && listRef.current) {
listRef.current.focus();
}
}, [data]);
const tables =
data && data.TableNames.filter(label => label.includes(filterBy));
return (
<element>
<box left="center" height={3} border="line" shrink>
{` D y n a m o T u i `}
</box>
<box
bottom={0}
left={0}
width="33%"
height="100%-3"
border={{ type: 'line' }}
style={{ border: { fg: 'gray' } }}
>
{loading
? 'loading...'
: error || (
<list
ref={listRef}
keys
mouse
vi
items={tables}
style={{
item: { fg: 'white' },
selected: { bg: 'blue', fg: 'black' },
}}
onSelect={({ content }) => setTable(content)}
/>
)}
</box>
<box
left="33%"
bottom={0}
width="67%"
height="100%-3"
border={{ type: 'line' }}
style={{ border: { fg: table ? 'gray' : 'black' } }}
>
{table ? <TableDetails name={table} /> : null}
</box>
</element>
);
};
// Use content or tables[listRef.current.selected] ?
App.propTypes = {
filter: T.string,
};
module.exports = App;