Merge branch 'master' of https://git.loafle.net/overflow/overflow_app

src/ts/@overflow/app/views/layout/ProbeDetailLayout.tsx

@@ -3,7 +3,7 @@ import { Redirect, RouteComponentProps, RouteProps, Route, Switch } from 'react-
 import { Container, Menu, Sidebar, Segment, Icon, Breadcrumb, Grid, Dropdown } from 'semantic-ui-react';
 import { Header } from './Header';
 import { Footer } from './Footer';
-import { TitleBar } from './TitleBar';
+import TitleBarContainer from './TitleBarContainer';
 import LeftMenu from './LeftMenu';
 
 import ProbeDetail from '../../views/monitoring/probe/Detail';
@@ -40,7 +40,7 @@ export class ProbeDetailLayout extends React.Component<Props, State> {
         <LeftMenu />
         <Segment vertical style={{ margin: '0 0 0 210px', padding: '0' }}>
           <Header />
-          <TitleBar title='Probe Details' sub={sub} />
+          <TitleBarContainer sub={sub}/>
           <Switch>
             <Route exact={true} path={`${this.props.match.url}/:id`} component={ProbeDetail} />
             <Route exact={true} path={`${this.props.match.url}/:id/history`} component={ProbeHistory} />

src/ts/@overflow/app/views/layout/TitleBar.tsx

@@ -1,8 +1,21 @@
 import * as React from 'react';
 import { Grid, Container, Breadcrumb, Header, Menu, Input, Segment } from 'semantic-ui-react';
-import { Redirect } from 'react-router-dom';
 
-export class TitleBar extends React.Component<any, any> {
+
+export interface StateProps {
+  sub: any;
+}
+
+export interface DispatchProps {
+  onRedirect(path: string): void;
+}
+
+export type Props = StateProps & DispatchProps;
+
+export interface State {
+}
+
+export class TitleBar extends React.Component<Props, State> {
 
   constructor(props: any, context: any) {
     super(props, context);
@@ -10,9 +23,9 @@ export class TitleBar extends React.Component<any, any> {
     };
   }
 
-  public handleMenu(menu:any): JSX.Element {
+  public handleMenu(menu:any): any {
     console.log(menu.path);
-    return <Redirect to={menu.path} />;
+    this.props.onRedirect(menu.path);
   }
 
   public renderSubMenus(): JSX.Element {
@@ -29,8 +42,8 @@ export class TitleBar extends React.Component<any, any> {
   public render(): JSX.Element {
     return (
       <Menu fluid style={{ 'borderLeft': '0px', 'borderRight': '0px', 'boxShadow': 'none', 'borderRadius': '0' }}>
-        <Menu.Item name={this.props.title} style={{ width: '250px' }}>
-          <Header as='h3'>{this.props.title}
+        <Menu.Item name='TEMP' style={{ width: '250px' }}>
+          <Header as='h3'>TEMP
             <Header.Subheader>
               <Breadcrumb size='mini'>
                 <Breadcrumb.Section link>Home</Breadcrumb.Section>

src/ts/@overflow/app/views/layout/TitleBarContainer.tsx

@@ -0,0 +1,24 @@
+import { connect, Dispatch } from 'react-redux';
+import {
+    TitleBar,
+    StateProps as StateProps,
+    DispatchProps as DispatchProps,
+} from './TitleBar';
+
+import { push as routerPush } from 'react-router-redux';
+
+export function mapStateToProps(state: any, ownProps: any): StateProps {
+    return {
+      sub: ownProps.sub,
+    };
+}
+
+export function mapDispatchToProps(dispatch: Dispatch<any>): DispatchProps {
+    return {
+        onRedirect: (path: string) => {
+            dispatch(routerPush(path));
+        },
+    };
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(TitleBar);