You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
43 lines
1.2 KiB
TypeScript
43 lines
1.2 KiB
TypeScript
import React from 'react';
|
|
import Grid from '@material-ui/core/Grid';
|
|
import { observable } from 'mobx';
|
|
import { observer } from 'mobx-react';
|
|
import { grpc } from '../Api';
|
|
import { autorefresh } from '../Util';
|
|
import { DeviceListItem } from './DeviceListItem';
|
|
import { AddDevice } from './AddDevice';
|
|
|
|
@observer
|
|
export class Devices extends React.Component {
|
|
@observable
|
|
devices = autorefresh(30, async () => {
|
|
return (await grpc.devices.listDevices({})).items;
|
|
});
|
|
|
|
componentWillUnmount() {
|
|
this.devices.dispose();
|
|
}
|
|
|
|
render() {
|
|
if (!this.devices.current) {
|
|
return <p>loading...</p>;
|
|
}
|
|
return (
|
|
<Grid container spacing={3} justify="center">
|
|
<Grid item xs={12}>
|
|
<Grid container spacing={3}>
|
|
{this.devices.current.map((device, i) => (
|
|
<Grid key={i} item xs={12} sm={6} md={4} lg={3}>
|
|
<DeviceListItem device={device} onRemove={() => this.devices.refresh()} />
|
|
</Grid>
|
|
))}
|
|
</Grid>
|
|
</Grid>
|
|
<Grid item xs={12} sm={10} md={10} lg={6}>
|
|
<AddDevice onAdd={() => this.devices.refresh()} />
|
|
</Grid>
|
|
</Grid>
|
|
);
|
|
}
|
|
}
|