34 lines
1.1 KiB
TypeScript
34 lines
1.1 KiB
TypeScript
|
import { observer } from "mobx-react";
|
||
|
|
import * as React from "react";
|
||
|
|
import { Item } from "semantic-ui-react";
|
||
|
|
|
||
|
|
import { DeviceView } from "@client/components";
|
||
|
|
import { AppState, injectState } from "@client/state";
|
||
|
|
|
||
|
|
class DevicesPage extends React.Component<{ appState: AppState }> {
|
||
|
|
render() {
|
||
|
|
const { appState } = this.props;
|
||
|
|
const { userData } = appState.userStore;
|
||
|
|
let deviceNodes: React.ReactNode;
|
||
|
|
if (!userData) {
|
||
|
|
deviceNodes = <span>Not logged in</span>;
|
||
|
|
} else if (!userData.devices || !userData.devices.length) {
|
||
|
|
deviceNodes = <span>You have no devices</span>;
|
||
|
|
} else {
|
||
|
|
deviceNodes = userData.devices.map((device) => (
|
||
|
|
<DeviceView key={device.id} deviceId={device.id} inList />
|
||
|
|
));
|
||
|
|
}
|
||
|
|
return (
|
||
|
|
<React.Fragment>
|
||
|
|
<h1>Devices</h1>
|
||
|
|
<Item.Group>
|
||
|
|
{deviceNodes}
|
||
|
|
</Item.Group>
|
||
|
|
</React.Fragment>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
export default injectState(observer(DevicesPage));
|