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.
40 lines
904 B
TypeScript
40 lines
904 B
TypeScript
import React from 'react';
|
|
import Grid from '@material-ui/core/Grid';
|
|
import { view } from 'react-easy-state';
|
|
import { AppState } from '../Store';
|
|
import Device from './Device';
|
|
import AddDevice from './AddDevice';
|
|
|
|
class Devices extends React.Component {
|
|
|
|
componentDidMount() {
|
|
this.load();
|
|
}
|
|
|
|
async load() {
|
|
const res = await fetch('/api/devices');
|
|
const data = await res.json();
|
|
AppState.devices = data.items;
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<Grid container spacing={3} style={{ padding: '1rem' }}>
|
|
<Grid item xs={12} sm={6}>
|
|
<h1>Your Devices</h1>
|
|
</Grid>
|
|
<Grid item xs={12} sm={6}>
|
|
<AddDevice />
|
|
</Grid>
|
|
{AppState.devices.map((device, i) =>
|
|
<Grid key={i} item xs={12} sm={6}>
|
|
<Device device={device} />
|
|
</Grid>
|
|
)}
|
|
</Grid>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default view(Devices);
|