Add connections display formats

4 files changed, 24 insertions, 23 deletions

diff --git a/frontend/src/views/App.js b/frontend/src/views/App.js
index e3119aa..34e980e 100644
--- a/frontend/src/views/App.js
+++ b/frontend/src/views/App.js
@@ -26,6 +26,7 @@ class App extends Component {
                 <Router>
                     <Header onOpenServices={() => this.setState({servicesShow: true})}/>
                     <Switch>
+                        <Route path="/connections/:id/:format" children={<MainPane/>}/>
                         <Route path="/connections/:id" children={<MainPane/>}/>
                         <Route path="/" children={<MainPane/>}/>
                     </Switch>
diff --git a/frontend/src/views/Connections.js b/frontend/src/views/Connections.js
index 1eeaede..5548c4c 100644
--- a/frontend/src/views/Connections.js
+++ b/frontend/src/views/Connections.js
@@ -4,6 +4,7 @@ import axios from 'axios'
 import Connection from "../components/Connection";
 import Table from 'react-bootstrap/Table';
 import {Redirect} from 'react-router';
+import {withRouter} from "react-router-dom";
 import {objectToQueryString} from "../utils";
 
 class Connections extends Component {
@@ -24,12 +25,18 @@ class Connections extends Component {
         this.queryLimit = 50;
 
         this.handleScroll = this.handleScroll.bind(this);
+        this.connectionSelected = this.connectionSelected.bind(this);
     }
 
     componentDidMount() {
         this.loadConnections({limit: this.queryLimit, hidden: this.state.showHidden});
     }
 
+    connectionSelected(c) {
+        this.setState({selected: c.id});
+        this.props.onSelected(c);
+    }
+
     handleScroll(e) {
         let relativeScroll = e.currentTarget.scrollTop / (e.currentTarget.scrollHeight - e.currentTarget.clientHeight);
         if (!this.state.loading && relativeScroll > this.scrollBottomThreashold) {
@@ -91,9 +98,10 @@ class Connections extends Component {
 
 
     render() {
-        let redirect = "";
+        let redirect = null;
         if (this.state.selected) {
-            redirect = <Redirect push to={"/connections/" + this.state.selected}/>;
+            const format = this.props.match.params.format;
+            redirect = <Redirect push to={`/connections/${this.state.selected}${format !== undefined ? ("/" + format) : ""}`} />;
         }
 
         let loading = null;
@@ -123,7 +131,7 @@ class Connections extends Component {
                     <tbody>
                     {
                         this.state.connections.map(c =>
-                            <Connection key={c.id} data={c} onSelected={() => this.setState({selected: c.id})}
+                            <Connection key={c.id} data={c} onSelected={() => this.connectionSelected(c)}
                                         selected={this.state.selected === c.id} onMarked={marked => c.marked = marked}
                                         onEnabled={enabled => c.hidden = !enabled}/>
                         )
@@ -140,4 +148,4 @@ class Connections extends Component {
 }
 
 
-export default Connections;
+export default withRouter(Connections);
diff --git a/frontend/src/views/Footer.scss b/frontend/src/views/Footer.scss
index c89f971..4119cfc 100644
--- a/frontend/src/views/Footer.scss
+++ b/frontend/src/views/Footer.scss
@@ -10,5 +10,4 @@
   .footer-timeline {
     height: 100px;
   }
-
-}
\ No newline at end of file
+}
diff --git a/frontend/src/views/MainPane.js b/frontend/src/views/MainPane.js
index e84f94c..69de725 100644
--- a/frontend/src/views/MainPane.js
+++ b/frontend/src/views/MainPane.js
@@ -3,32 +3,25 @@ import './MainPane.scss';
 import Connections from "./Connections";
 import ConnectionContent from "../components/ConnectionContent";
 import {withRouter} from "react-router-dom";
-import axios from 'axios'
+import axios from 'axios';
 
 class MainPane extends Component {
 
     constructor(props) {
         super(props);
         this.state = {
-            id: null,
+            selectedConnection: null
         };
     }
 
-    componentDidUpdate() {
-        if (this.props.match.params.id !== this.state.id) {
-            const id = this.props.match.params.id;
-            this.setState({id: id});
-
-            axios.get(`/api/streams/${id}`).then(res => this.setState({connectionContent: res.data}));
-        }
-    }
-
     componentDidMount() {
-        if (this.props.match.params.id !== this.state.id) {
+        if ('id' in this.props.match.params) {
             const id = this.props.match.params.id;
-            this.setState({id: id});
-
-            axios.get(`/api/streams/${id}`).then(res => this.setState({connectionContent: res.data}));
+            axios.get(`/api/connections/${id}`).then(res => {
+                if (res.status === 200) {
+                    this.setState({selectedConnection: res.data});
+                }
+            });
         }
     }
 
@@ -38,10 +31,10 @@ class MainPane extends Component {
                 <div className="container-fluid">
                     <div className="row">
                         <div className="col-md-6 pane">
-                            <Connections/>
+                            <Connections onSelected={(c) => this.setState({selectedConnection: c})} />
                         </div>
                         <div className="col-md-6 pl-0 pane">
-                            <ConnectionContent connectionPayload={this.state.connectionContent}/>
+                            <ConnectionContent connection={this.state.selectedConnection}/>
                         </div>
                     </div>
                 </div>