import { observer } from "mobx-react";
import * as React from "react";
import { Item } from "semantic-ui-react";

import DeviceView from "@client/components/DeviceView";
import { RouteComponentProps, withRouter } from "react-router";

class DevicePage extends React.Component<
  RouteComponentProps<{ deviceId: string }>
> {
  render() {
    const {
      match: {
        params: { deviceId }
      }
    } = this.props;
    const devId = Number(deviceId);
    return (
      <Item.Group divided>
        <DeviceView deviceId={devId} inList={false} />
      </Item.Group>
    );
  }
}

export default withRouter(observer(DevicePage));