import * as React from 'react'; import { connect } from 'react-redux'; import { Dispatch } from 'redux'; import * as sanitize from 'sanitize-html'; import { Card, Classes, Divider, Elevation, HTMLTable, NonIdealState } from '@blueprintjs/core'; import { IconNames } from '@blueprintjs/icons'; import { selectAndLoadInstance } from '../redux/actions'; import { IAppState, IInstanceDetails } from '../redux/types'; interface ISidebarProps { instanceName: string | null, instanceDetails: IInstanceDetails | null, isLoadingInstanceDetails: boolean; selectAndLoadInstance: (instanceName: string) => void; } class SidebarImpl extends React.Component { public render() { return ( {this.renderSidebarContents()} ) } private renderSidebarContents = () => { if (this.props.isLoadingInstanceDetails) { return this.renderLoadingState(); } else if (!this.props.instanceDetails) { return this.renderEmptyState(); } return (

{this.props.instanceName || "No instance selected"}

{this.renderDescription()} {this.renderVersion()} {this.renderCounts()} {this.renderPeers()}
); } private renderDescription = () => { const description = this.props.instanceDetails!.description; if (!description) { return; } return (

Description

) } private renderVersion = () => { const version = this.props.instanceDetails!.version; if (!version) { return; } return (

Version

{version}
) } private renderCounts = () => { const userCount = this.props.instanceDetails!.userCount; const statusCount = this.props.instanceDetails!.statusCount; const domainCount = this.props.instanceDetails!.domainCount; if (!userCount && !statusCount && !domainCount) { return; } return (

Stats

Users {userCount || "Unknown"} Statuses {statusCount || "Unknown"} Known peers {domainCount || "Unknown"}
) } private renderPeers = () => { const peers = this.props.instanceDetails!.peers; if (!peers) { return; } const peerRows = peers.map(instance => ( {instance.name} )); return (

Known instances

{peerRows}
) } private renderEmptyState = () => { return ( ) } private renderLoadingState = () => { return (

Description

Eaque rerum sequi unde omnis voluptatibus non quia fugit. Dignissimos asperiores aut incidunt. Cupiditate sit voluptates quia nulla et saepe id suscipit. Voluptas sed rerum placeat consectetur pariatur necessitatibus tempora. Eaque rerum sequi unde omnis voluptatibus non quia fugit. Dignissimos asperiores aut incidunt. Cupiditate sit voluptates quia nulla et saepe id suscipit. Voluptas sed rerum placeat consectetur pariatur necessitatibus tempora.

Version

Eaque rerum sequi unde omnis voluptatibus non quia fugit.

Stats

Eaque rerum sequi unde omnis voluptatibus non quia fugit. Dignissimos asperiores aut incidunt. Cupiditate sit voluptates quia nulla et saepe id suscipit. Eaque rerum sequi unde omnis voluptatibus non quia fugit. Dignissimos asperiores aut incidunt. Cupiditate sit voluptates quia nulla et saepe id suscipit.

); } private selectInstance = (e: any)=> { this.props.selectAndLoadInstance(e.target.innerText); } } const mapStateToProps = (state: IAppState) => ({ instanceDetails: state.currentInstance.currentInstanceDetails, instanceName: state.currentInstance.currentInstanceName, isLoadingInstanceDetails: state.currentInstance.isLoadingInstanceDetails, }); const mapDispatchToProps = (dispatch: Dispatch) => ({ selectAndLoadInstance: (instanceName: string) => dispatch(selectAndLoadInstance(instanceName) as any), }); export const Sidebar = connect(mapStateToProps, mapDispatchToProps)(SidebarImpl);